ビジネスその他

【簡単】ブログ・ウェブサイトの配色の基本【イケてるサイトを真似するのが早い】

 

ウェブサイトを運営する人にとって、大きな悩みの1つとして配色があるのではないでしょうか。

私は、このブログも含めていくつかのウェブサイト運営していますが、配色にはいつも困っていました。

しかし、これまで試行錯誤を繰り返したり、デザイナーの方に教えてもらったりしている中で、最近になって、ようやく自分なりの配色のやり方というのが決まってきました。

この記事では、ブログや配色パターンに悩む方が簡単に配色を決められる方法を書いていきます。

 

広告

配色の基本は3色

配色の基本は3色までで構成することです。

最も一般的な3色の構成は以下の3色です。

  • 選定したベース色の中の濃い色
  • 選定したベース色の中の薄い色
  • アクセントカラー

このブログも、基本の3色以外にも使っている色はありますが、青ベースの濃い色と薄い色、アクセントカラーとして黄色の3色を使っています。

以下は実際に使っている色の16進数カラーコードです。

一般的にアクセントカラーをは、ベースカラーに対して補色関係にあるものを選定します。

補色について詳細を知りたい方は、こちらのページをご覧ください。

もちろん、これは1つの配色パターンであって、補色を使わずに3色で配色するパターンもあります。

 

広告

配色の決め方

配色の基本はわかったけど、そもそものベース色をどうやって選定すればよいの?

私も同じような疑問を持っていました。

検索エンジンに出てくるサイトを見ていると、クール系、寒色系、暖色系、カラフル系など様々な配色パターンが出てくると思いますが、正直この中から自分好みを選ぶのは大変です。

私自身、そうしたサイトを参考にして何度も何度もブログに適用してみましたが、いまいちしっくりきませんでした。

ところが、最近になって、もっと簡単に自分好みの配色の探し方がわかりました。

それは、イケてるサイトを真似してしまうことです。

「このサイトのデザインがクールだな」

とか、

「自分のサイトのイメージカラーに合っていそうだな」

というサイトをそのまま真似てしまうのです。

例えば、アメリカのD2CブランドでAwayという会社があります。(Awayホームページ:https://www.awaytravel.com/

D2Cブランドというのは、ブランドと世界観を大事にしているので、当然デザイン・配色にも相当気を使っています。

そうしたサイトの配色というのは、そのまま真似できる要素が多いわけです。

(D2Cブランドって何?という方は、D2Cとは?をご覧ください)

このサイトは濃い緑と、かなり淡い緑系の色を基調に構成されています。

Awayのホームページ

 

配色の真似をする方法

では、イケてるサイトを見つけたとして、どのように真似をすればよいのか?

ここでは、私が実際に真似している方法を解説していきます。

使うのは、パワーポイントとプリントスクリーン機能です。

まずプリントスクリーン機能を使って、お目当てのサイトの画像をこのように貼り付けて、その横あたりにボックスを置きます。

ボックスの色はデフォルトのままでOKです。

ウェブサイト・ブログの配色方法1

次に作ったボックスを選択します。

ウェブサイト・ブログの配色方法2

ボックスを選択したら、「図形の塗りつぶし」を選択して、「スポイト」という機能を選びます。

このスポイトというのは、別の画像の色を自動で判定してボックスの色に反映してくれる機能です。

ウェブサイト・ブログの配色方法3

 

こちらは、AWAYというブランドロゴの背景色にスポイトを合わせたときの画像です。

左のボックスがロゴの背景色と同じになりました。

ウェブサイト・ブログの配色方法4

色をスポイト機能で読み取ったら、もう一度「図形の塗りつぶし」を選び、「塗りつぶしの色」を選択します。

ウェブサイト・ブログの配色方法5

そうすると、以下のように図形の色コードがわかります。

これはRGBコードと呼ばれる色コードです。

ウェブサイト・ブログの配色方法6

一般的にウェブサイト・ブログの配色はRGBコードではなく、16進数で表現されるので、置き換える必要があります。

置き換えるときは、RGBと16進数カラーコードの相互変換ツールが役立ちます。

ヘッダーとフッターのカラーも同様に色を確認した結果、このサイトは以下の2色をベースにして作られていることがわかりました。

ウェブサイト・ブログの配色方法7

ここまでわかったら、自分のウェブサイトやブログの色に反映していくだけです。

 

広告

まとめ

以上が頭を使わずに簡単にできるウェブサイト・ブログの配色のやり方でした。

  • 配色の基本は3色まで。
  • 一般的な配色はベースの濃淡で2色、アクセントカラー1色。
  • イケてると思うサイトの色を真似するのが一番簡単。
  • パワーポイントのスポイト機能を使って色コードがわかれば簡単に色を真似できる。

ちなみ、このブログもあるアメリカのブランドのホームページカラーをほぼそのまま真似しています。

 

広告
ABOUT ME
アバター
セーシン
元リーマン管理職+副業歴15年、海外事業・独立起業などの経験を踏まえて、仕事、経営、キャリア、海外に関することなど、ビジネスパーソンとしての戦闘力を高めるための情報を発信しています。 ツイッターアカウントはこちら