運用型広告に関わるWEBマーケターのみなさんの中には、クリエイティブやLPなどデザインのディレクションを兼業されている方もいらっしゃるのではないでしょうか。最近だと手軽に使える制作ツールもあるので自分でバナーを作っている方も増えてきているかと思います。

業務の中で「デザイナーさんから納品されたバナーがなんかしっくり来ない…けどどのように修正依頼を出したらいい？」、「自分でバナー作ってみたけど違和感がある。どうやってクオリティ上げたらいいのだろう？」
といった悩みにぶち当たることはありませんか。

本記事ではノンデザイナーの方・デザイン初心者の方向けに、知っておきたいデザインの4原則をご紹介します。ルールを知っておくことで、レイアウトを考える際のスピードアップや、デザイナーへのフィードバックを出すときの助けになると思います。

デザインの基本原則とは？

近接　Proximity

関連する要素同士を近づけてグループ化することです。物理的に要素を近づけることで、見た人が一瞬で情報を理解しやすくなります。

反対に関連のない要素は距離をもたせることで、意図のある余白をつくることができます。

整列　Alignment

ページ上のすべての要素を意図的に配置することです。
整列のポイントは「見えない線」でつなげること。「基準となる強い線」をみつけだし揃えていきます。
見えない線に従い配置することでお互いの要素の一体性が出て、洗練された見え方をつくりだせます。

整列方法には「中央揃え」「左揃え」「右揃え」「均等揃え」があります。

反復　Repetition

特徴的な視覚的要素を繰り返すことです。
色、線、アイコン、テクスチャー、フォーマットなどを繰り返すことで、一貫性をもたせることができます。
要素の繰り返しは「リズムをつける」ことになり、一体感と視覚的な面白さも生むことができます。

一貫性をもたせるためのスタイルやルールを「トーン＆マナー」と呼びますが、複数のページのあるカルーセル広告やWEBサイトのページなどで反復の原則がよく使われています。

コントラスト　Contrast

異なる要素の強弱をつけ階層構造をつくりだすこと、つまりメリハリをつくることです。
コントラストは情報の優先順位を明確にさせ、視線を引き付ける効果を生みます。
また要素の色、形、線の太さ、サイズ、空きなどでコントラストをつけるとページに面白みを与えることもできます。

ポイントは「大胆に差をつける」こと。
差があいまいだと要素が衝突し、何を伝えたいのかが不明瞭になってしまいます。

広告の場合はメインのキャッチコピーやCTA（コールトゥアクション）を目立たせるのが一般的ですが、「何を伝えたいか」、「どこに目線を誘導したいか」、「どんな行動を促したいのか」が広告を目にした瞬間にわかるか？をチェックするといいでしょう。

デザインの基本原則でどう変わるか？バナー制作実践

バナー広告を自分で制作すると想定し、デザインの4原則を使うとどう変わるのか順に追っていきましょう。４原則がわかりやすいようにモノクロの図で解説していきます。

STEP１：構成要素を整理する

まずバナーに載せる情報をテキストで書き出してみましょう。
この何を入れるかというテキストの情報を「構成要素」といいます。

先に「誰に何を伝えたいか」をハッキリさせておくことがポイントです。
デザインの工程で迷ったときも、ここで設計しておいたバナーの目的が作業の判断基準として役立ちます。

構成要素は5W1Hに沿って整理するといいでしょう。

• Who　だれ（ターゲット／誰に見てほしい、受け取ってほしい情報か？）
• What　なに（訴求内容・商品情報／何を届けるためのデザインか？）
• When　いつ（実施期間・期限／いつ有効な情報か？）
• Where　どこで（実施場所・配信エリア／どこで接触するデザインか？）
• Why　なぜ（目的・企画理由／なぜデザインする・情報を届ける必要があるか？）
• How　どのように （手段・方法／どのようにメッセージを届けるか？）

サンプルとしてオンラインセミナーバナーの構成要素を書き出してみます。

• Who　…実践的なSNS広告の活用方法を知りたい事業主、マーケティング業界で働く方
• What　…オンラインセミナーの開催（実務で役に立つSNS広告活用事例、現役マーケターだから知っている情報）
• When　…8月30日（金）14:00－15:00
• Where　…Meta広告配信
• Why　…セミナーの告知と集客のため／ギャプライズの認知向上
• How　…バナー広告

STEP2：優先順位をつける

先ほど書き出した構成要素に優先順位をつけます。優先順位が高い情報の文字サイズを大きく並べてみました。
今回はセミナーの内容と日付を重要な情報として優先度を高めにします。

STEP3：近接

関連している要素同士をグループ化してみます。「セミナータイトル」、「登壇者」、「日時」と「開催形式」を情報の塊として近くに配置しました。

STEP4：整列

左右の余白に全体のテキストを揃えてみます。
正方形のバナーなので中央揃えもよく使われますが、両端を揃えることで離れている要素同士もまとまりが強く感じられるようになったのではないでしょうか。

STEP5：反復

同列の要素に円形や線などで同じアイコンを使ってみましょう。
各要素にリズムが生まれて、情報が視覚で捉えられるようになったのがわかると思います。
また登壇者部分の文字は会社名を小さく、氏名を少し大きくしそれぞれサイズや並びを統一しています。

今回はすべて同じフォントを使っていますが、複数使いたいときは1～3種類ほどに絞り統一感を出すようにしましょう。同列の情報は同じフォントにするのも効果的です。

STEP6：コントラスト

メインとなるタイトル背景に帯を入れたり、文字サイズのジャンプ率（大きさの比率）をつけることで、画面全体にメリハリが生まれました。
この時にSTEP2で整理した優先順位を元に、「見た瞬間に一番伝えたい情報に目が留まりやすくなっているか」をチェックすると調整しやすいです。

またSTEP4の整列で出てきた「見えない基準の線」に合わせ、タイトル部分や日付部分も両端・高さが揃うように、テキストのサイズや文字間隔を調整してみました。

いかがでしょうか。モノクロでも十分に視認性、可読性の高い画面になりましたね。

STEP7：カラー・仕上げ

最後に弊社ギャプライズのイメージカラーであるオレンジを入れ完成です！

もっと知りたい方へ

こちらの記事も併せてぜひ読んでみてください。
経歴の長いギャプライズメンバーならではの視点で、WEBデザイナー・WEBディレクターとしてのコミュニケーションの取り方のポイントがぎゅっとまとまった、中身の濃い記事となっております。

Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント

新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法

おわりに

デザインの知識や法則を知っておくと、どこに注意を向けたらいいかの判断がしやすくなり、バナーの制作過程でなんとなく感じたことを言語化し伝えやすくなると思います。
この記事がデザイン・ディレクションをする人たちの実務に少しでも役に立てば嬉しいです。

ギャプライズでは運用型広告でのクリエイティブ施策、LPO改善支援を行っています。
デザイン・クリエイティブでのお悩みがある方はぜひ気軽にお問い合わせください。

※この記事の内容は書籍『ノンデザイナーズ・デザインブック[第4版] ／Robin Williams 著／吉川典秀 訳／株式会社マイナビ出版』を参照しています。