2019-10-19スポンサーリンクウェブサイトを運営する人にとって、大きな悩みの1つとして配色があるのではないでしょうか。私は、このブログも含めていくつかのウェブサイト運営していますが、配色にはいつも困っていました。これまで試行錯誤を繰り返したり、デザイナーの方に教えてもらったりしている中で、最近になって、ようやく自分なりの配色のやり方というのが決まってきました。この記事では、ブログや配色パターンに悩む方が簡単に配色を決められる方法を書いていきます。配色の基本は3色までで構成することです。一般的な3色の構成は以下の3色です。選定したベース色の中の薄い色アクセントカラーこのブログも、基本の3色以外にも使っている色はありますが、青ベースの濃い色と薄い色、アクセントカラーとして黄色の3色を使っています。以下は実際に使っている色の16進数カラーコードです。一般的にアクセントカラーをは、ベースカラーに対して補色関係にあるものを選定します。補色について詳細を知りたい方は、こちらのページをご覧ください。これは1つの配色パターンであって、補色を使わずに3色で配色するパターンもあります。配色の基本はわかったけど、そもそものベース色をどうやって選定すればよいの?私も同じような疑問を持っていました。カラフル系など様々な配色パターンが出てくると思いますが、正直この中から自分好みを選ぶのは大変です。私自身、そうしたサイトを参考にして何度も何度もブログに適用してみましたが、いまいちしっくりきませんでした。ところが、最近になって、もっと簡単に自分好みの配色の探し方がわかりました。それは、イケてるサイトを真似してしまうことです。「自分のサイトのイメージカラーに合っていそうだな」というサイトをそのまま真似てしまうのです。アメリカのD2CブランドでAwayという会社があります。(Awayホームページ:https://www.awaytravel.com/)D2Cブランドというのは、ブランドと世界観を大事にしているので、当然デザイン・配色にも相当気を使っています。したサイトの配色というのは、そのまま真似できる要素が多いわけです。(D2Cブランドって何?という方は、D2Cとは?をご覧ください)このサイトは濃い緑と、かなり淡い緑系の色を基調に構成されています。配色の真似をする方法では、イケてるサイトを見つけたとして、どのように真似をすればよいのか?ここでは、私が実際に真似している方法を解説していきます。使うのは、パワーポイントとプリントスクリーン機能です。プリントスクリーン機能を使って、お目当てのサイトの画像をこのように貼り付けて、その横あたりにボックスを置きます。ボックスの色はデフォルトのままでOKです。次に作ったボックスを選択します。ボックスを選択したら、「図形の塗りつぶし」を選択して、「スポイト」という機能を選びます。このスポイトというのは、別の画像の色を自動で判定してボックスの色に反映してくれる機能です。こちらは、AWAYというブランドロゴの背景色にスポイトを合わせたときの画像です。左のボックスがロゴの背景色と同じになりました。色をスポイト機能で読み取ったら、もう一度「図形の塗りつぶし」を選び、「塗りつぶしの色」を選択します。すると、以下のように図形の色コードがわかります。これはRGBコードと呼ばれる色コードです。一般的にウェブサイト・ブログの配色はRGBコードではなく、16進数で表現されるので、置き換える必要があります。置き換えるときは、RGBと16進数カラーコードの相互変換ツールが役立ちます。ヘッダーとフッターのカラーも同様に色を確認した結果、このサイトは以下の2色をベースにして作られていることがわかりました。ここまでわかったら、自分のウェブサイトやブログの色に反映していくだけです。まとめ以上が頭を使わずに簡単にできるウェブサイト・ブログの配色のやり方でした。配色の基本は3色まで。一般的な配色はベースの濃淡で2色、アクセントカラー1色。イケてると思うサイトの配色を真似するのが一番簡単。パワーポイントのスポイト機能を使って色コードがわかれば簡単に色を真似できる。ちなみ、このブログもあるアメリカのブランドのホームページカラーをほぼそのまま真似しています。現在は独立して会社経営。サラリーマン時代に15年の副業歴。セーシンセーシンBLOGここ数ヶ月、新聞紙上を賑わしている会社がLIXILです。セーシンセーシンBLOGこんにちは、セーシン(@n_spirit2004)です。現在は独立して会社経営。サラリーマン時代に15年の副業歴。