視覚的デザインの最適化

サイトやページの内容を視覚的にわかりやすく、使いやすく、読みやすくし、そして美しくすることは、視覚的デザインが担う重要な役割です。特に、検索結果からサイトに訪れるユーザーを意識する場合、視覚的なわかりやすさや使いやすさはより重要なものとなります。

学習の必要のないわかりやすさを実現する

検索結果を経由してサイトに訪問するユーザーはそのサイトに不慣れであり、スムーズに情報を取得したり、機能を利用したりすることは困難になりがちです。そのサイトに不慣れなユーザーでも迷うことなく利用できるようにするためには、ページ内の情報をわかりやすく配置し、学習の必要なく情報を取得できるようにしておくことが重要です。

例えば、見出しに小さな文字が使用されていた場合には、その部分が見出しであることを理解するためにそのサイトの構造についてユーザーが学習する必要が生じます。またリンクに使用される文字に下線がなく、文字色が黄色だった場合、ポインティングデバイスやキーボードを操作しない限り、ユーザーはその部分がリンクであることを理解することができません。

ナビゲーション、見出し、段落、リンクなどの構成要素が視覚的にも論理的にもはっきりと区別され、多くの人が特別な学習なしにそれと理解できるようにデザインしておくことは、検索結果からアクセスしてくるユーザーのエラーを回避し、検索エンジンに対しても情報を正確に伝えることにつながります。

コンテンツにフォーカスしたレイアウトにする

検索エンジンからのユーザーを引きつけるためには、ページにランディングしてすぐに、必要な情報を見つけられるようなレイアウトであることが重要です。検索者は情報を求めて検索していますので、その目的となる情報がない、またはないように見えることは、検索者の体験を悪化させ、直帰率を高める要因になります。

つまり、検索者にとっては「探している情報がある」だけでは足りず、「探している情報が見つけやすい」レイアウトになっていることが重要であるということです。

ページの上部が広告や各種の告知などコンテンツの主要部分とは関係のない要素で占められており、スクロールしなければコンテンツが見られないようなレイアウトは避けなければなりません。これは単に検索者の体験を悪化させるというだけではなく、検索結果の上位から除外される可能性があるためです。

特に、ページ上部が広告で埋め尽くされているような場合には、Googleは検索結果のランキングを下げるような処理(ページレイアウトアルゴリズム)を行うと発表しています。

Googleは、一般的なブラウザでページを表示した際に、画面をスクロースルことなく見られる範囲(Above the fold)にコンテンツが表示されるかどうかテストすることを推奨しており、ブラウザサイズを確認するツールも公開しています。

見出しや重要箇所を強調する

多くのユーザーはウェブページを斜め読みしながら一覧し、自分にとって必要な情報だけを拾い読みします。このとき、自分にとって必要な情報のある場所を探す目印になるのは、見出し段落の先頭強調された文字列リンクの文字列などです。これらがわかりやすく記述されていることで、ユーザーはページ内の情報を正確に、一義的に取得することができます。

検索エンジンもユーザーと同様に、見出し、段落の先頭、強調された文字列、リンクに記述されている文字列をもとに、そのページを解析します。これらをわかりやすく、かつキーワードを適度に含めながら記述することで、検索エンジンによる評価を適切にすることができます。

まとめると、見出しや強調の適切な使用は、ユーザーと検索エンジンの双方にとって、次のような効果をもたらします。

  • どんな情報がページ内に含まれている(または含まれていない)のかを把握しやすくする
  • ユーザーがページ内の情報を正確に(一義的に)理解しやすくする
  • 検索エンジンがページ内の重要箇所を解析しやすくなる

また見出しには、その見出しに続く内容を的確に表し、かつ内容を想像しやすいものであることが求められます。また、見出しが次の項へと読み進める原動力となるように、興味を引くような魅力的なものであればよりよいといえます。この意味でコピーライティングの知識は有用です。

文章の読みやすさを向上させる

ウェブページ上の文章を読みやすく理解しやすいものにするためには、文章そのものの質を向上させるWebライティングパラグラフライティングの知識が有用です。しかしそれだけではなく、視覚的なデザイン面でも気を配るべき点があります。

