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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フィードやTwitterで最新情報をチェック

Webpark - ウェブサイト作成に役立つことをいろいろと

この記事に付いているタグの最新記事一覧

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