私たちが普段、初めて訪れるホームページの画面を開いた際に、そのページを読むか読まないかをどのくらいの時間をかけて判断しているか考えたことはありますか？

…実は、多くのユーザーがわずか10秒から20秒でそのページを読むかどうかを判断しているということがインターネット上の調査で明らかになっています。

※参考：ニールセン・ノーマングループの調査
「ユーザーはどのくらいWebページにとどまりますか？」
URL https://bit.ly/2PgVxgg

今回は、そんな短い時間でもユーザーに「読みたい！」と思ってもらえるページづくりに欠かせない、「スキャナビリティ」という考え方について詳しくご紹介します。

※ 2021年4月1日現在の情報です

目次

1. スキャナビリティとは？
2. スキャナビリティ向上のメリット
3. スキャナビリティ向上のポイント
   ①コンテンツの視覚化
   ②CTAパーツを見やすく配置
   ③文字色、下線などによる強調
4. まとめ
   

スキャナビリティ（Scannability）は、ユーザーがページ全体にさっと目を通した際に、その内容をどれだけ理解しやすいかを表したものです。

日本でも紙情報を素早くデータ化できる「スキャナー」というデバイスは浸透していますよね。

スキャナーを使って一瞬で情報を読み取るように、スキャナビリティの高いページは、ユーザーが一瞬で内容を読み取れるということを意味します。

スキャナビリティの高いページほど、ページから離脱される（読むのをやめて他のページに移動される）可能性は低くなるというメリットがあります。

言い換えると、スキャナビリティを向上させることで、ページの細部まで読んでもらえたり、関連した他のページを見てもらえたりしやすくなります。

また、スキャナビリティが高いとホームページ全体の構成を把握しやすくなります。

すると、どこに何があるのか、サービスの申し込みや製品を購入したい時はどこをクリックすればいいのかが一目瞭然となり、ユーザーの満足度も高くなるという大きなメリットがあります。

では続いて、そんなメリットの多い「スキャナビリティ」を上げるポイントをご紹介します。

①コンテンツの視覚化

インターネットの利用が当たり前になった現代では、ユーザーは視覚的な表現に慣れており、反対にテキストの多いページ（視覚的に内容を捉えにくいページ）は、あまり好まない傾向にあるようです。

そのため、特にトップページ（ホームページで最初に見られるページ）を中心に、文章より画像などの視覚的に理解しやすいコンテンツで構成するのがオススメです。

一例としてAppleの公式サイトを見てみましょう。
URL：https://www.apple.com/jp/

まず、文字より画像が占めてる割合が圧倒的に多いですよね。画像を一目見ただけで5色のカラー展開だということもわかります。

また、「早い話、速いです。」という文章の視覚化も注目したいポイントです。

このように文章を「読む」というよりは「見る」という感覚で理解できるように、意図的に文章を短くすることで、スキャナビリティの向上を図るのも非常に有効なアプローチだと言えます。

さらに、人間は完成しているものより未完成のものの方が記憶に残りやすいという特徴があり、これを「ツァイガルニク効果」と言います。

上記の例では「早い話、速いです。」だけでは何が速いのかわからない、だからこそ記憶に残りやすいということになりますね。

ツァイガルニク効果は高度なテクニックですが、スキャナビリティの向上とあわせて効果的に使うことができるとよいですね。

②CTAパーツを見やすく配置

CTAとは、 Call To Action（コール・トゥー・アクション）の略で、日本語では「行動喚起」と訳せます。

CTAは、ホームページ上でユーザーにとってほしい行動を誘導することを意味します。

上図のiPhone12紹介ページでは「購入」が最終的なゴールになります。そのため、紹介ページの各所に「購入」という青いボタンが見やすく配置されています。

このように、CTAの箇所はボタンの形にしたり、周りと違う色にして目立たせたりすることで、よりスキャナビリティを向上させることができます。

CTAパーツを見やすく配置することは、企業側にとって「購入してもらいやすくなる」というメリットがあるだけでなく、ユーザーにも「購入したい時にどこをクリックしたらよいかすぐわかる」というメリットがあるということも大切なポイントになります。

③文字色、下線などによる強調

色や下線などを用いた文字の強調を行うのも非常に重要なポイントです。

以下に例として当ブログの最後に設置している「あわせて読みたい」という項目を記載します。

「あわせて読みたい」は、今読んでいる記事に関連した、他の記事も読んでもらえるように誘導する役目があります。

スキャナビリティ向上の工夫をしているポイントとして、まず「あわせて読みたい」という枠線が青色で強調されている点が挙げられます。

青色はリンクに使われることが多いため、「リンク先に飛べる部分」であることをユーザーに視覚的に理解してもらいやすくなります。

また「info@で大丈夫？～」という項目も、本文の黒色や青色の枠線と区別するためにオレンジ色にしています。

さらに、その部分に下線を引くことで「クリックできる部分」だとわかりやすくしています。

このように、様々な文字の強調でスキャナビリティの向上を図ることができます。

今回はスキャナビリティについて詳しく調べてみました。

まとめると、
スキャナビリティを向上させることで、ユーザーにより多くのページ・内容を読んでもらえるようになり、最終的に満足度も向上させることができると言えます。

また、スキャナビリティを高める方法として「コンテンツの視覚化」「適切なCTAパーツの配置」「文字の強調」をご紹介しました。

ご自身のホームページに使える項目があれば、是非取り入れてみてください。

当記事がよりよいホームページ制作の参考になれば幸いです。

ライター：井上

WWGではホームページ制作・リニューアルに関するさまざまな相談をサポートさせて頂いております。お気軽に下記までお問い合わせください。

愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F
TEL： 052-485-6846
※ ホームページ制作や活用サポートのお問い合わせはコチラから