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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テーマ別に配色を決める方法

もう一つの方法は、テーマ別に配色を決める方法です。これは、色の明度や彩度ができるだけ近い色を選ぶ方法です。

具体的には、このように選んでいきます。

あまり色の組み合わせが思い浮かばない場合でも、「coolers」や「colordrop」のようなツールを使えば、イメージ通りの配色が見つかることがあります。

Coolors

Color Drop

Color Hunts

2つ以上の色が並ぶと、人は経験をもとにイメージを膨らませます。これを色彩連想効果と呼びます。
どのような読者に読んでもらいたいか、読者にどのようなイメージを持ってもらいたいかを考えて、配色を選ぶのがよいでしょう。

2.揃える

Webページのレイアウトは、一枚の紙をイメージすると良いでしょう。
サイトの名前にあたるロゴをどこに置くか、メニューをどう置くか、問い合わせフォームをどこに置くかなどを、縦・横の両方を意識しながら決めていきます。

Webデザインの場合、レイアウトを「揃える」方法は、「左揃え」「右揃え」「中央揃え」「上揃え」「下揃え」です。

英語や日本語のサイトは横書きで表示されることがほとんどですが、Webデザインでよく使われているのは「上揃え・左揃え」です。それは、左から右に文字を読むからです。
しかし、下揃え・右揃えではダメなのかというと、必ずしもダメなわけではありません。その時々に応じた用途に合わせて、どう揃えるかを決めていくのがいいでしょう。

センタリングに不向きなシチュエーション

最近カラム（段組み）を使わないレイアウトをよく見かけるようになりました。
こうしたサイトでは、テキストを中心に揃えるデザイン（センタリング）がよく使われます。
しかし、センタリングは、場合によって読みにくく、野暮ったいデザインになってしまいます。

センタリングが不向きな次の2つの場合を押さえておきましょう。

- 左右どちらかに画像が添えられているとき
- 本文が長文の時

センタリングは視線を1点に集める効果があり、パーツが2つ以上あったり、1つのパーツが大きい場合には威力を発揮しません。
タイトルとサブタイトルのような、印象に残したい部分に効果的に使いましょう。

3.リズムを作る

単調なレイアウトはユーザーを退屈させてしまいます。
飽きのこないデザインを作るには、リズム感のあるレイアウトを作ることが大切です。

では、リズム感のあるレイアウトとはどのようなものなのでしょうか。

リズムとは、「大事なもの」と「それ以外のもの」を分けて見せる、対比させる、ということです。
例えばWebデザインの場合は、ロゴ、見出し、本文を、色や大きさを変えて重要度を変えていきます。

最近では文章が長いほどSEOに有利だという話もありますが、単に長いだけでは文章は読みにくく、すぐにサイトから離脱してしまいます。
しっかりとリズムをつけることで、同じ文章でもメリハリが生まれ、軽快に読めるようになります。

4.写真や図を活用する

WebデザインはCSSと密接な関係にあるので、文字の装飾にばかり気をとられてしまいます。
しかし、Webデザインを考えるうえで、写真や図をどのように生かすのかも考えておきたいものです。

写真や図は、言葉では説明しにくいことを明確に伝えるという役割があります。

関連するシチュエーションの写真があるだけでも、イメージが鮮明に湧いてくるのが分かります。

数字や規模などを示すデータは、グラフなどで図解すると、説得力が増します。
また、複雑な情報は図解をすると非常に効果的です。文章で読んだり、箇条書きにしても、全体像や出来事の関係が理解しにくいことがあります。
図解することで、個々のポイントの関連性が明確になり、全体像がわかりやすくなります。

余裕があれば、文字と写真や図との比率（ジャンプ率）もチェックしてみましょう。写真や図の大きさ一つとっても、伝わるイメージは大きく変わるからです。

参考：
印象をガラリと変える文字の「ジャンプ率」を理解しよう

まとめ

デザインに関する基本事項は実際には山ほどありますが、今回はその中でも重要な4つのポイントをお伝えしました。

4つのポイントには、共通点があります。それは、「大切なところと、そうでないところをわけること」です。
「なにかイケてない……」そんなデザインは、重要度の主従関係がバラバラなときに起こります。伝えたい情報をしっかりと読み手に伝えるために、これらのポイントをぜひ実践してみましょう。