運用型広告に関わるWEBマーケターのみなさんの中には、クリエイティブやLPなどデザインのディレクションを兼業されている方もいらっしゃるのではないでしょうか。最近だと手軽に使える制作ツールもあるので自分でバナーを作っている方も増えてきているかと思います。業務の中で「デザイナーさんから納品されたバナーがなんかしっくり来ない...けどどのように修正依頼を出したらいい?」、「自分でバナー作ってみたけど違和感がある。やってクオリティ上げたらいいのだろう?」といった悩みにぶち当たることはありませんか。本記事ではノンデザイナーの方・デザイン初心者の方向けに、知っておきたいデザインの4原則をご紹介します。ルールを知っておくことで、レイアウトを考える際のスピードアップや、デザイナーへのフィードバックを出すときの助けになると思います。Proximity関連する要素同士を近づけてグループ化することです。物理的に要素を近づけることで、見た人が一瞬で情報を理解しやすくなります。反対に関連のない要素は距離をもたせることで、意図のある余白をつくることができます。Alignmentページ上のすべての要素を意図的に配置することです。整列のポイントは「見えない線」でつなげること。「基準となる強い線」をみつけだし揃えていきます。見えない線に従い配置することでお互いの要素の一体性が出て、洗練された見え方をつくりだせます。整列方法には「中央揃え」「左揃え」「右揃え」「均等揃え」があります。Repetition特徴的な視覚的要素を繰り返すことです。色、線、アイコン、テクスチャー、フォーマットなどを繰り返すことで、一貫性をもたせることができます。要素の繰り返しは「リズムをつける」ことになり、一体感と視覚的な面白さも生むことができます。一貫性をもたせるためのスタイルやルールを「トーン&マナー」と呼びますが、複数のページのあるカルーセル広告やWEBサイトのページなどで反復の原則がよく使われています。Contrast異なる要素の強弱をつけ階層構造をつくりだすこと、つまりメリハリをつくることです。コントラストは情報の優先順位を明確にさせ、視線を引き付ける効果を生みます。要素の色、形、線の太さ、サイズ、空きなどでコントラストをつけるとページに面白みを与えることもできます。ポイントは「大胆に差をつける」こと。差があいまいだと要素が衝突し、何を伝えたいのかが不明瞭になってしまいます。広告の場合はメインのキャッチコピーやCTA(コールトゥアクション)を目立たせるのが一般的ですが、「何を伝えたいか」、「どこに目線を誘導したいか」、「どんな行動を促したいのか」が広告を目にした瞬間にわかるか?をチェックするといいでしょう。■デザインの基本原則でどう変わるか?バナー制作実践バナー広告を自分で制作すると想定し、デザインの4原則を使うとどう変わるのか順に追っていきましょう。4原則がわかりやすいようにモノクロの図で解説していきます。■STEP1:構成要素を整理するまずバナーに載せる情報をテキストで書き出してみましょう。この何を入れるかというテキストの情報を「構成要素」といいます。先に「誰に何を伝えたいか」をハッキリさせておくことがポイントです。デザインの工程で迷ったときも、ここで設計しておいたバナーの目的が作業の判断基準として役立ちます。構成要素は5W1Hに沿って整理するといいでしょう。(手段・方法/どのようにメッセージを届けるか?)サンプルとしてオンラインセミナーバナーの構成要素を書き出してみます。■STEP2:優先順位をつける先ほど書き出した構成要素に優先順位をつけます。優先順位が高い情報の文字サイズを大きく並べてみました。今回はセミナーの内容と日付を重要な情報として優先度を高めにします。関連している要素同士をグループ化してみます。「開催形式」を情報の塊として近くに配置しました。左右の余白に全体のテキストを揃えてみます。正方形のバナーなので中央揃えもよく使われますが、両端を揃えることで離れている要素同士もまとまりが強く感じられるようになったのではないでしょうか。同列の要素に円形や線などで同じアイコンを使ってみましょう。各要素にリズムが生まれて、情報が視覚で捉えられるようになったのがわかると思います。登壇者部分の文字は会社名を小さく、氏名を少し大きくしそれぞれサイズや並びを統一しています。今回はすべて同じフォントを使っていますが、複数使いたいときは1~3種類ほどに絞り統一感を出すようにしましょう。同列の情報は同じフォントにするのも効果的です。■STEP6:コントラストメインとなるタイトル背景に帯を入れたり、文字サイズのジャンプ率(大きさの比率)をつけることで、画面全体にメリハリが生まれました。この時にSTEP2で整理した優先順位を元に、「見た瞬間に一番伝えたい情報に目が留まりやすくなっているか」をチェックすると調整しやすいです。STEP4の整列で出てきた「見えない基準の線」に合わせ、タイトル部分や日付部分も両端・高さが揃うように、テキストのサイズや文字間隔を調整してみました。モノクロでも十分に視認性、可読性の高い画面になりましたね。■STEP7:カラー・仕上げ最後に弊社ギャプライズのイメージカラーであるオレンジを入れ完成です!■もっと知りたい方へこちらの記事も併せてぜひ読んでみてください。経歴の長いギャプライズメンバーならではの視点で、WEBデザイナー・WEBディレクターとしてのコミュニケーションの取り方のポイントがぎゅっとまとまった、中身の濃い記事となっております。Webデザイナーに愛を込めて。■おわりにデザインの知識や法則を知っておくと、どこに注意を向けたらいいかの判断がしやすくなり、バナーの制作過程でなんとなく感じたことを言語化し伝えやすくなると思います。この記事がデザイン・ディレクションをする人たちの実務に少しでも役に立てば嬉しいです。ギャプライズでは運用型広告でのクリエイティブ施策、LPO改善支援を行っています。デザイン・クリエイティブでのお悩みがある方はぜひ気軽にお問い合わせください。訳/株式会社マイナビ出版』を参照しています。香菜子いくつかの会社でWEBメディアの編集、ライター、事務を経て2017年にギャプライズに参加。「この商品は20~30歳の仕事に忙しい女性向けの商品ですので〇〇訴求がいいと思います。根拠は〇〇で...」といった会話は、日常的に行われ...2024/08/20#マーケティング全般#サイト改善AppsFlyerとは?機能や活用法、Adjustとの違いを徹底解説モバイルアプリの広告キャンペーンの効果を細かく分析して、高精度な広告施策を展開したい。このような要望をお持ちの方は多いのではないでしょうか。本記事では、モバイルアプリの広告測定ツールであるAppsF...2024/06/28#広告最適化コホート分析とは?リピーターやファンを獲得するための活用方法コホート分析とは、ユーザーを属性や条件で分類し、グループごとに動向を分析する手法のことです。