さまざまなクリエイティブを制作してきたなかで、
最低限なにに注意し作っているか、色・フォントに着目しまとめました。
色
デザインを始める際 ベースカラー、メインカラー、アクセントカラーの最低３色を決めることで、
全体のデザインの統一感をキープできます。
- ベースカラー：最も大きな面積を占める基本となる色(余白や背景・明度の高い色、淡い色・無彩色)
- メインカラー：印象を決定づける色(キャッチコピーなど ベースカラーより明度の低い色)
- アクセントカラー：メリハリをつけるための一番目立つ色(ボタンなどに使用)
例1)
ベースカラー：ペールブルー/メインカラー：ターコイズブルー/アクセントカラー：イエロー
例2)
ベースカラー：ブルー/メインカラー：ホワイト/アクセントカラー：マゼンタ
与えたい印象によってイメージされるカラートーン(明度・彩度)が異なります。
(「誠実さ・信頼性」を強調したいのであれば彩度の低い青、「安らぎや癒し、平和」を印象付けたいなら明度の高い緑など)
バナー、LPにかかわらず商品パッケージやLP、会社のロゴなどから抽出して作成することもしばしばですが、 すべてそのまま使うのではなくトーンを変えて使用することでイメージを壊さず、リズムのあるデザインになります。
—ポイント—
- 黒(#000)はコントラストが強く目の疲れさせてしまうので極力使わず、 メインで使うカラーから明度を落としたものや黒に近いグレーを使うことでコントラストの差をなくすことができます。
- 文字にかけるドロップシャドウは背景と同系色(濃いめ)で設定し、X 軸オフセットと Y 軸オフセットともに小さくすると可読性が下がりません。
- ドロップシャドウのぼかしを０に設定し、X 軸オフセットと Y 軸オフセットをずらしたポップなデザインも流行しています。
- テキストや背景、シェイプの、のっぺりとした印象を回避するには同系色グラデーションが効果的です。
- シンプルすぎると感じたときは、ピクスタで質感テクスチャーをDLし、乗算やスクリーン効果を合成すると一気に華やかになります。不透明度は20％程度に抑えます。
フォント
＜フォントの特徴＞
ゴシック体
- シンプルで現代的
- 白文字にドロップシャドウでも充分タイトル映えします
- 文字線の幅が一定で、視認性が高い
- 配置がおさまりやすくバランスが良い
- おすすめフォント→「FOT-筑紫A丸ゴシック Std」「游ゴシック」「A P-OTF 秀英丸ゴシック StdN」
明朝体
- 飾りがついてる(ウロコ)
- 細めは柔らかなイメージ、太めの明朝は迫力とインパクトを演出できます。
- はらいの部分が細くなり、可読性が高い
- 長文に良い
- おすすめフォント→「A-OTF 黎ミンY10 Pro」「しっぽり明朝」「うつくし明朝」
—ポイント—
- ウェイト(太さ)の種類が多いものを選んだ方が、その後の強調などの編集が手軽です。
- デザイン性の高いフォント(手書き風や装飾多めなフォントなど)はウェイトの種類が少なく編集の手間もかかるため、メインには不向き(UGC風を除く)です。ワンポイントに使うことでデザインのアクセントになります。
- 数字の表記は欧文書体(英語フォント)を使うのがおすすめです(DIN Futuraなど)。
- 漢字を大きく、ひらがなを小さく、「ー」や「～」は90～80％に小さくすると読みやすく、整って見えます。
- カーニング(文字の間の空間の調整)は、句読点やカギかっこ、カンマの前後に必要です。
おわりに
簡単ではありますが、以上がデザインする際に最低限意識している細かなポイントになります。
ノンデザイナーの方々がバナーを制作する際に参考にしていただけたら幸いです。