今回は、Webデザインの初心者が陥りがちな失敗やイケてないデザインについてです。
私自身も通って来た道で、育ててきた未経験の後輩たちも例外ではありませんでした。
これまでの経験を活かして、Webデザイナーを目指す人にその失敗の数々を紹介しようと思います。
良くないデザインの例
まずは初心者がやりがちなデザインあるあるです。
シャドウが強すぎる
Webデザインの初学者にありがちな、濃すぎるシャドウです。
昔のWebサイトに結構ありがちで、今これをやると古臭い印象を与えます。
シャドウで奥行を加えたいのであれば、薄く入れるようにしましょう。
色が多すぎる
あまり色が多すぎるとまとまりのないデザインになってしまいます。
一つの色の濃淡を変えて配色するとまとまりが出ます。
配色は基本的に背景色などのベースカラー、サイトの印象を決めるメインカラー（例の右側ではブルー）、ボタンなど目立たせたいパーツに使用するアクセントカラーを使って配色します。
メインカラーは、コーポレートカラーやサイトのイメージ、ロゴデザイン、もしくはメインビジュアルなどを参考に決定します。
原色を使っている
原色を使うと、まずいデザインになりやすいです。色が強調されすぎてガチャガチャした印象を与えます。
原色が絶対にダメという訳ではありませんが、難易度が高いので初心者は避けるようにしましょう。
原色や彩度の強い色は避けて、彩度を抑えたり明るさを調整したりして全体に馴染むように配色しましょう。
装飾が過剰
↑のBadの例は、一昔前のデザインで使われていたような装飾です。
ボタンの装飾が過剰だと、古臭い印象を与えます。
例の右側のようなデザインでも、ちゃんとボタンだと認識できます。
グラデーションの変化は大きすぎると浮いてしまうので、さりげなく入れるようにした方が全体に馴染みやすくなります。
背景画像の選定と調整
背景画像が複雑すぎると、文字が埋もれてしまい、視認性が低下するため、デザインの質が損なわれる可能性があります。
文字がしっかりと目に入るようにするためには、以下の工夫が重要です。
- 文字が見やすいシンプルな画像を選ぶ
- 背景画像の明るさや透明度を調整する
- 文字と背景のコントラストを確保する
例として、左のデザインでは文字が背景に埋もれてしまい、メッセージが伝わりにくい状況です。
このような問題を避けるため、適切な画像選定や調整を行い、デザイン全体のクオリティ向上を目指しましょう。
余白がない
Webデザイン初心者は、余白を設けることに不安を感じ、要素を詰め込みがちになる傾向があります。
しかし、適切な余白を確保することは、デザインの完成度や使いやすさを大きく向上させる重要な要素です。
余白が読みやすさを向上させる
書籍のデザインを例に取ると、ページの上下左右に十分な余白が設けられているのは、読者が快適に内容を理解できるようにするためです。Webデザインにおいても同様に、余白を確保することでコンテンツの可読性が高まります。
大胆な余白でデザインに洗練さを
上級者向けのテクニックとして、余白を大胆に活用することで、画像やフォントの美しさを引き立たせることが可能です。余白を効果的に使えば、シンプルでありながら魅力的なデザインを実現できます。
適切な余白を設けることで、デザインに洗練された印象を与え、ユーザー体験の向上にもつながります。余白は「空白」ではなく、「デザインの一部」であることを意識しましょう。
より良いデザインのコツとは
デザインをする上で、さりげなさというのは大切です。
シャドウが強い、彩度が強い、グラデーションが強いというありがちな失敗は、過度な装飾が原因です。
見た人が違和感を覚えないデザインというのは、装飾がさりげなく施されているのです。
強めの装飾が全て良くないという訳ではなく、初心者がやっちゃうとダサくなる原因なので避けた方が良いでしょう。
デザインを学べるおすすめ書籍
デザインを学べるおすすめの書籍を紹介しますので、気になるものがあれば読んでみてください。
まとめ
もしかしたら、この記事を読んでドキっとした人もいるかもしれません。
上記の例は、初心者や非デザイナーがやりがちなデザインです。みんなが同じような失敗をしながら、Webデザイナーになっているのです。
最初から「センスがない」とあきらめないで、良い例を参考にして改善していけば良いと思います。
他にもこんな記事があります。
Webデザインの参考になるギャラリーサイト・参考サイトまとめ
Webサイトをデザインする時、同じような業種や色使い、レイアウトのサイトを参考にすることは多いです。…
全くの未経験が独学でWEBデザイナーに転職する方法
私は28歳の時にWebデザイナーに転職してWeb業界でのキャリアをスタートさせました。この記事では、…
「デザイン」の要は「ヒアリング」にあり
Webデザインの魅力は、視覚的な美しさだけでなく、ユーザーのニーズやビジョンを的確に捉えることにあり…
