デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」
DESCRIPTION
Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/TRANSCRIPT
![Page 1: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/1.jpg)
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第10章 - モバイルへの対応
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
![Page 2: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/2.jpg)
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ
![Page 3: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/3.jpg)
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
![Page 4: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/4.jpg)
第10章で学ぶこと
モバイル用サイト制作に関する環境的な課題およびアプローチについて理解する.また,その具体的なデザインパターンについて学ぶ.
![Page 5: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/5.jpg)
モバイルサイト制作に関する課題・アプローチ ついて学ぶ.
モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
![Page 6: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/6.jpg)
モバイルサイト制作に関する課題・アプローチ ついて学ぶ.
モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
![Page 7: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/7.jpg)
1. ちっぽけな画面サイズ
2. さまざまな画面サイズ
3. タッチスクリーン
4. テキスト入力の難しさ
5. 物理的な厳しい環境
6. ソーシャルな影響と限られた注意力
モバイル向けデザインの6つの課題
![Page 8: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/8.jpg)
1. ちっぽけな画面サイズ
贅沢品を並べる余裕はない。本質に関わらない部分はきっぱり捨てるか、サイトの奥にしまっておこう。
![Page 9: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/9.jpg)
2. さまざまな画面の幅
ページをスクロールしながら見るのは面倒ではないが,平均的な画面の横幅については十分に考える必要がある.
cf. Effective Design Multiple Screen Sizehttp://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
![Page 10: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/10.jpg)
3. タッチスクリーン
“小さなターゲットに指で正確に触れるのは大変だ. リンクやボタンは楽にタッチできるくらい大きくしよう.”
![Page 11: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/11.jpg)
4. テキスト入力の難しさ
タッチスクリーンのキーボード入力を好むユーザは少ない (*).積極的に Auto Completion や Good Defaults を採用しよう.
* 日本では、逆にモバイル端末のキーボード入力を好むユーザの方が多いかもしれない。
≧
![Page 12: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/12.jpg)
5. 物理的に厳しい環境
モバイルデバイスはあらゆる場所で使われている.光量や周囲の騒音の違い, 振動の影響について考えよう.
大事なことは、ミスを許容して、ミスを簡単に直せるようにデザインすること.
![Page 13: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/13.jpg)
6. ソーシャルな影響と限られた注意力
モバイルユーザは,大抵, 他のことをしながらサイトを見る.簡単に素早く, 中断/再開が出来て, 一目で分かるようにする.
![Page 14: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/14.jpg)
1. ちっぽけな画面サイズ
2. さまざまな画面サイズ
3. タッチスクリーン
4. テキスト入力の難しさ
5. 物理的な厳しい環境
6. ソーシャルな影響と限られた注意力
モバイル向けデザインの6つの課題
![Page 15: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/15.jpg)
1. モバイルユーザには、実際のところ何が必要なのか?
2. 無駄を減らしてサイトやアプリの本質を示す.
モバイル向けデザインへの5つのアプローチ
![Page 16: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/16.jpg)
1. モバイルユーザには、実際のところ何が必要なのか?
2. 無駄を減らしてサイトやアプリの本質を示す.
3. 可能ならば、デバイスのハードウェアを利用する.
4. コンテンツをリニアライズする.
5. よく実行される一連のインタラクションを最適化する.
モバイル向けデザインへの5つのアプローチ
![Page 17: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/17.jpg)
参考にすべき事例
JetBlue RuthsChris Boston Fidelity
![Page 18: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/18.jpg)
モバイルサイト制作に関する課題・アプローチ ついて学ぶ.
モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
![Page 19: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/19.jpg)
モバイルサイト制作に関する課題・アプローチ ついて学ぶ.
モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
![Page 20: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/20.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 21: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/21.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 22: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/22.jpg)
1. Vertical Stack / 縦方向のスタック
ESPN / Google News / REI
コンテンツを縦1カラムで構成する.横並びの要素を極力使用しない.
![Page 23: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/23.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 24: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/24.jpg)
2. Filmstrip / 映写スライド
iPhone の天気アプリ
トップレベルの複数のページを横並びにして,左右のスワイプ操作で1度に1ページずつ見せるワザ
![Page 25: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/25.jpg)
3. Touch Tools / タッチ表示ツール
iPhone Image Viewer
画面タッチやキーを押す操作に応じて,ツールをオーバーレイで表示するワザ
![Page 26: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/26.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 27: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/27.jpg)
4. Bottom Navigation / 下部ナビゲーション
At the bottom of Amazon.com Google Image Search
グローバルナビゲーションを,ページの一番下(スクロールしないと見えない)に配置するワザ
![Page 28: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/28.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 29: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/29.jpg)
5. Thumbnail-and-Text List / サムネイルとテキストのリスト
Yahoo! News Boston.com Mashable
選択可能な項目のリストを, 項目ごとにサムネイル画像+テキストで表示するワザ
![Page 30: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/30.jpg)
5. Thumbnail-and-Text List / サムネイルとテキストのリスト
iPhone App Store
選択可能な項目のリストを, 項目ごとにサムネイル画像+テキストで表示するワザ
![Page 31: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/31.jpg)
6. Infinite List / 無限リスト
Facebook iTunes
長いリストの一番下に,さらに多くの項目を読み込んでリストに追加するためのボタンを配置するワザ
![Page 32: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/32.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 33: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/33.jpg)
7. Generous Borders / ゆとりのあるボーダー
Best Western
タッチスクリーン搭載デバイスで、ボタンやリンク、その他のタップ可能なコントロールの周囲の感覚や余白を広く持たせるワザ
![Page 34: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/34.jpg)
8. Text Clear Button / テキスト消去ボタン
Safari URI Input
ボタンを1回タップする操作によって,テキストフィールドの内容を消去するワザ
![Page 35: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/35.jpg)
9. Loading Indicators / 読み込み中のインジケーター
iPhone の株価アプリ
ページまたはページ内の要素を読み込むときに,それが表示される場所でプログレス表示を行うワザ
![Page 36: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/36.jpg)
10. Richly Connected Apps / 豊富なアプリ連携
Freedom Trail
電話機能や地図,ブラウザといった他のアプリを直接呼び出すリンクを配置して,ユーザの現在の状況に見合ったデータを予備入力するワザ
![Page 37: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/37.jpg)
11. Streamlined Branding / スリム化したブランディング
Mobile vs. Website of JetBlue
組織のロゴや色,その他のブランディング要素を,素早く読み込める状態にして再利用するワザ
![Page 38: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/38.jpg)
1. Vertical Stack
2. Filmstrip
3. Touch Tools
4. Bottom Navigation
5. Thumbnail-and-Text List
6. Infinite List
7. Generous Borders
8. Text Clear Button
9. Loading Indicators
10.Richly Connected Apps
11.Streamlined Branding
モバイルサイト/アプリのデザインパターン
![Page 39: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/39.jpg)
モバイルサイト制作に関する課題・アプローチ ついて学ぶ.
モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
![Page 40: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/40.jpg)
第10章で学ぶこと
モバイル用サイト制作に関する環境的な課題およびアプローチについて理解する.また,その具体的なデザインパターンについて学ぶ.
![Page 41: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/41.jpg)
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
![Page 42: デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」](https://reader033.vdocuments.site/reader033/viewer/2022060111/556610d3d8b42a7d608b4677/html5/thumbnails/42.jpg)
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第10章 - モバイルへの対応
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/