とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

これ指定しときゃOK!洗練されたデザインになるグレースケール系のカラーまとめ(ボーダー/テキスト/背景)

洗練されたデザインになるグレースケール系のカラー(ボーダー/テキスト/背景)

Webサイトのデザインをしていて

なんか野暮ったいな、

なにか締まりがないなと感じたことありませんか?

 

余白やコンテンツの配置、レイアウト...

さまざまな要因が組み合わさってデザインは洗練されていくもの。

 

Webサイトのデザイン要素の中で

ボーダーカラーやテキストカラー、背景色は

少し変えるだけで洗練されたイメージになったりします。

今回はそんな洗練されたデザインになるカラーたちを紹介します。

 

最近の風潮だと薄めの色を採用しているサイトが多いと思います。

グレースケール系のカラーはデザインの名脇役。

 

以下、順不同です。

(クリックしたリンク先でカラー見れます)

 

#c2cfd3#ecf0f1#ebebeb#e0e0e0#f0f0f0#dcdcdc#e4e4e4#c3c3c3#323232#808080#2d2d2d#6f6f6f#646464#d6d6d6#545454#757575#616161#424242#212121#828282#f2f2f2#f5f5f5#f6f6f6#fafafa#efefef#f9f9f9#f4f2f2

 

などなど。

 

洗練されているなぁと感じたサイトを開発者ツール

やカラーピッカーなどでどんなカラーにしているか

というのを見るのが良いと思います。

 

普段からいろいろなデザインに触れ、見ておくこと。

目を肥やしておけば、いざデザインするぞ、

というときのアイデアや引き出しが多くなり

「洗練された」デザインの作成ができるようになります。

 

少し古めの記事ですが、

デザインクオリティアップの参考になる記事、

まとめておきます。

 

speakerdeck.com

speakerdeck.com

ameblo.jp

coliss.com

liginc.co.jp