BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. スマートフォンでも見やすい・使いやすいサイトにする改善ポイント
by きど きど

スマートフォンでも見やすい・使いやすいサイトにする改善ポイント

スマートフォンでも見やすい・使いやすいサイトにする改善ポイント

こんにちは、城戸です。

普段はPCでネットサーフィンをすることが多いのですが、外出先やネットショッピングをする時にスマートフォンでWEBサイトを見る機会が増えてきました。

スマートフォンでも見やすい・使いやすいサイトにする改善ポイントをまとめてみました。

目次

余白、改行を意識する

PCに比べると、スマホは画面が小さく表示される情報が詰まって見えてしまいます。

文字がピタッと画面のふちにある状態だとバランスが悪く見えたり、圧迫感がある印象を与えてしまいます。

また、PCで見るとちょうどぴったりなのに、スマホで見ると変な位置で改行されてしまいとても読みずらくなることもあります。

リンクやボタンをタップしようとしたときに、意図せず隣り合っている別のオブジェクトをタップしてしまい予想外の所へ飛ばされてしまう…など離脱率を高めてしまう原因にもなってしまいます。

改善点

  • 文章が続くページは左右の余白を大きめにとり、文字間を詰めすぎない
  • デバイスの画面サイズによって、改行の位置が自動的に決められてしまうので、無意味な改行はできるだけ行わないこと。
  • タップ可能な項目同士の余白を充分に確保すること
    特にテキストリンクが連続している時は、上下にしっかり余白を取ること

ボタンはできるだけ分かりやすく、伝わりやすく

単純に四角の中に文字だけだと、スクロールをしていく中でスルーされてしまうことがあります。

PCと違い、指で押すのでボタンの幅が狭いと押しづらさを感じます。

「このボタン、押せる!」と直感的にわかるデザインである事が重要です。

改善点

  • 直感的に、これ押せる!と感じるボタンのデザインにする
  • タップ領域をの最小サイズは44pxなのでそれよりも大きく縦幅を取る
  • ボタンのアクションをアイコンで示すと親切で分かりやすい

フォームはPCに比べると文字入力がしずらい。

私自身も、スマホを使ってネットショッピングすることがあり、決済情報や住所等を入力するのはとても億劫に感じます。

必須項目の入力に気づけずやり直したり、意図しないボタンを押して入力やり直しになったとき等は…考えたくもないです。

項目が多く手間がかかると、途中離脱するユーザーが増えてしまうこともあります。

改善点

  • 入力項目はできるだけ少なく
  • ボタンと同様にタップ領域をの最小サイズは44pxなので入力項目やボタンの大きさを考える
  • 各項目ごとにキーボード入力、アルファベット入力、数字入力…等、自動でキーボードが切り替わるようにする
  • 必須項目、任意項目はパッと目につき分かりやすく
  • チェックボックス・ラジオボタンの配置はできるだけ垂直方向に置くことで誤タップ防ぐ

まとめ

クリック操作とタップ操作は全く違う別物だと再度考えました。

PCと比べるとボタンの表現が限られていたりするので、これ押せる!直感的に感じさせることや、余白をしっかりとることで意図しない動作を生まないようにしなければいけません。

特に離脱率が高いフォームの部分は、スマホで使いやすいようにしっかり最適化することでが重要だと思います。

実機でしっかりチェックして、より使いやすいデザインを探していきたいと思います。

ページの先頭に戻る