【配色の黄金比】Webデザイン1年生がバナートレースやってみました #3

Webデザイン

こんにちは。Halcanaです。

広告バナートレース第3回です。今まではアパレル系でしたが今回はLOFTのバナーです!

振り返り

今回は60分でできました!比較的早くできたと思います。だんだんPhotoshop操作にも慣れてきたのかな?フォントを見つけるのにだいぶ時間がかかりましたが、配置やあしらいはそこまで複雑ではないのでサクッとできました。

デザイン分析 – 配色

今回の着目ポイントは配色です。

一般的に、配色を考えるときは色を3色に絞ると散らかりすぎずまとまったデザインになります。さらに、3色は次の比率で配色するとバランスが取れます。

  1. ベースカラー:70%
  2. メインカラー:25%
  3. アクセントカラー:5%

今回のLOFTのバナーの配色は、

  • ベースカラー:赤(#E70012)
  • メインカラー:ゴールド(#E1C360)
  • アクセントカラー:白(#FFFFFF)

となっています。面積比も、だいたい70:25:5になっているかと思います。

その結果、赤・ゴールド・白というかなり派手な配色ながらも、全体としてはバランスが取れており読みにくい印象は与えません。通常、アクセントカラーは強いはっきりした色が選ばれることが多いですが、このバナーではベースカラーとメインカラーが強い色味なので逆に白がアクセントの役割を果たしています。
また、LOFTのロゴは普段黄色と黒ですが、このバナーでは配色に合わせて白に変更されていますね!

まとめ

今回はLOFTのバナーの配色に注目しました!強いカラーを使っても配色バランスに気をつけると見やすいデザインになります。デザインを考えるときは基本の比率70:25:5を忘れないようにしましょう!

次のバナートレースはこちらから!

コメント

タイトルとURLをコピーしました