モバイルWebアプリ設計で気をつけることメモ

developerWorksの「モバイル Web のためのユーザー・インターフェースの設計」を読んだので、自分用にメモる。

  • PC上で2ペインのレイアウトは、モバイル機器では画面切り替えにできる。
  • タブの位置はiOSは画面下部、Androidは画面上部にする。
  • 物理ボタンと重複するボタンは画面に出さないように。
  • ウィジェットの大きさはピクセルではなくmmのような物理サイズで設計する。
  • モバイルとPCでは、同じアプリでも使用パターンが異なる場合がある。
  • UI設計パターンを利用する
  • できるだけ、ユーザにテキストを入力させないようにする。
  • ナビゲーションの階層を深くしない。
  • 簡単にホームに戻る手段を用意する。(Androidなら物理ボタンとして提供されている機能)
  • 視覚的なヒントによって、ユーザに操作方法がわかるようにする。
  • モバイル向けに最適化する。PC用のサイトはモバイルでは使いにくい。
  • パフォーマンスは重要。
  • ヘルプを見なくても使えるようにする。
  • 独特なUIを採用するときには注意すること。
  • 必要なナビゲーションはアプリケーション内で行えるようにする。

所感

レスポンシブな設計というのは注目されつつあるようだが、どうも難しそうだ。デバイスごとに対応しなければならない項目が多すぎて、結局はサーバで配信内容を切り替える必要があるからだ。クライアント側での対応にこだわると、使いやすいアプリケーションにはならないだろう。

対象とするプラットフォームごとに変えなければならないものの一覧がどこかにまとまっているとうれしい。
だけどそれは貴重なノウハウだし、唯一の正解があるものではなさそうだ。多くのデバイスに対応する具体的な方法が公開されることは今後もなさそうに思える。みんなで苦労するしかないのだろう。