WNT-Know-how
Know-how

使いやすいモバイルUI設計のための4つのポイント

使いやすいモバイルUI設計のための4つのポイント

近年、スマートフォンのユーザー比率は4割に迫り、専業主婦など一般層への普及が見られるそうです*。 今後はスマートフォンに最適化したWEBサイトがますます重要になっていくと考えられます。 そこで今回は、より使いやすいモバイルUI設計のための4つのポイントを考えてみました。

  1. タッチデバイスに適したナビゲーションのパターンを知る
  2. 画像の見せ方は、モバイル画面で見ることを想像して考える
  3. クリッカブルな領域をタップでも押しやすいサイズ・見た目に設定する
  4. 余白は使いやすさにつながる重要な要素

1.タッチデバイスに適したナビゲーションのパターンを知る

WEBサイトの使い勝手の要となるのがナビゲーションです。
「分かりやすい」ナビゲーションであることも大切ですが、タッチデバイスのナビゲーションは「押しやすい」ことも重要です。
最適なナビゲーションのレイアウト、デザイン、動きはコンテンツやターゲットによって変わってきますが、どんな種類があるのか知っておくことで設計する際の選択肢が広がりますので、ここではいくつかパターンをご紹介します。

見せておくナビゲーション

  • リストタイプ

img_direction_130305_04

幅いっぱいの縦積みリスト型のナビゲーション。ビーワークスのモバイルサイトもこのタイプです。
幅一杯のボタンなので、高さがしっかり取ってあれば押しやすさはピカイチです。
スマートフォンサイトが出始めた頃によく見た形ですが、最近は徐々に少なくなっている気がします…。

  • ボタンタイプ

img_direction_130305_05

横2列×2行 など、押しにくくない大きさでボタンにしてあるタイプ。(Appleのガイドラインだと高さ44px以上となっています。)

  • アイコンタイプ

img_direction_130305_06

アプリケーションのような見た目のナビゲーションタイプ。アイコンと簡単な説明が入っています。
このナビゲーションの場合は、レスポンシブデザインの場合PCサイトでも同様のアイコンを使ったナビゲーションになっている場合が多いです。

隠しておくナビゲーション

  • アコーディオンタイプ

img_direction_130305_07

menuボタンをタップすると、リスト型などのナビゲーションが表示されるタイプ。
コンテンツは隠れることなくナビゲーションの高さ分下に移動します。

  • レイヤータイプ

img_direction_130305_08

menuボタンをタップすると、画面上にナビゲーションのレイヤーが重なるように表示されます。

  • 横からスライドタイプ

img_direction_130305_09

左上または右上にあるmenuボタンをタップすると左または右からスライドしてメニューリストが表示されます。
Facebookのスマホ用アプリなどでも有名なUIですね。


2.画像の見せ方は、モバイル画面で見ることを想像して考える

レスポンシブデザインでモバイルサイトを設計する場合、画像のサイズや内容によって最適な見せ方を考えることが必要です。
デザインしたものを実際にモバイル端末で見ることを想像して設計しましょう。
ここでは、画像はどう扱うか、例をいくつかご紹介します。

img_direction_130305_10_b

  • 横幅いっぱいに表示する
    洋服等の商品や風景、家の写真など、小さい画面上でもしっかり見せたい画像は、端末の画面サイズに合わせて表示されるよう、cssで幅を%指定します。

  • 縮小して使用する
    商品のロゴやブランドロゴなど、小さくても形が分かりやすいもの、かつ表示しておく必要があるものはPCで使用している画像を縮小表示。

  • 表示せず別の表現で代替
    メインビジュアルのサムネイルなど、小さくしすぎると何がなんだかわからない…といった、「無くても問題ない」画像の場合思い切って表示しないというのも手です。
    代わりに「・」をならべてサムネイルの役割を持たせるなど、適した形に変更します。


3.クリッカブルな領域をタップでも押しやすいサイズ・見た目に設定する

PCだとポインタで正確にクリックできますが、タップはヒトの指で行うのでポインタに比べるとだいぶアバウト。
なので、なるべく押し間違いが無いように、クリックできる領域をタップしやすいサイズで設定することが使いやすさにつながります。

img_direction_130305_11

また、タッチデバイスでは直感的に操作できることが求められるため、「ここ押せますよ!」とアピールすることも重要。
ただ文字を並べるだけだと、アピール不足で「タップできる」と認識しにくいことも。
薄く背景を敷いたり、罫線で囲ったりするだけでも「押せそう感」はアップします。

img_direction_130305_12


4.余白は使いやすさにつながる重要な要素

スクロールやスワイプする時は画面を指で触って上下、左右に動かすので、画面全体がボタンやリンク領域で埋め尽くされていると、誤ってタップして意図しない画面遷移をしてしまうことがあります。
左右に少し余白を残しておくことや、ボタンや画像の上下もマージンを少しゆったり取ることが使いやすさにつながる場合があります。
画面設計やテストを行う時には、「使いやすさのための意味のある余白」を意識することでUIの改善が期待できますね。

img_direction_130305_13


まとめ

以上、使いやすいモバイルサイト設計のポイントをご紹介しました!
スマートフォンは、なんと言っても人が手で直接触って操作するものですので、使いやすいサイトを作るためには、やはりワイヤーを切った段階でユーザーテストを行うなど、実際の操作感を確認しておくことも大切だと思います。

thumbnail_b_direction_130305

記事が気に入ったらシェアしよう

この記事を書いたメンバー

佐藤 ゆり奈 ディレクター

東京生まれ、茨城育ち。キャンプと漫画とくだらない笑いが大好きです。
今まではなんでも自分でやりたい派でしたが、最近はチームの成長を一番に考えてます。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 魚座
  • 牡羊座
  • 牡牛座