アラフォー会社員がWeb系の副業をオススメするブログ

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


Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45
ユズト
お客様の実際いる案件でオリジナルサイトを企画段階から制作しました。

・Web制作で一番初めにすることってどんなことするの?

・実際どうやって「企画」って進めていけばいいの?

・実際の案件事例で進め方を理解したい。

このような悩みに対して本記事を読むことで以下のようなことを知ることができます。
  • Webサイトを作るための「企画」手順が実際のサイト制作事例から5つのステップで分かる。

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

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

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

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

  • その1「企画」
  • その2「設計」
  • その3「制作:デザイン」
  • その4「制作:コーディング」
  • その5「制作:WordPress」

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

オリジナルデザイントップページ

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

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

※この記事はシリーズ化して5つの記事に分けて書きます。これは1つ目の「企画編」です。

「企画」の5ステップ

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

  • ステップ1:Webサイトの目的と目標を決める
  • ステップ2:自分の特徴を洗い出す(自分を知る)
  • ステップ3:Webサイトを見てもらいたい人をはっきりさせる(相手を知る)
  • ステップ4:競合分析をする(他を知る)
  • ステップ5:サイトコンセプトを整理する

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

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

Webサイトの目的と目標を決める

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

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

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

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

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

という分け方。

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

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

ということにしました。

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

「目標」の指標について専門用語でいうと、
・最終的に達成したい「目標」を「KGI(KeyGoalIndicators:重要目標達成指標)」
・そこまでの過程や手段ごとに設定する「目標」を「KPI(KeyPerformanceIndicators:重要業績評価指標)」

と言います。ここでは、

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

ということになります。

ステップ2:自分の特徴を洗い出す(自分を知る)

自分の特徴を洗い出す(自分を知る)

自サイトの優位性

これを明確にします。他と何が違うのか、悩み課題を解決してくれるサービスは何か、がはっきりしないとダメですよね。そこから「キャッチコピー」も作れますし、「企業の特徴」のページもしっかりと作りこめるようになります。簡潔に優位性をまとめるとサイトの方向性が見えてきます。

今回の依頼主は

  • 経営コンサルティングとシステムコンサルティングの両側面から企業の活性化をはかる

という強みをもっていてそれをサービス化していました。

システム化が遅れている製造業などの業態にてIT化を推進することで経営効率を高めることが可能というコンサル。

そこからファーストビューのキャッチコピーを考えました。

「IT power leads to success」

ファーストビューのキャッチコピー

「ITの力で成功へ導く」一言でその企業が提供する価値が分かる、パット見て何か良いこと言ってそう、という表現を考えました。

自己分析をするということ。強み弱みを整理して強みをアピールしましょう。
このオリジナルサイトの「強み」は以下のように整理しました。
「強み」
・情報提供の手段が多い(コラム、ブログ、資料提供、事例)
・独自性が分かりやすい(経営×システムコンサル)

ステップ3:Webサイトを見てもらいたい人をはっきりさせる(相手を知る)

Webサイトを見てもらいたい人をはっきりさせる(相手を知る)

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

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

・100人~500人規模の売上1億~30億円程度の中小企業(業界不問)
・製造業のようなシステム化が遅れていそうな業態
・関東に本社機能のある企業
・社長(創業者)、2代目社長(社長の息子で40代か50代)、役員・部長などの経営層

とヒアリングしました。

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

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

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

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

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

ターゲット ペルソナ
人物像 ぼんやり 具体的
表現内容 業種、勤務先の売上規模、所属している組織での役職などの社会的スペック 価値観やパーソナリティ、ライフスタイルなど個人に帰属する情報
元になる情報 過去の経験からの想像 実際の調査を元にした数値やストーリー
主なデータ収集方法 営業担当や経営層へのヒアリング、過去の営業情報からの分類 ユーザーインタビュー、ユーザー観察、アクセス解析など
メリット 想定するのに関係者からのヒアリングだけで済むのでそれほど時間がかからない ・ユーザーの共感ポイントが明確になる

・ユーザー視点で意思決定できるようになる

・関係者間で共通の認識を持ちやすくなる

デメリット なんとなくの層に向けて発信するのでサイトを見にきた人が自分に向けて伝えようとしている内容だと思いにくい リアルな想定をし書き出すには時間と労力がかかる

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

 

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

