淡い色の box-shadow で華やかで独自性のあるサイトに

box-shadowに色を付けた華やかなサイト

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

マテリアルデザインの影響で、多くのサイトが使っているのが box-shadow

Windows 8 に採用されたフラットデザインとは異なり、マテリアルデザインは 3D の世界です。

box-shadow を使うことで、この 3D の世界をウェブサイトで簡単に表現できます。

一般的にかなり薄めのグレーが指定されますが、薄いピンクなどの淡い色を使っても OK 。

3D 空間を作りながら独自性のあるサイトにできるため、海外のサイトでは頻繁に淡い色の box-shadow を見かけます。

サイトを彩る box-shadow

「Simplicity の一覧リストを行をそろえた 2列・3列にするカスタマイズ」でご紹介した一覧リストに、ピンクの box-shadow を指定してみます。

HTML は下記のとおり。

<a class="hover-card">
    <article class="entry-card-large"></article>
</a>

まず下記の CSS を指定すると…

.entry-card-large {
  box-shadow: 0 2px 8px rgba(233, 30, 99, .2);
}

各記事の周りに、かわいらしいピンクの影が付きました。

ピンク色のbox-shadowの例

box-shadow の値を少し変更してみます。

.entry-card-large {
  box-shadow: 0 2px 24px rgba(233, 30, 99, .1);
}

ぼんやりとした淡いピンクが広がり、よりかわいらしい雰囲気に。

ぼんやりとした淡いピンク色のbox-shadowの例

サイトに色を付けてしまうと、メインコンテンツが目立たなくなります。

そのため、多くのサイトが、コンテンツ以外の色を極力抑えています。

しかし、 box-shadow を使い色を付けることで、メインコンテンツの邪魔をせずサイトを彩れます。

淡い色の影を付けたサンプル

淡い色を影に使った Dribbble に投稿されている作品をご紹介します。


中国・広州市在住の uiking さんの作品。

影に淡い紫を使用し、ページ全体の雰囲気を統一しています。

影に淡い紫を使用したuikingさんの作品Beauty App

中国・深セン市在住の kihoo さんの作品。

こちらもページ全体の雰囲気を統一するために、淡いオレンジを影に使っています。

影に淡いオレンジ色を使用したkihooさんの作品Fast Food

ウクライナ・オデッサ在住の Vladimir Gruev さんの作品。

カードとボタンに青色の影を使っていますが、それぞれ微妙に色が違います。

「チケットを買う」ボタンがより強調されていて、サイトのコンバージョン率を高めるデザインです。

カードとボタンの影に異なる青色を使用したVladimir Gruevさんの作品Ticket Info

セルビア在住の Vladimir Biondic さんの作品。

歌手の画像の周りに薄い赤色の影を付けています。

画像の周りに影を付ける際には、画像を白で縁取りすると影をはっきりと表現できます。

画像の周りに薄い赤色の影を使用したVladimir Biondicさんの作品MUCMUS App UI

インド・ニューデリー在住の Avinash Tripathi さんの作品。

SUMMARY の4つのカードに、それぞれに違う色が付いています。

ヘッダーには薄いグレーの影を使用しており、重要なコンテンツがより目立つデザインです。

4つのカードの影に異なる色を使用したAvinash Tripathiさんの作品Dashboard

アメリカ・サンフランシスコ在住の George Vasyagin さんの作品。

ボタンにボタンと同色の影を付けています。

左メニューのグラデーションと相まって、シンプルでありながら色の印象が強く残ります。

ボタンと同色の影を使用したGeorge Vasyaginさんの作品Elegant UI kit – Users Screen

インド・デリー在住の Sourav Maity さんの作品。

影をグラデーションで表現しています。

現在ウェブデザインでグラデーションが大流行していますが、影にもグラデーションを使った好例です。

グラデーションの影を使用したSourav Maityさんの作品Checkout Card UI


影の色は、薄いグレーだけではありません。

サイトに合った淡い色を付けることで、サイト全体を華やかにしてくれます。

また、色を付けた影を指定すれば、重要なコンテンツにサイト訪問者の視線を動かせるメリットも。

Dribbble に投稿された作品を参考に、 box-shadow に色を付けてはいかがでしょうか。

あまり日本のサイトで色が付いた box-shadow は見かけないため、独自性を打ち出せます。