【Webデザイン】パープル・紫色系のサンプルサイトをご紹介！

皆さんは「良いWebサイト」とは、どのようなWebサイトのことだと思いますか？

Webサイトでは多種多様なコンテンツ同士が複雑に絡み合うため、どれか1つがうまくいっていなければ、Webサイト全体の見栄えに支障をきたしてしまいます。

それらの要素単体だけでなく、相互の影響も含めた物が「デザイン」ですから、これについて勉強することは、想像以上に煩雑で大変なものとなります。

そこで、今回は「デザイン」に関してご紹介します。

先ほど述べたWebサイトの多種多様な要素には、全て「色」というものが存在します。

つまり、色と色もお互いに影響し合うので、それについての知識があるだけでもかなり有利になります。

今回は「パープル・紫色系」の持つ効果と、デザインの勉強の参考になるサイトをいくつかピックアップしてみました。

ぜひご参考にしてください！

パープル・紫色系の色を使うことによる効果

チャーミングな印象を与える

紫色は日常生活であまり見かける色ではなく、見かけるとすればアジサイなどの花の色なので、紫色はチャーミングで可愛らしい印象の色となります。

コンテンツにおしゃれな付け足しをしたいときに、積極的に使える色ですね。

「素敵」「可愛い」など直感でコンテンツの良さを理解してもらいたいときには、紫色の特徴を活かしていきましょう！

不思議な美しさの表現

暖色系の赤色と寒色系の青色の中間に位置する紫色は、相反する色の混ぜ合わせであり、不思議な世界観を持つ色となります。

おしゃれや娯楽などのWebサイトに用いると、どこか日常と違う楽しみをうまく表現することができます。

紫色を効果的に用いて、サイトの魅力を最大限に引き出しましょう！

心を引きずり込む効果

小学生が読む教科書に載っている話なのですが、蝶は花の香りに誘われるのではなく、花びらの色に誘われるそうで、紫色が一番人気の色だそうです。

このことは、きっと蝶だけでなく人間の心理とも関連があります。

紫色は花の蜜を探し求める蝶のようにさまよいながら、ネットサーフィンをする人々の心を引き寄せ、そのサイトのアクセス数を大幅に引き上げる効果があると言えるでしょう。

深い愛をイメージさせる

ピンク色に愛、恋、恋愛などのイメージがあることを皆さんご存じのことでしょう。

ピンク色は明るい印象の色ですが、紫色はそれを濃くすることによってできる色です。

恋愛に関する記事などを載せたサイトで用いると、ピンク色よりも濃くて真面目な愛を連想させることが可能になるでしょう。

甘い印象を与える

ブルーベリー、ラズベリーなど、一般的に「ベリー（berry）」と呼ばれる果物は紫色をしています。

紫色はそれらの果物を連想するような甘酸っぱい印象となります。

スイーツなどに関するWebサイトに用いると、甘い印象をよく表せるでしょう。

高貴なさまを演出する

その昔、紫色は高貴な身分の人のみが着用することを許された色でした。

紫色は今風のおしゃれさはもちろん、そのような昔ながらの高貴な印象を与えることもできる色なのです。

現代においておしゃれとして通用しているものから、昔ながらの伝統的な美学にまで適応できる、紫色は万能な色ですね！

その他パープル・紫色系の色が与える効果

その他、パープル・紫色系の色が与える効果としては、下記のようなものがあります。

紫色はとにかくゆっくりと人の心を魅了する色です。

チャーミングな色なので、他の色と同時に使うことで、その色に魅力的な美しさを加えるという使い方もできることでしょう。

不思議な美しさのある色なので、「あなたもきっと魅了されますよ」という主張をするときに使ってみるのはいかがでしょうか？

また、生き生きとした生命力を連想するような黄色や緑色の反対色である紫色は、対照的に「他にはない独特な美しさ」を表せることでしょう。

紫色を使いこなせば、きっと深い美しさのあるデザインを実現することが可能です。

パープル・紫色系の色を使ったWEBサイトデザイン

シンプルなデザインのサイト

Quincy Réquin & Associés

画像、ロゴ、説明文など、各々のブロックに分かれた構造になっているのが特徴のサイトです。

シンプルなデザインに紫色を用いることによって画像が強調され、引き込まれるような魅力が生まれていますね。

主な使用カラー

#843175

#b9c3dc

#efefef

参照元：http://www.quincy-requin-avocats.com/

SEKAI 未来を広げるWEBマガジン by 東進

コンテンツ数としては少なめの、比較的シンプルなデザインとなっています。

「SEKAI」という文字とともに紫色の枠を設けることで、「僕らだけの独特な世界」という雰囲気を出していますね。

紫色は独特な美しさの表現に向いていると実感できるサイトですね。

主な使用カラー

#3919dc

#d94ed3

#333333

参照元：http://toshin-sekai.com/

不思議な印象を受けるサイト

KIKK Festival

何やらシャボン玉のようなものが中央で揺れうごめいています。

背景を紫色にすることで、「ここはどこなのか？」「これから何が起こるのか？」といった、不思議な世界観に魅了されたワクワク感を演出しています。

背景全体に輝く星が描かれていたり、左側には虹が描かれていたりと、中央のシャボン玉のみならず非常に芸術的なデザインとなっていますね。

主な使用カラー

#391167

#8a4894

#566f6c

参照元：https://www.kikk.be/2016/

FCINQ

文字数を少なめにして、画像を映えるようにしたサイトです。

背景にあるのは山などの自然風景ですが、紫色をベースにすることによって、どこかこの世のものではないような風景を演出しています。

画像も文字もシンプルですが、ここまで異世界感を出すことができるとは、デザインにおける「色」というものの重要さが身に染みますね！

主な使用カラー

#d93f87

#110918

#4b32a7

参照元：https://www.fcinq.com/

クールなデザインのサイト

PLAYGROUND

白い背景に画像と黒い文字がある中で、ボタンが紫色でデザインされています。

紫色は2つの目立つ色である赤色と青色の中間に位置する色なので、それぞれの色の特徴が中和されてイメージに偏りがなくなるため、このようなクールなデザインにも使用できます。

主な使用カラー

#272329

#362939

#4a00d9

参照元：https://www.playground.it/

Saturday . AND READY

紫色の枠組みの中に画像が堂々と飾られている、クールでスタイリッシュなサイトです。

コーヒーカップの絵柄とともに紫色を使用することで、先ほど述べたスイーツのような甘さを持つデザインを実現しています。

画像に紫色の格子のぼやかしを入れるなど、かなり工夫を凝らされていますね！

主な使用カラー

#080031

#252a52

#433e67

#3f395d

参照元：https://sat.andready.net/

大学に関するサイト

立教大学

紫色のバーが左右両サイドを走っている、かなり珍しいデザインとなっています。

独特な美しさのある紫色は、大学のような団体がアイデンティティを示すのによく使う色なのでしょう。

この背景は動画となっていて、躍動感のあるものとなっているのが素敵です。

主な使用カラー

#a447a0

#541b86

#98c4e7

参照元：https://www.rikkyo.ac.jp/

大正大学

こちらのサイトは先ほどのものとは違い、背景が動画ではなくスライドショーになっています。

ピンク色や紫色を駆使して、うまく大学としての自己主張を展開していますね。

主な使用カラー

#514168

#df8da5

参照元：https://www.tais.ac.jp/

まとめ

パープル・紫色系の色を使ったサイトが与える効果と、サンプルサイトを8つご紹介しました。

紫色を使用することで、「ゆっくりと人を呼び寄せるデザイン」を作ることができます。

他の色と同時に使うことで、その色に魅力的な美しさを加えることもできますので、使用方法のバリエーションが広がりますね。

不思議で個性的な魅力で人の目を引く色なので、大人のおしゃれのトレンドなどを紹介するWebサイトで用いてみることをおすすめします。

他のカラーについて、下記記事でご紹介しております。

よろしければご覧くださいね！

最後までお読み頂きありがとうございました。