WordPressのテーマは決まっても、色使いで悩む方は少なくないのではないでしょうか。
青系にするか、赤系にするかで、印象は大きく異なりますし、色使いが悪ければ、どんな洒落たデザインでも、安っぽく見えてしまいます。
こればかりはセンスの問題なので、色使いに困ったら、プロの色見本を参考にしましょう。
美しいカラースキームのサンプル
100 color combinations 【CANVA】
美しいカラースキームのサンプルは、color scheme で検索すればたくさん出てきますが、1番分かりやすくて、センスがいいのが、Canvaの見本です。
100 color combinations and how to apply them to your designs
https://www.canva.com/learn/100-color-combinations/
カラースキームの種類は、100通り。
4種類の色から構成されています。
色の醸し出すイメージが美しい写真付きで紹介されているので、デザインのスキルがない方でも分かりやすいです。
英語ページですが、カラースキームに、色の名前と16進表記が明記されているので、初心者でもすぐに適用できます。
*
私のお気に入りは、こちら。
基本色にレッド、タイトルバーなどにダークレッド、リンクは少し強めてゴールド系にしてもいいし、赤で統一してもいいし。
Mediterranean afternoon
こちらはシックな赤茶系。基本色をブラウン、文字やヘッドバーに黒系、ボタンやリンクを茶色の濃淡で統一すると、上品ですよね。
Vineyard Neutrals
落ち着いたグリーンに、茶系のアクセントが美しい組み合わせ。リンク色に持ってくると、綺麗ですね。
Outdoorsy & Natural
赤系・青系・黄色系を上品に組み合わせた、秋のイメージ。
Autumn in Vermont
こちらは緑・赤・ゴールド・黒で、優しい中にも、きりっと引き締まったイメージがあります。
Warm Naturals
「できる会社」のイメージ。日本語に合わせるのは難しいかもしれませんが、知的な印象です。
Urban Living
大人向けの長文サイトにいかがでしょう。赤系をリンク色にもってくると、インパクトがありますね。
Industrial & In-Control
なかなか難しい色使いですが、躍動感があって、エネルギッシュなイメージですね。
Classy & Timeless
淡い色合いながら、爽やか&アクティブな印象を醸し出す組み合わせ。日本語サイトにはちょっと難しいかもしれません。
Surf & Turf
50 Beautiful Color Combinations
こちらは世界的に有名なデザイン会社『Visme』が提供している、50種類の美しいカラースキーム。
Canvaと同じく、色見本+イメージ写真付きで、分かりやすいです。
色の構成は、5色。
こちらも英語ページですが、色の名前と16進表記が明記されています。
アルファベット圏のデザインなので、日本語を合わせると、少しドギツイ感じがするかも。
日本語サイトで使うならなら、Canvaの色見本の方が相性がいいような気がします。
50 Beautiful Color Combinations (And How to Apply Them to Your Designs)
https://visme.co/blog/color-combinations/
私の一押しはこちら。
赤系+黒で引き締める、シックな色使い。
Twilight Moon
これはアクセントの赤茶色がとても綺麗。高級感がありますね。
Ornamental Reds and Yellows
こちらは赤茶~オレンジの並びに、そっと緑色を取り入れた、お洒落な配色。ボタンやバナーといったパーツに使うと綺麗ですね。
Bright and Fruity
こちらはシックな青系の中に、赤色と茶色を取り入れた、印象的な配色。これも上手に使えば、インパクトがあります。
Blue Sundew
こちらはガーリーな配色ながら、どこかシックなイメージで、上級者向けという感じ。でも日本語サイトには難しいかも。
Vivid and Retro
オフィスや、男性向けのサイトにいいですね。知的で上品なイメージです。
Sophisticated and Calm
こちらは、茶系・グリーン・黒に、紫を組み合わせた、上級テクという感じ。意外と和風のサイトに合うかもしれないですね。
Urban Skyline
これも赤系+青系の反対色を品よくまとめた、躍動感のある配色。
Czech Architecture
シーン別配色見本32パターン
もう一つ、おすすめが、渋谷のWEB制作会社『style』のオフィシャルサイトで紹介されている色見本のパターン。
カラー配色で迷わない! シーン別配色見本32パターン
http://www.hp-stylelink.com/news/2013/07/20130708.php
こちらのカラースキームは12色で構成されています。
それぞれ、色の醸し出すイメージが、分かりやすいコピーで紹介されているので、イメージに合った色見本が見つかると思います。
私も一時期、こちらの配色を使っていました。赤が気に入ったので。この中から3色をチョイスして、基本色、リンク色、アクセントにしていました。
ダイナミックで目を引くイメージ
こちらは明るく、爽やかなイメージで、女性向けのサイトにぴったり。
若い女性を感じさせるイメージ
こちらの秋のイメージも、温かい色使いで、好感度が高いと思います。どんなサイトにも合いそう。
秋のイメージ
なぜ色キチは駄目なのか
私の偏見かもしれませんが、日本語圏のWordPressサイトは、自前のデザインより、有料テーマ・テンプレートをそのまま使っている方が多いせいか、ネオンサインみたいに、キラキラしたサイトが多いですよね。・・私もカスタマイズが面倒くさいので、そのまま使ってますけども^^;
きらきらマーカー、きらきらボタン、カラフルボックス、色違いのアイコン、等々。
全部セットになってるので、あれもこれも使いたくなる気持ちは分かりますが、赤やら、緑やら、全く系統の異なる色が混ざっていると、読む方はけっこう疲れるんですよね。
最近、よく目に付くのが、動くマーカー。(昔のマーキーに似ている)
強調したい気持ちは分かりますが、逆に、うっとうしくて、読み飛ばすことが多いです。
あと、吹き出しも一長一短ですよね。
せっかく、テキストでスムーズに読めていたのに、突然、吹き出しが登場して、「なぜなに博士の会話」みたいなのが始まると、そこで流れが中断してしまいます。
テキストの冒頭に、Q&A形式で、上手に取り入れている方もありますが、最初から最後まで吹き出しとか、テキストの途中で突然吹き出しとか、あれも多用すると、かえって見づらいので、ほどほどにした方がいいんじゃないかと思います。
また、div を使った装飾も、あまりに多用すると、いつかテーマ・テンプレートを変更したいと思った時に、投稿内のタグを全部書き替えなければならないので、非常に足枷になります。
ボックスやら、マーカーやら、アイコンリストやら、カラフルに飾りたい気持ちは分かりますが、テーマ・テンプレートに依存したサイト作りをすると、そこから身動きとれなくなって、最後にけっこう後悔するんですよね。初めのうちは、「あんなことも出来る、こんなことも出来る」で嬉しくて、ペタペタ、ペタペタ、投稿内に div タグを貼り付けて、きらきらに装飾してしまいますけど(自前のCSSとclassなら問題ないですが)
なので、テーマの色使いも、多くて、5色ぐらいかと思います。
基本色の濃淡、反対色のアクセント、特に目立たせたいポイント、あとは同系色のアイコンやイラストなど。
また、テーマ・テンプレートが提供するパーツも、幾つかに絞り込んで、多用しないことをおすすめします。
ほとんど更新しないペラサイトや、「絶対的にコレ」と決めているならいいですが、人間というのは、いつか必ず飽きる生き物ですし、数年も経てば、もっと良いのが出てくるんですよね。ITは特に新陳代謝の激しい世界ですから。
私も、日本の有料テーマ・テンプレートは皆さん、本当に頑張っておられるし、痒い所に手が届く仕様で(オールインワン型)、日本らしいサービスだと思いますが、一方で、万一の時のことを考えて、使うパーツ(divタグで提供されているセット)は数種類に留めています。
データベースの『Search & Replace』で、一括置換できる範囲で。
たとえば、div class="is-style-border_sg" みたいなタグを、div class="border-gray" に書き替えるだけなら、投稿内の記述が数百あっても、一瞬で置換できますから。
Search & Replace ならこちらのツールがおすすめです。
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
サイトの作り始めは、気分がハイになって、後先も考えずに、どんどん投稿を増やす傾向があるので、少し立ち止まって、本当にこんなに装飾していいのかな……ということを少し考えるといいですよ。