にせもんのホンモノ

4MINI好きブロガー"にせもん"による雑記ブログ

色彩デザイン|メイン色・サブ色・差し色で個性を出す

f:id:nisemon_honmono:20200509172658j:plain

色彩デザインの基本を学ぶ

今回は知っておくと役に立つ基礎知識「イメージカラー」についてです。
色彩に関する基本となりますので、デザインを始めたばかりの方、これから勉強したい方の参考になれば幸いです。

 

 

イメージカラーを学ぶ 

デザインには欠かせない色彩や配色。

色選びはWEBサイトやブログを大きく印象づけるので迷うことも多いでしょう。

今やデザインテーマ等を選べば簡単にセンスあるデザインが使えるようになりましたが、一方で個性を出すにはHTMLCSSを学ばなければ難しいところがあります。

 

もっと簡単に個性を出せないか? 

 

わたしはイメージカラーに注目しました!

今のデザインは貴方のイメージに合っていますか? 

今回はイメージカラーを学ぶことを中心に紹介いたします。

  

STEP1:配色の基礎知識を学ぶ

まずは「配色」の基礎を学びます。 

配色は主にメイン色・サブ色・差し(アクセント)色の3つで構成されますが、この3つの要素を正しく理解することが配色の基礎であり第一歩です。

それぞれの役割は以下のとおり。

  • メイン色:全体のイメージを作り出す役割
  • サブ色 :メイン色を補う役割
  • 差し色 :全体を引き締めたり目を引く役割

「メイン 7:サブ 2.5:アクセント 0.5
まずはこの割合をしっかり覚えましょう!

 

■メイン色 1つテーマ色を決める。
■サブ色 メイン色に近い色をもう1色。
■差し色 アクセントとして補色周辺をつかう。

 

要チェック

配色に迷ったらコレ!
配色割合やイメージまで丁寧に解説されています

 

STEP2:「メイン色」を決める

3つの配色を決めるため、まずはメインとなるカラーを選択します。
メインカラーが決まれば残りの色は自ずと分かります。

 

メイン色は「イメージカラー」となるため、WEBサイトやブログの方向性を考えてしっかり見つめ直すことが重要です。

 

なぜなら、色彩は心理的な意味を持つため! 

ここはしっかり覚えておきましょう!

 

f:id:nisemon_honmono:20190129120116g:plain

 

例えば、当ブログ「にせもんのホンモノ」の場合。

掲載記事の傾向を考え、上図を参考にイメージを表すキーワードを抽出します。

地域のイベントやマラソン参加 = アクティブ

個人の視点から意見を語る = 楽しい

役に立つ情報を紹介する = 好奇心

 

当ブログは3種類のイメージカラーになりました。

  • 赤 「活力・情熱・興奮」など強いエネルギーをイメージする色
  • 橙 「温かみ・親近感・喜び」など陽気であたたかい高揚感を表す色
  • 黄 「愉快・希望・好奇心」など明るい太陽のように人々に希望と喜びを与え、 楽しい感情を生み出す色
 

ブログ開始時は何も考えずデザインテーマを選択していました。

"白"と"黒"でシンプルながら品性のあるイメージを狙ってたのですが。。。

f:id:nisemon_honmono:20190129181859j:plain

にせもんのホンモノ(過去)

全然イメージと違いますね!

 

ブログの記事数も増えて自分の伝えたいことが見えてきました。

結果、「楽しい」「好奇心」「アクティブ」 のイメージがデザインテーマに合わないのではないかという結論に至りました。 

わたしのブログに「純粋」「高級」はとても当てはまらないですね。

 

STEP3:配色組み合わせを学ぶ

メインカラーの具体的な色とサブカラーを決める前にやることがあります。

 

「良質な配色組み合わせ」をインプットしてイメージを沸かせることです。 

よほどセンスに自信がある方はいいですが、普通の方はイメージを沸かすのは難しいと思いますので、配色パターンを学べるサイトを探してみてください。

 

わたしの場合は「サルワカ」さんのサイトを利用しました。

イメージに近いものを選択すれば"配色プレビュー"で確認できるので便利です。

 

配色パターン見本40選:ベストな色の組み合わせ確認ツール

saruwakakun.com

 

マテリアルデザインカラー:使用例までチェックできる配色見本集

saruwakakun.com

 

配色アイデアが欲しいときはコレ!
参考書としても便利です

 

STEP4:「メイン色・サブ色・差し色」を決める

先程書いた配色を元にして、メイン色、サブ色、差し色を決めていきましょう。

当ブログで使う色はこんな感じにしようかな。

  • メイン色 #FFC107(明るめのオレンジ)
  • サブ色  #FFA000(オレンジ)
  • 差し色  #26C6DA(水色)

f:id:nisemon_honmono:20190129165727p:plain

配色イメージ

 

温かみがあり、親近感を感じやすいのが橙色をベースにした配色。
元気で健康的な印象を与えることもでき、アクセントカラーには水色を合わせました。

 

おまけ

「色彩セラピー」という自分カラー診断があり、自分の好きな色を選択して質問に答えると診断結果と自分カラーが表示される優れものがあります。

ちなみにわたしの自分カラーは「イエロー(黄)」でした。
「希望への意志」「知性と好奇心」がキーワードのようです。

 

自分色探しに試してみてはいかがでしょうか? 

 色彩セラピー自分カラー診断 | FIND-METHOD

 

いかがでしたでしょうか。

ブログデザインに迷ったときの参考にしていただけると幸いです。

 

f:id:nisemon_honmono:20230115130732p:image

 

 

DESIGN カテゴリーに戻る

 

 

記事を最後まで読んで頂いて、本当に有難うございます!

 

最後に一つお願いです。

 

当ブログ「にせもんのホンモノ」はブログランキングに参加しております。

 

少しでも面白い・参考になったと感じたら、バナーをクリックしてブログランキング上位になる応援をしていただけないでしょうか?

 

アナタのクリックが励みになります!

 

 

にほんブログ村 にほんブログ村へ
にほんブログ村


人気ブログランキング

 

また次の記事で会いましょう!