ホームページの制作フローを徹底解説

デザインやWeb制作のディレクション経験がない場合、自社のホームページはどのようにして制作すればいいのか戸惑う方も多いのではないでしょうか。

そこで今回は、Web担当者が日常的に行っているホームページの制作フローをまとめてみました。
これはあくまでも一般的にホームページを制作しているフローなので、様々な制作会社、クリエイターの方と異なる部分もあるかもしれません。ただ、Web制作の流れを知ることでやるべきことも見えてきますので、ぜひ確認していきましょう。

1. 制作の前に

1-1. ターゲットやペルソナ、ゴールを設定する

最初に、自社のホームページで集客や告知を行う際に見てもらいたい「ターゲット」を設定していきます。ホームページを公開するにあたって、そこには見てもらいたい人が必ず存在するからです。

Web担当者の中には、老若男女問わず、様々な人に見てもらいたいという方もいます。万人受けするホームページのほうがいいと考えるのは、ごく自然なことです。しかし、ターゲットを設定すると、そこにヒットする読者がいた場合、訴求力が強まり、集客効果や広告効果にもプラスに影響します。

ターゲットでは対象となる読者の年齢層や役職などを設定しますが、そこからさらに踏み込んで「ペルソナ」を設定することもあります。ペルソナは、あたかも実在している人物像を描き出します。ペルソナを設定することで、ユーザー目線でのWeb制作が可能になります。

例えば、「20代前半のファッション好きな女性」ではなく、「20代前半の大手企業に3年間勤めるOLで、休日には友達と原宿や表参道でショッピングを楽しむ、ファッション好きのＡさん」というように、具体的に人物像がイメージできるように詳細を掘り下げていきます。

そして、ホームページ制作にあたっては、そこには必ずゴールが存在します。ホームページをなぜ作るのか、という目的です。商品PRをしたい、販売促進をしたい、集客を加速させたい、などがそうです。ゴールが設定されていないと、読者も、制作にかかわるデザイナーやマネジャーも、一体どこを目指しているのかが分からなくなります。

したがって、まず最初に行うことは、ホームページの"ターゲットとゴールの設定"です。ここが決まれば、デザインの方向性もしっかりと定まります。

1-2. コンセプトを決定する

デザインの方向性を決めた後は、具体的なコンセプトを落とし込んでいきます。コンセプトが決まっていないと、制作にかかわるメンバーとの間で、齟齬が生まれるからです。

例えば、美容室のホームページを制作する際に出てくる「カジュアルな感じ」や「落ち着いた雰囲気」などの抽象的な言葉は、人によってイメージが違ってきます。デザインのコンセプトは、できるだけ明確な言葉を選びとるようにしましょう。

一例として、美容室のホームページのデザインコンセプトを挙げてみましょう。

- どこよりも低価格でオシャレなヘアスタイルを提供する美容室として知ってもらいたい。
- 20代だけでなく、30代～40代のミドルの女性層にも手軽に利用してほしい。
- 予約の取りやすさは都内トップクラス。切りたいときにいつでも気軽に寄れる、便利な店であることを知ってほしい。

抽象的な言葉を具体的に定義することで、ホームページ制作にかかわる多くの人との共通認識を作ることができます。曖昧なイメージのまま制作を進めてしまうと、誰のためのホームページなのかがわからなくなり、伝えたい内容が読者に届かなくなります。さらに、どこに何の情報があるのか、ユーザビリティの観点からも使いづらいホームページになってしまいます。一方、コンセプトがはっきりしていれば、情報も選別され、誰が見てもわかりやすいホームページになります。

1-3. ホームページのタイトルやキャッチコピーを決める

大まかなコンセプトが決定したら、ホームページのタイトルを決めていきます。すでにお店や会社を運営している場合は、お店や会社の名前がそのままタイトルになる場合が多いと思いますが、新たにWebメディアや新規コンテンツとして立ち上げる場合には、ユニークで覚えやすい名前をつけるとよいでしょう。

ホームページのタイトルが決まったら、キャッチコピーを決めていきます。キャッチコピーは必須というわけではありませんが、キャッチコピーがあると、そのホームページが何のために存在しているのかがわかります。

ホームページのキャッチコピーを付けるコツは、「一言で何なのかが分かる」コピーをつけるということです。

いくつか例を挙げてみましょう。

Airbnb
「現地のホストのお家に宿泊して、191か国以上で暮らすように旅しよう」

レター
「写真を１枚選ぶだけ」

trippiece
「みんなで遊べば、地球は楽しい」

