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

デザインや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では、ホーム ページ 制作にかかわるお役立ち情報も随時更新しています。ぜひ毎日チェックしてください。