・Web制作って自分がいいと思ったものを提供すればいいんじゃないの？
・いやでもお客さんに言われた通りにWebサイト作ればいいのか？
・企画書をスムーズに作れるようにするための方法を教えて欲しい
- 「コンセプトシート」を活用してWeb制作企画書を作り込みクライアントと正しく意識合わせする方法が分かる
実際に僕が活用した「コンセプトシート」の内容から記事を作成していますので参考になれば幸いです。
Web制作を成功に導くコンセプトシート
Web制作案件でWebサイトを０から作る、もしくはWebサイトをリニューアルするというとき
- コンセプトシート
を作ることになります。Web制作をするための情報を整理するシートです。これができたらクライアント（お客さん）に提案するときの「企画書」を作るのは簡単です。
こちらが「コンセプトシート」項目。必要情報を埋めていくことでシートができます。
| クライアント名 | 会社名、個人事業主名 |
|---|---|
| Webサイト制作目的 | ・クライアントの要望（ブランディング、問い合わせが欲しい、集客したい、新設、リニューアルなど） ・Webサイトのゴール（問い合わせ件数や商品売上など数値化できるものがあればいい） ・Webサイト構築前後でクライアントとターゲットはどう変化しているのか |
| ターゲット | ・Webサイトを見る人はどんな人で何を求めているか（ターゲットの課題は何か）
・ペルソナ設定、カスタマージャーニー ・Webサイト流入方法 |
| 競合分析 | 競合他社のWebサイト調査、自サイトの競合優位性 |
| サイトタイトル | SEOを意識してタイトル付け。例えば、会社名＋地名＋サービス内容 |
| サイトコンセプト | キャッチコピーやWebサイトで達成したいことなどをシンプルに表現 |
| デザインコンセプト | 色（メインカラー、ベースカラー、アクセントカラー）、フォント、レイアウト、デザインイメージ（見本となる既存サイトをいくつかピックアップ） |
| コンテンツ | 商品紹介、サービス紹介、採用ページ、会社案内など必要な「コンテンツ」を洗い出します |
| サイトマップ | 洗い出した「コンテンツ」を整理しカテゴリ分けをしてディレクトリ構成を決めます |
| ワイヤーフレーム | 各ページのレイアウト構成を決めます |
| 技術仕様 | コーディングルール、ファイルフォルダネーミングルールなどをまとめます |
| サイトURL | 既存、新規（新規の場合推奨URLを提案するのもあり） |
| 使用システム | WordPressなどCMS利用するかどうか |
| 実装機能 | SNS連携、問い合わせフォーム作成、レスポンシブ対応（タブレット対応は不可）など |
| ブラウザ要件 | IE11対応不可、など（ターゲットブラウザ要件、Cromeメインなど） |
| スケジュール | 納品日から逆算。クライアントにして欲しいこと（資料集め、画像集めとか）も書く |
Webサイトの目的を明確にしたシート、それがWebサイトを成功に導くコンセプトシートです。
Webサイト制作前後を比較する
コンセプトシートができた後でWebサイトを作る前と後の比較表を作るとより分かりやすいです。
Webサイトを作るとこんないいことが自分にも相手（ターゲット）にもある、ということが見えるとそれを目指して制作できます。
下の表は僕が制作したときにざっくりと作った内容。コンサルティング会社のWebサイト制作です。
| Before | After | |
| 自社 | 案件受注するのは講演会からの問い合わせ、知り合いの紹介のみ
実績など紹介する資料が手薄 |
Webサイトから問い合わせがくるようにする
資料ダウンロード、実績紹介、ブログ更新で情報を提供し営業効率をアップさせる |
| ターゲット | 名刺交換したものの相手がどのような人か具体的に分からない
コンサルタントを頼みたいが実績や強みなど詳しく知りたいが知る術がない |
Webサイトをみることで
他のコンサルタントと何が違うのかすぐに分かる 実績がわかって信用できる 必要な情報が入手できる |
| Webサイト情報 | Webサイトはない
※サイトリニューアルの時は、新しくする前のサイトはどのような機能がありデザインになっているか、その問題点は何か、を書く |
機能：問い合わせフォーム、資料ダウンロード
デザイン：信頼感、先進性をイメージ 更新性：ブログ機能 |
企画書を作る
コンセプトシートを埋めてから以下の５ステップを整理すれば「企画書」になります。
- ステップ１：Webサイトの目的と目標を決める
- ステップ２：自分の特徴を洗い出す（自分を知る）
- ステップ３：Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
- ステップ４：競合分析をする（他を知る）
- ステップ５：サイトコンセプトを整理する
企画書をいきなり書き始めるよりもコンセプトシートがあればとっても楽。
「企画」整理方法については別の記事で書きましたので参考にしてみて下さい。
※ペルソナ、カスタマージャーニーについても書いてます。
ユズト お客様の実際いる案件でオリジナルサイトを企画段階から制作しました。 ・Web制作で一番初めにすることってどんなことするの？ ・実際どうやって「企画」って進めていけばいいの[…]
ユズトが作った企画書の一部をご紹介
Webデザインスクールの卒業制作課題で作った企画書の一部をご紹介します。
サイトコンセプトは１枚で書きました。コンセプトシートに整理した情報をピックアップしただけ。コンサルティング会社のWebサイトということでターゲットを中小企業の役員などに想定し見やすく、洗練したデザイン、というのを目指しています。（あとターゲットがどんな人でいつどんな時にWebサイトをみるのか、競合サイトはどんなコンテンツになっているのかは別のページで整理はしました）
ここからワイヤーフレームをどうやって作るかにつなげました。（もっとボタン配置や画像配置など書くといいですけど簡略化してます。なぜこのレイアウトなのか、をコンセプトから理屈づけたということ）
サイトマップは必要なコンテンツを競合他社のWebサイトを洗い出して拾い出し必要なものを整理して作りました。
競合優位性アピールページと情報提供ページというカテゴリーに分けてみました。
まとめ：コンセプトシートで目的を共有しよう
僕はWebデザインスクール卒なのですがそこでの卒業制作課題でWebサイトをオリジナルデザインで０から作るということをしました。
そこで最初にやったことはこの「コンセプトシート」を完成させることでした。
- コンセプトシートを作る→企画書を作る→クライアントにプレゼンする→デザイン制作＆コーディング
この流れです。
スクール卒業制作時はクライアント＝メンター講師として意見をもらいました。
つまりWeb制作、Webデザイン制作をするとき１番最初にやることが「コンセプトシートを作る」ことです。
- 何のためにWebサイトが必要で何を達成するために作るのか
をクライアント（お客さん）と意識合わせしないとズレが生じるからです。ディレクションする場合も発注するデザイナーとの意識合わせが必要。イメージだけ伝えてもうまくいきません。イメージは人によって違うから。
なんとなくイメージで作って自己満足Webサイトにしたくない、自分以外の人にも同じイメージ・目的を持ってもらいたい、そういう時にコンセプトシートは便利。
活用していきましょう！
この記事はここまでです。
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnoteです♪
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順