オススメ配色集 〜HPは色が命〜

わかりやすくするためにここだけ白にしてます。


やっぱサイトの印象を左右する配色はものすごーーーーーく大事でしょう!!
テキトーはやめたほうがいいです たぶん

全部に共通して言えることは、目に優しい配色にしようということです。
ちなみに美大生でもなんでもない、ただのしがない学生が直感で書いてるコンテンツなので、詳しい人はどうか心の中で笑っておいてください。


ポップ編 〜明るい★感じを★目指す〜
背景はうすい黄色、文字色はオレンジ
↑このサイトでもところどころ使ってますね 灰色とピンクだけじゃ寂しいから
背景は青 文字色は白
↑見だしくらいならいいかな 小説ページとかではやめましょう 目が痛いから
背景は薄いピンク 文字色は濃いピンク
↑このサイトで頻繁に使っているパターン お気に入り ピンクってうまく使うと可愛い色からかっこいい色になりますよオススメ♪
背景は薄い赤 文字色は濃い赤
↑一年以上前、うちのサイトで使ってたパターン 文字色の赤の色をいろいろと工夫してみたらいいかもしれません
背景はうすい緑 文字色は緑青っぽいの
↑グリーンの時にたまに使ってたパターン ワカクサって感じで。性別を不明にさせたい時なんかにいいかも(笑)
背景は黒 文字色はオレンジ
↑うまくいくとポップになります 失敗するとなんだか間違ってる人になってしまいます 文字色を全部オレンジにするとキツイので他にも灰色とか紫とか混ぜるといいかも WJ虜の頃の配色オススメ♪
背景は黒 文字色はピンク
↑ところどころ使うといい感じ 好きな配色です 黒×オレンジよりは使用頻度低いですがでも結構よく使われる配色ですオススメ♪
背景は灰色 文字色はピンク
↑このサイトでもよく使っている配色 うまくいくと意外とポップな感じになります。電車のつり革広告の配色を参考にしたので多少はプロチック(嘘)オススメ♪
背景は灰色 文字色はオレンジ
↑使いすぎると目に痛い みだしくらいで
背景は薄いピンク 文字色はオレンジ
↑うーんなんか失敗かも 使ってるとこあるけどこういう配色はあんま好きじゃないんですけどね。ちょっとナヨナヨしてしまいます
背景はピンク 文字色は黒
↑わりと中高生のサイトで多いかな 文字色は黒のままが一番いいってことも多いです 上のピンク×オレンジよりは見やすいでしょう…。
背景は赤 文字色は薄い赤
↑以前使ってたパターン 使いすぎると駄目です 小説ページではやめましょう みだしとかメニューくらいですね
背景はピンク 文字色は薄いピンク
↑背景のピンクがけばくならないようにしないといけないです 使いすぎは赤と同じく駄目です
背景はオレンジ 文字色は黒
↑一時期この配色スゴイ流行ってて、素材屋さんとか結構使ってましたね。ただやっぱりこの配色はうまい人と下手な人の差が激しく別れるところですので…でも使いたくて使ったことあるんですよね(笑)思ったとおりにいかなかったけど…オススメ♪

豆知識→配色の他にも、ページ内に★や●や■などのクッキリした記号を多用すればポップになりやすいです。メニューとかは画像にして、ポップなフォントを使えばポップになるかも?日本語メニューでもいいけど和風にならないように。イメージ的にはアメリカの国旗って感じでポップにいきましょう 外国のチラシとかがあれば一番いいです


★まとめ★
ポップにしたい時は、背景と文字色の差を激しくしましょう。でも激しすぎると目が痛くなるので注意。黒は使いすぎるとダサくなりますがところどころ使えばポイントになります あと、同じ配色ばかりではなく3,4色を基本としてそのうちの2色を多く使えばいい感じなのでは?ウチのサイトは灰色・ピンクを多く使い、オレンジなどが少々。あとちょっと寂しい時は画像をポイントにすると案外ポップになります IE5.5以上の方はスクロールバーの色にも気をつかってみましょう その際はポップならぷっくり系がオススメ ポップを目指してるのに平坦にしちゃうと意味ないですから
ポップ=ピンクではないですが、ピンクは一番使いやすいと思います ピンク・オレンジあたりはポップにしやすいです 緑は難しいですね 黒はクール系のほうが本当は使いやすいですが、ポップにしようと思えばすごいいいのができる場合もある



