読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【webデザイン】スマホサイトの製作とUI/UXの注意点

スマホサイト制作と注意点

スマホサイト制作とその注意点についていくつかのサイトを個人で見返す用に要約しました

引用サイト1

http://www.trive-media.com/blog/849

スマホサイトの特徴

指による操作タップ操作
指のクリック範囲はマウスより大きい
画面が小さい
デザインや情報の見せ方など注意
電話を即かけられる
タップするだけで電話をかけられる
外でのナビゲーション
即ナビゲーションとして利用できる

スマホサイトの特徴

リンク、段落の上下の余白
指でのタップエリアが広いので広くとる
ボタンは幅いっぱいが推奨
左右どちらの手でも押しやすい為。左右に寄せる場合は右に。右利きの人が多い為。
フォーム
入力方法を番号だけや半角英数字だけ等絞っていく

http://www.trive-media.com/blog/849

引用サイト2

http://www.atmarkit.co.jp/ait/articles/1307/03/news016.html

デヴァイスの違い

  • 文字の情報量(サイト参照)
  • クリックかタップか

シュチュエーションの違い

  • 会社、自宅  屋外 || 寝ながら、移動中
  • 落ち着いた場所、長時間、速い回線 || 外出先、隙間時間、遅い回線
  • 資料作成、買い物 || その場の情報、暇つぶし

UI/UXでの注意点

引用
http://www.atmarkit.co.jp/ait/articles/1307/03/news016_2.html

タッチ操作で意思を伝えやすく
入力ではなく選択肢をタップなど
キーボード入力を減らす
現在時刻などは自動入力させられる。
問題が起きやすいプロパティ
「position:fixed」(http://www.atmarkit.co.jp/ait/articles/1304/02/news020.html)
「transform:translate3d」
Androidに注意
Androidは新機種と旧機種のハードスペック差が大きい

タッチUIについて

  • タッチUIはユーザーに対して「見えているものをそのまま扱っている」ような感覚を与える
    現実世界で物をつかんで動かせば、動かした通りに物が付いてくるのが普通
    その通りに動かないUIは非常に操作感が悪い印象に

引用サイト4

http://labs.cybridge.jp/smartphone/iphone/676.html

フォントサイズ12px以上
iOSSafariでは、文字サイズが11px、10px、9pxのときは折り返し地点の右側に余白ができるというバグがある
(注:14pxと聞いたこともある)
  • タップのしやすさに注意。リンクはわかりやすく。
階層はなるべく浅く
回線が遅いのでPCのように何回もクリックして遷移するのは不向き

スマホサイトのUIの注意点

引用
http://f-tra.com/ja/blog/smartphone/5530

モーダルウィンドウ
閉じるまで他の操作ができない欠点
誤って閉じる可能性が高い為フォームは要注意
補足やヘルプなど短めの文章に向く
折りたたみ表示
展開したとき分かりにくいと気づいてもらえない
アイコンもわかりやすく
TOPへのスクロール
間違って押すとストレス
一番下に表示すれば良いのでは
固定表示
画面がさらに小さくなる
画面内のスクロール
画面を占有される
折りたたみやモーダルで対処
新規タブ、ウィンドウ
モーダルや折りたたみで対処

引用サイト6

http://www.asobou.co.jp/blog/web/smart-phone

  • 郵便番号などは自動表示
  • フォームは右側にスペースを開けスワイプしやすいように
  • 小さい画面で効率良く見せる

HTMLコーディング時の注意