スマートフォンサイトのユーザビリティ（ウェブユーザーにとっての使いやすさ）向上は、ウェブサイト・ホームページを運営・ビジネス利用している場合において、ここ数年の緊急課題になっています。
スマホユーザーへの配慮、つまりスマートフォンサイトのユーザビリティを考える上では、PCブラウザとスマホブラウザでの操作の違いを考えた上で、リンクへの配慮など様々な点の設計を考える必要があります。
スマートフォンでの表示に配慮する「モバイルフレンドリー」は、「モバイルSEO」としてSEOの観点もありますが、それよりも「スマホでは使いにくいサイト」ということが原因で、スマホユーザーからのコンバージョン機会の損失をもたらしてしまうからです。
サイトの「スマホ対応」とスマホ用サイトでお伝えしましたが、ホームページ（ウェブサイト）のモバイルフレンドリー化としてレスポンシブウェブデザインの場合は、ファイル生成の手間が省け、コンテンツ制作に集中することができます。
スマホ用サイトを作る必要がある場合は、自由度の高いページを制作する必要がありますが、基本的なサイト運営の場合は、レスポンシブでモバイルフレンドリーに対応し、別にサイトを用意する必要性はそれほどありません。
ホームページのモバイルフレンドリー対応には、ウェブサイトのレスポンシブ化によるスマートフォン最適化や、サイトのページナビゲーションなどのユーザビリティ向上と、スマホ閲覧時の「誤操作を未然に防ぐ」という点が重要なポイントになります。
スマートフォンサイトのユーザビリティ
スマートフォンサイトのユーザビリティを考え、スマホユーザーの操作性やご操作回避への配慮がスマートフォンサイト運営の成功のカギとなります。
「スマートフォンからアクセスした際に見やすいサイトか、レイアウトは工夫されているか」といった点はレスポンシブレイアウトなどによって工夫するポイントですが、ホームページの操作性に関するユーザービリティを検討した場合は、ページ間移動がしやすいか、エントリーフォームなどで入力がしやすいか、といった点に配慮が必要になります。
ホームページ制作におけるユーザビリティへの配慮は、PC版、スマホ版問わずPV数向上、コンバージョン率の向上に影響を与えるためWebマーケティング効果向上のためには重要なポイントです。
さらにスマートフォンサイトの場合は、スマホ独自の表示形式に配慮し、より入念にユーザビリティに工夫を施す必要があります。
ユーザビリティへの考え方の基本は、閲覧時のストレスの軽減です。
スマートフォンサイトにおいては、スマホユーザーの操作性を高め、閲覧時のストレスを軽減することを重点的に検討してく必要があります。
スマホユーザーの閲覧時のストレスを軽減
こうしたスマホサイトのユーザービリティ向上のためには、まずパソコンからホームページを閲覧した場合と、スマートフォンからホームページを閲覧した場合のブラウザ上での操作の違いを考えた上で、誤操作を回避してスマホユーザーの閲覧時のストレスを軽減することを第一の目的として考える必要があります。
スマートフォンユーザーの誤操作を想定して、誤操作を回避することを目的としてスマートフォンサイトを作成しましょう。
ますスマートフォンからのホームページアクセス時によく起こりがちな誤操作は誤タップです。こうしたリンク箇所への配慮など様々な点からユーザービリティ向上を考える必要があります。
ホームページのスマホ閲覧でありがちな誤操作
スマートフォンサイトのユーザビリティを考える上で、PCサイトとの違いに着目した場合、PC閲覧時のホームページ内の操作はリンクをクリックしますが、スマートフォンでは「タップ」という概念があるため、リンクの取扱が異なることに配慮する必要があります。
スマホサイトを見るにあたり、ありがちな誤操作は、「意図しないところをタップしてしまう」という点です。
スマホサイトでのタップは一発勝負
文章の段落箇所やリンクが施されていない画像の上は、指を乗せても大丈夫ですが、パソコンでのサイト閲覧とは異なり、「マウスカーソルを乗せて、該当箇所がリンクであるかどうかの確認を先にしてからのクリック」ということがスマートフォンではできません。
つまり、スマホサイトでのタップは一発勝負です。これは誤操作というよりも、サイト制作者の配慮不足により、ユーザが意図しないタップをしてしまうという現象になります。
リンクか否かをわかりやすくする
旧来から基本的にホームページのページ内のリンク周りの設定が無設定の場合、ブラウザ側で「該当箇所がリンクである」、ということを自動的に示すように設計されています。
これは、通常のテキストとリンクとを区別しやすい方が、ウェブサイトを見ているユーザーのためになるからです。
文字ならば、文字色変更と下線、画像リンクなどでは画像周りに枠線が表示されるのが一般的です（これはかなり旧式ですが）。
リンク箇所の表示形式
ページナビゲーション「ウェブサイトのユーザビリティ」の投稿で、「リンクの下線を示すかどうか」という点について触れましたが、近年ではデザイン性を高めるため、パソコン版、スマホ版ともにホームページ内のリンク下線を消す場合があります。
同時にリンク箇所の文字色も他のテキストコンテンツと同様の色に設定する場合もあります。
画像については、枠線自体を画像に埋め込むのが一般的なので、マークアップで枠線を設定するというのはあまりありません（といっても、「ベタ枠線」は見かけませんが、「シャドウ」は結構あります）。
パソコンとスマートフォンの違い
先に少し触れましたが、パソコンからのサイト閲覧の場合は、「マウスカーソルを乗せて、該当箇所がリンクであるかどうかの確認」をすることができます。
しかしながら、スマートフォンではそれができないため、ホームページ（ウェブサイト）のスマホ表示の際には、リンク箇所について特別に下線を示すか、文字色を変更する必要があります。
ボタンらしき画像が、リンク設置されていない、しかし他のボタンらしき画像はリンク設置されている、という状態もユーザーにとっては混乱を招いてしまうかもしれません。
リンク同士の距離を配慮する
ウェブサイト・ホームページの最大の強みは、ページ間をリンクで結ぶことができることです。
このハイパーリンクの仕組みが紙とは大きく異るポイントです。
サイト内のリンク同士の距離が近いと、スマートフォンからのホームページ閲覧の際、意図したリンクではなく、その隣のリンクをタップしてしまう可能性があります。
リンク同士の距離に配慮することはモバイルフレンドリーの一つの要素です。
テキストのフォントサイズには最小フォントサイズの限界があるので、テキストリンクに限って言えば、それほど厳密に気にする必要はありませんが、領域の幅が縦横とも1px程度から設置できる画像リンクの場合は、気をつける必要があるでしょう。
リンクの間に余白を設ける
誤タップを回避し、スマートフォンサイトのユーザービリティを向上させるためには、こうしたリンク同士の距離について余白を設けるなどの工夫が必要です。
モバイルフレンドリーテスト合格という意味ではなく、ユーザー目線のモバイルフレンドリーを考える場合には、片手で操作した状態で、間違いなく意図したページへと移動することのできる仕組みが理想的です。
そのためには、リンク同士の距離に余裕を持たせて誤タップを防ぐといったスマートフォンサイトの設計が必要になるでしょう。
リンク周りにボーダーを付けたりボタン風に変更する
ユーザービリティ向上のためにリンクの距離を取るというのも重要ですが、PC版・SP版を問わず、やはり「リンクであることを示す」ということが一番重要です。
リンク周りにボーダーを付けたりボタン風に変更するというのも良いのではないでしょうか。
下線でも良いですが、いっそ囲いを付けてしまうというもの効果的です（本ページの下部にあるリンクの形式です）。適切なマージン（余白）があればユーザービリティも高まります。
また、例として「背景をベタ塗りにして文字は白文字」にしてしまえばボタン風になります。
タップ操作が基本のスマートフォンサイト仕様を中心に考えてサイト設計するというのも良いかもしれません。
スマートフォンサイトのユーザービリティ向上のためのホームページカスタマイズ
こうしたスマートフォンサイトのユーザービリティ向上のためのホームページカスタマイズにも対応しておりますので、お気軽にお問い合わせください。基本的なモバイルフレンドリー化の他、スマートフォン用メニューの作成、より適切なモバイルフレンドリー化のためのホームページ修正に対応しています。
ホームページ制作におけるユーザビリティへの配慮の重要性
ホームページ制作におけるユーザビリティへの配慮は、PV数向上、コンバージョン率の向上に影響を与え、同時にクローラビリティにも影響を与えるためSEOにも関係する重要なポイントです。
ホームページ制作におけるユーザビリティ全般とSEOとの関係性については、「サイトのユーザビリティとSEOを無視した場合 」をご参照ください。
