スマートフォンサイトのユーザビリティ リンクへの配慮

スマートフォンサイトのユーザビリティ（ウェブユーザーにとっての使いやすさ）向上は、ウェブサイト・ホームページを運営・ビジネス利用している場合において、ここ数年の緊急課題になっています。

スマホユーザーへの配慮、つまりスマートフォンサイトのユーザビリティを考える上では、PCブラウザとスマホブラウザでの操作の違いを考えた上で、リンクへの配慮など様々な点の設計を考える必要があります。

スマートフォンでの表示に配慮する「モバイルフレンドリー」は、「モバイルSEO」としてSEOの観点もありますが、それよりも「スマホでは使いにくいサイト」ということが原因で、スマホユーザーからのコンバージョン機会の損失をもたらしてしまうからです。

ユーザビリティはユーザーの閲覧時のストレスの軽減や誤操作を防ぐことにあります。スマートフォンでサイトを見る時によく起こりがちな誤操作は誤タップであり、リンク同士の距離に配慮し余白を設けるなどの工夫することでこれを防ぐことができます。

また、リンクであることをしっかりと示し、通常のテキストとリンクを区別しやすくするということも重要です。ホームページ（ウェブサイト）のスマホ表示の際には、リンク箇所について特別に下線を示すか、文字色を変更する必要があります。

サイトの「スマホ対応」とスマホ用サイトでお伝えしましたが、ホームページ（ウェブサイト）のモバイルフレンドリー化としてレスポンシブウェブデザインの場合は、ファイル生成の手間が省け、コンテンツ制作に集中することができます。

スマホ用サイトを作る必要がある場合は、自由度の高いページを制作する必要がありますが、基本的なサイト運営の場合は、レスポンシブでモバイルフレンドリーに対応し、別にサイトを用意する必要性はそれほどありません。

ホームページのモバイルフレンドリー対応には、ウェブサイトのレスポンシブ化によるスマートフォン最適化や、サイトのページナビゲーションなどのユーザビリティ向上と、スマホ閲覧時の「誤操作を未然に防ぐ」という点が重要なポイントになります。

スマートフォンとパソコンの操作感の決定的な違い

スマートフォンサイトのユーザビリティを考える上で、パソコン版ホームページとの違いに着目した場合、操作デバイスの違いが最も大きなポイントになります。

パソコンでの閲覧時はマウスやトラックパッドを使ってカーソルを操作し、リンクをクリックします。この時、マウスカーソルを乗せる（ホバーする）ことで、そこがリンクであるかどうかを確認してからクリックするというプロセスを自然に行うことができます。

しかし、スマートフォンでは指を使って画面を直接「タップ」します。ここには「カーソルを合わせて確認する」という工程がありません。ユーザーは「ここが押せるはずだ」と判断して画面を触ります。そのため、見た目でリンクかどうかが分からなければ、ユーザーは迷ってしまいます。

また、指での操作はマウスカーソルほど精密ではありません。私たちが普段スマートフォンを操作している時も、意図せず隣のボタンを押してしまったり、画面スクロールのつもりで広告をタップしてしまったりして、イライラした経験があるはずです。こうした「操作の不確実性」を前提とした設計が求められます。

タップターゲットの適切なサイズと専門的な基準

リンクやボタンなどのタップできる領域（タップターゲット）のサイズは、ユーザビリティを大きく左右します。小さすぎるリンクは、タップしようとしても反応しなかったり、誤って別の場所を押してしまったりする原因になります。

Googleのモバイルウェブに関するガイドラインなどでは、タップターゲットのサイズとして「48px × 48px」以上が推奨されています。これは、一般的な成人の指の腹のサイズ（約10mm）を考慮した数値です。

デザインの都合でテキストのフォントサイズ自体を大きくできない場合でも、CSS（スタイルシート）の設定でパディング（内側の余白）を広めにとることで、タップ可能な領域を確保することができます。見た目の文字サイズは小さくても、反応する範囲を広げておくことが、操作性の向上につながります。

