スキナモノート

SEOやマーケティング、WEB系に役立つ情報を発信しています。好きな事を中心に、文房具の記事もたまに。

Webデザインの配色をする時に参考になる6つのサイトを紹介

WEBサイトでもブログでもデザインをしていると配色に困ります。実際にしっかりとした配色をするのは、感覚だけでは無理があるものです。一つの配色がおかしいだけで、デザインの善し悪しが決まってしまう事もあります。
少ない色数であれば、なんとかまとめる事も出来ても、多くの色を使う場合は収集がつかなくなり、ごちゃごちゃしてしまう。全体の色のバランス等も考えなければいけない。色を扱うというのは、とても難しい事です。
私自身もデザインをする時に、色については、困ったり悩んだりする事は多々ありまして。そんな時に、今回紹介するサイトを参考にしながら、色を決めたりしていました。

基本的には何年も前から利用していたサイトなので、現在は他にも良いサイトがあるかも知れませんが、今でも愛用している色関係のサイトを紹介します。

Adobe Color CC

f:id:tubamenote:20150407025750j:plain

color.adobe.com

 

元Kulerですね。今ではColorCCと言う名前。
こちらは配色がメインのサイトです。Adobeが作っているだけに、非常に使いやすく、分かりやすい。そして作りこむ事の出来る設定の細かさ。Adobeアカウントがあれば保存も出来る。フォトショやイラレへの適用も出来るのでよく使います。また他の人が作った配色を利用する事も可能。アカウントがなくても十分に使えます。

 

paletton

f:id:tubamenote:20150407025737j:plain

paletton.com

 

結構前からある配色サイト。長く使っているのですが、現在のメインはColorCC。出来る事は非常に似ているのですが、ここの特徴は実際のWEBサイトの形で配色例を見せてくれる所です。色の割合や、どこに使うか等も分かるので、どんな色でサイトやブログをつくろうかと思って居る人にはとても参考になるサイトだと思います。

 

原色大辞典 

f:id:tubamenote:20150407025744j:plain

www.colordic.org

 

原色大辞典と言う事ですが、原色だけでなく、和色、パステルカラーや謎の東京メトロのカラー等を見る事が出来ます。色のランキグが見れたりと、楽しめたりもします。山吹色が一位なのは不思議ですが(笑)まずは色を知る所も大事ですからね。ここも外せないサイトです。

 

CSS3 GENERATOR

f:id:tubamenote:20150407025801j:plain

www.css3.me

 

スライダーをいじるだけでCSSグラデーションが簡単に出来てしまう。他にも角丸やシャドウ。透明度も調整が出来る。オールドIEにも対応したコードを吐き出してくれる。UIが分かりやすいだけでなく、UXをも満たす優良ツール。

 

CSS Gradient Generator

f:id:tubamenote:20150407025756j:plain

www.colorzilla.com

 

こちらもグラデーション作成が出来るのですが、このサイトは結構前からあって、ずっと使っているような気がします。自分でグラデーションを作る事も当然出来るのですが、プリセットも用意されているので、気軽に使用出来ます。上のCSS GENERATORよりも細かい設定が可能。グラデーションのかけ方の参考にもいいかもですね。

 

Colourlovers

f:id:tubamenote:20150407025731j:plain

www.colourlovers.com


このサイトで見れるのは、配色のサンプルになります。投稿サイトとなっていて、多くの人が投稿をした配色サンプルを見る事が出来る。メニューのTrendsからWebsiteを選ぶと、有名なサイトの配色も見れたりするので勉強になります。配色に迷ったりしたらおすすめなサイトです。

以上が、色に困った時に参考にしているWEBサイトです。他にも何かありましたら、足して行こうと思っています。また、おすすめのサイトがあれば是非教えてもらえると嬉しいです。

最後迄お読みいただきありがとうございます。感謝

そうだ、目次を小見出しまで対応させてみよう。

↑が目次。PC記事ページのみに表示されます。

f:id:tubamenote:20150331102639j:plain

今はフリーのJQUERYをちょこっと拾ってきて目次を試作しています。
最初に、はてなブログ仕様にするのに少し戸惑いましたが、一応小見出しまで対応出来るみたいですね。
下の大見出しから小見出し迄を目次で表示しています。

大見出し

H3の大見出し

中見出し1

H4の中見出し。

中見出し2

H4の中見出し。

小見出し

H5の小見出し。

大見出し2

H3の大見出し。

中見出し

H4の中見出し。

 

ただ、色々問題がありまして。

bulldra.hatenablog.com

いつも楽しく読ませていただいています。


『太陽がまぶしかったから』より利用させていただいている、関連記事を表示出来る【あわせて読みたいG】というプログパーツがあるのですが、【あわせて読みたい】と言う部分迄を目次で拾ってしまいます。ここにH4かH5が使われているのでしょうか。

合わせて読みたいGは、今は一度表示させないようにしているのですが、便利なので今後も使っていきたいと思っています。
目次の方で上手く拾わないように出来るかなというところ。後はスムージングもかけないといけないですね。

現在は記事上に表示させています。でも本当は、記事中の出だしの文章の下辺りに入れたいんですよね。一応記事中にも目次を表示する事は出来るのですが、トップページの記事一覧画面になると、表示されている記事全てのH3からH5を読み込んでしまうんです。続きを読む。を表示させればこの問題も解決出来るのですが、どうしたものでしょうか。


もう少しいじってみよう!っと一人言のような記事でしたが、お読みいただきありがとうございます。感謝

関連記事