WordPressを使った自作HPの工程について【動画クリエイター】

こんにちは!iFilmです。

今回ですが、WordPressでHPを作った一連の流れをざっくりと紹介したいと思います。

私が最初にHPを作る時には、HPデザイン、wordpressの操作方法、書く内容など…
やることが多すぎて何から手をつけていいかわからない状態でした。

かといって業者に頼むのも高いし、自分でさわれた方が今後絶対に役に立つ。

そう思い、なんとか自分でHPを制作。

ざっくり全体の流れが掴めたので記事にしました。

何から始めたらいいか分からない方には役に立つ内容だと思います!

私と同じようにWordPressでHPを自作しようか考えている方、またHP制作の裏側を少し知ってみたいという方もぜひ読んでみてください!

1 作成サイト・ドメイン・サーバー

1-1 作成サイト(WordPress)

まずは作成サイトをどこにするかを決めます。

WordPress以外にも WiX、JIMDOなど他の作成ソフトがたくさんあります。

私は以前ブログをやろうとした際にWordpressを使ったことがあったので迷いませんでしたが、他にも選択肢はあります。

ソフトごとによってメリット、デメリットがあるのかと思いますが正直私はよくわかっていません。笑

ただWordPressに決めた他の理由としては、

HP制作を仕事にしている人が皆使っていたり、プラグインというものがあり自分でサイトを自由にカスタムしやすいという利点があったからです。

ここはあまり気にせずHP制作の知識についても学びたい方はWordPressでいいのかな?と思います。

ただとにかくHPを簡単にテンプレでもいいから手っ取り早く作りたい方はWiXなどの方がいいのかな?と感じました。

自分の目的に適した作成サイトを決めてください!

参考動画 HikoProさん

1-2 ドメインとサーバー

ここもHPを作る上で専門っぽい、とても厄介な最初の壁になると思います。

聞いたことない用語で戸惑う方も多いと思いますが、ここで悩む必要はありません!

一応わかりやすい理解の仕方は、
「ドメインはネット上の住所になり、サーバーは土地になり、HPは家にあたる」

ということです。

ネット上ではHP(家)を作るためにはサーバー(土地)とドメイン(住所)を借りないと作れないわけです。

この説明も理解できなくても大丈夫です。

とりあえずサーバーとドメインには色々な会社があり、どこにするかということなんですが正直大手の有名どこならどこでもいい気がします。

サーバー選び 参考サイト

速さとか細かいサービスとか違いがあるので詳細が気になる方は調べればいいと思いますが、ここで悩まずに制作の方に注力を!

ちなみに私はConoHaサーバーを使用しています。ここは速度も速いらしく、ドメインが無料で一つ付いて来るのでオススメです!(費用 年間約1万2~3千円)

ConoHaサーバーサイト

あとドメインは自分のHPのURLになるので注意しましょう!

ちなみにiFilmのHPのドメインは「i-film.info」です。

同じ名前のものは使えないので決めるのが意外と大変だったりします。

また特に気にしなくていいと思いますが「~.com」というのが一番無難だと思うので、名前が被らなければ.comに!

HP開設に至るまでの手順 参考(conohaサーバー、wordpress)
(ここではブログ開設と言われてますが、HP作成も手順は一緒です。
HP開設後の初期設定なども記述あり。)

1-3 WordPress初期設定

HPをWordPressで開設できたら最初にやるべき初期設定がいくつかあります。

ここに関しても上で記したヒトデブログさんの解説にも載っていますし、調べれば他にもたくさん出てきます。

それ通りやれば問題なしです!

2 テーマを決める

wordpressにはテーマというものがあります。

これはHPのデザイン的な部分を決めるのに重要になってきます。

とはいうもののどんなテーマであれ、プラグインやコーディングを用いればデザインは自由に変えられます。

またWordPressの元からの機能だけでも、画像などをうまく用いれば自分でデザインをある程度自由に作れます。

なのでそこまで慎重になる必要はありません。

私はHPのtopに動画を載せたかったので、「Sydney」という無料のテーマを選びました。