実際に私たちがホームページ制作や修正を行う中でも、ボタンのサイズを数ピクセル広げただけで、クリック率（タップ率）が改善した事例があります。特に高齢のユーザーが多いホームページ（ウェブサイト）では、このサイズへの配慮が非常に重要です。

スマートフォンサイトのユーザビリティ

スマートフォンサイトのユーザビリティを考え、スマホユーザーの操作性やご操作回避への配慮がスマートフォンサイト運営の成功のカギとなります。

「スマートフォンからアクセスした際に見やすいサイトか、レイアウトは工夫されているか」といった点はレスポンシブレイアウトなどによって工夫するポイントですが、ホームページの操作性に関するユーザービリティを検討した場合は、ページ間移動がしやすいか、エントリーフォームなどで入力がしやすいか、といった点に配慮が必要になります。

ホームページ制作におけるユーザビリティへの配慮は、PC版、スマホ版問わずPV数向上、コンバージョン率の向上に影響を与えるためWebマーケティング効果向上のためには重要なポイントです。

ユーザビリティへの考え方の基本は「閲覧時のストレス軽減」

さらにスマートフォンサイトの場合は、スマホ独自の表示形式に配慮し、より入念にユーザビリティに工夫を施す必要があります。

ユーザビリティへの考え方の基本は、閲覧時のストレスの軽減です。

スマートフォンサイトにおいては、スマホユーザーの操作性を高め、閲覧時のストレスを軽減することを重点的に検討してく必要があります。

スマホユーザーの閲覧時のストレスを軽減

こうしたスマホサイトのユーザービリティ向上のためには、まずパソコンからホームページを閲覧した場合と、スマートフォンからホームページを閲覧した場合のブラウザ上での操作の違いを考えた上で、誤操作を回避してスマホユーザーの閲覧時のストレスを軽減することを第一の目的として考える必要があります。

スマートフォンユーザーの誤操作を想定して、誤操作を回避することを目的としてスマートフォンサイトを作成しましょう。

まず、スマートフォンからのホームページアクセス時によく起こりがちな誤操作は誤タップです。こうしたリンク箇所への配慮など様々な点からユーザービリティ向上を考える必要があります。

ホームページのスマホ閲覧でありがちな誤操作

スマートフォンサイトのユーザビリティを考える上で、PCサイトとの違いに着目した場合、PC閲覧時のホームページ内の操作はリンクをクリックしますが、スマートフォンでは「タップ」という概念があるため、リンクの取扱が異なることに配慮する必要があります。

スマホサイトを見るにあたり、ありがちな誤操作は、「意図しないところをタップしてしまう」という点です。

スマホサイトでのタップは一発勝負

文章の段落箇所やリンクが施されていない画像の上は、指を乗せても大丈夫ですが、パソコンでのサイト閲覧とは異なり、「マウスカーソルを乗せて、該当箇所がリンクであるかどうかの確認を先にしてからのクリック」ということがスマートフォンではできません。

つまり、スマホサイトでのタップは一発勝負です。これは誤操作というよりも、サイト制作者の配慮不足により、ユーザが意図しないタップをしてしまうという現象になります。

リンク同士の距離と誤操作を防ぐ余白設計

ホームページの最大の強みは、ページ間をリンクで結ぶことができることです。しかし、サイト内のリンク同士の距離が近いと、スマートフォンからの閲覧の際、意図したリンクではなく、その隣のリンクをタップしてしまう可能性があります。

リンク同士の距離に配慮することはモバイルフレンドリーの重要な要素です。テキストリンクが改行によって上下に並んでしまった場合や、箇条書きのような形式でリンクが羅列されている場合は特に注意が必要です。

具体的な対策としては、タップターゲット同士の間隔（マージン）を少なくとも8px以上空けることが望ましいと言われています。これにより、指が少しずれても隣のリンクを誤って押してしまうリスクを減らすことができます。