このように、優れたキャッチコピーはそれだけで、どんなホームページなのか、どんなサービスなのか、イメージが湧いてきます。逆に言えば、ターゲットやゴールが鮮明でないと、優れたキャッチコピーは生まれません。誰のための、どんなことをしてくれるものなのかが、短いキャッチコピーに宿っているからです。

キャッチコピーを決める上で、一点だけ注意したいことがあります。それは、サービス内容をキャッチコピーに当てはめることです。「無料でホームページが作れる」「動画が毎月一定額で見放題」といったサービス名を冠したキャッチコピーは、競合となるホームページにも同じことが言えます。キャッチコピーは、単なる説明ではなく、ホームページのブランディングにもなります。プライスレスと聞いたらMasterCard、というように、キャッチコピーを聞いたらこのブランドだ、というつながりを意識的に作っていきましょう。

1-4. ポリシーを決める

ここまできて、いよいよ「ホームページの全体像」に取り掛かることになります。しかし、ホームページを作成する際には、もう一つ決めておくことがあります。それが「制作ポリシー」です。

制作ポリシーとは、「このような方針でホームページを作っていきます」というルールのようなものです。例えば、「デスクトップ用とモバイル用でWebサイトをわけるか、レスポンシブ・デザインにするか」「対応ブラウザをどこまでに設定するか」「WordPressなどのCMSを使うか」などです。

初めに制作ポリシーを決めておかないと、デザイナーやコーダーが複数いる場合、それぞれ独断でデザインやコーディングを行うことになり、のちの統合やメンテナンスに手間がかかってしまいます。全体的な制作ポリシーだけでなく、デザインポリシーやコーディングポリシーも決めておくとよいでしょう。

また、ホームページ上で個人情報を取得する場合には、プライバシーポリシー（個人情報保護方針）や利用規約など、防御的情報を準備しておきましょう。プライバシーポリシーや利用規約を始めから作るのが面倒な場合には、インターネット上で検索すればテンプレート（ひな形）が配布されていますので、利用してもよいでしょう。

1-5. サーバー・ドメインを取得する

最終的に作成したホームページをインターネット上に公開する場合は、サーバーやドメインを手配する必要があります。
大規模なWebサービスを作るのであれば、自社でサーバーを組み立てるのも一つの方法ですが、メンテナンス時間やメンテナンスにかかる人件費、電気代など、大きなランニングコストがかかってしまいます。100円台から契約できるレンタルサーバー業者もあるので、アフターケアや月々の費用、セキュリティ対策などを考慮して最適なプランを選びましょう。

ドメインはタイトルと同じく、ホームページの顔となる部分です。記憶に残りやすい、シンプルでユニークなドメインを取得しましょう。

2. ホームページの見た目を作る

2-1. サイトマップを作る

ここからは、実際にホームページを制作する具体的な手順について確認していきましょう。まずは、ホームページ制作の「設計図」を作っていきます。何かを制作する時に、完成図を想定しておかないと、どこを目指せばいいのかわからなくなるからです。

設計図には全体的な「外観」とそれぞれのページの「詳細」部分が存在します。初めに作っていくのは、ホームページの全体像である「サイトマップ」です。どのページを作るのか、どのような導線にするのかを決めていきます。もちろんこれを作るのに、前半で見てきたターゲットや目的について考えたことも反映させていきます。

2-2. ページのレイアウトを決める

次に、トップページや商品紹介のページ、会社概要のページなど、様々なページのレイアウトを決めていきます。この具体的なページの設計図のことを、ワイヤーフレームと呼ぶことがあります。

ホームページを見ている人は、デスクトップ画面では「左から右・上から下」、モバイル画面だと「上から下」に視線を動かします。優先順位が高いほど上に配置して目立たせる必要があります。また、見せたいものを意識してレイアウトを組んでいきます。

ページの設計図は、一昔前はスケッチで済ませてしまう人もいましたが、最近ではプロトタイピングツールと呼ばれるデザイン・マネジメントツールも増えてきました。プロトタイピングツールを使うことで、クリックやタップで次の画面に移動し、実際に作動しているように見えます。

3. コードを書く

3-1. CMSの設定をする

最近ではWordPressやMovable TypeなどのCMS（コンテンツ・マネジメント・システム）を使うことも多くなってきました。仮にCMSを使う必要がある場合には、事前に環境設定をしておきましょう。CMSを使うと、テーマ（テンプレート）を設定しておくだけで、Web制作者以外の人もページを追加することができます。

3-2. コーディングする

