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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク箇所の表示形式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクの間に余白を設ける モバイルフレンドリー

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

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

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

こうしたスマートフォンサイトのユーザービリティ向上のためのホームページカスタマイズにも対応しておりますので、お気軽にお問い合わせください。

モバイルフレンドリー


「スマートフォンサイトのユーザビリティ リンクへの配慮」のカテゴリ Web制作・Web関連
タグ: , , , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら