はじめまして、デザイナーのkiraです。
突然ですが、少し周りを見渡してみてください。
ペットボトルやケータイ電話、ボールペン、雑誌など… 皆さんの身の回りには多くの「色」と「形」があふれていると思います。
そして、そのすべてには意味があるものです。

Webデザインをする上でも、この「色」と「形」は大切な要素になります。
これらを上手く使いこなすことで表現の幅を広げることができ、Webサイトを作成する上で大きな役割を担っています。

今回はそんな「色」と「形」についてご紹介していきたいと思います。

「色」の不思議

色には特有のイメージや心理的作用があることをご存知でしょうか？
例えば青色のイメージは「爽やか」、心理的作用は「冷静にさせる」、などは耳にしたことがある方が多いのではないでしょうか？

以前TVで、白色の「実際より物を軽く感じさせる」効果を利用して、段ボールの色を白にすることで運ぶ人の負担を軽くするという工夫が紹介されており、色って人間の感覚にそんなに影響するのか、と驚いた記憶があります。

Webサイトでも同様に、訴求したいユーザーに合わせた色を選んで活用することで、より高い効果を見込めます。

以下に、代表的な「色」のイメージと心理的効果を簡単にご紹介します。

参考：https://hansokunodaigaku.com/koukoku_post/4163/

■赤
【一般的なイメージ】強い、危険、活動的な、興奮、緊張、怒り　など
【心理的効果】活力を感じ気分を前向きにさせる、目を引き関心を集める、食欲増進　など

■青
【一般的なイメージ】冷静、神秘的、知的、爽やか、信頼、平和、誠実　など
【心理的効果】集中力を高める、冷静にさせる、時間経過をゆったり感じる　など

■黄色
【一般的なイメージ】明朗、希望、喜び、躍動、賑やか、幼稚、注意　など
【心理的効果】判断力アップ、気分を明るくする、注意を促す　など

■オレンジ
【一般的なイメージ】暖かい、元気、かわいい、楽しい、親しみやすい、安っぽい　など
【心理的効果】食欲増進、親しみが生まれる、緊張を和らげる　など

■緑
【一般的なイメージ】自然な、安らぎ、癒やし、若さ、安全、平和、健康、公平　など
【心理的効果】心や身体の疲れをいやす、リラックス効果、気持ちが穏やかになる　など

■白
【一般的なイメージ】信頼感、清楚、明るい、未来、平和　など
【心理的効果】クリーンなイメージで好感度が高まる、スタートを感じさせる、実際よりものを軽く感じさせる　など

■黒
【一般的なイメージ】強さ、クール、恐怖、孤独、シック、暗い　など
【心理的効果】恐怖感や孤独を感じさせる、おしゃれでクールな印象を与える、高級感を与える　など

「形」の不思議

色にイメージがあるように、形にも特有のイメージがあります。
四角や三角よりも、丸の方が優しくて柔らかい感じがしませんか？
これは、四角や三角は角があって尖っている部分があるのに対し、円は角を持たないためと思われます。
それによって、より円滑で穏やかなイメージがわくのではないでしょうか。

このような「形」のイメージを利用して、Webサイトのデザインをする際にも、企業サイトであれば直線的な正方形や三角形で安定感を表現したり、子ども向けのサイトであれば優しさや温かみを表現するために、角の無い丸や楕円がよく使われる傾向があります。
もちろん、Webサイトの方向性や訴求内容によっては、企業サイトでも丸や楕円を使用する場合もあります。

以下に、代表的な「形」のイメージを簡単にご紹介します。

参考：https://takuo4649design.com/weblog/note/archives/5900

■正方形・長方形
【一般的なイメージ】安定、安心、規律、セキュリティ、信頼性、真面目　など

■三角
【一般的なイメージ】危険、攻撃的、バランス、安定、興奮　など

■円・楕円
【一般的なイメージ】柔らかい、やさしい、女性らしさ、あたたかみ、永遠　など

色×形で相乗効果！

次は「色」と「形」の組み合わせについてご紹介したいと思います。
それぞれの色と形には特有のイメージがあるとお話しましたが、似たイメージの色と形を組み合わせることで相乗効果が生まれ、より表現力が高まります。

【良い例】

• オレンジ「親しみやすい」＋円・楕円「あたたかみ」
• 黄色「注意」＋三角「危険」

【悪い例】

• 黒「クール」＋円・楕円「あたたかみ」

逆に、【悪い例】のようにイメージの遠いもの同士を組み合わせると、クールでカッコいいイメージにしたいのか、あたたかみのあるやさしいイメージにしたいのかが分からず、ユーザーを混乱させてしまったり、こちらの意図が正しく伝わらないなんてことも…。

組み合わせ次第で良くも悪くもなるので、選択には注意が必要になります。

余談ですが、私が通っていたデザイン系の短大では、「ふわふわ」「チクチク」などの擬態語を色と形だけで表現するという授業があり、それがとても印象的で今でも覚えています。
形も具体的なもの（ペンの形、車の形など）を使ってはいけなかったので、線や丸などで表現しなければならず、当時の私はとても苦戦しました。
今思うと、まさに今ご紹介した「色と形の組み合わせ」の感覚を身に着けるためのモノだったのだと思います。

まとめ

今回は「色」と「形」、その組み合わせについてご紹介しました。
どちらも身近にあるものですが、改めて考えてみると興味深いですね。
（私は社会人になってから色彩の魅力に目覚めて、独学で色彩検定1級を取得したほどです）

実は、今回はご紹介していませんが、色には他に「明るさ」や「彩度（鮮やかさ）」の要素もあり、それによって同じ色でもイメージが全然違ってきます。
さらに、形にも、丸や四角の他に直線や水玉などの柄、星やハートなど、固有の形に意味やイメージがあるものも多々あります。
「色」と「形」の選択肢は無限にあって大変ですが、それに比例して表現も無限に広がっていくので、なんだかワクワクしちゃいますね！