また、ヒートマップツールなどでユーザーのタップ位置を分析すると、ユーザーが実際にタップしている位置が、制作者が意図したボタンの中心から微妙にずれていることがよくわかります。特に片手でスマートフォンを操作している場合、画面の端にあるリンクは親指が届きにくく、誤操作が増える傾向にあります。こうした実際の利用シーンを想像し、重要なリンクは押しやすい位置に、十分な余白を持って配置することが大切です。

リンクか否かをわかりやすくする

旧来から基本的にホームページのページ内のリンク周りの設定が無設定の場合、ブラウザ側で「該当箇所がリンクである」、ということを自動的に示すように設計されています。

これは、通常のテキストとリンクとを区別しやすい方が、ホームページ（ウェブサイト）を見ているユーザーのためになるからです。

文字ならば、文字色変更と下線、画像リンクなどでは画像周りに枠線が表示されるのが一般的です（これはかなり旧式ですが）。

リンクであることを直感的に伝えるデザイン

パソコンではマウスオーバーで色が変化するなどのアニメーションで「リンクであること」を伝えられますが、スマートフォンではそれができません。そのため、一目でリンクだとわかるデザインにする必要があります。

基本的には、テキストリンクであれば青色にして下線を引く、ボタンであれば立体感を持たせたり、影をつけたりして「押せそう」な見た目（アフォーダンス）を持たせることが効果的です。

近年流行したフラットデザインはスタイリッシュですが、ボタンと単なる装飾の区別がつきにくい場合があります。スマートフォンサイトにおいては、デザイン性よりも「わかりやすさ」を優先すべき場面が多くあります。

ホームページ（ウェブサイト）のスマホ表示の際には、リンク箇所について特別に下線を示すか、文字色を明確に変更し、本文のテキストとはっきりと区別できるようにしましょう。ボタンらしい画像なのにリンクが設定されていない、逆にただの文字に見えるのにリンクが設定されている、といった状態はユーザーを混乱させ、ストレスを与えてしまいます。

リンク箇所の表示形式

ページナビゲーション「ウェブサイトのユーザビリティ」の投稿で、「リンクの下線を示すかどうか」という点について触れましたが、近年ではデザイン性を高めるため、パソコン版、スマホ版ともにホームページ内のリンク下線を消す場合があります。

同時にリンク箇所の文字色も他のテキストコンテンツと同様の色に設定する場合もあります。

画像については、枠線自体を画像に埋め込むのが一般的なので、マークアップで枠線を設定するというのはあまりありません（といっても、「ベタ枠線」は見かけませんが、「シャドウ」は結構あります）。

パソコンとスマートフォンの違い

先に少し触れましたが、パソコンからのサイト閲覧の場合は、「マウスカーソルを乗せて、該当箇所がリンクであるかどうかの確認」をすることができます。

しかしながら、スマートフォンではそれができないため、ホームページ（ウェブサイト）のスマホ表示の際には、リンク箇所について特別に下線を示すか、文字色を変更する必要があります。

ボタンらしき画像が、リンク設置されていない、しかし他のボタンらしき画像はリンク設置されている、という状態もユーザーにとっては混乱を招いてしまうかもしれません。

リンク同士の距離を配慮する

ウェブサイト・ホームページの最大の強みは、ページ間をリンクで結ぶことができることです。

このハイパーリンクの仕組みが紙とは大きく異るポイントです。

サイト内のリンク同士の距離が近いと、スマートフォンからのホームページ閲覧の際、意図したリンクではなく、その隣のリンクをタップしてしまう可能性があります。

リンク同士の距離に配慮することはモバイルフレンドリーの一つの要素です。

テキストのフォントサイズには最小フォントサイズの限界があるので、テキストリンクに限って言えば、それほど厳密に気にする必要はありませんが、領域の幅が縦横とも1px程度から設置できる画像リンクの場合は、気をつける必要があるでしょう。

リンクの間に余白を設ける

