:2018.3.13Web配色に気をつけるだけでもう一度見たくなる!誰でもできるポイントはこれ11536Webサイトの配色はサイトを作る上で誰もが悩む最後の難関です。『自分の考えた印象を与えられるのだろうか?どの配色ならコンバージョンが取れるだろうか?』など、誰もが考える悩みということは間違いありません。そこで、今回ご紹介するのが色の基本パターンと色が与える心理的効果です。これはWeb制作の初心者からベテランまで誰もがすぐに実践できるので、大きな力添えになること間違いなしだと思います。今回、私は数多くある視覚効果のサイトの中から、みなさまのwebサイトに活かせるものを厳選しました。Webサイト改善に直結するテクニック、色の持つ複数のイメージや心理的効果について述べていきます。実際、この方法を使うことで、他の人に自分のサイトが受けること間違いありません。決める時のおすすめサイトまとめ配色が大切な理由この図を見ていただいたら分かる通り、配色とサイトのデザインにより半数の消費者は訪れなくなる。人は視覚からの情報が87パーセントと言われています。最初は見た目で決まります。良い文章でも見た目が悪ければ文章まで辿り着かないのです。webサイトが見やすければ内容を読んでもらえるということなのです。一般的に配色は『色相環』を元に考えると簡単です。同じで、明度、彩度などの要素を変化させた色との組み合わせ。色相が隣り合っているもの同志の組み合わせ。色相は少し遠いが、似ている色同志の組み合わせ。反対側に位置しているもの同志の組み合わせ。正三角形を置いた時に、2点に位置するもの同士の組み合わせ。色相環で直角に位置するもの同士の組み合わせ。例:赤と紫、青とシアントーンでまとめる類似トーントーン(明るさや鮮やかさなど)が同じ、または似たもの同士の組み合わせ。色の印象を揃えるため、おさまりの良い配色となります。対照トーントーンが異なるもの同士の組み合わせ。色相が近いもの同士が組み合わさった時のアクセントとして有効です。参照元:http://color.eweb-design.com/0107_crc.html『70:25:5の法則』を使おう色のバランスどうしよう?って頭を悩ます方多いですよね。そんな時に使える、色の配色バランスを紹介したいと思います。それぞれの割合を75パーセント、25パーセント、5パーセントに割り振るとバランスよく見えるという法則です。それぞれの色の選び方は以下のようなものがおすすめです。引用元:http://handywebdesign.net/2012/07/12colors-give-you-the-impression/色は3から4色にとどめよう!ひとつのwebサイトに違う色相をたくさん使うと、どうしても雑多でまとまりのない印象を与えてしまいます。配色に自信のない場合は、使う色相を3色以下から始めてみましょう。ベースカラー、サブカラー、アクセントカラーというように使う分量を上記の『70:25:5の法則』で変えると、メリハリのあるweb配色になります。3色が難しいと思う場合は2色から始めてもいいと思います。2色の場合は半分ずつにならないようにどちらかにメインを置きましょう。引用元:http://www.lipton.jp/参照元:http://blogs.yahoo.co.jp/six_changer/2601739.html成功する6つの配色パターンコンプリメンタリ―カラーは、カラーウィール上で対局にある色の組み合わせです。コントラストがはっきりするのでインパクトを強くできます。店舗デザインではメインカラーを決定して、デザインを強調したいポイントに対局の色を使うと効果的です。アナロガスカラーは、近い色同士の組み合わせを使うことで視覚的に柔らかい雰囲気をつくることができます。トリアディックカラーはカラーウィール上で3つに色を使って、正三角形になるように配色するものです。これは最も基本的な配色になります。スプリットコンプリメンタリーカラーは、対局の色の組み合わせの強いコントラストを少し柔らかく見せる手法です。レクタンギュラ―は、コンプリメントカラーを2つ組み合わせる配色パターンです。色彩が豊な表情をつくることができます。スクエアカラーは、カラーウィール上で四角形になるように配色されるパターンです。強いインパクトを与えたい時に使用します。使い方を間違えると、ごちゃごちゃするだけの印象になってしまうので注意が必要です。店舗のデザインは、お店を利用するお客さま、働くスタッフの五感や精神を刺激する大きな影響力を持っています。参照元:http://support-full.jp/blog/cat13/post-70.html色が持つイメージ色が持つイメージを理解することにより、自分がイメージしている印象により近い配色にすることができます。下記の色のイメージを参考にし、メインカラーを決めてみてください。伝えたいメッセージが伝わりやすくなります。きる力や性を表していることから、神経を興奮させる・元気を出すという効果がありますが、悪い意味では闘争心を出したり短気になったりするという一面もあります。意欲を出させる色なので、スポーツで赤を身につける人も多いです。他にも購買意欲を出すために店でも良く見かけますね。その他にも、暖かく感じたり、時間の経過を早く感じさせたりといった効果もあります。赤は生命・活動の象徴です。(オレンジ)は解放感を与えて、楽しい気分にさせる色です。食欲を促進させる色としても有名なので、飲食店や商品のパッケージには橙などの暖色系が多く使われています。赤に比べて少し柔らかい色なので、赤の積極的なイメージから一歩引いた「思いやりがある・親しみやすい」といった意味合いもあります。確かに夕焼けの色もほわーんとした光で癒されて思わず見てしまいます。暖色系の中でも特に明るく感じられる色の通り、集中力を高めたり気分を明るくする効果があります。他にも注意を促すといった警戒色の効果もあるので道路工事や踏切などでもよく見かけますよね。自信や元気がない時に、黄色いものを身につけると気分も明るくなるそうなので一度試してみてはいかがでしょうか。静めたり、集中力を増す効果があります。遠くの緑を見ると目に良いと言われていることからも分かるように、目の疲れを癒す効果があります。協調性を表し、運気が向上するために資金が集まる色とも言われています。なんだか願ったり叶ったりな色ですね。自然を象徴する色なので、気持ちが落ち着くのんびりした気分になれます。ナチュラルな感じを出したい時にはぜひ使いたい色です。抑え、冷静にさせる作用があります。青は情熱を意味する赤とは反対に、涼しさや爽やかさ、知性や冷静を感じさせてくれる色です。空をイメージさせる色であることから航空会社(イメージカラーや飛行機の色)でも良く使われています。航空会社以外にも、涼しさを感じさせる清涼飲料水(ポカリスエット)や海を連想させる塩味の商品にも青い色がよく使われていますね。夏では「涼しさを感じさせる色」として青が使われ、冬では「季節感(寒さ)を表す色」として青が使われています。季節に応じて違った意味合いで使われる色です。かきたてたり、感受性を高める効果があります。芸術的な意味合いもあるので、自分の中の感性を引き出したりする色です。紫と聞いて連想できるものが他の色と比べて少なく、抽象的な意味合いで連想されることが強いようです(スピリチュアルや芸術の世界など)。悪い意味だと、青でもなく赤でもないイメージから内向的・不明瞭といったイメージも持っています。いないというイメージから、清潔感・純粋さを与えてくれる色です。そのため病院や飲食店では白い制服が使われていることが多いですよね。その他には、ものを軽く感じさせたり、気持ちをリセットする(始まりを感じさせる)という効果もあります。日本人が好む色のひとつで、商品のカラーバリエーションの中には白が入っていることが多いですね(車なんか特に)。明度が高く光を反射する色なので、明るいイメージで使われることがほとんどですが、悪いイメージだと無機質で空虚感を感じさせる色なので多用は禁物です。なく白でもない位置なので、割と象徴するイメージは暗い感じのものが多いですが、バランス感覚に優れ人との関わりが上手な人が好む色だと言われています。しない色のイメージから、控えめで平凡な印象を与えます。その意味の延長線上で、上品で落ち着いたイメージも兼ね備えています。灰色は無彩色で、他の色とも相性が良いので合わせて使うことによって効果が発揮される色です。薄い灰色は目に優しく控えめな印象のため、WEBデザインでも背景に多用されています(このサイトも背景は薄い灰色です)。全ての色を吸収した色といわれていて、何かを秘めた印象や影のある印象を与えます。男性的で威厳のある感じや、都会的で洗練された印象も与えます。白はものを軽く見せる効果があるのとは逆に、黒は重く見せる効果があります。死を表す色であることから、葬式でも必ず使われる色ですね。黒は一番有彩色を引き立てる色で、明るい色は特に引き立つので相性が良いとされています。似た印象効果を持っていて、上品で落ち着いた印象、また洗練された都会的な印象を与えます。金色に比べて控えめな色なので、派手ではなく、かつ高級感を持つ色です。「銀座」という地名は、実際に銀貨にまつわる名前の由来があるようですが、「銀」という色が持つイメージも相まって自然と高級な印象を受けると思います。自然界では少ない色なので、人工的な印象も与えます。目立つ色、また高価の象徴であることから、特別なものや高級感といった印象を与える色です。お金や富を連想させ、豊かさを感じさせてくれます。歴史的に見ても、富や豪華さを表すために建築や宝飾で金が多く使われていますね。欲を満たすといった気持ちを満足させる意味合いが強い色です。金などの派手な色は使いすぎると、高級なイメージから低俗なイメージ(物欲)に変わってしまうので注意が必要です。参照元:http://handywebdesign.net/2012/07/12colors-give-you-the-impression/配色を決める時のおすすめサイト配色を決める際、中々イメージをしにくかったりしますよね。そんな時に使用し易いサイトを厳選しました。Kulerhttps://color.adobe.com/ja/create/color-wheel/HUE/360http://hue360.herokuapp.com/まとめ本日は、Webサイト改善に直結するテクニック、色の持つ複数のイメージや心理的効果について述べてきました。実際、この方法を使うことでまとまった配色、他の人に自分のサイトが受けること間違いありません。以上のことをすれば人に受ける基本色を導き、そこからまとまりのあるサイトにできます。動画マニュアルを作るメリット・事例まとめ。2015年5月27日ソーシャルメディアFacebookTwitterFeedlyコメントコメントをキャンセル次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。LISKULについて検索:。