Design お役立ちToolbox やってみるBlog やってみるWordPress

Blogデザイン初心者編:カラーを選ぼう【迷ったら3色】

ハマると抜け出せなくて、時間がいくら合っても足りない危険な分野・・・それがデザイン沼
しかし、サイト作成において楽しい部分でもあります。

このカテゴリでは、Blogのデザインをいかに「効率よく」且つ「楽しく」作業するかを考えながら極力良い方法を見つけていきます。

カラーが決めるBlogの印象

Shika
WordPressでBlogを始めてみたはいいけど、どうデザインして良いのかわからないなぁ
かわいいBlogにしたいけど、どんな色をつかったらよいのでしょう?
Hitsuji


テキストはもとい、タイトルの背景やら、引用文の背景やら、枠線やら、アンダーラインやら・・・
Blog作成において、特に自由度の高いWordPressでのサイト作りは配色に悩みがちですよね。


例えば「原色をばんばん使った目に優しくない配色のサイト」には長居できないように、配色は記事の読みやすさにも影響します。

また、かわいい犬や猫との暮らしを紹介するブログなのに全部モノトーン」だったら、どうでしょうか。
ハッピーな感じがするでしょうか・・・

カラーがサイトの良し悪しを決めるわけではありませんが、"印象"には大きく関わります。

だから、密かに大事な要素なんです。


実はデザイン系バックグラウンドの筆者・・・正直考え始めると止まりません。

色彩学は、心理学と結びついたり単独で教科書ができてしまうほど奥が深い分野です。
とても面白い学問ではあるのですが、Blogをできるだけ時間をかけずにデザインしたい時には少々重い。

・・・のでディープな部分はSkipしましょう✨

カラー配色についてもっと知りたい人へ

もっと詳しく知りたい方はこちらを。
色設計の基本と、企業ロゴを例にそれぞれの「色が持つポジティブ&ネガティブイメージ」がまとめられています。

とても面白く読み応えがあるのでおすすめ記事です。
※ロゴについてはページ中段くらいからスタート。

出典:ベイジの社長ブログ

スキな色を選んでみよう!

さて、ここからは実践的なサイトのご紹介です。
これらのサイトはカラーパレットを作成してくれるサイトです。

直感的に選べるものもあれば、じっくり選ぶこともできます。
のぞくだけでも楽しいので、是非一度試してみてください。

Happy Hues:レイアウトがイメージできる

引用:https://www.happyhues.co/

もう既にサンプルをたくさん作成してくれているので選ぶだけ。

PC画面だと、左側からサンプルパレットをクリックして右側でイメージを確認できます。
カラー配分でイメージがだいぶ変わるので、重くなりがちな「濃い色」を使いたい場合は確認できると良いですね。

下の方にスクロールしていくとカラーナンバーが書かれているので、あとはコピペするだけでOKです。

PALETTABLE:スキ or キライを選んでカラーパレット作成

出典:https://www.palettable.io/


サイトに行って、まずはじめに表示されたカラーが「スキかキライか」を選びます。
その後選んだカラーに合うカラーパレットをAIが提案してくれるので、その都度「スキかキライか」を選んでいくと"自分のカラーパレット”が作成できる仕組みです。

AIが提案してくれるカラーは、まとまる色味からハミ出さないようになっているため「いい感じ」のカラーパレットができあがるはずです。

Canva

出典:https://www.canva.com/colors/


Canvaは言わずと知れた、デザイン作成ツール。

有名Bloggerやインフルエンサーの皆様がアイキャッチ画像作成やブランディングに使用していることが多いです。
その特徴は、豊富なテンプレートを使って「誰でも簡単におしゃれなデザインができる」ことです。

それだけでなく、Canvaはサポートツールが優秀。

画像の左2つ、「Color palette generator」「Color palette ideas」は一度のぞいてみる価値ありです。
Generatorは、自分のスキな写真やイメージをアップロードすると、そこからカラーナンバーがひろえます。
Ideasは、大量の(ほんとに大量)のカラーパレットから組み合わせを選ぶことができます。

CanvaはBlogデザインにおいてかなり使えるToolなので、また改めて深堀りしたいと思っています。

もっとカラーデザインのサイトを知りたい人へ

もっとカラーデザインのサイトを調べたい方は下記にある「PHOTOSHOP VIP」のサイトへ。
有名どころはほぼ網羅しています。

迷ったら3色だけ選んでみよう

とはいえ、本当にカラーの世界は広大で深い。
AIが選んでくれたものにしたって膨大な量ですし、これだけ自由に選べるとアレもコレもよく見えてしまいますしね・・

こんなに選べたら、逆にしぼりきれないです!
Hitsuji

という方も多いハズです。

そういう方におすすめしたいのがこちら。
迷ったら、もうこれで選びましょう!

かわいい配色の本 デザインと言葉の配色ブック

キーワードから得たインスピレーションで選ばれた10色のカラーと柄を、あらかじめデザインして豊富なサンプルを掲載しています。

しかもKindle unlimited対象本✨

イメージを決めてから色を選べば簡単!


前出のカラーを選ぶサイトと違うところは"どんなイメージのBlogにしたいのか"から選べるところです。

引用:かわいい配色の本 デザインと言葉の配色ブック


例えば・・・かわいくまとめたい方は、「スイートオレンジ」「パリの公園」のキーワードでまとめられた配色を選べます。
ちょっと大胆な配色を探している方は「80年代」なんていかがでしょうか。
女性だけでなく、もちろん男性にも「サーフショップと西海岸のインテリア」なんておしゃれゴコロを刺激するキーワードがあります。

そのキーワードから選ばれたカラーを使って作られたロゴや柄、バナーなどを見れば、自分のBlogのイメージがどんどんカタチになってくるはずです。

この本が提案しているのは以下の10色の組み合わせ。

  • ベースカラー 3色
  • 大人カラー  3色
  • バリエーション 3色
  • さし色    1色

そのうち、まずはベースカラーの3色をマネっ子してみましょう。

「テキストのアンダーライン」「強調したい文字列の背景」などサブ的に使用したい色を選ぶときは、ベースカラー以外から選べば間違いなし。

おすすめです。

まとめ

本日のまとめ

  • デザインは楽しいけど時間がいくらあっても足りない!デザインサンプルを有効活用しよう。
  • 配色に迷ったら、とにかく3色だけ選んでみよう。

© 2023 moco lab