ダサいページは、もう作りたくない!なら色数と原色に気を使いなさい

どうも、スマコマのコマ太郎です。元気もりもり

綺麗なテンプレートを買って使っているのに、なぜか素人くさいサイトになってしまう。そんな経験をしたことってありませんか?

そして綺麗なサイトを作るのって、むずかしいしセンスがないとダメだと思ったりしますよね。

でもね。

実は、あるルールを知ると驚くほど、スキルアップしてしまうんですよ。みんなただ、そのルールを知らないから素人くさいページになってしまっているだけなんです。

そこで中でもインパクトがある2つのルールについてご紹介しようと思います。たった2つのルールを知り実践するだけで、見違えるほど上達したように感じるはずですよ。

文字に使う色数を減らす

WordPressや無料ブログでホームページが作れるようになると、次にやってしまうのが文字装飾です。

ただ文字が並んでいるだけだとシンプル過ぎるので、太文字にしたりイタリックにしたり、下線を付けたりとね。

そして出来上がったページを見ると目がチカチカするほど、多彩な文字装飾がされていたりするものです。

うん、その気持ち。ものすごーく分かります。

でもね。目がチカチカするほど、うるさいページって見たくないですよね。折角、来てもらった読み手を逃がしてしまっては本末転倒です。

じゃあ、どうすればいいのか?

実は結構、簡単なことで、それは「色数を減らし、原色を使わない」ようにすればいいだけです。

素人っぽいページって、使っている色数が多いんですよ。色数が多いから、目がチカチカしちゃうんです。

ちなみに今言っている色数というのは、文字に関してね。サイトのベースカラー、メインカラー、アクセントカラーの話じゃないです。これはこれでまた別の機会にしますが、今言っているのは文字の色のこと。

色数を減らせば、落ち着きが出てグッと見やすいページになりますよ。色数は通常の文字色を入れて2色、多くても3色だけにしてみましょう。

一般的に良く使われるパターンは次の通りです。

通常:黒系
強い強調(否定):赤系
強い強調(肯定):黄系マーカー
弱い強調:太字

原色を使わないだけで、素人くささが消える

素人くささの原因は、色数だけではなく、もう1つ大きな要因があって、それが原色を使っているという点です。

原色というのは、もっとも基本となる色ではあるのですがプロはまず使いません。もちろん、わざと使うことはあるでしょうが。

では、こちらを比較してみてください。まずは原色の例です。

この色は綺麗ですか?それとも素人っぽいですか? レッド #FF0000
この色は綺麗ですか?それとも素人っぽいですか? ライム #00FF00
この色は綺麗ですか?それとも素人っぽいですか? ブルー #0000FF
この色は綺麗ですか?それとも素人っぽいですか? イエロー #FFFF00
この色は綺麗ですか?それとも素人っぽいですか? シアン #00FFFF
この色は綺麗ですか?それとも素人っぽいですか? マゼンタ #FF00FF

そしてこちら。原色を避けた色選択をしてみました。

では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #E60033
では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #3EB370
では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #007BBB
では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #FFD900
では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #A0D8EF
では、こちらの色はどうですか?素人っぽさがなくなりましたよね? #EB6EA5

どうですか? 随分と落ち着きが出ていると思いませんか?

このように原色を使うことを避けるだけで、素人くささって消える物なのですよ。

センスがないから自分にはできないと思っているなら、それはもったいないことです。実はセンス以前にルールを知っているかどうかという違いだったりするのですね。

デザインに関するルールはいろいろあるので、勉強してみるのも楽しいものですよ。基本だけならそんなに難しくないですからね。

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

画像形式はどれがいいの?

ブログを作るなら知っておきたい画像ファイル形式の話(JPG、PNG、GIF)

範囲指定してスクリーンショットが作れるWindows標準ソフト

クリックすると大きなサイズの画像を表示する

画像をクリックすると大きなサイズの画像を表示する設定

クリック率がアップ!リンク色を青、アンダーバー付きに変更する方法

ウェブサイトの色(RGB値)をワンクリックで調べる無料ツール

画像をポップアップ表示させるプラグイン

画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン