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

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

関連記事

コーディング時に使えるコピペサイト「copypet」

今回はコーディングで困った時や、時間を短縮したい時に使えるコピペサイト「copypet」をご紹介します。 パーツや装飾などの指定できるスタイルって、本当にたくさんあって全て覚えるのは難しいと思いますが …

ゲーム感覚でベジェ曲線を練習できる「The Bezier Game」

イラストレーターの特徴とも言えるベジェ曲線について、「難しい」「上手く描けない」と思われている方は多いと思います。 私自身、まだまだベジェ曲線を使いこなせていなくて、苦手意識がすごくあります…。 そん …

【Illustrator】印刷データ入稿時に気をつけること

製作会社に入社して早半年…今回初めて紙のデザインを担当させていただくことになりました。 Webでのデザインと違い、後からの修正がきかないものなので緊張感がすごい(ドキドキ)です&#8230 …

ウェブサイトの配色を解析してくれる「Web Colour Data」

ウェブサイトを作る時、配色をどうするかも悩みどころの1つですよね。 そんな時は、ウェブサイトで使われている色を解析してくれるサイト「Web Colour Data」が便利です! 制作するサイトの同業他 …

知っておきたい洋風の柄10選

先日は和柄の名前や意味についてを記事にしましたが、今回は洋風の柄についてご紹介したいと思います。 洋服や小物などで普段から何気なく取り入れている柄ってたくさんあると思いますが、案外その名前って知らない …