スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト

フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。

css-prism5.png

で、今回はそのサイトがどのような色を使っているのか確認する方法を紹介します。この方法で色んなサイトの配色を見ていくと非常に勉強になると思います。

CSS Prism by Ryan Berg

css-prism.png

使い方は簡単。CSSのアドレスを入力するだけです。

CSSから色を抜き出すので画像に使われている色は出てきません。最近はWebフォントを使うなどして画像の数を抑えようとする傾向にありますので、CSSで使われている色を見ればサイトのイメージをつかむことができると思います。

わざわざCSSのアドレスを確認するのは面倒だという方のためにブックマークレットもあります。下の画像のように「CSS PRISM」と書かれた部分をドラッグして、ブックマーク(お気に入り)に保存します。

css-prism2.png

で、確認したいページを開いてから、先ほど保存したブックマークをクリックします。

css-prism3.png

確認したいCSSファイルをクリックすると、そこで使われているカラーが表示されます。

css-prism4.png

まれにうまく表示されないこともありますが、手軽ですしとても便利です。

ColrGrabr

colorgrabr.png

記事を書いている途中に、よさげなサイトを見つけたので紹介します。

内容的にはCSS Prismと同じですが、こちらはCSSファイルごとではなくサイト全体の色を抽出してくれます。ということでこちらのほうが便利かも。

アドレスを入れても、ブックマークレットとしても使えます。

フラットデザインの参考になるサイトのまとめ

ここからはフラットデザインの参考になるサイトをまとめているサイトを紹介します。

Flat UI Design

flat-ui-design.png

フラットなデザインのサイトが集められています。随時追加されていますし、カテゴリ分けもされています。

フラットデザインの事例を集めた記事もたくさんありますので紹介しておきます。

ということで、フラットデザインの参考になるサイトと、そのサイトがどのような色を使っているのか確認することができるサイトを紹介しました。お役に立てればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。