「Webデザインをどのように勉強してきましたか？」

この問いに、みなさんはどう答えるでしょうか。

Webデザインを学ぶ方法は多数あります。
以前は書籍や雑誌で学ぶのが一般的でしたが、最近では無料で観られるブログや動画コンテンツが増えています。

ただ、どの職業でもそうなのですが、いわゆる「教科書」から学んだ知識だけでは、どこかのタイミングで壁を感じてしまうものです。
実際にホームページをローンチして初めて、「今回はここがよかった」「ここがよくなかったから改善したほうがいい」というフィードバックが生まれます。

今回は、Webデザイン初心者がやってしまいがちなデザインの間違いと改善ポイントをご紹介します。
Webデザインを学びはじめの時に間違えてしまう部分をあらかじめ理解しておけば、そうした間違いを避けることができます。

Webデザイン初心者がやってしまうよくある7つの間違い

photo.jpg

1. ユーザーを無視している

Webデザインを学んでいる時に一番最初に考えなければならないことが*「このデザインは誰のためのデザインか？」ということです。
実際、デザインは「自分が表現したいこと」からスタートすることも多いでしょうが、その場合であってもユーザー不在でデザインすることはNG*です。

GoogleやYouTubeのホームページのように誰もが知っていて誰もが毎日訪れるWebサイトであれば話は別ですが、多くのホームページは検索や他のサイトに貼られているリンクからやってきた新規の来訪者のほうが多いのではないでしょうか。

その場合、ページを見てすぐに、何をするためのページなのかをユーザーが即座に理解できることが重要です。
ページを見て疑問を抱かれてしまうようなホームページでは、それ以上読み進められることはありません。
ナビゲーションが直感的でない場合でも、ユーザーがホームページ全体の構造をイメージするのが難しく感じるので、同様にホームページからの離脱の原因となります。
ユーザーの現在地を示し、別のページに移動することがはっきりと分かるリンクを設置することで、この問題を解決することができます。

2. パッと見て何をするページなのかよく分からない

いくら洗練されててかっこいいモダンなデザインが採用されていても、一体何をするページなのかが分からなければ、ユーザーはすぐにホームページから離脱してしまいます。
ファーストビューですぐに内容が理解できるようにするのは非常に重要なことです。

そのページが何のためのページなのかを明確にするには、例えば次のような要素を組み合わせるのが一番簡単です。
これらはすぐに実践することができます。

・タイトル：パッと見て内容が分かるようなタイトルにする
・ナビゲーションバー：現在地が分かるようにする
・パンくずリスト：適切な階層にする
・アイキャッチ画像：内容に関連する画像を設置する

こうした要素を使って、ページが何のためのものなのか、何を述べようとしているのかが分かれば、ユーザーが読み進めてくれる可能性が高くなります。

3. ダラダラとライティングする

大規模なホームページを制作する場合はライティング部分とWebデザインを分ける時もありますが、ダミーテキストなどを使ってここにプロダクトの説明部分を入れる、といったことはデザイン時にも決めていくと思います。
例えばWebサービスの紹介をページに掲載しようとしたときに、上から下までありったけの文字が書かれていたら、ユーザーにとっては読みにくいものです。

読みやすいページになっていますか？
そのために、次の項目を確認してみましょう。

・適切なヘッダーをつける：H1・H2だけでなくH3以下も必要に応じて見出しをつける
・イメージ画像を差し込む：文字だけでは読みにくいので、イメージ画像を入れて図版率を上げる
・段落を分ける：意味の切れ目で改行したり空白行を差し込む

特に注意したいのは、デスクトップ画面とモバイル画面での見え方の違いです。
デスクトップ画面では幅があるので長文でも気にならないかもしれませんが、モバイル画面になると幅が小さくなるので、文章の折り返しが多く発生してしまいます。
そのために読みにくくなるケースが発生するので、できるだけライターサイドで長い文章は改行しておいたほうがよいでしょう。

4. 複雑にする

複雑でややこしいホームページはユーザーから一番嫌われてしまいます。
会員登録までにやたらステップがあったり、問合せページがなかなか見つからなかったりという具合です。

サイトデザインにおいて絶対に守っておきたい格言として、*「KISS」という言葉があります。
KISSとは「Keep It Super Simple」(超単純にしなさい)*という言葉の頭文字を取ったもので、シンプルにデザインしたつもりでもサイトの初来訪者にとっては初めて見るものなので、自分が思った以上にシンプルにしなさいという、デザイナーなら全員が知っておきたい言葉です。

シンプルであれば、構造の把握にも役立ちます。
直感的にナビゲーションやヘッダー、コンテンツエリアやフッダーの位置を認識することができれば、ユーザーは欲しい情報を自分から探そうとサイト内をブラウジングし始めます。
簡潔さを保つには、不要なコンテンツを持たず、詰め込みすぎずにユーザーに選択肢を握らせることが重要です。

5. 詰め込みすぎる

Webデザインを学ぶ学校でペーパープロトタイピング(白紙にペンを使ってデザインカンプを作る方法)をさせると、最初のうちはほとんどが画面いっぱいにコンテンツを詰め込もうとするそうです。
しかし、そうしたデザインはシンプルとは無縁です。

行間や文字間、要素間などに適切な*余白(ホワイトスペース)を設けることで、ユーザーが読む負担を減らし、「息継ぎ」*ができる余裕を設けることができます。

もちろん、余白を多く設けるほど、一度に見える情報量を制限することにもなるので、デザイン初心者は余白を設けるのを嫌う傾向にあります。
しかし、ページを初めて見るユーザーにとっては、ページを読み流しながら、コンテンツ領域の区切り目を認識して情報のグループを把握しようとします。
空白で情報を区切ることで、構造が複雑化するのを避けることができ、またインデントなどで視覚的に階層構造を持たせることで、コンテンツ同士の関係性を識別することが簡単になります。

6. BRタグに頼る

改行を意味するBRタグは、Breakの略、より正確に言えばLine Break(＝改行)を意味する言葉です。
BRタグはその言葉が意味する通り、長文のテキストにおいて長くなってしまったところを、強制的に改行する役割があります。
しかし、Webデザインを学ぶときにやってしまいがちなのは、テキストでもないのにBRタグを使ってオブジェクトを配置することです。

ホームページを作成する時に気をつけたいのは、ユーザーにとって分かりやすいページを作ることですが、検索エンジンにとっても分かりやすいコードを書いていくことです。
正しくマークアップすることで、検索エンジンも内容を評価しやすくなります。

HTML5からは、よりセマンティックに(文章構造を保ちながら)コーディングが行えるようになりました。
レイアウトに関しては極力CSSに任せるようにして、できるだけ構造的にもシンプルなマークアップを行うようにしましょう。

7. 説明に頼る

ダラダラと冗長な文章になったり、情報を詰め込みすぎたりするのは、説明に頼ってしまうのも大きな理由のひとつです。
文字情報に頼るのは必要最低限にしたほうが、かえってページもシンプルですっきりするものです。
そのためには、次のようなポイントを確認してみるといいでしょう。

・アイコンを活用する：アイコンは性別や年齢に関係なく意味を伝えることができます。
・ビジュアルイメージを使う：写真を効果的に使うことで、冗長な説明を避けることができます。
・見出しや箇条書きを活用する：見出しや箇条書きはそれだけで文章構造を持っているので、シンプルに説明することができます。

また、明確で一貫した構造にすることで、規則やルールが明確になり、ユーザーに極端に長い説明を要することなく直感的にサイトを回遊してもらうことができます。