公開日:

素人でもわかる!見やすいWebデザインのための参考書籍


特にデザインを変更しなくても、十分に見やすいHTMLのテンプレートやWordPressのテーマはたくさんあります。

しかし、見やすい、使いやすいデザインに改善する一手間を加える事によって、目立つイラストや写真をわざわざ追加しなくても「居心地の良い、自然と読み続けられる」デザインに改善することが可能です。コンバージョン率(CVR)を上げるためにも、まずは自然と読み続けられるデザインにするように、私は心がけています。

しかし、デザイナーでもないのに、プロが作ったテーマのデザインを改良するなんて難しいと思いませんか?このような疑問や悩みを持つ人は多いはずです。

  • 「誰にとっても見やすい、使いやすいデザイン」とは何?
  • 何を基準に「見やすい、使いやすい」と判断すればいいの?
  • 自分の印象だけで決めてしまっていいの?
  • お手本になるサイトはどれがいいの?

このような悩みを全て解決してくれる、おすすめの書籍があります。「シニアが使いやすい ウェブサイトの基本ルール」です。

「シニアが使いやすい」とありますが、お年寄りが使いやすいということは、誰にとっても使いやすいということです。

新しくサイトを作る時は、この本をパラパラとめくりながら改善するべき点をチェックしています。具体的にどのようなことが載っているか紹介します。

実存するサイトを例にあげて、Webサイトをデザインする上での注意点の解説がある!

ナビゲーション、ボタンに関するWebサイトの改善例
※クリックすると拡大します
トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社 p.14

上の写真の例では、『「アカウント」や「ウィッシュリスト」といったカタカナではなく、「会員」や「ほしいもの」といった意味が明確な表現にするべきだ』1) と書かれています。

もっと簡単な例を挙げると、『ホームページへ戻るリンクが「HOME」ではなく「ホーム」とカタカナで記載する』1) といった、本当に簡単に改善できることが載っています。

こういった地道な改善を積み重ねると、ユーザーがサイトを見ている時に、無駄に「あれ?このボタンの意味は何かな?」と考えることが減ります。できるだけユーザーに余計なことを考えさせずに、アフィリエイトリンクまで読み進められるデザインにすることが大切です。

使いやすいWebサイトのジャンル別の実例紹介

実在するウェブサイトを例に挙げて、「このサイトの、こういう所が使いやすい!」というポイントを解説付きで紹介しています。

通販サイトの例として、やずやのウェブサイトが紹介されています。シニアが迷わずに買い物ができるように施されている工夫が、わかりやすくまとめられています。

やずやのウェブサイトの例
※クリックすると拡大します
トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社 p.42-43

旅行・レジャーのサイトの例として、JTBのサイトが紹介されています。

JTBのウェブサイトの例
※クリックすると拡大します
トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社 p.66-67

生命保険・銀行のサイトの例として、日本生命のサイトが紹介されています。

日本生命のウェブサイトの例
※クリックすると拡大します
トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社 p.82-83

他にも、日本郵便やKDDI(au)のようなサービス業、JRや全日空のような運輸業、オムロンやキャノンのような製造業のサイトなど、様々な業種のサイトが紹介されています。パラパラとめくるだけでも、何か新しい気付きがあるかもしれません。

使いやすいデザインに仕上げるためのチェック項目

これが実は一番のおすすめのポイントです。ウェブサイトをデザインする上での注意点が、チェックリストでまとめられています。サイトを新規で立ち上げる時は、このチェックリストを見ながら、改善するべき点はないかチェックをしています。

デザイン上の注意点のチェックリスト
※クリックすると拡大します
トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社 p.136-137

改善するべき点が見つかったら、チェックリストに記載されているページを見ると、詳しく解説が載っています。

私は、チェック項目を見ながら、例として挙げられているサイトを参考に変更しています。この一手間を加えると、本当に「誰にとっても見やすい、使いやすいデザイン」に改善することができます。

最後にAmazonの書籍ページへのリンクを置いておきます。興味がある人はどうぞ。買って損はしないと思います。

Amazonの書籍ページを見る

その他の参考記事