誤タップを回避し、スマートフォンサイトのユーザービリティを向上させるためには、こうしたリンク同士の距離について余白を設けるなどの工夫が必要です。

モバイルフレンドリーテスト合格という意味ではなく、ユーザー目線のモバイルフレンドリーを考える場合には、片手で操作した状態で、間違いなく意図したページへと移動することのできる仕組みが理想的です。

そのためには、リンク同士の距離に余裕を持たせて誤タップを防ぐといったスマートフォンサイトの設計が必要になるでしょう。

リンク周りにボーダーを付けたりボタン風に変更する

ユーザービリティ向上のためにリンクの距離を取るというのも重要ですが、PC版・SP版を問わず、やはり「リンクであることを示す」ということが一番重要です。

リンク周りにボーダーを付けたりボタン風に変更するというのも良いのではないでしょうか。

下線でも良いですが、いっそ囲いを付けてしまうというもの効果的です（本ページの下部にあるリンクの形式です）。適切なマージン（余白）があればユーザービリティも高まります。

また、例として「背景をベタ塗りにして文字は白文字」にしてしまえばボタン風になります。

タップ操作が基本のスマートフォンサイト仕様を中心に考えてサイト設計するというのも良いかもしれません。

ユーザビリティ向上がもたらす事業への効果

スマートフォンサイトのユーザビリティを向上させることは、単に「使いやすい」というだけでなく、実際の事業成果に直結します。

操作にストレスがないホームページは、ユーザーの滞在時間を延ばし、離脱率を下げる効果があります。また、お問い合わせフォームや購入ボタンが押しやすくなれば、完了率（コンバージョン率）の向上も期待できます。

私たちがご支援しているクライアント様の事例でも、スマートフォンサイトのナビゲーションメニューを改善し、ボタンの配置と大きさを調整しただけで、スマートフォン経由のお問い合わせ数が目に見えて増加したケースがあります。

ユーザーは、操作しづらいと感じた瞬間、そのホームページから離れて競合他社のサイトへ移動してしまいます。スマートフォンサイトのリンク周りの改善は、機会損失を防ぎ、ホームページ（ウェブサイト）のパフォーマンスを最大化するための重要な施策です。

スマートフォンサイトにおけるリンクのユーザビリティは、PCサイトとは異なる視点での配慮が必要です。指での操作特性を理解し、Googleなどが推奨する専門的なサイズ基準（48pxなど）を意識しつつ、実際の運用の中でユーザーが誤操作しやすいポイントを見つけ出し、改善していく姿勢が大切です。

閲覧時のストレスを軽減し、ユーザーが迷わず目的のページにたどり着けるようにすることは、Webマーケティングの効果を高めるための確実な一歩となります。ご自身のホームページ（ウェブサイト）をスマートフォンで操作してみて、もし少しでも押しにくいと感じる箇所があれば、それは改善のチャンスかもしれません。

スマートフォンサイトのユーザービリティ向上のためのホームページカスタマイズ

こうしたスマートフォンサイトのユーザービリティ向上のためのホームページカスタマイズにも対応しておりますので、お気軽にお問い合わせください。基本的なモバイルフレンドリー化の他、スマートフォン用メニューの作成、より適切なモバイルフレンドリー化のためのホームページ修正に対応しています。

モバイルフレンドリー

ホームページの更新・修正料金 価格表

ホームページ制作におけるユーザビリティへの配慮の重要性

ホームページ制作におけるユーザビリティへの配慮は、PV数向上、コンバージョン率の向上に影響を与え、同時にクローラビリティにも影響を与えるためSEOにも関係する重要なポイントです。

ホームページ制作におけるユーザビリティ全般とSEOとの関係性については、「サイトのユーザビリティとSEOを無視した場合 」をご参照ください。

ページナビゲーションの設置やカスタマイズによって、ホームページ（ウェブサイト）のユーザビリティを向上させることについては、以下をご参照ください。

ページナビゲーション「ウェブサイトのユーザビリティ」

（初回投稿日 2016年2月4日）