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

デザインや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円台から契約できるレンタルサーバー業者もあるので、アフターケアや月々の費用、セキュリティ対策などを考慮して最適なプランを選びましょう。

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