イラストレーターのハセガワです。今回は、僕がWordPressを使用してイラストレーターとしてのホームページ兼ポートフォリオサイト兼ブログである本WEBサイトを開設するまでに、実際に行った9つ作業フロー+残作業として今後予定していることについて書こうと思います。その作業とは次の通りです。それぞれ詳しく書いていきます。僕がこの時、WEBサイトに載せたいと考えたコンテンツは以下の通りです。名前や連絡先など個人情報も入力させたい僕はWEBにイラストレーターとしての活動拠点を作りたいと考えて、WEBサイト制作を始めました。それに必要であると感じたコンテンツにしました。これをある程度決めておくと後の作業が楽になります。2.WEBサイトの形式を検討コーポレートサイト型をイメージして制作しました。WEBサイトには様々な形があります。その中でも個人がWEB制作するとなると、ブログ型かコーポレートサイト型が一般的なのではないでしょうか。ブログ型のWEBサイトとは所謂ブログです。新着記事一覧のトップページがあり、そこから各記事へアクセスします。コーポレートサイト型のWEBサイトとは一般企業のWEBサイトをイメージしてもらうと分かりやすいと思います。僕はその2つから、コーポレートサイト型をイメージして制作しました。「1.WEBサイトのコンテンツを検討」で決めたコンテンツをすべて含める場合、ブログ型よりコーポレートサイト方の方が最適であると考えたからです。単純にブログを始めたいとかであればブログ型で問題ありません。検討と書きましたが、これはWordPressを使用すると初めから決めていました。理由はもともとWordPressに興味があったからです。WordPress以外にもWEB制作ツールはありますが、これが最もシェア率も高く、一般的と言われているようです。WEB制作初心者の場合、そのようなツールを選んだ方がネット検索したときに情報が多くヒットするのでお勧めです。4.サーバーの選定この段階ではまだ契約はしませんが、サーバーを決めておきます。僕はXserverを契約すると決めました。Xserverを選んだ理由は、単純に評判が良かったのと、僕がWEBサイト制作を決めた時にちょうど独自ドメインの無料キャンペーンを行っていたからです。独自ドメインとは、端的に言うとWEBサイトのURLです。契約サーバーごとにデフォルトのURLが設定されるのですが、独自ドメインを取得するとユニークなURLに変更することができます。今回唯一お金がかかっているのがこのサーバー契約代です。無料プランもあるのですが、WEBサイトの運営を長期的な観点で見た時、無料よりも有料の方が都合が多いので有料としました。あと個人的に、お金がかかっていた方が頑張れます。実際に作成した設計の一部が次の通りです。次の観点でこれらを設計しました。固定ページ/投稿ページの使い分け1つ目は、「1.WEBサイトのコンテンツを検討」で決めたコンテンツをどのように画面に表示させるかの検討です。WEB制作におけるワイヤーフレームと言われるやつです。僕の場合、「プロフィール」に記載する内容があまり無かったので、独立したプロフィールページを設けるのではなくフロントページにそれを含めました。「仕事実績」や「イラストの見本」などは後の拡張性を考えた時に独立したページを設けた方が良いのではないかと考えて、そのように設計しました。ちなみにですが、僕は画面レイアウトの設計をExcelで行いました。本来はWEB制作で良く使用されるツールがあるのですが、僕はそれを持っていませんでした。導入してもよかったのですが、余計にお金がかかるのとExcelでも問題なかったのでそうしませんでした。Excelも無いという方は、紙とペンでも良いと思います。方法は何でも良いのでとにかく絵に書き出すことが重要です。しておくことで実際の制作がスムーズに行えます。6.サーバー契約など事前に選んでいたXserverの契約です。サーバーを契約するのは、「5.WEBサイトの設計」が完了してからの方が良いです。理由は、WEBサイトの構成が明確になっていない状態で契約してもWEB制作をスムーズに進める事ができず、無駄な契約期間が発生してしまうからです。今回は有料プランであるため、そのような無駄な期間は極力なくしたいと考えました。サーバーの契約後は、そこにWorsPressをインストールします。その後独自ドメインを取得するのですが、僕はXserverの無料で独自ドメインを取得できるキャンペーンを利用しました。いったキャンペーンを使用しない場合は取得にお金がかかります。7.事前設定ここまでやるとすぐにでもWEB制作を始められるのですが、その前にWordPressの設定を行っておきます。設定はこだわるとキリがないので、この時点では制作を始める前に最低限やっておいた方が良い設定として良くあげられていたモノのみ行いました。実際に僕が行った設定は次の通りです。テーマの設定SSL化パーマリンク設定これらはいつでも設定できるのですが、サイトのコンテンツが多いとそれらに対するインパクトが大きいので、始めに行っておくと良いです。テーマとは、WEBサイトのデザインや機能のフォーマットの様なものです。有料と無料があるのですが、僕は無料の「Cocoon」というテーマにしました。理由は、これをお勧めしている人が多かったからなのとデフォルトのデザインがとてもシンプルでだったからです。このテーマはブログ型のWEBサイトを想定したテーマであるため、コーポレートサイト型を制作したい場合は作業が少し増えます。ちなみに初めからコーポレートサイト型を想定したテーマもあります。SSL化とは、WEBサイトのクライアントとサーバー間の通信を暗号化する設定です。僕の場合、サイトのコンテンツとしてユーザーが個人情報を打ち込むお問い合わせ窓口を設ける予定だったので、セキュリティ面の強化としてこの設定を行いました。パーマリンクとはWEBサイトのURLを指すのですが、独自ドメインとは別に自分でそれを指定できるようにするため設定します。8.WEBサイト制作ここまでやって制作し始めます。基本的には「5.WEBサイトの設計」で設計した通りにWordPressで画面を作っていきます。初WordPressでしたが、シェア率が高いこともあり調べれば大抵のことは出てくるので特に問題はなかったです。次の作業を行いました。不要な初期プラグインの削除メタ情報の削除ニックネームの設定WordPressをインストールしたときにデフォルトでインストールされている次の2つのプラグインがあるのですが、僕はそれらがいらないなと感じたので削除しました。エックスサーバーフォントを自動的でいい感じにしてくれるメタ情報とは、WordPress管理画面へのログイン画面のリンクが含まれている部分です。表示されているとセキュリティ的に良くないので非表示としました。ニックネームとは、ブログなどの記事ページやコメント欄で表示される自身の名前です。デフォルトでは「ログインユーザー名」と同じ名前なので、そのままにしておくとセキュリティ的に良くありません。そのため、外に漏れても問題ない名前を設定しました。ツールが2つあります。ConsoleWEBサイトがどのようなキーワードで検索されているのかが分かるツールどちらもWEBサイトを効率的に運営するのに重要であるので、導入が推奨されています。まとめ以上が、僕がWEBサイトを開設するのに行った作業フローです。これからWEB制作を考えている人の参考になればと思います。最後まで見ていただきありがとうございました。無料お見積り・ご相談Contactゆるいイラストをお探しの方、Webサイトの制作、既存サイトの状態でお悩みのある方はお気軽にご相談ください。