digilog.blog

見やすい企画書 - 覚えておくと役立つ10の法則

2009/12/10(木)

「パワポで企画書を作るのが苦手!」
「せっかく作ったのに上手くまとまらない!」
そんな悩みを抱えていませんか?

私はウェブ制作に関わっていますが、ホームページを作る時の考え方やノウハウは、企画書を作る時にも活かすことができます。今回はウェブ制作者目線で、見やすい企画書の作り方を説明していくので、興味のある方は参考にしてみて下さい。

雛形を作る
・ヘッダー/フッター領域を押さえる
・角を押さえる
・テーマカラーとフォントを決める

基本的なテクニック
・色数は増やさない
・原色は避ける
・ガイド/グリッドを活用する

応用編
・アイコンで見せる
・グラデーションで見せる
・巨大フォントで見せる
・ホワイトスペースを入れる

※下記説明は、パワーポイントの操作が出来るということを前提に進めていきます。
ウェブサイトと同様に、企画書は人に見せる事を前提として作るものです。情報さえ載せておけば大丈夫と思っていても、読まれなければ意味がありません。また、たかが資料だと思って、デザイン面にこだわらないと、「素人っぽさ丸出し」の見た目になってしまいます。これではせっかく価値のある情報を載せても、説得力に欠けてしまいます。特に、初めての営業や重要な打ち合わせなどで、見せることを意識していない資料を出すという行為は、それだけで損をしている可能性があります。

しかし、クリエイター職でもない人が、企画書にデザイン性を持たせるといっても限界があると思います。なぜなら、「どうやったら綺麗に見せられるのか」という手段を知らないからです。

今回は、ウェブ制作で使われている「手段」の一部を紹介します。もちろん数ある手段の中の一つでしかありません。物づくりは、こうした考え方のレパートリーを増やしていくことで、自然と完成度が上がっていくものです。是非自分のものにしていって下さい。

雛形を作る
・ヘッダー/フッター領域を押さえる
・角を押さえる
・テーマカラーとフォントを決める

さて、まずは企画書の雛形を作ります。どんなテーマを扱うのか、どこに対して提出するのかを考えて、それ合いそうなものをイメージしていきます。



とても殺風景な表紙ですね。さすがにこれでは本番に使う事はできません。それでは、さっそくマスターを開いて雛形を決めていきましょう。


ウェブページには、ヘッダーとフッターという領域があります。Yahoo!で言えば検索窓の上のロゴが表示されている部分をヘッダー、一番下までスクロールしていって「Copyright (C)」と表記されている部分がフターになります。まずはヘッダーとフッターの領域を押さえることで、真ん中のコンテンツの領域を確保しましょう。人は天井と地面が安定しているデザインを見ると安心するものです。見ている人に安心感を与えてあげましょう。


次に角を押さえます。上の例では、右側の上下に要素を設置しました。特に四つ角全てを押さえる必要はありませんが、そこは全体のバランスを見て配置します。ウェブデザインもそうですが、部分で見るのではなく、全体で見たときにバランスが取れている状態を目指すと上手くいきます。ついつい作りこんでいると顔が画面に近づいてしまいますが、そんな時は一息入れて、少し画面から離れた状態で、自分が作ったものを見てみましょう。
この時、じっくり見るのではなく、パッと見の印象で不自然でないかを確かめます。


さて、大体の雛形が出来上がったら、この企画書のテーマカラーを決めます。基本的には雛形に設置したロゴカラーや仕切り線の色に合わせて考えます。ここで大事なのは、背景(紙)の色と文字の色という2色の存在を意識することです。殆どの場合、背景は白ですから、必然的に読みやすい文字色として黒が選ばれます。そしてテーマカラー1色を足すと、もう3色使っていることになります。

ウェブデザインの場合、必要以上に色数を増やさないことが鉄則になっています。最低限必須の色を決めて、後は必要に応じて追加していきます。初めに使う色、使わない色を考えておくことは重要です。必要であれば追加していけば良いのですが、それと「何も考えていない」ことは大きく違います。

ここでフォントも決めるのですが、後から調整する場合もあるので、ひとまず「仮」で決めておきます。フォントも色数と同じで、沢山の種類を使うことはおすすめできません。基本的には1種類、多くても2種類にしておきましょう。

基本的なテクニック
・色数は増やさない
・原色は避ける
・ガイド/グリッドを活用する


さて、表紙は最後に調整すれば良いので、中身を作っていきましょう。まず見出しの部分です。普通にフォントを大きくして目立たせても良いでしょう。よく見出しの文字色を変えて目立たせようとする場合がありますが、あまりおすすめできません。テーマカラーを決める際にすでに3色使っています。見出し用に新しい色を使うと、後々色数が増えてきたときにごちゃごちゃしてしまいます。ページが増えてくるとだんだんと見出しの色が気に食わなくなって、結局全部変えるハメになります。

