Downloaded 30 times
![HTML 5 : alt属性の書きかた [例]
例：フォームのステップナビゲーション
alt= お問い合わせ完了まで全部で3ステップです
入力
alt= ステップ1の
入力は完了してい
ます
確認
alt= 現在はス
テップ2の確認で
す
完了
alt= 最後はス
テップ3の完了で
す](https://image.slidesharecdn.com/mobilef-html5conf-20131130-131130022111-phpapp02/75/The-Mobile-Frontier-at-HTML5-Conference-2013-11-30-107-2048.jpg)
Uploaded byYukio Andoh
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
- 1.
- 3. 1章 いかりを上げる Casting Off Anchors モバイルフロンティアを探索するための準備 Preparingto Explore the Mobile Frontier Nov 30 2013 Kaoru Shimizu @HTML5 Conference
- 6.
- 7. • 普遍的なパラダイム • 共通化されたUI規則 •標準化された入力手法 • デザイン理論 • 学術的研究結果
- 8. • 普遍的なパラダイム ? • 共通化されたUI規則 •標準化された入力手法 • デザイン理論 • 学術的研究結果
- 11. 2章 モバイルNUIパラダイムの登場 The Emergent MobileNUI Paradigm GUIとNUIの境界を越えて Traversing the GUI/NUI Chasm Nov 30 2013 Kaoru Shimizu @HTML5 Conference
- 12.
- 13. コマンドラインインターフェース CLI (Command LineInterface) ユーザがコマンドを覚え、 テキストベースのインターフェースに打ち込む。
- 14. グラフィカルユーザーインターフェース GUI (Graphical UserInterface) WYSIWYG(What You See Is What You Get) ユーザーにコマンドを見せて選ばせる。 フォルダやゴミ箱といったオフィスを模したメタファーを利用。
- 15. ナチュラルユーザーインターフェース NUI (Natural UserInterface) WYDIWYG(What You Do Is What You Get) ユーザの状況に応じて、表示される情報が変化。 より直感的に、速い操作が可能。
- 16.
- 17.
- 18.
- 19.
- 20. 3 デンバーのピーナッツバター Demystifying the Elusive MobileContext Nov 30 2013 Yoshinori Wakizaka @HTML5 Conference
- 21.
- 22.
- 23.
- 24.
- 25. モバイルコンテクストの原則 いつでも、どこからでも な状況にのためのデザイン 1. モバイルならではの体験を作ることにフォーカスする 2.注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 26. モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. モバイルコンテクストの原則 いつでも、どこからでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 34.
- 35. モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 36. 3. 認知的負荷や機会費用を減らす ある状況で、他よりも簡単にできるようにすること ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたい モチベーション/緊急性:低い 利用環境: 自宅 代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅員 に電車の時刻を聞く、友だちに電話する 平常時 緊急時 ニーズ: 土地勘がない場所での検索 モチベーション/緊急性: 非常に高い 利用環境: ストリート、混雑した駅 代替手段: BART（地下鉄の名称）の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する
- 37.
- 38.
- 39. 4章 形態の変化 Shapeshifting コンバージェンスとマルチデバイス体験 Convergence and Multidevice Experiences Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
- 40.
- 41. P.119 ブライアン・リーガー氏 インタビューより 「自分の仕事を『ウェブページをデザインする』と考えることを止 め、代わりに複数のコンテクストで表示されるコンテンツをデザイ ンすることだと考える」 P.115 より 「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら ば、モバイル体験だけを考慮するだけでは足りません」 「モバイル端末はより大きなデバイスエコシステムの一部である」
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. 4章 見どころ • コンバージェンス（融合） • デバイスからデバイスへシームレスに • テクノロジー、メディア、アクティビティ（行為） •エコシステム • タッチポイント、人々、プロセスと環境 • 参加型デザイン • 状況的行為 • マルチスクリーン戦略 • ネイティブアプリ、ウェブアプリ、モバイル向けウェブサイト
- 49. 5章 モバイルUXパターン Mobile UX Patterns モビリティのためにデザインする Designingfor Mobility Nov 30 2013 Hiroko Nozawa @HTML5 Conference
- 50. モバイルのパタンランゲージとは？ 1. クラウドとアプリがモバイルUXの構成単位となる 2. 優れたモバイルエクスペリエンスは徐々にその本質を 明らかにする 3.コンテンツがインターフェイスになる 4. モバイルにふさわしい入力方法を使う 5. タスクを終わらせることよ、さようなら
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. 6章 モバイルプロトタイピング Mobile Prototyping モバイルエクスペリエンスをデザインするためのツールと手法 Tools andMethods for Designing Mobile Nov 30 2013 Nob Sato @HTML5 Conference
- 57.
- 58.
- 59. なぜプロトタイピングなのか？ • デザインアイデアやエクスペリエンスの伝達（共有） • ユーザーのフィードバックの収集できる •未知の探求ができる • アイデアの微調整を行える
- 60. モバイルプロトタイピングの種類 • 戦術的プロトタイピング Tactical Prototyping •体験的プロトタイピング Experimental Prototyping
- 61. 戦術的プロトタイピング 1. スケッチ 2. ペーパープロトタイピング 3.実機上でのインタラクティブなプロトタイプ
- 62. 体験的プロトタイピング 1. ストーリーボーディング 2. ボディーストーミング（アクティングアウト） 3.スピード・デート法 4. コンセプトビデオ
- 63. プロトタイピング、3つの公理 • 適度な忠実度で行う、完璧主義者にならない。 • 失敗を受け入れ、勇気をもって次のアイデアに進む。 •プロトタイピングは万能薬ではない。 「完璧は最適の敵」 フランスの有名な詩人 ヴォルデール
- 64. 7章 モーションとアニメーション Motion and Animation 新しいモバイルUXのためのデザイン要素 ANew Mobile UX Design Material Nov 30 2013 Yukio Andoh @Mobile Frontier Workshop
- 65.
- 66.
- 69. ディズニーのアニメーションの12原則 ■ スクオッシュ（潰し）とストレッチ（伸ばし） ■ アンチシペーション（予備動作） ■ステージング（舞台演出） ■ ストレート・アヘッド・アクション（逐次描き）とポーズ・ トゥ・ポーズ（原画による設計） ■ フォロー・スルーとオーバーラッピング・アクション（あと 追いの工夫） ■ スロー・インとスロー・アウト（両端づめ） ■ アーク（運動曲線） ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵
- 70.
- 71. アニメーションの原則を生かす方法 1■ 良いアプリをたくさん探し、使い込む。事例の引き出し 2■ 良いものが、なぜ良いのか、要素を分析・分解する (ハイスピードカメラ） 3■常用アプリが更新したら、どこが変わったのか比較する 4■ 必要なのは「意味のある」動きだけ。操作の前後の動き重要 5■ コンテンツが王様。直接操作。UIは本来無くていいもの 6■ 指が触れて操作する瞬間は画面が見えてないことを考慮 7■ 情報の密度を落とす。動きで着目すべきところを演出する (速さ） 8■ 中断、途中から始まることが前提。時間の流れを考慮する
- 72. 8章 感覚の目覚め Awakening the Senses タッチ、ジェスチャー、音声とサウンド Touch,Gesture, Voice, and Sound Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. HTML 5 :alt属性 HTML5仕様書 （Editor's Draft 27 November 2013） 4.8.1.1 Requirements for providing text to act as an alternative for images alt属性の書きかた すごい充実した解説
- 79.
- 93.
- 105.
- 106. HTML 5 :alt属性の書きかた 例：フォームのステップナビゲーション 入力 alt= 入力 確認 alt= 確認 完了 alt= 完了
- 107. HTML 5 :alt属性の書きかた [例] 例：フォームのステップナビゲーション alt= お問い合わせ完了まで全部で3ステップです 入力 alt= ステップ1の 入力は完了してい ます 確認 alt= 現在はス テップ2の確認で す 完了 alt= 最後はス テップ3の完了で す
- 108. 8章 見どころ • 人間の感覚は、視覚だけでなく、触覚、身体の動き、聴覚 •タッチインターフェース • タッチターゲット、タッチジェスチャーの配置、コンテンツと一体化 • ジェスチャー • なじみのジェスチャー+新しいジェスチャー、付加的な感覚のフィードバック、根気と創造力 • 音声によるインターフェース
- 109. 9章 新しいモバイルのかたち New Mobile Forms モバイルフロンティアの開拓者 Pioneeringthe Mobile Frontier Nov 30 2013 Yukio Andoh @HTML5 Conference
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.