WEBディレクター必見!”決まる提案書”作成のデザインテクニック

WEB制作・開発実例・コラム
営業
2017.08.01
2019.01.31
「提案内容は自分の方がいいのに…決まらなかった」 社内コンペや競合他社とのコンペの際、こんな悔し涙を流した経験はありませんか? 企画書や提案書はあくまで内容が全てです。構成などについてまとめた記事もたくさんありますね。 そうです、中身がないものは見た目が良くても魅力はありません。 けれど、中身が同じぐらい魅力的な2社から1社だけパートナーを選ぶとしたら? 丁寧で綺麗な見た目の方が好感度は高いのではないでしょか。 ここでは「提案内容は自分の方がいいのに…」と思わない為に、すなわち、デザイン部分で”よく見えるコツ”をご紹介していきます。 特にみなさん悩みやすい色使いのポイントは、サンプルをいくつか用意したので、参考にしてみてください。 →”決まる提案書”の配色サンプルをチェック

コツはたった3つ!

一口に企画提案書と言っても、スライドで見せるものなのか、書面で配るものなのかと言った媒体面の違いや、1ページに入れられる情報量の違いなど、案件によって様々かと思います。 こういった条件にとらわれない、どのタイプにも共通のデザインのコツをまとめていきます。 コツは文字ブロックたったの3つです。

1.とりあえず大きくしてみましょう!文字のジャンプ率

文字におけるジャンプ率とは、すなわち本文の文字の大きさに対する、見出しの大きさです。 上記のよう本文の文字の大きさ14pxに対して、中見出しと大見出しの大きさの比率が低い場合、一般的には「落ち着いている」「高級感がある」と言われます。 一方、比率の高い場合は「勢いがある」「若者向け」と言った印象を与えます。 ですが、私はジャンプ率が高い方をオススメします! 「何かおかしい」「何かダサい」、、そう思った時はまず本文に対して見出しの文字の大きさを思いっきり大きくしてみてください。見出しがより見出しっぽくなり、本文も読みやすくなります。

2.これでもうハズさない!配色のコツ

惜しい提案書によくある、色の使いすぎ。心当たりはありませんか? 「プラン毎にわかりやすく色を変えたい」「見やすい表を作りたい」 良くしたいだけなのに、段々まとまりがなくなってくる色使い。 “ハズさない”配色のコツがあります!基本〜応用3まで一気にご紹介します。 ざっと並べましたが、応用2の 「メインカラーの明度違いの色を増やす」が一番ハズさなくてオススメです。 基本の、無彩色と有彩色1色が一番無難ではありますが、作り進めると意外にこのルールは崩壊しやすいです。前述したように、色ってけっこう色々使いたくなるんですよね。 そんな時はメインカラーの明度違い、つまりグラデーションカラーを使ってみてください。絶対ハズしません。

応用2と応用3は、もっと色を使いたい!という方の為のコツになります。 こちらはいくつか配色サンプルを用意しました!色をもっと使いたいあなたは是非参考にしてください。

WEBサイトの配色例をいくつかまとめた記事も参考にしてみてください!
カラー別にみてみる!WEBサイトにおける配色パターン

3.より見やすく!ブロックを作りましょう

ブロックとはかたまりのことです。 下の例をご覧ください。 「ブロックを作った例」の青い部分がブロックになります。 どこからどこまでがひとつのブロック(かたまり)なのか まずはこれを意識してください。 その上で具体的な見せ方のコツはズバリ ひとブロックの周りに間[A]中見出しと本文の間[B] ちなみに、このAの間を広めに取っていくとスタイリッシュな感じになります。(文字量は行間にもよりますので一概には言えませんが)

まとめ

いかがでしたか? 作成した提案書を前に「何かおかしい」「何かダサい」と感じても、何が原因なのか、どうして良いかわからない方に向けた、提案書作成のデザインテクニックをご紹介しました。 提案書は奥深く、もっともっと見せ方の部分でポイントがあるのですが、 まずは文字ブロックの3点、是非チェックして実践してみてください。 また、今後も応用編としてまとめていければと思います!

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)