色数は必要以上に増やさない。これは重要なので覚えておいて下さい。


そんな時は、このように見出しの部分に背景色を付けて、白抜き文字で表現してみましょう。背景の帯はマスターで雛形として設置すると作業が楽になります。


さて、ある程度コンテンツ部分が埋まってきたら配色を見ていきましょう。「色数は増やさない」、「原色は避ける」という部分に気を使わないと、途端に安っぽい資料になってしまいます。特に図形を配置する時に原色ベタ塗りを多用する人がいます。素人っぽい印象から抜け出すには、まず色数を減らすと同時に、色の付いた面積を減らしてみましょう。
私は、基本の3色(紙の色、文字の色、テーマカラー)に、目立たせる色としてアクセントカラー1色を組み合わせた4色を決めて作り始めることが多いです。もちろん4色以外使ってはいけないということではありませんが、あらかじめ決めておくことが大事です。


それを踏まえた上で、色を付け変えてみました。地味に見えるかもしれませんが、自然と小見出しに目が行くようになっています。色は読む人の目の動きを補助する役割もあるので、沢山色を使うとかえって分かりづらくなってしまうということを覚えておきましょう。


さて、雛形を決める際にテーマカラーとフォントを決めました。ある程度コンテンツを作ったところで、もう一度見直してみましょう。時には初めに決めたものを大胆に変更する選択も必要になってきます。「なんか違うな…」と思ったら、面倒くさがらずにやってしまいましょう!


フォントを変えるだけで見た目がぐっと引き締まるときがあります。上記はWindowsの基本フォント「MS ゴシック」から「HGP創英角ゴシックUB」に変えたものです。「HG創英角ゴシックUB」系はMicrosoft Officeとともにインストールされるフォントなので、パワポを使うのであれば自動的に使えるようになっているはずです。フォントは見た目を良くする上でとても重要な役割だということが良く分かります。


次に「ガイド/グリッド」を活用してみましょう。配色も含めて、少し極端な例を作りました。まずメニュー操作で画面にガイドかグリッドを表示させます(今回はガイド)。センターラインを見た時に、下段要素の配置バランスが悪い気がします。また、文字の配置も縦のラインに合わせた方が良い気がします。


見出しの位置、文字の配置、オブジェクトの配置をガイドやグリッドを使って綺麗に配置していくと、素人っぽさがなくなります。細かい話になってしまいますが、1pxのずれが気持ち悪かったりするものです。ウェブデザインでも、1px単位で調整する時があります。配置をしっかりやるのとやらないのでは、完成度に大きく違いが現れるのです。

応用編
・アイコンで見せる
・グラデーションで見せる
・巨大フォントで見せる
・ホワイトスペースを入れる


応用編は、分かりやすく言えば小手先のテクニックです。基本を押さえた上で、もう少し凝った演出をしたい場合に役立ちます。

アイコンは、直感的にその情報が何を意味しているのかを認識させる効果があります。上の例では、パソコン、携帯電話、iPhoneに関係のある文章が書いてあるんだな、ということが直感的に分かるようにしています。

グラデーションの使い方としては、図形の背景色として使うことで、ベタ塗りでは出せない立体感や、高級感を演出します。また、相手の目線を意図的に誘導したい場合にも用いられます。上の例では、真ん中にある青い矢印が下方向を指しているので、グラデーションを使って下へ向かうほど濃い色に変化するように設定しています。こうすることで、自然と目線が下に向かっていく効果を生みます。また、各文章が収まっている図形にも、薄いグレーのグラデーションを設定しています。

巨大フォントは、強調したい言葉やキーワードを大胆に目立たせたい場合に効果的です。あまり使いすぎると、効果が無くなってしまうので気を付けましょう。

デザインで使われるホワイトスペースとは、何も無い空白の領域を意味します。空白があると、つい文字や図形で埋めてしまいたくなります。しかし、時には引き算も必要です。空白を上手く利用することでバランスの取れたデザインに仕上がります。見せたい物の周りには、「あえて何も置かない」という選択肢もあるということを覚えておきましょう。

最後に
いかがでしょうか?
ウェブ制作では「ユーザービリティ」という言葉が良く出てきますが、企画書も最終的には上司やクライアントが見るものです。企画書を作る際、「見る人のために作る」という姿勢で臨めば、自然と「どう見せたら分かりやすいか」を考えるようになります。面倒くさがって作った企画書は、やはり完成した時に作った人の気持ちが現れているものです。

是非楽しんで企画書を作ってみて下さい!


※サンプルの企画書画像の内容はブログ用として適当に作ったものです。中身はあまり気にしないでください。
■コメント
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]