今回は、思い通りのWebサイトを作るために、弊社の取り組みにも触れながらその制作工程について解説したいと思います。「Webサイトの制作を発注したけれど出来あがったらイメージしたものと違っていた」という事態にならないためにも、制作フローを知っておこくことはたいへん重要です。

• ＜目次＞
• ゴールの明確化
• ターゲットを設定
• デザインのコンセプトを決める
• サイトマップの作成
• デザインやレイアウトの決定
• コーディング・SEO対策・プログラミング
• 【コーディング】
• 【SEO対策】
• 【プログラミング】
• テスト・確認
• 運用（更新）・保守
• まとめ

ゴールの明確化

Webサイト制作にあたっては、まず「ゴール」、つまりサイトの目的を明確にすることが大切です。ゴール（目的）は主に次の5つが考えられます。

・問い合わせや資料請求などによる接点の拡充
・商品やサービスの購入、申し込み
・自社及び製品の認知向上
・ブランディング（ブランド化）
・経費削減

最初にゴールを明確にしておかないと、サイトデザインやコーディングといった今後の各工程に一貫性がなく、費用や時間を無駄に浪費してしまうことにもなりかねません。加えて、ゴールの曖昧さはユーザーにとってもそのWebサイトを訪れる目的を失わせてしまいます。

Web制作会社が受注後に最初の行うのはゴールについて発注者と入念にミーティングすることです。ここを疎かにするWeb制作会社では思い通りのWebサイトは構築できないといっても過言ではありません。

ターゲットを設定

ゴールが決まったら、制作したWebサイトどんなユーザーにアクセスしてもらうか、ターゲットを設定する必要があります。できるだけたくんのユーザーに訪れてもらいたいと思う方も多いと思いますが、それでは対象が漠然としてまとまりのないWebサイトになってしまいます。

Web制作会社では、ターゲットをより明確にするために「ペルソナ」を設定します。ペルソナとは、年齢・性別・職業などを具体的に挙げ、架空に設定されたユーザー像を指します。この作業を行うことで、Webサイトのデザインや機能についても方向性が見通せるようになります。

もちろんペルソナは発注者とWeb制作会社で共有しなければ意味がありません。ペルソナをどこまで掘り下げるかや設定における妥当性などを含めて、こういった作業をどれくらい的確に行えるかはWeb制作会社の腕の見せどころです。

デザインのコンセプトを決める

Webサイトのデザインは「ゴール」に対してブレることなく「ターゲット」へアピールする必要があります。そのため「カジュアルに」や「洗練された雰囲気で」など、言葉のみに終始するのは好ましくありません。言葉は人によって感じ方が異なりますから齟齬が生じてしまう可能性があります。

ここでは、Webサイトのデザインを具体的に目に見えるものとして、制作にかかわる人同士で共通認識を作ることが重要になります。実績のあるWeb制作会社であれば、過去自社で作成したWebサイトを提示することでコンセプト（基本的な考え方）を視覚化することが可能です。

その他の方法としてはイメージマップを作成することも考えられます。イメージマップとは、「ゴール」と「ターゲット」を縦横の軸にして、「シンプル」「ゴージャス」「明るい」「暗い（シック）」とカテゴリー分けし、それぞれに参考になるWebサイトや画像を当てはめた図表を指します。

また、ここで決定したコンセプトに基づいてタイトルやキャッチコピーを決める作業も行います。

サイトマップの作成

サイトマップとは、Webサイトがどのようなページ構成になっているかを一覧にした図表です。サイト全体を俯瞰的に把握できるので、コンセプトがきちんと反映されているかや、必要とするページに漏れがないかを容易に確認可能なのがメリットです。

サイトマップ作成の主たる目的はユーザビリティ（使い勝手・使いやすさ）の向上です。ユーザーにとって使いやすいWebサイトでなければせっかく設定した「ゴール」に到達することができません。そのためサイトマップは、Webページの多寡にかかわらず作成されることがほとんどです。

弊社では、この段階でhtmlサイトマップを作成しています。htmlサイトマップとは、Webサイト内の各ページへのリンクを、主にリスト形式で記述したものです。htmlサイトマップを設置することで、先程指摘したユーザビリティの向上により質することができます。

なお、多くの場合、サーバーのレンタルやドメインの取得といった手続きもこのタイミングで行います。こういった細かい作業は自社で担当者を決めておいても忘れがちなので、一括してWeb制作会社に依頼しておくと安心です。

