サイトの色使いに役立つ、美しいカラースキーム『Canva 100 color combinations』

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
Mediterranean afternoon

こちらはシックな赤茶系。基本色をブラウン、文字やヘッドバーに黒系、ボタンやリンクを茶色の濃淡で統一すると、上品ですよね。

Vineyard Neutrals
Vineyard Neutrals

落ち着いたグリーンに、茶系のアクセントが美しい組み合わせ。リンク色に持ってくると、綺麗ですね。

Outdoorsy & Natural
Outdoorsy & Natural

赤系・青系・黄色系を上品に組み合わせた、秋のイメージ。

Autumn in Vermont
Autumn in Vermont

こちらは緑・赤・ゴールド・黒で、優しい中にも、きりっと引き締まったイメージがあります。

Warm Naturals
Warm Naturals

「できる会社」のイメージ。日本語に合わせるのは難しいかもしれませんが、知的な印象です。

Urban Living
Urban Living

大人向けの長文サイトにいかがでしょう。赤系をリンク色にもってくると、インパクトがありますね。

Industrial & In-Control
Industrial & In-Control

なかなか難しい色使いですが、躍動感があって、エネルギッシュなイメージですね。

Classy & Timeless
Classy & Timeless

淡い色合いながら、爽やか&アクティブな印象を醸し出す組み合わせ。日本語サイトにはちょっと難しいかもしれません。

Surf & Turf
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
Twilight Moon

これはアクセントの赤茶色がとても綺麗。高級感がありますね。

Ornamental Reds and Yellows
Ornamental Reds and Yellows

こちらは赤茶~オレンジの並びに、そっと緑色を取り入れた、お洒落な配色。ボタンやバナーといったパーツに使うと綺麗ですね。

Bright and Fruity
 Bright and Fruity

こちらはシックな青系の中に、赤色と茶色を取り入れた、印象的な配色。これも上手に使えば、インパクトがあります。

Blue Sundew
Blue Sundew

こちらはガーリーな配色ながら、どこかシックなイメージで、上級者向けという感じ。でも日本語サイトには難しいかも。

Vivid and Retro
Vivid and Retro

オフィスや、男性向けのサイトにいいですね。知的で上品なイメージです。

Sophisticated and Calm
Sophisticated and Calm

こちらは、茶系・グリーン・黒に、紫を組み合わせた、上級テクという感じ。意外と和風のサイトに合うかもしれないですね。

Urban Skyline
Urban Skyline

これも赤系+青系の反対色を品よくまとめた、躍動感のある配色。

Czech Architecture
Czech Architecture

シーン別配色見本32パターン

もう一つ、おすすめが、渋谷のWEB制作会社『style』のオフィシャルサイトで紹介されている色見本のパターン。

カラー配色で迷わない! シーン別配色見本32パターン
http://www.hp-stylelink.com/news/2013/07/20130708.php

こちらのカラースキームは12色で構成されています。

それぞれ、色の醸し出すイメージが、分かりやすいコピーで紹介されているので、イメージに合った色見本が見つかると思います。

私も一時期、こちらの配色を使っていました。赤が気に入ったので。この中から3色をチョイスして、基本色、リンク色、アクセントにしていました。

ダイナミックで目を引くイメージ
ダイナミックで目を引くイメージ

こちらは明るく、爽やかなイメージで、女性向けのサイトにぴったり。

若い女性を感じさせるイメージ
20.若い女性を感じさせるイメージ

こちらの秋のイメージも、温かい色使いで、好感度が高いと思います。どんなサイトにも合いそう。

秋のイメージ
秋のイメージ

なぜ色キチは駄目なのか

私の偏見かもしれませんが、日本語圏の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/

サイトの作り始めは、気分がハイになって、後先も考えずに、どんどん投稿を増やす傾向があるので、少し立ち止まって、本当にこんなに装飾していいのかな……ということを少し考えるといいですよ。

この記事を書いた人

石田 朋子のアバター 石田 朋子 サイト管理人

作家・文芸愛好家。1998年よりホームページを運営。PCと車が大好きな80年代のサブカルファン。WordPressとは10年以上の付き合い。普段はぼーっとしたお母さんです。小説より漫画とアニメに詳しいヲタで、昭和の名作漫画は大半の台詞を空で言うことができます。東欧在住。本を買ってくれたら喜びます。

目次
閉じる