webサイト企画書や提案書の作り方とテンプレート集

こんにちは！

ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズのCTOの柳澤（やなぎさわ）です。

弊社は、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っている会社です。

こちらのジョブウィズでは、企業の新規事業開発担当者の方や、システム開発責任者の方、事業責任者の方達に向けて、事業開発のコツや、自社プロダクトやWebサービスを立ち上げる際にポイントや注意点について、弊社ノウハウを包み隠さずにお伝えしています。

私自身多くのwebサイト企画書を見てきた、作ってきた立場として、webサイト企画書・提案書について気づいたことをお話しします。

今更お伝えすることでもありませんが、ビジネスの世界では物事が具体的な実像を伴って動き出す最初の一歩は企画書・提案書です。

また、どれほど素晴らしいアイデアでも企画書がイマイチでアイデアが伝わらなければ、そもそも予算も付かずに廃案となることもしばしばです。

それはwebサイトについても同様。そこで今回は、正しいwebサイトの企画書・提案書の作り方を整理しておきましょう。

わかりやすい企画書・提案書の構成

企画書を構成する項目一覧

まずはwebサイトにおける企画書の構成要素を順番に確認していきましょう。

①表紙

企画書のトップにくるのは表紙です。

企画書の表紙については、企業ごとにフォーマットが決まっていると思うのでそれを利用すれば問題ありません。

②企画の概要

表紙の次に来るのは、企画の概要です。

誰がなんのためにこの企画書を作ったか、この企画を受けて構築されるwebサイトで何を実現したいのか、企画の目的を明確にします。

③サイトマップ

続いて来るのはwebサイトの階層を明らかにするサイトマップです。

トップページは当然として、会社の組織図のページ、経営者の紹介ページ、業務内容紹介のページ、求人のページなど、必要とされるページが網羅的に表現されている必要があります。

④ワイヤーフレーム

どんなページが必要か明らかにしたならば、それぞれのページがどんな構成になっているかも明らかにする必要があります。

そのための資料がワイヤーフレームです。単にワイヤという方もいます。

会社によってはサイト構成図、ラフ案、レイアウト図なんて言い方もします。

いずれにせよ、右上に会社のロゴマークを表示させるだとか、左上にGoogleのサイト内検索を配置するなど、絵図で画面の構成を明らかにするものです。

最近のトレンドとして、トップページは専用の画面構成にし、それ以外のページは共通の構成にしているwebサイトが多いです。

そのためワイヤーフレームもトップページ用のワイヤーフレームとそれ以外のページ用の汎用ワイヤーフレームの二つ用意しておくことが多いです。

その他にも、企画書そのものに組み込まれない場合もありますが、企画書の一部、あるいは添付資料として一緒に用意しておくと良いものもお伝えします。

企画書・提案書をよりよくするプラスα

・ロードマップ

一つ目は、今後のおおよそのロードマップ(工程表)です。

提案の時点で、webサイトが完成するまでどの程度の時間がかかり、いつサービスインできるかおおよその目途を示しておかなくては行けません。

極端な話、4月から発売する商品の宣伝のためのサイトなのに、公開できるのは5月以降だと、いくら完成度の高いwebサイトであってもまったく価値がないわけです。

・概算見積もり

また予算を明らかにする概算見積もあった方が良いです。

概算見積もりは企画書とは別に概算見積書として一枚のドキュメントにする場合もあります。いくらアイデアが画期的で素晴らしいものでも、採算度外視だと意味がありません。

その企画にいくらの予算が必要なのか明らかでなければ、決定権のある方も判断しようがありません。

今あげた二つの項目も付け加えるようにしましょう。

次にwebサイトの企画書を作る際の注意点について見ていきます。

webサイトの企画書・提案書を作るときの注意点

webサイトの企画書に必要なモノがだいたいわかったところ、次は企画書を作るときの注意点をお伝えします。

注意点は極論一つです。

ITエンジニアではなくてもわかるような企画書作成

webサイトの企画書を作るあなたはITエンジニアとしての能力を持っていると言えますが、企画書を見る側は経営者として優秀な方だとしても、ITエンジニアの能力があるとは限りません。

従って、企画書はITエンジニアでない人でも分かりやすい内容にする必要があります。

ITエンジニアでない人でも分かりやすい内容にするために気を付けておきたいポイントはいくつかあります。

①専門用語を使いすぎない

まずは専門用語を使い過ぎないことです。

例えば、企画書の構成要素の一つであるワイヤーフレームですが、ITエンジニアでない方の場合「ワイヤーフレーム」という単語だけでどんなものかイメージするのは難しいでしょう。

「ワイヤーフレーム(画面構成図)」といった風に言い換え表現を併記するのも有効です。

②図を用いる

また、図表化できるものについては図表にするなどの工夫も大切です。

ワイヤーフレームやロードマップは図表化した方がわかりやすいことが多いです。

適宜図を用いて、一目でわかりやすくしましょう。

webサイト企画書・提案書のテンプレートが見れるwebサイトを紹介！

企画書について書き慣れていない方は、すでに出来上がったものを参考にすると良いでしょう。

例えば、

• Alle(アレ)
• BB-WAVE
• 販促会議 企画コンペティション
• SlideShare

といった、企画のプレゼン提案資料・企画書の収集や公開を行っているサイトがあります。

これらのサイトにアップロードされているものの大半はwebサイト用の企画書と異なるため直接のお手本にはなりませんが、企画書の展開の仕方について学ぶポイントはいくつかあるはずです。

是非調べて見てください。

より直接的にwebサイト企画書の例としては、「ascii.jp」の企画提案書の作成(http://ascii.jp/elem/000/000/560/560922/)が参考になります。

また、 無料でテンプレートやフォーマット、サンプルをダウンロードできる「bizocean」にて、webサイト企画書テンプレートをダウンロードすることができます。

まとめ

今回はwebサイトの企画書について見てきました。

webサイトの企画書はなにを目的としていて、どういった目標を達成できれば良いか明らかにする、という意味では一般的なプロジェクトの企画書と同じです。

一方で、サイトマップやワイヤーフレームといった、webサイトをどういった構成にするのかを明らかにするための資料は他の企画書にはないものです。

いずれにせよ、ITエンジニアの方はもちろん、ITエンジニアでなはい方が見ても分かりやすい内容にするのが大切です。