デザインやレイアウトの決定

「デザインのコンセプト」に基いて、具体的にWebサイトをデザインする作業です。サイトの顔とも言えるトップページのデザインを決め、そこから各ページをデザインすることが多いようです。

注意したいのは、1ページの中に情報を詰め込みすぎないことです。「ゴール」に必要な情報であっても量が多くなるようならページを分ける必要があります。そのため実作業に入る前に、前項で作ったサイトマップに各ページに記載する情報や機能を書き加えたワイヤーフレームを作成し、全体のバランスを調整することもあります。

また、Webサイトで使用するロゴの作成もこの段階で行います。

コーディング・SEO対策・プログラミング

Webサイトが書籍や紙のパンフレットなどと異なるのは、PCやスマホで見るページのデザインが、そのままのかたちで保存されていない点にあります。たとえば画像は専用の場所に収められおり、以下に記したコーディングによって各ページに表示される仕組みになっています。今までが家を建てる前の準備だとすれば、ここから実際に家を建てる作業に入ることになります。

今回に限らず、このブログの他のページでも何度か書いていますが、Webサイトは作って終わりではなく、作ったサイトで集客や経費削減などを実現することを目的としています。そのため弊社では、後の運用やメンテナンスについてもこの段階でしっかり見通して作業を行います。

コーディング・SEO対策・プログラミングは重要な部分なので、項目を分けて確認してみましょう。

【コーディング】

コーディングとはWebサイトをブラウザを通じて閲覧できるようにする作業のことです。HTML（※2）やCSS（※3）といったプログラミング言語を用います。
※2：Webサイトの文章を構造化するマークアップ言語（記述方式）。文書を構造化するとは、Googleなどの検索エンジンに対して、Webページにどのようなコンテンツがあるかを認識させるための目印を記述すること。
※3：文字の装飾などコンテンツの見栄えを指定する。

【SEO対策】

Web制作会社に強く求められるが検索上位に表示されるWebサイトの構築です。SEO（検索エンジン最適化）対策はそのためにとても重要な施策です。当ブログでも紹介しているとおりSEO対策用のツールは各種ありますが、急なトラブルやGoogleのアルゴリズムが変化した場合の対応など、Web制作会社にはツールにはない強みがあります。

解析ツールは複数使いがマスト！SEO対策に超便利なアクセス解析ツール５選
https://www.selva-i.co.jp/blog/archives/5610

【プログラミング】

ECサイトにおける決済システムなど、Webサイトで機能させるために新たにプログラムを設計・作成することをプログラミングと呼びます。広義にはコーディングもプログラミングに含まれますが、すでにあるプログラムを利用するという点で違いがあります。

テスト・確認

Webサイトが構築できたら、「きちんとページが表示されるか」「設定した機能が動作するか」などをテストします。ここまでは主にWeb制作会社内で行われる作業でしたが、ここでは実際にデータをサーバーにアップロードしてチェックします。主な確認項目は以下です。

・ブラウザチェック：ブラウザごとにレイアウトが崩れていないか、動作不良がないかを確認します。デバイスごとのチェックも含みます。
・バリデート：コーディングが仕様どおりに記述されているのかをソフトウェアを使って確認する作業です。
・リンクチェック：リンクが適切に処理されているかを確認します。

運用（更新）・保守

Webサイトは制作しただけでは意味がありません。より多くの「ターゲット」にアクセスしてもらい、「ゴール」を達成するためには、効果のあるWeb施策を実施して継続的な運用を行う必要があります。運用に該当する業務はWeb制作会社によって様々ですが、サイト（サーバー）の監視やデートのバックアップなど、毎日行う作業を指すのが一般的です。

また、保守をしっかり行いWebサイトのユーザービリティを保つことも大切です。保守についてもWeb制作会社によって内容が異なりますが、主に不測のトラブルに対して行う業務と考えて良いでしょう。

まとめ

Webサイト制作の工程について「思ったよりも多い」と感じた方もいるのではないでしょうか。それぞれの工程において発注者側の確認作業があることを考えると、その発端となる「ゴール」や「ターゲット」の設定がいかに大切かもお分かりいただけたと思います。Web制作会社を決めたら、まずコミュニケーションを十分に取ることを念頭に置いて、思い通りのWebサイトを構築してください。