miMemo(ミメモ)

Web制作

[M]WEBデザインの配色を考える時に参考にしているおすすめサイト5選まとめました

Color osusume5 sum

こんにちは!みう(@miu0512)です。WEBサイトを綺麗に見せるコツの一つは「配色」。色の組み合わせによってイメージが変わってしまうこともあります。私は結構配色を考えてしまうので、いつも「配色」参考サイトを利用しています。

配色を考える際に参考にしているサイト5つまとめました

少しでもイメージに近く、そして効率的にサイトを作るなら、自分であれこれ考えるよりも、ある程度配色を参考サイトで見ておくことをおすすめします。眺めているだけでもかなり楽しいですよ!

多くの配色パターンを簡単に探して使える色のコミュニティサイト「colourlovers」

[browser-shot width=”500″ url=”http://www.colourlovers.com/”]

趣味でWEBサイトを作っている時からお世話になっている色のコミュニティサイト。配色パターンがかなり多く登録されているので探しやすくおすすめです。英語ですが、だれでも簡単に使うことが出来ますよ!

最近よく使っています!国内配色参考サイト「カラログ」自分でも作成可能!

[browser-shot width=”500″ url=”http://color.ark-under.net/index.php”]

国内配色パターンギャラリーサイト。自分でも作れるし、他の方が作った配色パターンも見ることができます。細かく配色設定が載っていて、詳細ページにはレイアウト見本が載っているのでイメージしやすい!

だれでも簡単にフラットデザインができる!「Flat UI Colors」

[browser-shot width=”500″ url=”http://flatuicolors.com/”]

フラットデザインをしてみたい方におすすめ!ここにある色を使えば、だれでも簡単にフラットデザインサイトが出来ちゃいます。私もフラットデザインのサイトを作る時はよくお世話になっています。

1色選ぶだけで配色が決まる配色ジェネレーター「ウェブ配色ツール Ver2.0」

[browser-shot width=”500″ url=”http://www.color-fortuna.com/color_scheme_genelator2/”]

初心者にオススメの配色ジェネレーター。ここでは1色カラーピッカーで選ぶだけで、全体の背景やサイドバーの見出しの色など、他のパーツの色も自動的に決まるため、イメージカラーを1個考えておくとかなり便利。

既にイメージ毎に参考配色が並んでいるのでわかりやすい記事!

[browser-shot width=”500″ url=”http://www.webcreatorbox.com/inspiration/colour-scheme-ideas-100/”]

サイトではなくWEBクリエイターボックスさんの記事のひとつ。「女の子向け」や「子供向け」などジャンル別にまとめられているので、すぐに使えます。上で紹介した「colourlovers」からピックアップされています!

おまけ:私が色を決めるときに考えていること

私の場合、まず「メインカラー」を決めます。赤系とか、青系とか。それから、「サブカラー」を考えます。メインカラーを引き立てる色です!最後に「アクセントカラー」を考えています。服で言う「差し色」ですね!

メイン・サブ・アクセントの3つを中心に配色を選ぶとラク!

例えば、ミメモの場合はメインカラーを「ピンク」、サブカラーを「オレンジ」、そしてアクセントに「ミントグリーン」を使っています。あとは引き締めるためにグレーを濃淡を変えて使ったり。グレーは万能なのでよく使っています!

さいごに・・・

色ひとつでその人のイメージが決まると言ってもいいほど、色は大きい存在。特にサイトを開いた時にファーストビューで印象が決まるWEBサイトは配色が重要!配色が上手なサイトほど、しっかりまとまっていて見やすいと感じています。

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP