スマートフォンサイトデザインに求められるUI/UX設計術

スマートフォンサイトデザインに求められる
© Kouichi kuriyama 2014 All rights reserved.
UI/UX設計術

Content
 UI/UXとは
 スマートフォンのUIデザインのために知らなければならないこと
 タッチ操作について
 タッチUXを実現するポイント
 UIコンポーネントの例
 デザイン上考慮しておきたいこと
［補足］
 jQuery UIを使ってみる
 スワイプジェスチャーに対応するカルーセルの作り方

UI/UXとは
 User Interface
 画面やボタンの視覚的デザインが提供する操作性。ユーザがデジ
タル機器を操作して目的を達成するために与えられる機能。
 User Experience
 ユーザが特定のサービスを使ったときに得られる経験や満足感。
 ユーザがサービスの目的に共感して、ポジティブな体験・満足を得
られるようにユーザの感情・行動・態度をデザインすること。

UIとUXの関係
UI UX
提供された機能操作時の感想・感覚操作後の満足感
優れたUIなくして優れたUXはあり得ないが、
優れたUIが優れたUXを実現するとは限らない

スマートフォンのUIデザインのために知らなければな
らないこと
 デバイスとしての特徴
 ユーザの利用シーンや目的

デバイスとしての特徴-1-
 デバイスの違いによる画面サイズの問題
OS デバイス画面サイズ画面解像度
iOS iPhone4・4S 3.5inch 640×960px
iPhone5 4.0inch 640×1136px
iPhone6 4.7inch 750×1334px
iPhone6 Plus 5.5inch 1080×1920p
x
Android GALAXY S・SⅡ 4.0inch 480×800px
GALAXY SⅢ 4.8inch 720×1280px
GALAXY S4 5.0inch 1080×1920p
x
Xperia Z1 5.0inch 1080×1920p
x
Xperia Z2・Z3 5.2inch 1080×1920p
x

デバイスとしての特徴-2-
 通信速度の問題
 キャリア各社の通信回線
 3G回線数Mbps～14Mbps
 LTE 75～100Mbps
 無線LAN（Wi-Fi）～数百Mbps
 いずれも通信状況（電波の強度や回線の混雑）によって
速度は大きく劣化し、安定した高速な通信ができないことが
多い

ユーザの利用シーンや目的
PC スマートフォン
利用シーン会社・自宅屋外・寝ながら・交通機関の中
環境落ち着いた場所、長時間、
速い回線
外出先、すき間の時間、遅い回線
目的情報収集・調査・買い物など現在地周辺のスポット調査、
暇つぶし

スマートフォン対応とは、
PC用コンテンツをスマートフォンの画面で
見えるようにすることか？
NO!
スマートフォン独自コンテンツが必要

スマートフォン独自のコンテンツが必要な理由
 1.ターゲットユーザが違う
 2.ユーザの目的が違う
 3.ユーザの操作が違う

タッチ操作
 タップ（Tap）
 指で軽く叩く動作。マウス操作のクリックに相当するといえる。
 フリック（Flick）
 指を素早くはじく操作のこと。画面を上下に移動させたり、文字入力の際に用いられ
る。
 スワイプ（Swipe)
 指を滑らせる操作のことで、フリックよりも画面に触れている時間が長く、左右に移動
させることを指す場合が多い。
 プレス（Press）
 パネルを押す操作のこと。長くプレスすると状態に応じたサブメニューがポップアップされ、
変更を行う操作を実行できる場合がある。その意味ではマウスに右クリックに近い。
 ドラッグ（Drag）
 プレスしたまま指を移動させる動作のこと。画面のスクロールやものを移動させる場合
に用いる。
 ピンチイン／ピンチアウト（Pinch In/Pinch Out）
 2本の指で画面に触れ、指の間隔を広げたり縮めたりする動作。主に表示倍率の変
化に用いる。

タッチUXを向上させるポイント
 ボタンは大きく
 最小サイズは44×44px（iOSヒューマンインタフェースガイドラインより）
 素早い視覚フィードバックを返す
 ボタンなどを押したときはすぐに表示で反応する必要がある。
 また、タッチ画面では一般的にカーソルやhoverは使えないので、それら
を使わずにボタンだと分かるUIが必要。
 ドラッグ・スクロールの排他処理
 縦スクロールを開始すると横スクロールはロックされ、逆に横スクロール中
は縦スクロールがロックされまる。
 スワイプでページを切り替えるスライドの中に、縦スクロールのコンテンツが
あるような場合、縦スクロール中はスライドしない。

UIコンポーネントの例

タブ型ナビゲーション
 どの画面からでもいつでも別
画面に移動するためのナビ
ゲーションとして多く利用され
ている。
 辞書やノートのインデックスを
メタファーとしている。
 3～5項目程度のナビゲー
ションとして適切。項目数が
多いときは垂直パターンを検
討する。
 http://m.yahoo.co.jp
 http://news.yahoo.co.jp

アコーディオンメニュー
 メニュー項目を画面遷移
をせずに同一画面内に表
示・非表示を切り替える
UI。階層化されている項
目の最上位階層から一つ
下の階層のメニュー項目
を表示する。
 下階層のメニューを表示
しているときと非表示の
時では、上階層の表示ス
タイルを変えることが多
い。
 http://www.jreast.co.jp/sp/

スワイプナビゲーション
 画面を左右にスワイプする
ことで画面全体もしくは部
分が切り替わるUI。
 ボタンを配置する必要がな
く、ジェスチャーそのもの
がナビゲーションとなる。
 操作対象のエリアが広いた
め、近年のスマホの大画面
化に適したナビゲーション
でもある。
 http://m.skylark.jp/gusto.php

スライドメニュー
 スワイプしたりボタンを
タップしたりして、サイド
からメニューがスライドし
て表示されるUI。
 ユーザの注意をメインコン
テンツに集中させながら、
ユーザの任意のタイミング
でメニューを表示させるこ
とができる。項目数が多く
ても対応可能。
 http://co-trip.jp

デザインする上で考慮しておきたいこと

リストのサイズを揃える
 複数の項目を並べて表示す
ることで、ユーザは比較し
ながら選択していくことが
できる。
 項目のサイズが異なると、
情報の優先度と勘違いをし
てしまう。
 項目の情報量をなるべくコ
ンパクトにし、場合によっ
てはテキストの省略表示を
用いる。
 http://www.tripadvisor.jp/

リストのデザイン
項目あたりの情報量と、項目の比較検討のしやすさを考慮する

ホーム・戻るなどの機能をわかりやすく
 各OSのガイドラインでは
戻るボタンやホームボタン
はナビゲーションバーの左
側に配置することとしてい
る。
 直感的な操作ができるよう
にアイコン化することも一
般的。
 http://www.ohmyglasses.jp/

アイコンを積極的に利用する
ホーム
検索
設定
レーティング
削除
編集
シェア
メニュー
更新
 アイコンは、ラベルの長さに依
存せず一定したサイズで表現で
きることから、スマートフォン
の小さな画面に適している。
 メタファの適用が不適切だった
り、テイストが統一されていな
いデザインのアイコンはユーザ
に混乱を与えるので、標準化や
パターン化を意識する。

［補足］ｊQueryUIを利用する

ＪQueryUIとは
分類コンポーネント名概要
Interactions Draggable ドラッグ可能な要素を定義
Droppable ドロップ可能な要素を定義
Resizable サイズ変更可能な要素を定義
Selectable マウス操作で選択可能な要素を定義
Sortable 並べ替え可能な要素を定義
Widgets Accordion アコーディオン・パネル
Autocomplete オート・コンプリートのテキストボックスを生成
Button ボタンやリンク、ラジオボタンなどからボタンを生成
Datepicker 日付入力ボックスを生成
Dialog 汎用的なダイアログを生成
Menu 展開可能なリッチ・メニューを生成
Progressbar 進捗バーを生成
Slider スライダーを生成
Spinner アップダウン・ボタンを伴う数値入力ボックスを生成
Tabs タブ・パネルを生成
Tooltip ツールチップを生成

