こちらは、ブロガーの方向けの記事です。
「仕事に活かすブログ教室」を運営しています、税理士のきむら あきらこ(@k_tax)です。
ブログのデザイン、特に色合わせ(配色)には、多くの方が悩まれるのではないでしょうか!
きむら
そんなお悩みを持つ方へ!ものすごく良いサイトを見つけてしまいました!その名も「Palettable」。
参考 PalettablePalettable早速、使い方などご紹介します!
目次・読みたい個所へジャンプ
Palettableの特徴
Palettableは、AI(人工知能)を使った、自動配色サービスです。
何百万人のデザイナーの配色知識を詰めこんだツールで、色が好きか嫌いかを直感的に選んで行くだけで、相互に合う色を最大5色まで探し出してくれます。
きむら
これがとてもイイ!!!
クリックのみで難しい操作もいりません。
次に、Palettableをどうやって使うのか、説明いたしますね。
■ スポンサー広告 ■Palettableの使い方
最初に、ブログのメインカラーだけ決めておきましょう。私は以前から使っていた赤色(#C61700)をメインカラーとしました。
▼Palettableにアクセスします。最初、何かしらの色が表示されているので、中央に表示されているカラーコードを、メインカラーのコードに書き換えます。
▼メインカラーに表示が変わったら「Like(スキ)」ボタンをクリック。
▼すると、メインカラーに合う色の候補が出てきます。この色がイマイチであれば、「Dislike(キライ)」をクリック。
▼好みの色が出てるまで「Dislike」を押し、好みの色が出てきたら「Like」を押します。
▼この操作を繰り返していきます。カラーの中央にあるゴミ箱マークをクリックすれば、その色を消すことも出来ます。
▼「ヨシ、この配色で決まり!」となったら「Export」をクリック。
▼URL(アドレス)か画像(PNGファイル)で、配色パターンを保存できます。
私は配色のURLをブックマークして保存しています。ちなみにアドレスは、
https://www.palettable.io/C61700-F4FAE1-D7CEA3-FFD6DC-60B2BF です。
カラーコードがそのままアドレスになるんですね!
▼スマートフォンで操作することも可能です。
Palettableでブログデザイン変更!ビフォーアフター
この配色を使って、実際にブログのデザインを変更してみました。それが今のブログですが、ここで改めてビフォーアフターを見比べてみましょう。
▼ビフォー(デスクトップ)
▼アフター(デスクトップ)
▼ビフォー(モバイル)
▼アフター(モバイル)
きむら
普通、メインの好きな色(赤、青など)は決められても、他の色は無難に「白」としてしまいがちです。そうすると、確かにすっきりするけれど、殺風景です。
かといって下手にマルチカラーにすると、センスが無ければ妙にゴテゴテしてしまいます。
Palettableがサジェストしてくれる色は、5色とも相互に合う色ですから、基本的にどの色をどの部分にもってきたとしても、しっくり馴染みますよ!
今回、文字を目立たせるためにトーンの微調整をした以外は、Palettableの配色どおりに、ブログのカスタマイズをしてみました。
きむら
5色セレクトする際のコツ
ところで、Palettableの中の人(AIさん)にブログ使用色を選んでもらう際、コツがあることに気づきました。
ペールトーンが好きな人はすべて淡い色で、ビビッドな色が好きな人はすべて鮮やかな色で揃えたくなるかもしれませんが、5色選ぶ際に、濃い色を反対色で2色、薄めの明るい色を1色、落ち着いた色を1色選ぶようにするといいですよ。
- 濃い色を反対色で2色…デザインにリズムが生まれます。
- 薄めの明るい色を1色…濃い色をバックにした時に文字の色として使えます。
- 落ち着いた色を1色…背景(壁紙)に利用できます。
5色の中で、こんな感じでメリハリをつけると、ブログデザインに便利です!
このブログの使用色まとめ
最後に、当ブログ・キムラボの使用色をあげておきます。
背景 | #D7CEA3 | |
メインカラー | #C61700 | |
薄めの下地色 | #FFD6DC | |
アクセントカラー | #40C4FC | |
リンク色 | #0048C0 | |
ヘッダー(フッター) | 背景 | #60B2BF |
文字 | #F2EFE2 | |
メニュー文字 | #F2EFE2 | |
ウィジェットタイトル | 背景 | #C61700 |
文字 | #FFFFFF | |
フッターウィジェット | 背景 | #676767 |
見出し | #E6E0D1 | |
文字 | #CACACA | |
ヘッダーお知らせ欄 | 背景1 | #C61700 |
背景2 | #FFD6DC | |
文字 | #F2EFE2 | |
2分割ヘッダーアイキャッチ | 見出し | #C61700 |
テキスト背景 | #F4FAE1 | |
ボタン | #60B2BF | |
右の吹き出し | 内部の色 | #D0E8EC |
左の吹き出し | 内部の色 | #FFE2E6 |
上部固定の見出しラベル | 背景 | #47A2B1 |
文字 | #F4FAE1 |
ご参考になれば幸いです!
■ スポンサー広告 ■まとめ
以上、Palettableのご紹介でした!
きむら
配色を春夏秋冬で変えてみるなんてことも、Palettableに頼れば、簡単にできそうですね。