適切な文字サイズを指定する
大きすぎたり小さすぎたりする文字サイズは読みやすさを妨害します。ブラウザ表示上での文字サイズはユーザーが調整できることが前提ではありますが、すべてのユーザーがそうした操作に慣れているとは限らないことに留意すべきです。より多くのユーザーにとって最適な文字サイズは、ポータルサイトや新聞社サイトのニュース記事ページの本文サイズが参考になります
適切な行間を指定する
行間があまりにも詰まっていたり、または空きすぎたりしていても、読みやすさに影響が出てしまいます。これについても、より多くのユーザーにとって最適な行間は、ポータルサイトや新聞社サイトのニュース記事ページの行間が参考になります
背景色と文字色のコントラストを確保する
文字の可読性を確保するためには、背景色と文字色の間に十分な明度差と色差が確保されている必要があります。具体的には明度差125以上、色差500以上というのがW3Cの推奨値です。これは Colour Contrast Analyser(日本語版)を使えばオンラインで確認することができます。

写真や図版、動画を適切に使用する

文字だけでは伝わりにくいイメージを伝えるために写真を使用したり、複雑なことを説明するためにイラストを用いたり、大量のデータをわかりやすく見せるためにグラフを使ったり、機械などの操作手順を伝えるために動画を使用するなどの手法は、わかりやすさを向上させます。

一方、コンテンツに無関係なアイキャッチやイメージ画像、過剰な装飾などは、利用者をミスリードしたり集中力を低下させるなど、良い影響はありません。写真や図版、動画は、品質の高いものを、意味のある使い方で使うようにしましょう。

そこがどんなページで、どこへ移動できるのかを伝える

検索結果からアクセスしてくるユーザーへの配慮として必要なことは、どんなサイトの、どんなページにアクセスしてきたのか、ということをユーザーにきちんと伝えることと、そのページからどんなページに移動できるのかをわかりやすく伝えることです。

サイトに慣れていないユーザーであっても、迷わずサイト内を巡回できるような配慮をすることで、ユーザーの混乱が引き起こす機会損失を最小限に抑えます。このためには、学習の必要のないナビゲーションを用意することが解決策になります。具体的には次のようなものです。

トピックパスを配置する
各ページにトピックパス(パンくずリスト)を置き、ユーザーが常に自分のいる場所を把握できるようにデザインします。ユーザーがサイトの中のどのような位置にいるのかを常に示すような配慮は、検索結果からアクセスしてきたユーザーに対して特に有効です。また、上位の階層に移動できるようにすることで、関連の情報を求めて上位の階層に移動するための動線を確保できます
トップページへのリンクを配置する
すべてのページにトップページへのリンクを配置します。これによって、検索結果からサイト内のページにアクセスしてきたユーザーがトップページに移動する動線を確保すると共に、どんなサイトにアクセスしているのかを的確に伝えることふができます
サイト内のすべてのページに共通のナビゲーションを置く
サイト内のすべてのページに共通のナビゲーションを置き、ユーザーがサイト内のどのページにいても、主要なコンテンツへは1クリックで到達できるようにデザインします。これによってユーザーの移動を助けるだけでなく、主要コンテンツにリンクポピュラリティを集中させることができます
アンカーテキストはリンク先を的確にあらわすようにする
アンカーテキストには、リンク先のページに関連したキーワードを含み、リンク先のページを的確にあらわす文字列を使用します。これはユーザーに対してリンク先の情報を的確に伝えるのと同時に、検索エンジンにもリンク先の情報を伝える効果があります
画像を使ったリンクの使用には注意する
イメージによるリンクを使用する場合には、リンクに使用するイメージのborderを0に指定すると未訪問のリンクと訪問済みのリンクの区別が付かなくなり、ユーザーの混乱を招く可能性があることに注意すべきです。リンクイメージの使用は必要最低限に抑え、リンクにはできる限りテキストを使用するようにしましょう

リンクのスタイルを標準に近いものにする

多くのユーザーは、リンクのスタイルについての予備知識を持っています。ブラウザのデフォルトスタイルとして採用されているものや、多くのサイトで使用されているものがそれにあたるもので、次のようなスタイルです。

  • 青色で下線のある文字列が未訪問リンク
  • 紫色で下線のある文字列が訪問済みリンク

このようなスタイルから大きく逸脱したスタイルをリンクに適用していた場合、それがリンクであることがわかりにくく、ユーザーを混乱させる可能性があります。また逆に、リンクではないテキストに上記のようなスタイルを適用していた場合、リンクでない部分がリンクに見えるなど、ユーザーを混乱させる可能性があります。

次の各項をできる限り守ることで、そうした混乱を最小限にとどめ、ユーザーの理解とページの移動を助けることができます。

リンクの下線は消さない
その文字列がリンクであることを明示するために、リンクの下線を消さないようにします
未訪問リンクには青系の文字色を使用する
そのリンクが未訪問リンクであることを明示するために、未訪問リンクには青系の文字色を使用します
訪問済みリンクには紫系の文字色を使用する
そのリンクが訪問済みリンクであることを明示するために、訪問済みリンクには紫系の文字色を使用します
リンク以外の文字列に青系および紫系の文字色を使用しない
リンク以外の部分に青系および紫系の文字色が使用されていると、ユーザーがその部分をリンクだと勘違いし、混乱する可能性があります。これを避けるために、リンク以外の文字列には青系および紫系の文字色は使用しないようにします
リンク以外の文字列に下線を使用しない
リンク以外の部分の装飾に下線を使用すると、ユーザーがその部分をリンクだと勘違いし、混乱する可能性があります。これを避けるために、リンク以外の文字列の装飾には下線を使用しないようにします
未訪問のリンクと訪問済みのリンクに同一の色を指定しない
訪問済みリンクと未訪問リンクの文字色に同じ色を指定すると、ユーザーはそれらを区別できず、同じページ間を行ったり来たりしてしまうなど混乱の原因になります。未訪問リンクと訪問済みリンクには必ず別の文字色を指定し、視覚的に区別できるようにします

シンプルさを心がける

ページ内の情報を見つけやすく、またわかりやすくする最も簡単で効果的な方法は「余計な要素・余計な装飾を減らす」ことです。余計な要素や余計な装飾を極力省いた画面構成になっていれば、ユーザーは迷うことなく目的の情報を見つけることができ、理解も容易になります。

反対に、コンテンツと無関係な要素がたくさんあればあるほど、ユーザーは重要な部分を見つけることが困難になります。ページから余計な要素を排除し、ページ内での重要な部分の比率を高めることは、検索エンジンに読み込ませる余計な情報を抑えることにもつながるため、SEOの観点からも有効です。ここでもKISSメソッドは生きています。

そしてもちろん美しさも

視覚的なデザインの役割は、コンテンツをよりわかりやすく理解しやすいものにするだけでなく、サイトやコンテンツの信頼性を高めるという役割も担っています。しかしこの信頼性の問題はむしろ、悪いデザインによって受ける悪影響を避けるべき、という文脈のほうがわかりやすいかもしれません。

安定感のないレイアウト、安っぽく主張の強い装飾、雑然とした配色、収まりの悪いロゴなどは、そのサイトやコンテンツの作者が素人であることを雄弁に物語ってしまいます。これでは、いかにコンテンツが優れたものだったとしても台無しです。

視覚的デザインによってコンテンツの価値を実際以上に見せることは難しいかもしれませんが、実際よりもはるかに低い価値しかないように見せてしまうことは簡単です。この意味では、視覚面から良い印象を与えることは、コンテンツそのものと同様に重要なことだということができます。

同じ情報を持ったコンテンツだったとしても、ユーザーが受ける印象は視覚的デザインによって大きく変化します。コンテンツをその価値の通りに受け取ってもらうために、整然としたレイアウト、主張の強すぎない装飾、まとまりのある配色、作り込まれたロゴマークなど、美しく信頼感のある視覚的デザインを適用すべきです。

この記事について