【2日目】バナー作成の流れ

まずは、昨日の復習から、
デザイン4原則
近接、整列、反復、コントラスト（対比）。

では、今日の本題。

デザイン4原則の勉強をして、ふむふむ。と理解する→いざデザイン！→4原則できてないやん。

を繰り返す。

そこから脱出するために、コレまで我流で進めてきたデザインの流れを見直すため（そして早く上手く慣れれば最高！）
「バナー作成の流れ」をテーマにgoogleくんに聞いてみた。
本当はサイトデザインの流れを知りたいけど、まずは小さくバナーから。

まずは、私にかけていた重要なポイント、「レイアウト」と「配色」を分けて考えること！

では、流れ。

１．訴求コピーを考える

バナーはユーザーが一瞬で意味を理解し、更に"当事者意識"を持ってもらうことが重要。端的にメリットを伝えるコピーが必要。

２．とりあえず１で考えたコピーをおいてみる

まずは、一旦必要な構成要素を全て置くことが大切。すべて置かずにデザインを初めてあとから要素を追加することがないようにね！あと、ココで配色とかレイアウトとか余計なことを考えない。無心で置く！

３．全ておいた要素の優先順位をつける

「一番伝えたいことはなにか」を考え順位を付ける。そして、一番伝えたいことの文字を大きく目立つようにする。あくまで、一番伝えたいことは「ひとつ」。訴求を明確にすることはとても大切。

４．まずは手描きでレイアウトを決定

優先順位が決まったらまずは「手描き」でレイアウトを考える。いきなりPCへ向かうと要素をどこに配置するか考え過ぎたりするので。

５．PC上でまずはモノクロでレイアウト

PC上でのレイアウトはまずはモノクロで。フルカラーで進めてしまうと、配色とレイアウトで迷い無駄な時間がかかるので。まず、配色は考えず、レイアウトのみを組んでいく。

※要素が多い時はグルーピングすべし。

６．サイトイメージに合わせて配色

モノクロでレイアウトが組めたら、配色。サイトのカラーや、リンク先のサイトで使われている色を何種類か抽出して配色するとよい。実際に使用している配色を使用することで無駄に配色が増えるのを防げるだけでなく配色に悩む時間も減らせます。また、ユーザーが全く違う配色で戸惑うことも防げます。

７．最後のモノクロで視認性チェック

完成後、モノクロにして再チェック。モノクロで読みづらい場合は、フルカラーでも視認性が低い可能性が高い。

という感じ。この流れで大体４５分。

次回作成の時に早速実行してみよう！