社内システム育成日記

デイサービスでの簡単なシステムをファイルメーカーで作成しています。備忘録を綴っていきます。

ホームページと動画制作の備忘録

ホームページを制作したので、その備忘録を書いておきます。 hotspiringday.hatenablog.com

出来上がったホームページはこちら

www.allegro-penguin.com

参考にしたもの

色々とネットで調べていたら、こんな記事を見つけました。

qiita.com とにかく早く公開したかったんで今回はWordPressを使ってみることにしました! 実は最初に色んな記事を参考に何となく環境構築してしまって、HTTPS化SSL化をする段階で環境自体の欠陥に気づきました。

詳しい人にも聞いてみましたが、原因わからず… (謎にVMインスタンスが壊れていました。)

詳しい人に助けを求めるのにも、「何もしてないのに勝手に壊れた」では詳しい人もどうしようもないわけで…😨 不慣れなことにチャレンジするときは、自分の踏んだ手順や参考にした記事、エラーなどはちゃんと記録しておかなきゃな〜と改めて反省しました。

中身もある程度作ってしまっていたので、WordPressのバックアップをとって、GCPのプロジェクトを削除し、環境を最初から作り直しました。

仕切り直して、参考にしたのがこの動画です。 動画だと手っ取り早く手順がわかります。

youtu.be

GCPを始めるところからHttps化SSL化まで紹介してくれているので、助かりました。

ホームページを作るのも、要件定義が大事なのでは?

ホームページ制作も動画制作も、下ごしらえには時間をかけても良い!という派です。 システムを開発する上でも、要件定義や設計がしっかりしていれば成功しやすいと思いますが、何か企画するときにこうした下ごしらえ的作業に時間をかけるとあまり外れがないと思います。

⬇︎システム開発の工程 f:id:hotspiringday:20200404152452j:plain

ホームページの目的やアイデアは紙とかマインドマップで一回アウトプットしてから、作り始めました。 f:id:hotspiringday:20200404142426p:plain サイト内に埋め込んでいるユーザーの声動画も構成を1回紙にまとめてから、作りました! f:id:hotspiringday:20200404151954j:plain (所々ぼかし入れてます)

動画編集は結構大変

出来上がった動画がこちら youtu.be

5分の動画を編集するのに、3日以上かかりました。 私がインタビュアーになって話を引き出していたのですが、動画出演する方も初めてなので緊張していたみたいです。 編集できるから何回やり直しても大丈夫なことを伝え、「じゃあ練習ね!」と言ってリラックスしてもらってから撮ったら良い感じに撮影できました😀 練習ね!と言いつつ、出演してくれた方も撮り終わったら「今のでいいよ」と言ってくれました!

インタビュー動画にマイクは必須だった

5年ほど前に購入したミラーレス一眼レフカメラがあったので映像はそれで撮って、音声は別撮りしました。 と言うのも、外付けマイクを購入したもののカメラに外部マイクの端子が付いておらず…😭 こんな感じで、マイクをiphoneに取り付けて録音しました。 f:id:hotspiringday:20200404162341j:plain

カメラで撮った動画を再生してみると、やっぱり音声に雑音が入っていてちょっと長く聞けないかな?という感じだったので、手間はかかりましたが音声は単一指向性マイクを使って別撮りして良かったです。

「えーっと」を取り除くのが大変すぎる

編集に費やした時間のほとんどはこの「えーっと」を取り除く作業でした。 編集ソフトはMacにもともと入っているiMovieを使いましたが、「えーっと」は波形からはわからず、この作業はどのソフトを使っても難しいんじゃないかな?と思います。

音声ができてからは早かった

映像の素材を写真や動画で用意していて、それを当てはめていくのは割と簡単でした!あとはサムネをkeynoteで作って完成しました✨

ホームページは再現性◎

WordPressで無料のテーマを使わせてもらいましたが、同じテーマを使ったらすぐ簡単にホームページ作れるな〜と思いました!

⬇︎このテーマを使いました ja.wordpress.org

PHPで作ったサイトの管理人もしているので、今度はWordPressに頼らずとも一度何かのサイトを作ってみるのも良いかもしれません。ハードルは下がりました!