モバイルファーストで考える最新トレンドと アダプティブデザイン

1. モバイルファーストで考える最新トレンドと
アダプティブデザイン
2014.8.8
株式会社インフォバーン
可兒 健城 Takeshiro kani

2. 株式会社インフォバーン
インフォバーンKYOTO テクニカルディレクター
可兒 健城
カニ タケシロ
フロントエンドエンジニア・プログラマ出身
• 2005年よりウェブ業界に従事
• Adobe Flashを中心にキャンペーンサイト、インタラ
クティブデザイン、Webアプリケーション開発、RIA
開発、ゲーム開発なと数多くの案件を担当
• 制作会社を数社経験の後2012年より、インフォバー
ンKYOTOにテクニカルティレクターとして従事

3. モバイルファーストで考える最新トレンドと
アダプティブデザイン
本日のアジェンダ
ーモバイルファースト(MOBILE FIRST)
ーアダプティブデザインとレスポンシブ/アダプティブwebデザイン
ーまとめ
ー国内事例
ーモバイルファースト視点からのスマホ対応Tips

4. モバイルファースト
MOBILE FIRST

5. モバイルファーストとは？
「モバイルファースト」という言葉は2009年ごろ、デジタルプロダクトデザイ
ナーのルーク・ウロブルスキー（Luke Wroblewski）氏よって提唱されました。

6. モバイルファーストとは？
サービスを提供・開発する上で
モバイル利用を起点に設計、コンテンツ、ナビゲーションを考える事

7. 考え方の背景
３つの理由
GROWTH：「成長」
CONSTRAINS：「制約」
CAPABILITIES：「機能」

8. GROWTH=OPPORTUNITY：「成長」＝機会
2010年末
9.7%
2013年末
62.2%

9. CONSTRAINS=FOCUS：「制約」＝集中
操作スクリーンサイズ
制約

10. CAPABILITIES=INNOVATION：「機能」＝能力
位置情報 マイク・スピーカー
コンパス カメラ
・
・
・

11. モバイルファースト モバイル利用を起点に設計
ユーザーがモバイル端末を利用する状況・環境を起点に設計

12. アダプティブデザイン
と
レスポンシブ/アダプティブwebデザイン

13. アダプティブ
Adaptive
【形容詞】適応する，適応できる，適応性のある
適応性
状況や環境などに合うように自分を変えていく性質・能力

14. 状況変化への適応
ユーザーが利用する状況に対して異なる手段・手法を持つ“アダプティブデザイン”
アダプティブデザイン
ユーザーの置かれている状況、環境、コンテキストに合わせて
コンテンツ・表示を切り替える

15. Webページをモバイル端末など複数の機器や画面サイズ（ブレークポイント）に応
じて表示内容が最適な状態にレイアウトの切り替えを「適応」する。
手法：その１
アダプティブwebデザイン レスポンシブwebデザイン

16. アダプティブwebデザイン
SERVER
PC用HTML
SP用HTML
PC用の
HTMLを表示
SP用の
HTMLを表示
従来型の考え方で、特定の画面サイズのみに最適化されたデザイン、HTMLペー
ジをそれぞれ用意しユーザー環境によって表示するレイアウトを切り替える。

17. レスポンシブwebデザイン
CSS
1200px用の
装飾・レイアウト
480px用の
装飾・レイアウト
768px用の
装飾・レイアウト
HTML
※ワンソース
画面サイズの応じてフレキシブルにレイアウト、デザインを最適化し、さまざま
な端末に単一のHTMLで対応できる。
ワンソースマルチユース

18. レスポンシブwebデザイン
●メンテナンス性がよい、運用コストの削減
●URLの統一、SEO対策の優位性
●様々な画面サイズに最適化される
●開発コストの削減
メリット
●サイトの表示速度が遅くなる
●デザインやレイアウトの柔軟性の低下
●構築が複雑、ワークフローを間違えると開発コストの増加
●PCサイト、スマートフォンサイトと別々の構造設計はできない
デメリット

19. アダプティブwebデザイン
●PCサイト、スマートフォンサイト別々の設計が可能
●デザインやレイアウトの柔軟性が高い
●サイトの表示速度を最適化しやすい
メリット
●メンテナンス性が下がる、運用コストの増加
●URLが統一されない
デメリット

20. さまざまなデバイスを横断しての
デザイン・機能の一貫性 レスポンシブwebデザイン
ブランド普及の一貫性を担保

21. ユーザー環境に最適化された
デザイン・機能の提供 アダプティブwebデザイン
ユーザーコンテキストを重視した
コンテンツ・機能を担保

22. New York Times
http://www.nytimes.com
アダプティブwebデザイン

23. Lufthansa
http://www.lufthansa.com/
アダプティブwebデザイン

24. レスポンシブwebデザイン
TRANSPORT FOR LONDON
https://www.tfl.gov.uk/
Image from TFL

25. レスポンシブwebデザイン
Time.com
http://www.time.com/time/

26. 手法：その２
ユーザーのおかれている状況、環境に合わせて表示内容を切り替える。
例えば、年齢、性別、職業などのユーザー属性や、普段の移動は車か？、電車か？、
バスにのるのか？どこに行くのか？どこにいるのか？などユーザーの行動分析を行い、
様々なセンサーが環境を感知して必要としている情報を表示する。
性別？年齢？職業？
etc…
電車？車？バス？
移動中？etc…
自宅？店舗？ショッピングモール？
どこにいる？etc…

27. 店舗以外の場所
事例
GAP Inc. スマートフォンアプリ
店舗
ユーザーが家や店舗以外の場所ではオンラインショップに接続。
実際に店舗にいるときはショップアシスタントにつながります。ユーザーの位置情報
に応じて自動で異なるコンテンツ・機能を提供。

28. 事例
Google Now スマートフォンアプリ
キーワード入力や検索などのトリガーになる操作を行うことなく、ユーザーが必要と
している情報を表示。

29. まとめ

30. ●上位概念としてのアダプティブデザイン
●webデザインとしての従来型のアダプティブwebデザイン
●レスポンシブwebデザインはアダプティブwebデザインからの拡張
●広義の意味でアダプティブデザインはweb以外の領域も含まれる
extension
まとめ

31. Canon Inc.
http://canon.jp/
国内事例

32. モバイルファースト視点からの
スマホ対応Tips

33. 1. ターゲット端末は事前に選定。すべての端末に対応するのは不可能。
2. レスポンシブwebデザインは万能ではない。
1. 要素を詰め込み過ぎない。画面サイズが限られているので、極力シンプルなUI、
インターフェイスを意識する。
2. ユーザーの利用状況・環境を意識したデザインを心がける。
1. モバイルファーストのコンセプトを関係者全員が共有している。
モバイルファースト視点からのスマホ対応Tips

34. 7. Androidの日本語フォントで太字が表現できない。
8. iPhoneでは明朝体に対する扱いがiOSバージョンで異なる。
9. リンクにCSSでシャドウを装飾するとタップしても反応しなくなる機種がある。
10.スマートフォンサイトでオーバレイは多用しない方が良い。
モバイルファースト視点からのスマホ対応Tips
続いて制作実装面から注意点を何点か…

35. ご清聴ありがとうございました