Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
適切なシャドウの色が分かる「Material Icon Shadow Color Picker」 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

適切なシャドウの色が分かる「Material Icon Shadow Color Picker」

投稿日:

オブジェクトを立体的に見せたいときに使うシャドウですが、新米デザイナーさんはつい黒ばかり使っていませんか?(私がまさにそうなんですが…。)

シャドウというと黒をイメージしがちですが、実はオブジェクトの色と同系色にすることで、より自然な立体感を演出することができますよ。

とは言っても、適切な色を探すのは難しい…という方のために、今回は様々なカラーにあったシャドウの色を教えてくれる便利なサイトをご紹介します!

 

Material Icon Shadow Color Picker

Material Icon Shadow Color Picker

こちらのサイトでは、左側から選択したカラーに合わせて適切なシャドウの色を表示してくれます。

自分で調べたい色を入力できないのが残念ですが、既存のカラーを見ているだけでも、どのようなシャドウの色が適切なのか分かるのでとても参考になりますよ。

 

また、円の中のアイコンをクリックすると様々な模様に変化させて見ることもできます。

 

まとめ

シンプルなサービスではありますが、シャドウの適切な色ってなかなか分からないと思うので、とても参考になるサイトだと思います。

よかったら活用してみてくださいね。

 

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

無料で利用できる物件写真素材サイト「物件写真.net」

今回はちょっと珍しい、アパートやマンションなど物件の外観写真がたくさん揃った素材サイトをご紹介します。 バナーなどのデザインに使えるのはもちろん、クライアントにデザイン案を提出する時に、イメージしやす …

CSSをゲーム感覚で学べる「CSSバトル」が面白い!

こんにちは、ぶちこです。 先日、CSSをゲーム感覚で楽しみながら学べる面白いサイトを見つけたのでご紹介したいと思います。   CSSバトルのご紹介 その名も「CSSBattle」という海外の …

かわいいデザインのサイトが集まったギャラリーサイト

一口に“かわいい系のサイト”と言っても、子供向けのポップな感じなのか、女性向けの柔らかい感じなのか…など、様々ですよね。 なので、WEBデザインでかわいいを表現するのはなかなか難しいなあとよく思います …

【Illustrator】オブジェクトを等間隔にコピーしていく方法

Illustratorでオブジェクトを等間隔にコピーしていく方法をご紹介します。 イラレ使いには常識!?とも思われる機能ですが、これを知っていると、普通のコピー&ペーストに比べて断然作業が早く …

Macユーザー必見!過去のコピー履歴を管理できる「Clipy」のご紹介

パソコンで作業していると、よくURLやテキストをコピーすると思います。 当たり前ですが、ペーストしないうちに新しいものをコピーすると、最初にコピーしたものが分からなくなってしまいますよね。 そんな時、 …