いよいよソースコードの打ち込み作業です。場合によっては、ホームページビルダーやBiNDのようにWYSIWIG（見たままにレイアウトを作っていく方法）で編集することもありますが、こうしたツールを使うと余計なコードが挿入されることもあります。

最近では便利なエディタもたくさん登場しています。タグごとに見やすく色分けしたり、開始タグを入力してEnterキーを押すと閉じタグを自動で挿入してくれるものもあります。様々なエディタがあるので、自分にあったツールを見つけていきましょう。

3-3. ロゴやバナーを作成する

コーダーのほかにグラフィックデザイナーがいる場合は、コーディングと同時進行でホームページの顔となるロゴやバナーなどのクリエイティブの作成を行います。事前に設計図で打ち合わせたサイズでデザインを行います。

忘れがちなのが、ファビコンの作成です。ファビコンとは、ホームページをブックマークした際に横に表示されるアイコンです。最近では、ブラウザのブックマーク用のファビコンだけでなく、iOSやAndroidでホーム画面にホームページのブックマークを単独で作成できるので、忘れずに設定しておきましょう。

3-4. ブラウザチェックを行う

ブラウザチェックとは、色々なブラウザでサイトを確認し、レイアウトが崩れていたり、表示のおかしいところがないかを確認する作業です。世の中にはたくさんのブラウザがありますが、Internet Explorer、Microsoft Edge、Google Chrome、Mozilla Firefox、Safariは多くの人が使っているので、最低限チェックしておきたいところです。また、スマートフォンやタブレットでも想定どおりに表示されるか確認しておきましょう。

3-5. テストサーバーで確認する

ローカル開発環境で開発した場合は、自分自身や自社のメンバーしかアクセスできない状態になっています。インターネット上で誰でも閲覧できるようにするためには、サーバーにアップロードして動作を確認する必要があります。いきなり本番環境で公開して動かなかったり、リンクが切れていたり、リンクをクリックしたらまったく別の場所に飛んでしまうこともあるので、まずはテスト環境のサーバーで動作を確認します。問題がなければ、本番環境で公開をします。

4. 制作したホームページを公開したら

4-1. 検索エンジンに公開を知らせる

苦労して公開したホームページなので、より多くの人に見てもらいたいですよね。他のホームページから自分のホームページにリンクを貼っていれば検索エンジンのクローラー（巡回ロボット）が向こうからやってくることもあります。一方で、自分から検索エンジンのほうにホームページが公開したことを知らせることもできます。Googleやbingの提供するWebマスターツールに登録をすると、クローラーが自動的にホームページを巡回してくれるだけでなく、SEO（検索エンジン最適化）に必要な様々な機能を提供してくれるので、非常に便利です。

4-2. 統計サービスをチェックする

統計サービスを利用すると、自分のサイトを見る人が、どういうルートで入ってきて、どういうページを見ているのかをチェックすることができます。

アクセス数や検索流入の割合などは、世の中の人々が自分のホームページにどのようにリアクションしているのかを知ることができるので、こまめに確認しておきましょう。

4-3. ホームページを更新する

様々な統計データを考慮しながら、ホームページを更新していきましょう。ホームページを頻繁に更新すれば、クローラーの巡回数も増え、ホームページの検索順位も上がりやすくなります。

4-4. SNSやリスティング、プレスリリースで発信する

ホームページを公開した段階では、検索流入が頼みの綱となります。一方で、twitterやfacebook、instagramなどのSNSを活用すれば、こちらから戦略的に存在を認知させることができます。

また、ある程度まとまった予算があれば、リスティングを打ったりプレスリリースを出すことで、自分のホームページを宣伝することもできます。

SEOだけに頼ってしまうと、Googleの検索ポリシーが急に変更されて検索結果が落ちた時に、アクセスが急激に落ちてしまうことがあります。できるだけ入り口となる媒体を分散して多く持っておくことで、そうしたリスクを回避することもできます。

まとめ

ホームページの制作および公開後における一連の流れを徹底解説していきました。制作メンバーの人数やホームページの規模によっても変わってきますが、基本的な制作フローは以上になります。

最近では、一部もしくは全体の作業をクラウドソーシングで業務委託することも珍しくなくなってきました。しかし、外部に委託する場合でも、こうした制作の流れを知らないと、あとで思ったとおりのデザインにならないこともあります。ターゲット選定からしっかりと情報を共通認識化することで、制作メンバーが増えても対応できるようになります。

ferretでは、ホームページ制作にかかわるお役立ち情報も随時更新しています。ぜひ毎日チェックしてください。