topページに画像をスライドで載せたいか動画を載せたいかなど以外は、どのテーマも自分の工夫次第でデザインが変えられる印象でした。

topページに動画を載せなくていい方は「Lightning」や「Cocoon」というテーマがオススメです!

使用者が多く、無料で評判の良いテーマになります。

使用者が多いとYouTubeやネットで使い方を説明してくれているので、初心者にはとても良いと思います。

(ちなみに友達曰く、コーディングで簡単にtopに動画を載せられるみたいなので、テーマにこだわる必要もあまりないのかも!?)

3 真似して一通り作る

次はYouTubeの解説してくれている人と全く同じように真似して作ってみてください。

そうすればWordpressの使い方やテーマの仕様などがわかってきます。

私は最初にデザインやHPに書く内容などを考えてしまった為、制作が何も進みませんでした。

自分のアレンジを加えたい気持ちもわかりますが、まずは完コピで真似することが大事だと感じました。

そうしていく内にWordPressの操作やテーマの使い方などに慣れていきます。

真似して解説者と同じHPを一通り作ってみてください。

とにかくまずは手を動かして覚えることが大事だと思います!

4 参考サイトを見て骨組みを作成

ここまできたら、他の同業種のサイトを参考にします。

そしてHPがどのような構造になっているかを見ます。

構造というのは、私のHPで言うと「Home」「Works」「Price」「Flow」「Blog」「Contact」という骨組みのところです。

ここが決まらないと一向にどんな内容をHPに取り込んでいくのかがまとまらなくなります。

この骨組みさえ最初に決めればあとはそれぞれのページを作っていくだけです。

がむしゃらにHPを見てデザインや書いてある内容に目を向けると手が止まると思うので、骨組みを決めることをお勧めします。

まずは基本の構成を決めると制作を進めやすいです!

5 中身を作っていく

骨組みが決まればあとは中身を充実させていきます。

企業理念、料金、プロフィール、お問い合わせページ・メールアドレス作成、などなど…

ここも大変な部分ですが、我慢強くコツコツ内容を充実させていきます。

「3」で操作に慣れておくことによって、ここでデザインもある程度自分のやりたいようにいじれるようになってると思うので工夫しやすいです。

ただここはあくまで内容重視で、デザインにこだわりすぎずページを一通り作っていくのが、手を止めない方法だと思います。

6 デザインを凝る

最後に細かい部分のデザインをいじります。

私はHPを作る上で最初にデザインばかりに気を取られてしまい、作業が一向に進みませんでした。

だからまずは骨組みを作り、内容を充実させる。そして最後にデザインを決めていく順番が良いと感じました。

自分が気に入るデザインのサイトを参考に、画像や動画などを用いて調整していきます。

またここでヘッダーやフッターの色を変えたり、携帯で見た時のレスポンシブも変じゃないかなど確認です。

ここまできたら、自分のサイトが好きなように仕上がっていくのが楽しくなると思います!

デザイン参考はピンタレストというサイトがオススメです!

Pinterest

7 見直し・完成

最後にデザインや内容などの見直しをして完成です。

苦労した分、出来上がった時の喜びも大きいと思います!

終わりに

いかがでしたでしょうか。HP制作の全体の流れが分かりましたかね☝️

ただ実際に作ると、細かい部分でわからない部分や大変な部分はたくさん出てくると思います。

実際私も作り終わるのにかなり時間がかかりました。

本当は今年の1月にHPを作ろう!と考えていましたが、仕事やら何やらで気が付いたら1年の半分以上が過ぎていました…笑

けどその分達成感も大きいですね!

HPは作って終わりではありません。アクセス解析してみたり、デザインを変えていったり。

作った後もやることは残っています。

そう考えると「自分の仕事に集中したい」とい方はプロにお願いするのも良い選択なのかもしれません!

HPの制作依頼もあれば、優秀な仲間を知っていますのでご依頼いただければ紹介しますよ💁‍♂️

「HP制作に興味がある」という方はぜひ自分で作ってみてください。

きっといい経験になると思います!

それでは!最後までお読みいただきありがとうございました。