ペルソナ

名前 宮下 健一
年齢 51歳
性別 男性
職業(仕事の内容) 社員数300人中小企業 製造業 代表取締役社長。(会長は父親。二代目社長)
特徴(性格、考え) 事業の核となる製品の売上増進に注力してきた。より売上増進させるために社内にあるデータを有効活用したいと考えている。
行動パターン 先代社長は地域会合、交流会での人脈をツテに仕事を拡充させてきたがそれでは情報不足になりがちのためWebを駆使して情報を収集し活用することにしている。
問題意識 既存システムがあるがデータ連携がうまくできていなく困っている。客先からのデータが溜まっているが有効活用する手段が分からない。社内情報共有の仕組み作りが分からない。退社した人材がデータを持ち出してしまった。AIというワードを聞くがどう活用したらいいのか分からない。
問題が解決できない理由 社内にシステム構築、データ活用の知識を持つ人材がいない。誰に聞いていいか分からないし単にシステム構築業者に話しをしても経営に活かせるデータ活用方法が聞けるとは思えない。

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

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

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

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

ここまで整理して

・IT技術に詳しそうな洗練されたデザイン
・50代以降の人にも見やすいレイアウト構成

が必要と分かります。

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

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

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

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

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

ストーリーボード

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

デジハリLIGのLIVE授業にてカスタマージャーニーマップの授業受けました。何人かのグループに分かれてそこから一人選びその人がなぜデジハリLIGを選んで入学まで至ったかを模造紙に時系列でポストイットで行動を書きだす、という講義。同期が同じグループにいて選ばれていたのが面白かった。スクールを選んだ目的を深堀りするとカウンセリングみたくなります。

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

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

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

川合 俊輔 (著), 大本 あかね (著), 菊池 崇 (監修)
ここまで整理してユーザーの行動パターンをシミュレーションすると

・サービス、会社の特徴が分かるページが必要で分かりやすい場所にレイアウト
・「コラム」「資料ダウンロード」「事例紹介」のページがあるといい
・サービス導入の流れ、費用が分かるページがあると親切

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

ステップ4:競合分析をする(他を知る)

競合分析をする(他を知る)

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

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

競合サイト 大手コンサル企業 個人経営コンサル システム会社
サイトの良いところ 組織力、業務範囲の分かりやすさ 事業内容が詳しく、導線が分かりやすい。代表のパーソナリティが分かりやすく表現されている サービス内容が細かく書かれている
サイトの弱いところ 企業ブランドを全面に出している反面内容が抽象的。独自性、専門性のアピールが不足 情報提供がセミナー案内のみで少ない。個人事業であることを全面に出して逆に組織力を感じない 文字が多く図やイラストがないので見にくい。サイトに洗練さがない。
差別化ポイント

※自分のサイトはこうした方がいいと思う点

具体的な内容をコンテンツにするといい 情報提供をもっと分かりやすく提供できればいい、組織力を想起させる サービス内容は分かりやすく、図やイラストも入れて見やすさも大事にする

ここまで整理して

・組織力を想起させる
・独自性をアピール
・情報提供の方法を増やす

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

ステップ5:サイトコンセプトを整理する

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

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

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

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

サイトコンセプト1

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

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

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

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

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

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

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

  • 1:Webサイトの目的と目標を決める
  • 2:自分の特徴を洗い出す(自分を知る)
  • 3:Webサイトを見てもらいたい人をはっきりさせる(相手を知る)
  • 4:競合分析をする(他を知る)
  • 5:サイトコンセプトを整理する
「コンセプトシート」としてこの記事の内容をエクセルなどにまとめると分かりやすいです。

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

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

 

デザインよければいいんじゃない?という考え方に対して異論を唱え何のためにWebサイトが必要なのかを分かりやすくマンガ形式で紹介している本を紹介します。「沈黙のWebマーケティング」です。SEOに関する本なんですけども、Webデザインの本質は?という切り口でWebデザインに必要な論理性について書かれてます。ライティングについても書かれてます。

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

noteに僕がWeb制作案件で副業案件受注するまでの全工程を詳しく書きました。
スキル0からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnoteです♪
【note】スキル実績人脈0のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順
Web制作「企画」の流れを制作事例から5ステップでご紹介
情報発信しています♫