「シニアが使いやすい ウェブサイトの基本ルール」の他にも、ウェブサイトデザインで参考となる記事を紹介します。

バナーは目に入らない!リンクに目を向けさせるためのデザイン

U-Siteのバナーは目に入らないのか?~新旧の知見を紹介します。

この記事では、「アイトラッキング調査で広告バナーには、ユーザーの視線がいかないことを確認した」と前置きした上で、広告にユーザーの視線を引きつけるポイントを解説しています。

ユーザの視線を惹きつけるのに効果的なデザイン要素は、次の3つである。

  • 平文
  • 人物の顔
  • 胸の谷間など、“私的な”身体部位

バナーは目に入らないのか?~新旧の知見

確かに心当たりがありますね。広告に視線を引きつける別の方法も、紹介されています。

重要な広告倫理を冒すことにはなるが、広告をコンテンツに同化させることである。

  • 広告が、ウェブサイトの構成要素と見紛うものになっていれば、多くのユーザが目を向けるようになる。
  • サイト上の他の構成要素と似せるだけではなく、それが表示されている場所が何か特別なセクションを成しているかの如く見せること。

バナーは目に入らないのか?~新旧の知見

バナーをサイドバーにペタッと貼るだけでは、誰も見ないということです。アフィリエイトリンクをクリックしてもらうためには、まずは視線を向けてもらう必要があります。このサイトに書かれているような点を注意して、アフィリエイトリンクを設置するように心がけています。

サイドバーは無視される?そのための対策とは!

「右カラム無視」への対策という記事を紹介します。これもU-Siteの記事です。

「バナー広告をサイドバーにペタッと貼るだけでは、ユーザーの視線を引きつけることはできません。」そのために、このような対策が紹介されています。

  1. コンテンツがバナー広告に見えないようにデザインしよう。すっきりとしたデザインのサイドバーが信頼を集める。
  2. コンテンツはバナー広告から離し、「連座」にならないようにしよう。
  3. サムネイル画像は、有益な情報が即、伝わる場合に限り、載せよう。
  4. 関連のある有益なコンテンツを載せよう。

「右カラム無視」への対策

サイドバーは有効なスペースですが、視線を引きつける工夫が必要ということですね。

ただし、最近はサイドバーすら無いサイトが徐々に増えてきています。最初は違和感がありましたが、慣れてくるとサイドバーが無い方が読みやすいと私は感じています。3カラムのデザインがすっかり見なくなったように、サイドバーも今後はなくなってしまうかもしれません。

クリックされやすいリンクのデザインとは?

青色リンクのその先に:クリック可能なものは見てわかるようにしようという、U-Siteの記事を紹介します。

ひと目で「リンク」と判断できるようにする

テキストリンクの場合、ボタンの場合、画像の場合など、どうすればユーザーが「これはリンクだ!」と認識しやすくなるか解説されています。そもそもリンクだとわかりにくいデザインもあるので、もし自分のサイトで当てはまる項目があれば、改善が必要です。

リンク先の記事をよく読んでほしいので、ここでは詳細を割愛します。以下の引用文を読んで響くものがあれば、リンク先の記事をじっくり読むことをオススメします。

テキストがクリックできるかどうかを確認するために、「マウスオーバー」してみよう、とユーザーに思わせてはならない。リンクを探しまわるというのは手間であり、ユーザーはそんなことを長時間はしないからである。(永遠に正しいガイドラインがあるとすれば、それはユーザーの手間を省くだろう。つまり、大変であればあるほど利用されなくなるということだ)。
青色リンクのその先に:クリック可能なものは見てわかるようにしよう

今回は、私が新規サイトを立ち上げる時に参考にしている書籍とウェブページを紹介しました。地味でも、こういった改善がCVRを向上させると思い、取り組んでいます。

参考文献

1) トライベック・ストラテジー株式会社(監修)他 (2014). シニアが使いやすいウェブサイトの基本ルール グラフィック社

3) 「右カラム無視」への対策 – U-Site

4) 青色リンクのその先に: クリック可能なものは見てわかるようにしよう – U-Site

最後に一言

こういう記事を「キュレーション」って言うんじゃないのかなぁ…

公開日:

カテゴリー:Webデザインコメントはありません » 
Top