きむら あきらこのセミナー情報

ブログデザインの悩みに“Palettable” 〜AIが美しい配色を提案してくれるオンラインツール

こちらは、ブロガーの方向けの記事です。

「仕事に活かすブログ教室」を運営しています、税理士のきむら あきらこ(@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のご紹介でした!

きむら

ブログ倦怠期に陥ったら、配色はAIにお任せして、気分転換でお色直しをしてみてはいかがでしょうか。色を好みのものに変えるだけでも、ブログを更新する気力が湧いてくるものです。
配色を春夏秋冬で変えてみるなんてことも、Palettableに頼れば、簡単にできそうですね。
\この記事が役に立ったらシェアしてね!/
この記事のURLをコピーする

あわせて読みたい関連記事

プロ野球贔屓チームの全試合日程を、Googleカレンダーにいとも簡単に登録する方法!(新仕様編) 「国税庁URL変換器」国税庁ホームページの旧URLを新URLに変換するウェブサービス

今日のつぶやき&次回のブログ更新は

ツイッターのお仕事アカウント(@k_tax)のフォロワー数が1,000を超えました!

今年(2019年)から本格的にこのアカウントを使うようにしたので、まずは一つの目標数値クリアで嬉しいです。

これからも、ツイッターではカジュアルに気楽に、だけど、何かしら役立ちそうな情報を、つぶやいていこうと思います。どうぞよろしくお願いします。

きむら
次回のブログ更新は、税理士試験合格体験記(3)です!