site-color

はいどうも、うじがみ(@xujigamix)です。

プロのアフィリエイターとして活動をしています。サイトの配色は訪問者のサイトイメージを連想させる上で、とても大切な要素となります。

このサイトの配色をきちんと理解しておかないと、自分は良いと感じるサイトでも訪問者から見た時に不安を感じたり勝手な悪いイメージを連想させてしまうのです。

どんなに良いコンテンツがあるとしても、配色が悪いサイトは閲覧されにくくなります。不気味なサイトなんて誰も読みたくないですよね?

ではどのようにしたら訪問者が長く滞在し、またサイトに訪れてくれるようなサイト配色ができるのかについて詳しく解説をしていきます。

サイトの配色についての理解

colorサイトの配色は大きく分けて、3つの項目に分かれます。サイトのメインカラー・サブで入れる色・アクセントといった感じですね。

色というものには人間が潜在的に感じてしまうイメージを持っています。

そのイメージをいかに上手く取り入れるかでサイトの閲覧時間や直帰率などに影響をしてきます。

サイトの配色は平均で3色に分かれる
ベースカラー:一番活用される色
メインカラー:サイトのメインカラー
アクセントカラー:サイト内のアクセント用

ベースカラーとは

ベースカラーとはサイト内に一番目に付く色の事を指します。ベースカラー=サイトの背景ですね。背景はどのページにも使われ、必ず訪問者の目に入ります。

背景に使われる色ですので、基本的には文字の読みやすさ・配色のバランス的に明るい色を使うのが無難です。

黒などをベースカラーにしてしまうと、真っ黒なサイトとなってしまい訪問者から見て怪しいサイトとなってしまいます。

何か戦略があるのであれば、このような色を使うのもありですが基本的には良くない印象を与えてしまいます。

悩んでしまうくらいなら白色を使っておけば間違いはないです。私のこのサイトのベースカラーも白です。

メインカラーとは

メインカラーはサイトのイメージを決める色の事を指します。一番重要な色です。

サイトのイメージを付けさせる色となりますので、メインカラーはサイトを運営する前にしっかりと決めておきましょう。

メインカラーは基本的に訪問者のニーズによって調整します。後ほど詳しく解説をしていきますね。

アクセントカラーとは

同じ配色ばかり並んでしまうと、訪問者視点飽きてしまいます。

飽きられてしまうと離脱率も高まり、せっかく作ったコンテンツも読んでもらえないなんて可能性も出てきます。

そんな時に活用するのがこのアクセントカラーです。ちょっとワンポイント色を追加してあげて、訪問者を飽きさせない工夫をするための色ですね。

色は1つに絞る必要はありませんが、少々個性的な色を取り入れてあげるのも良いです。

サイト配色のコツ

color-skillではこれから訪問者が良いと感じてしまう、サイトの配色を決める上でのコツをご紹介いたします。

コツを覚えて自分のサイト内に取り入れるだけで訪問者の心をグッと掴むことが可能となります。

サイト配色のコツ
できるだけシンプルに
使いやすい色を中心に選ぶ
ジャンルを連想させる色を盛り込む

できるだけシンプルに

サイトの色を選ぶ上で重要なのは、できるだけシンプルな色の構成にすることです。

色は先ほども申し上げましたが、潜在的なイメージを持っています。そのため、色を取り入れすぎると人が感じる情報量が多くなり、疲れてしまったり・不快に感じてしまう可能性が高まります。

こだわって作りすぎて、サイトの配色がごちゃ混ぜになってしまい見た目が良くないサイトをちらほら見かけますね。これではもったいないです。

そんなにこだわって作るより、少し手を抜いたサイトの方が見やすいなんてケースもあります。

ですので余りこだわりすぎず使う色は3色・多くても4色程度のシンプルな色の構成にしましょう。

使いやすい色を中心に選ぶ

使いやすい色・扱いにくい色というものはそもそも決まっています。

サイト運営を始めたばかりの人がわざわざ難しい色を選んでしまうと、配色が難しくなってしまいます。

どうしても取り入れたい好きな色があるという方を除き、こだわりがない人は無難な使いやすい色をまずは選びましょう。

色の難易度

扱いやすい色と扱いにくい色
■扱いやすい色
・白 ・黒 ・赤
・青 ・グレー ・緑
■扱いにくい色
・金 ・紫 ・茶色

ジャンルを連想させる色を盛り込む

サイト運営していく上で、自分が運営するジャンルを連想する色を取り入れる工夫をすると良いです。

ビジネス系のノウハウを教えるサイトなら、賢そうに見える青・黒・白といった感じです。ペットや家庭についての落ち着いた感じのサイト運営をする方であれば、緑・オレンジ・薄桃色といった優しい色を入れてあげるのがコツです。

色の持つイメージを理解しよう

color-image色にはそもそも人間が感じるイメージというものが潜在的に備わっています。色のイメージを理解すると配色を決める手助けとなります。

以下で詳しく解説をしていきます。

青色が持つイメージ

 

運営する内容に合う色・そしてシンプルにを意識しよう

color-simple結論となりますが、できるだけシンプルに使う色は少なめにして、自分の運営するサイトのイメージに合った色を1色は取り入れてサイトの配色は仕上げましょう。

この記事を読んでもまだどうしようと感じてしまうのであれば、最初は白などの使いやすい色でサイトを作り、だんだん色の持つイメージを理解できた段階で取り入れていけばよいです。

むやみに色を入れるよりかはシンプルの方が良いですからね。

はいこんな感じで今回は以上となります。

最後まで閲覧頂き、ありがとうございました。

スポンサーリンク

Twitterでフォロー

おすすめの記事