ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント

更新日: 2018年01月31日

デザイン

インターネットの技術の進歩に伴い、誰もが簡単にホームページを作成できるようになりました。
しかし、いくら技術的な知識をつけても、「なにかダサい……」「なにか物足りない……」と感じることはありませんか？
このような場合、多くは「デザインの基礎」を押さえられていないだけかもしれません。

今回は、デザインの知識が全くない「ノンデザイナー」の方でも、最低限押さえておきたい4つのポイントをご紹介します。いきなりプロ顔負けのデザインが作れなくとも、これさえ押さえておけば見ている人にも自分の意図をしっかりと伝えることができるでしょう。

1.テーマカラーを厳選する

「なにかダサい……」と感じるWebデザインは、配色のチョイスを間違えている可能性があります。
デザイナーは、何となくこの色が好きだから、という理由で配色を決めることはありません。

Webサイトには、伝えたいメッセージがあります。
例えば、男性向けなのか、女性向けなのか、もしくは高齢者向けなのか、若年層向けなのか、でコンテンツに含まれるメッセージも変わってきます。
デザインも同様で、どんな配色を選ぶかで、伝わるイメージが大きく変わるのです。

配色の決め方だけでも様々な方法がありますが、ここでは軸となる2つの決め方をご紹介します。

カラーアイデンティティを決める方法

カラーアイデンティティ（ドミナントカラーと呼ぶこともあります）とは、あなたの伝えたいイメージに沿って、核となる１色を決める方法です。

例えば、コカ・コーラといえば赤色。赤色には、情熱・大胆さ・愛情などを想起させます。
これは、それぞれの色が持つイメージがあるからです。これらのイメージのことを「カラーパーソナリティ」と呼びます。

具体的なカラーパーソナリティは以下の通りです。

01_カラーパーソナリティ.JPG

- 緑：健康・平穏・自然・交流
　例）スターバックス・CYBER AGENT・LINE

- 黄色：活発・若さ・楽観・応援
　例）マクドナルド・LOFT・クロネコヤマト

- オレンジ：友情・わくわく・創造性
　例）アマゾン・ハーレーダビッドソン・au

- 赤：エネルギー・興奮・危険
　例）Ｈ＆Ｍ・ハインツ・Yahoo! Japan

- ピンク：女性・潔白・ロマンス
　例）もも色クローバーＺ・化粧惑星・ゼクシィ

そのほかにも、色が連想させるイメージは数多くあります。

- 紫：忠誠・富・成功・知恵・誘惑
　例）OZ MALL・ANNA SUI

- 青：誠実・安定・平和・清潔
例）AMERICAN EXPRESS・DELL・facebook

- グレー：中立・簡素・未来
　例）Apple・Soft Bank

- 黒：権力・洗練・威厳・優雅
　例）シャネル・FUJIFILM・ROLLS ROYCE

核となる1色が決まれば、明度を少し変えるだけで他の色も自然と決まります。ターゲットに応じてカラーアイデンティティを決めるのは非常に役に立つ方法です。