Web制作「企画」手順を制作事例から５ステップでご紹介【Web制作の流れ①】

• Webサイトを作るための「企画」手順が実際のサイト制作事例から５つのステップで分かる。

実体験をベースに記事を作成していますので参考になれば幸いです。

Web制作企画の流れをオリジナルサイト制作事例から５ステップでご紹介

Web制作の実際の流れを抽象的に語られてもなんかイメージ湧かない、と思いませんか？

ということで、僕がデジハリLIGの卒業制作時に実際作ったオリジナルサイトをどうやって０から作っていったのか、をご紹介します。（→卒業制作で知り合い起業家のWebサイトを実際に制作しました）

• その１「企画」
• その２「設計」
• その３「制作：デザイン」
• その４「制作：コーディング」
• その５「制作：WordPress」

という流れで紹介していきます。結果として、以下のサイトを制作しました。トップページデザインです。

まずは「企画」の流れを上記オリジナルサイト制作するにあたってどうやって進めたかを５つのステップでご紹介します。

僕がまずお客様からいただいたものは「会社ロゴ」のみでした。他何もなし状態。ここから「企画」が始まります。（※上図は「企業ロゴ」とテキストに変換しています。実際のロゴではないのでご注意を）

「企画」の５ステップ

企画はざっくり以下の5ステップで考えます。

• ステップ１：Webサイトの目的と目標を決める
• ステップ２：自分の特徴を洗い出す（自分を知る）
• ステップ３：Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
• ステップ４：競合分析をする（他を知る）
• ステップ５：サイトコンセプトを整理する

この流れでどうやって進めていったかを書いていきます。

ステップ１：Webサイトの目的と目標を決める

昔からの知り合いが起業しWebサイトが必要になったということを聞き、Webサイトを制作しましょう！という話しになりました。

その知り合いは中小企業向け経営コンサルティング会社を始めたのでそのWebサイトが欲しい、ということ。

まず整理したことは「目的と目標」です。

目的は、「Webサイトで実現したいことは何か」

目標は、「Webサイトで達成したい数字は何か」

という分け方。

ここで僕はお客様であるその知り合いから話しを聞いて

• 「目的」＝中小企業社長、決裁者から問い合わせ・資料請求をしてもらい新規顧客を獲得する
• 「目標」＝月1件新規顧客契約を獲得、そのために月20件の問い合わせ・資料請求をしてもらう

ということにしました。

正直卒業制作ということで「目標」に関してはなんとなくで数字を決めました。まず目標数字を仮決めして毎月の実績数（問い合わせ数）を計測していって微調整していこうと考えました。

と言います。ここでは、

• KGI＝月1件新規顧客契約を獲得
• KPI＝月20件の問い合わせ・資料請求

ということになります。

ステップ３：Webサイトを見てもらいたい人をはっきりさせる（相手を知る）

そのWebサイトは、誰のどんな悩み課題を解決してくれますか？ということ。サイトを見る人が求めていることを徹底的に追求します。売り手側の論理でこのサービスいいですよ！という物売りサイト構成ではなくて、とにかく見る人の気持ちにたってみること。

依頼主から「ターゲット」は

とヒアリングしました。

ここまでですすめていってもいいのですが、もっとターゲットを深堀りするとユーザビリティの高いサイト制作ができる、というのが一般的です。

顧客像の設定：ペルソナ設定

「ターゲット」で考えると上記のようにちょっと人物像が曖昧です。様々な人が制作に関わると、人によって思っている人物像が微妙に異なったりします。

なので、「ペルソナ」で人物深堀りします。サービス・商品の典型的なユーザー像のことを「ペルソナ」とマーケティング用語で言います。10代女の子に見てもらう前提と50代男性に見てもらう前提ではデザインは全く変わります。また50代でも大企業の中堅社員と中小企業の社長では行動パターンは違ってくるのでサイト設計も変わります。なので「誰に見てもらうのか」をより詳細な情報にしてはっきりさせておくといいよね、ということ。