ＪQueryUIとは
分類コンポーネント名概要
Effects Add Class クラスを追加するエフェクトを提供
Color Animation 色を徐々に変化させるエフェクトを提供
Easing イージングのエフェクトを提供
Effect 基本的なエフェクトを提供
Hide 要素を非表示にするエフェクトを提供
Remove Class クラスを削除するエフェクトを提供
Show 要素を表示するエフェクトを提供
Switch Class クラスを変更するエフェクトを提供
Toggle 要素の表示・非表示を切り替えるエフェクトを提供
Toggle Class クラスの適用・削除を切り替えるエフェクトを提供
Utilities Position Position指定のユーティリティ
Widget Factory Widgetを作成するためのユーティリティ

jQuery UIの導入
 ダウンロードページ（http://jqueryui.com/download/）か
ら必要なコンポーネントをチェックする
 themeとはカラーリングのテンプレートのこと
 DLしたCSSファイルを後ほど編集することは可能だが、かなり作業
が難しいので、あらかじめThemeRollerで作りこんでおくとよい
 ダウンロードしたパッケージには、ドキュメントやデモなどが含まれてる
が、動作に最低限必要となるのは、以下のファイル・フォルダ。
 external/jquery/jquery.js（jQuery本体）
 jquery-ui.min.js（jQuery UI本体）
 jquery-ui.min.css（スタイルシート）
 /images/（画像ファイル一式）
 CDNを利用することも可能

Tabsウィジェットの適用
 タブをul／li要素によるリストで定義
 パネル本体をdiv要素で準備
 タブ配下のaタグのリンク先として、対応するパネルのid値を指
定
 タブ・パネル全体をid名“tabs”の要素でくくる
 ウィジェットの実行
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

Accordionウィジェットの適用
 タイトルをh3要素で、コンテンツをその直後にdiv要素で定義
 アコーディオン・パネル全体をid名“accordion”の要素でくく
る
 ウィジェットの実行
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

［補足］スワイプジェスチャーに対応する

JavaScriptでスワイプジェスチャーに対応するには
 JavaScriptでスマートフォン独自のジェスチャーにはこれらの
イベントが対応している
ontouchestart 画面に指が触れたとき
ontouchemove 画面にタッチした指を動かしたとき
ontouchend 画面から指を離したとき
ontouchecancel ontouchendの発生前に処理が取り消されたとき
 プログラミングが複雑になるので、jQueryの「touchSwipe」
プラグインを利用するとよい

スワイプして切り替えるカルーセル
 jQueryプラグインとして人気がある「carouFredSel」は
「touchSwipe」プラグインを合わせて利用することでスワイプ
対応のスマートフォン用カルーセルを作成できる。
 swipeプロパティをtrueにすることでスワイプジェスチャーで画
像を切り替えることができる。
<script>
$(function(){
var carouObj = new Object();
carouObj.auto = false;
carouObj.swipe = true;
$("#photos").carouFredSel(carouObj);
});
</script>

CSSでスワイプジェスチャーに対応するには
 webkit-overflow-scrolling: touch; を使うことが定番
 iOS5以降、Android4.0.4以降が対応している
 overflowの値はautoかscrollとする（CSS3ではx軸、y
軸独自に設定することも可能）
 height指定が必要
Selector {
height:???px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

スマートフォンサイトデザインに求められるUI/UX設計術

More Related Content

What's hot

Similar to スマートフォンサイトデザインに求められるUI/UX設計術

スマートフォンサイトデザインに求められるUI/UX設計術