目的・目標が達成できるWebサイトを持つには適正なプロセスが重要です。制作会社に依頼する際には、その工程と内容をきちんと理解する必要があります。理解することで、自社が望むWebサイトを持てるようになります。そして、効率よくWebサイト制作を進めることができます。 そこで今回は、目的を達成しやすくなるWebサイト制作の進め方をご紹介します。
STEP1｜プロジェクト企画
「作りたい、欲しい」という理由だけで、Webサイトを制作してはだめです。Webサイトを持つ目的をしっかりと決めましょう。さらに、関係する部署や担当者が多い場合は目的が不明瞭になりがちです。そのため、関係各所へのヒアリングや調整を実施し、目的の明確化から始めます。
1.Web制作をする目的を決める
何のためにWebサイトを制作するのか、その目的を明確にしましょう。サービス／商品の「売り上げを伸ばす」であったり、「認知度を上げる」などが目的になります。
2.ゴールを決める Webサイト制作後のことを、考えておくことが非常に重要です。そのためにも、目的の達成度合いを評価するための指標を決めます。どの数値をどの程度獲得できれば達成なのか？その基準があれば、改善／改修の施策が検討しやすくなります。
3.コンセプト決定
目的・目標が決まったら、Webサイトに持たせる役割を考えます。企画とWebサイト自体のコンセプト策定をします。ここで決めたコンセプトが制作はもちろん、公開後の運営の基本方針となり、以降の設計やコンテンツ作成、デザインのすべてにおいての指針となります。これ以降のステップに進んでからでは後戻りができなくなり、ゼロからのやり直しになってしまいます。そのため関係各所の認識のすり合わせが必要です。
4.ターゲットを決める Webサイトを利用してくれるターゲットユーザーを決めます。そしてこのターゲットユーザーの決定は次の5に挙げる「調査・分析」と並行して進めることが必須です。さらにターゲットユーザーについては「30代の男性会社員」のような不明瞭なものではなく詳細な人物像、『ペルソナ』を定めることが大切です。定めたターゲットユーザーとペルソナから、どのようなサイトを制作するかが変わってきます。さらにペルソナを設定することで関係者の認識を統一することができ、プロジェクト進行がスムーズになる効果があります。
ペルソナの作り方についてはこちらブログをご覧ください。
5.調査・分析
目的・ゴールを達成するには、ターゲットユーザーをイメージしながら、どのようなコミュニケーションデザインを行うべきか調査・分析が必要となります。私たちは主に以下のような情報を念頭に調査や分析を行います。ただこちらが絶対ではありません。考えつく限りの情報を集めるようにしましょう。集めた情報を分析して最適なコミュニケーション方法を決定します。
SNSや広告などのオンラインで可能な施策
業界の動向やトレンド
同業他社や競合の施策
雑誌や業界紙などのオフライン施策
STEP2｜Webサイト設計
企画が決まったらいよいよ、Webサイトの設計を行います。ここでWebサイト（グラフィックデザインもそうですが）制作において、サイト設計とデザイン制作の2段階があることを覚えましょう。サイト設計とデザイン制作は全くの別物となります。
1.UXの設計
UXとはユーザーエクスペリエンス（User Experience）の略で、商品／サービスの購入に至るまでのプロセスやアクションを想定し、ターゲットユーザーに体験をしてもらうことを設計する段階となります。様々な書籍やサイトで紹介されていますがHS広告スタジオでは、UXを下記のようにいつも定義し、説明しています。 「UXはファンが増え続ける仕組み」 2.コンテンツの企画
UX設計に基づいて、どのようなコンテンツを作成・提供すべきなのかを考えます。Webサイトの運営者（売り手側）の「伝えたい」と、ユーザーの「知りたい」が合致するように、目線を合わせることをしっかりと意識しましょう。掲載したいコンテンツのヒアリングはもちろん、同業他社などのWebサイトも参考にするといいです。そして、企画はSEO（検索エンジン最適化）への配慮も重要となります。どのようなキーワードでユーザーに検索をしてほしいか。そのキーワードがコンテンツにとってどの程度重要か、という視点でコンテンツを考えることも重要です。
3.サイト構造の設計
サイト構造の設計とは、記載するコンテンツの優先順位を決めることが主眼になります。Webサイト全体がユーザーにとって見やすく、読みやすく、使いやすい構造を設計します。この構造設計において、イメージしやすいのがスーバーです。
スーパーではお客様に一つでも多くの商品を手に取ってもらえるように、入口から奥、奥から出口までの陳列順を計算して決めます。そして、四季に合わせて、商品を移動させることがあります。
Webサイトの構造設計は以下の点に注意して行います。
コンテンツの体系化
コンテンツを正しく整理するラベリング
各コンテンツの関連性を明確化
サイト内を快適に遷移できるナビゲーション設計
同じカテゴリのコンテンツがまとまりなく記載されていると、見ているユーザーは混乱しかねません。ユーザーにとって使いやすいWebサイトにすることでをしっかりと意識して設計します。設計方法としては、サイトマップとディレクションマップを作成します。こちらでWebサイト全体を把握するようにします。
4.ページ構造の設計
作成したサイトマップを基に、ワイヤーフレームを作ります。ワイヤーフレームとは設計図になります。記載するコンテンツをパーツ、そのパーツをどのように組み立てるか（レイアウトするか）の設計図です。Webページ毎にコンテンツの重要度を設定し、流れやレイアウトを定義します。ワイヤーフレームは関係するメンバー同志の共有はもちろん、どのようなWebサイト制作をしていくのかを的確に理解するための重要なプロットとなります。
5.システムの設計
サイト構造の設計やページ設計と同時に、どのようなシステムを導入するかの設計も行います。
下記がシステム設計で考慮する重要なポイントです。
予算内でシステムの実装は可能か？
セキュリティを担保できているか？
メンテナンス性は十分か？
拡張性を考慮できているか？
STEP3｜デザイン制作
Webサイトの設計が完了したらデザイン制作に入ります。
ここでは、細心の注意が必要となります。デザイン、いわゆるビジュアルデザインは感覚やセンスだけで作ってはダメです。 Webサイトの目的が達成しやすくなるデザインコンセプトを決め、情報設計に対して適切なビジュアルに落とし込むことが非常に重要となります。
1.デザインコンセプトの作成
プロジェクト内で共通認識を持ち、主観的な意見に左右されず、一貫したビジュアルデザインができるようにデザイン上のコンセプトを作成します。商品／サービスのコンセプトやコミュニケーション設計を基本とし、ユーザーにとっての適切なデザインを言語化します。このデザインコンセプトは「トンマナ」とも呼びます。
デザインコンセプト、トンマナで確定するものは以下のようなものがあります。
デザインの方向性（雰囲気）
色のルール
フォントのルール
画像素材などの方向性のルール
レイアウトの大まかなルール
共通するパーツルール
2.素材の準備
デザインコンセプトに沿って、使用する画像やテキスト、イラストなどを用意します。既にある素材が使えない場合や適さない場合は別途、制作や撮影などを行うことがあります。私たちのようなWeb制作会社で画像素材の購入や手配をすることも可能です。そのため、誰が何を準備するのかを明確にしておきましょう。
ここで重要になってくることが、著作権や肖像権です。素材の著作権・肖像権を確認することを忘れずに行ってください。そして画像のような素材だけでなく、文章などのコピペや無断転載も厳禁です。
3.UIデザインの制作
素材の準備ができて、各ページのデザインを進めることとなります。ここで作るデザインは、デザインカンプと呼ばれます。デザインコンセプトを基に制作しますが、ビジュアル化した際の雰囲気のズレや、違和感がないかをデザインカンプでチェックしながら進めます。クオリティの高いデザインを実現するためです。ここで注意したいのがクオリティの高さの定義です。
単純にデザインコンセプトのイメージ通り、だけではなく、Webサイトを見て、解りやすいかどうかが重要になります。Webサイトは見るものでなく、使ってもらうためのものです。そのためWebサイトを見た（流入）時に、
どういったWebサイトなのか
何のためのサイトなのか
閲覧しやすいか
どのように使えるのか
が解らないと意味はありません。閲覧したユーザーに一つでも「？」を持たれてしまうと、再度見てもらえない可能性は高くなります。この解りやすいデザインのことを、UIデザインと言います。UIデザインと強く意識して、デザイン制作することが非常に重要となります。
UIデザインの詳細な作り方は下記ブログをご覧ください。
4.デザイン制作時の注意 デザインの作成時に忘れず注意したいことが、実現不可能な機能がデザインに表現されていないかどうかです。ビジュアルだけの確認ではなく、お問合せなどのフォームが動作した際、デザインとして問題がないかも確認するようにしましょう。特に動的要素がある場合も注意が必要です。
STEP4｜構築、実装
デザインができたら、Webサイトとして機能するように構築します。この構築作業を
システム開発
コーディング
マークアップ
などと呼びます。 システム開発は、「フロントエンド」と「バックエンド」に分かれます。それぞれ出来ることが違うため、実装前に必要な実装領域と各分担を明確にしておきましょう。
1.フロントエンド デザインカンプと同じデザインがWeb上でも見れように、ビジュアルデザインを調整する工程となります。ソースコードと呼ばれる言語で記述する作業です。主にHTML、CSS、JavaScriptといった言語となります。
2.バックエンド（サーバーサイド構築）
Webサイトが問題なく動作するように、プログラム構築する工程です。目に見えない部分の作業となるため、一般的に広くは知られていませんが、Webサイト制作では決して欠かせない工程となります。 耳目することの多いWordPressなどのCMS（コンテンツ管理システム）がここの作業に該当します。そしてこのプログラミングのほかにも、Webサイトを公開するためにサーバー設計やドメイン設定などの準備も行います。 続いて、サーバー設定とドメイン設定についてご紹介します。
サーバー設定
サーバーを簡潔に説明すると、Webサイトの設計情報（データ）の格納庫となります。しかし、格納しているだけでは情報を閲覧ユーザーに提供することはできません。情報を提供するにはサーバーに配信するためのプログラムを用意します。必ず用意するものは、
OS（MacやWindowsなど）情報
必要なソフトウェアのインストールと設定
セキュリティ情報の設定
ドメイン設定
これらの作業を一般的にサーバー設定と言います。
ドメイン設定
ドメインとは、Webサイトを閲覧する際に入力するURLのことです。情報はサーバーに格納されますが、その場所が解らない限りユーザーは目的のWebサイトを見ることができません。そこでサーバーには場所を示すものとして、IPアドレスという郵便番号のような番号が割り当てられます。しかし、数字だけではどのような情報なのか、ユーザーは解らないし、覚えてももらえません。 この問題を解消するために文字列を紐づけて、ユーザーが解りやすく、そして辿り着きやすくするのがドメインの役割となります。この設定作業をドメイン設定といいます。主な設定作業は
ドメインの選定、契約
サーバーの選定契約
サーバーとドメインの紐づけ
となります。
3.テスト
フロントエンド、バックエンドの作業が完了したら「動作検証」や「デバッグ」などと呼ばれるテストを実施ます。ユーザーがWebサイトを見る環境は様々です。Windowsを使う人、Macを使う人などの違いもあれば、使用するブラウザも違います。PCをメインに使う人もいれば、スマホをメインに使う人もいます。この様にどのユーザーにもデザイン通りの表示が見えているか、仕様通りシステムが動作しているかチェックを行います。問題点があれば修正をします。
実際のところ、修正点が一つもなくリリースができることは非常に稀です。そのため、テストと修正期間のスケジュールを確保しておきます。 そして重要なこととして、どのような環境で動作を担保するかを決定しておくことです。全ての環境下でテストを実行しようとすると、想像以上の時間を要することになりリリースに間に合わないことがあります。
STEP5｜リリース
テストで動作に問題点がなければ完成です。リリース作業（本番公開）を行います。 リリース当日は、デザイナー、エンジニアのどちらも稼働できるようにします。万全を期してリリース作業を行います。しかし、全くの予想外要因でエラーが発生することもゼロではありません。必ずリリース直後に公開されたサイトでは、問い合わせフォームなどのテストを行い、問題があれば即座に調整できる体制を整えておきます。クライアント側でも、しっかりとテストチェックできる体制を整えておくことが重要となります。
まとめ
目にするWebサイトは「かっこいい」「綺麗」「おしゃれ」など、様々なものが多々あります。しかし、その見た目には実は、Webサイト（=ビジネス）の目的を達成しやすくするための要素や設計が組み込まれています。
『見た目』も大切です。しかしそれと同様に、目的を達成するための『設計』や『仕組み』も必要です。達成するためにも、デザインコンセプトをはじめ、プロジェクトの計画からサイト設計もしっかりと行う必要があります。決して低価格ではないWebサイト。作成し、運用していくなら、目的が達成しやすいサイトを作成する必要があります。今回の記事が、これからWebサイトを作ろうとされている会社様のお役に立てれば嬉しく思います。
私たちにご相談いただければ尚、嬉しく存します。
今回も最後まで読んで頂き、ありがとうございます。