クール編 〜黒★青★白〜
背景は黒 文字色は灰色
↑意外と目にも優しいかな 暗くなりすぎないようにフォントなどいろいろなところにも気を使わないといけないので結構大変ですがオススメ♪
背景は薄い青 文字色は紺
↑男性に多いかな 派手すぎず地味すぎずオススメ♪
背景は白 文字色は黒
↑基本中の基本の配色ですが、文字サイズ・フォント・配置に気を使い、他の色(リンクなど)に少し明るい感じの色を使うとものすごくカッコよくなりますがかなりムズいです 上級者に多い
背景は灰色 文字色は少し濃い灰色
↑ウチのサイトでもちょこちょこと。文字色の灰色を薄くするとシンプル系になるかな 灰色は使いやすい色なのでサイト作成で困ったときは灰色を使ってみましょう
背景は茶色 文字色は薄い茶色
↑クールつーよりシックな感じですが クラシック風なようなチョコレート風なような オトナの男性に多い気がする お父さんが運営してるとことかね
背景は濃い緑 文字色は灰色
↑黒板風+メカ風(?)意外といい感じになります 他のリンク色とかにも気を使うとものすごいカッコよくなります 男性が運営してるサイトに多い

★まとめ★
クールにしたい時はどこかに黒をいれるとか、ひきしまるようにしないといけません クールって一番難しいと思います。色の他にもフォント、大きさ、画像、リンク色、果ては文章の内容にまで注意しないといけませんから。クールなサイトというのは本当に少ないものです


シンプル編 〜白★黒★灰〜
背景は薄い灰色 文字色は灰
↑クール編の灰色も文字色よりも少し薄めで。
背景は白 文字色は灰
↑無難にいきたい時は。こればっかりだと寂しいのでところどころピンクや薄い青とかもいいかも
背景は薄い黄色 文字色は灰
↑案外多いこの配色 目に優しいです
背景はめちゃくちゃ薄い緑 文字色は灰色
↑緑の色をいろいろと変えると楽しいです 文字色もうちょっと濃くてもオッケーかも
背景は薄い水色 文字色は薄い青
↑ちょっと元気な感じのシンプルチック 雲や空、花の写真と合わせて使うと可愛い+シンプルって感じです シンプル系素材屋さんとかに多いかなオススメ♪
背景は薄い紫 文字色は紫茶赤 ぽい
↑ちょっと元気なシンプル。オトナの女性みたいな(謎)いつか挑戦したい配色ですねオススメ♪
背景は白 文字色は茶色
↑思いっきり濃い茶色にすると落ち着きます 明るい茶色は駄目です


★まとめ★
「**」や「++」はシンプル系に使うといいかも
中級者になるとシンプルにしだす人が多いですが、ただ単にシンプルだと寂しいもんです 人の好みもあるとは思いますけど、私は結構シンプルすぎるのは嫌だったりします…ちょっとだけピンク・緑・青あたりの色をどこかにいれれば全然違うと思います。リンク色に気を使えば結構いいかも?
シンプルはものすごい流行ってます,今。その中で可愛い+カッコイイ+シンプルを目指すのはかなり難しいかと思われますが挑戦する価値はあるでしょう!



ちなみに私は、ほとんどポップです。サイト巡りもポップなところが好きです。最近の主流はシンプルなのでちょっと寂しい(笑)
まぁ、なんやかんや言っても目にやさしいことに気を使えばそんなに不快感は与えません。
時々あるのが、しんぷるを目指しすぎて文字色が見にくいところ…見えねー!!
このページも白×灰色なため少し見にくいですね…すんません。