大学生にバナー制作を教えてみた #12ベース・メイン・アクセント・白抜き

大学生にバナー制作を教えてみた #12ベース・メイン・アクセント・白抜き

今回は、僕の高速配色必勝法である「白抜き」をお伝えします(笑)この「白抜き」をとりあえず試してから、違う配色を行うのが吉です^^

カトウヒカルの顔写真

1.配色の比率

美しい配色の割合は「70%・25%・5%」と言われています。

それぞれを「ベースカラー」「メインカラー」「アクセントカラー」と呼びます。

配色の比率

2.白抜き文字と背景色

配色が苦手な僕がまず試す方法に「白抜き文字が置ける背景色を探す」というものがあります。

白抜き文字と背景色

まずは、高い視認性を確保できる背景色を探します。

3.アクセントカラーは黄色

この白抜きの方法で活躍するアクセントカラーは「黄色」です。

白に近い色なので、白抜きできる色の上に置くと、白と同程度の視認性が確保できます。

アクセントカラーは黄色

4.2パターン作れる

実際にサンプルバナーを作ると、以下のように2パターンの配色を作る事が可能です。

2パターン作れる

今回は青色で作成しましたが、赤や緑、紫やピンクでも、白抜き文字を置くことが出来れば、他の色でも使うことが出来ます。

5.まとめ

ベース・メイン・アクセント・白抜きのまとめです。

ベース・メイン・アクセント・白抜き

  • 美しい配色比率は「70%・25%・5%」
  • 白抜きが置ける背景色を探す
  • アクセントカラーは「黄色」
  • 2パターンの配色が作れる

「#12ベース・メイン・アクセント・白抜き」を撮影していますので、是非ご覧ください。

6.動画を見る

この記事をシェアする

ライター紹介

カトウヒカルの顔写真

カトウヒカル

福岡で活動するフリーランスWEBデザイナー。「ひとつひとつを丁寧に」をコンセプトに、WEBデザイナーの役に立つコンテンツを発信しています。

SNSでフォローする