つまり、ターゲットとペルソナの違いは想定する人物像の明確度合いです。

「ターゲット」より具体的に想定した「ペルソナ」の方がユーザー視点で制作できるからいいよね、ということ。ただペルソナ考えるの時間がかかってめんどい、ということです。

という前置きをふまえて、オリジナルサイトで想定した具体的なペルソナ像は以下の通り。

画像を入れるとイメージしやすい、ということでイメージにあう写真をもってきます。

ここではペルソナを2代目社長という前提にしましたが、ターゲットを考えると

社長（創業者）、役員・部長などの経営層

もペルソナ設定するとサイト設計の幅が広がります。

ここまで整理して

が必要と分かります。

ユーザーの行動を可視化：カスタマージャーニーマップとストーリーボード

ペルソナ設定した後により具体的にペルソナの行動を理解したい場合。

ペルソナになりきってWebサイトをみて問い合わせなどの行動をする前後の行動を時系列で可視化する手法は以下の二つ。

カスタマージャーニーマップ

ユーザーがWebサイトを利用して商品・サービスを購入するまでにどのような行動をとるのかを時系列に整理する方法。行動している時の思考や感情やその時の課題も書き出すのがポイント。

ストーリーボード

漫画のような絵コンテを使ってWebサイトの利用シーンやユーザーの感情などを洗い出す方法。カスタマージャーニーマップは言葉で説明したのに対して、こちらは絵で表現するのでイメージがよりしやすい。

LIGブログでも紹介されています。カスタマージャーニーマップ作成時に意識したい3つのポイント

カスタマージャーニーマップとストーリーボードについては以下の本で紹介されてます。デジハリLIGで紹介された本で企画制作時に活用しました。

ノンデザイナーでもわかるUX＋理論で作るWebデザイン

ノンデザイナーでもわかる UX+理論で作るWebデザイン

川合 俊輔 (著), 大本 あかね (著), 菊池 崇 (監修)

Amazon

楽天ブックス

ということが分かります。

ステップ４：競合分析をする（他を知る）

似たようなサービス、商品を提供している競合会社のWebサイトをいくつかググって見てみます。

デザイン、レイアウト構成、コンテンツを見て、自分のサイトに活かせるか、逆に真似をしない方がいいポイントはあるか、差別化につながる構成にするにはどうすべきか、を考えてみます。

ここまで整理して

ということが分かります。

ステップ５：サイトコンセプトを整理する

デザイン制作のポイント、コンテンツ用意、レイアウト構成の方向性、を考えるために

サイトコンセプトを整理します

サイトコンセプト１：デザインの方向性を決める

Webサイトの雰囲気、イメージの方向性を整理するためにデザインの軸を決めましょう。下のような軸を整理するとイメージしやすいです。

サイトコンセプト２：ポイント整理してコンセプトを一言で表現する

ここまで整理してきた情報をまとめてみましょう。

ポイントを３つくらいに整理して、最後に一言でWebサイトで表現したいことを書いてみると分かりやすいです。

ここまできたら、設計やデザインに進んでもポイントが分かっているので制作しやすい状態になっています。

まとめ：企画をしっかりすると後が楽

Web制作の「企画」をざっくり以下の5ステップでご紹介しました。

• １：Webサイトの目的と目標を決める
• ２：自分の特徴を洗い出す（自分を知る）
• ３：Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
• ４：競合分析をする（他を知る）
• ５：サイトコンセプトを整理する

Webサイトの目的と誰が見ると嬉しいのか、をはっきりさせるとデザインの方向性、コンテンツ内容、必要ページなどが自然と見えてきます。なんのためのWebサイトなのか、という軸があるとなんでこのレイアウトにしたのか、の理屈がつけられます。

最近のデザインの流行りだから、というだけだとWebサイトの目的に合っていないかもしれないですよね。何のためのWebサイトか、カッコいいだけだと目的を達成できない場合があります。

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲−

松尾 茂起 (著), 上野 高史 (イラスト)

Amazon

Kindle

楽天ブックス

この記事はここまでです。