Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
モバイルファーストで考える最新トレンドと
アダプティブデザイン
2014.8.8
株式会社インフォバーン
可兒 健城 Takeshiro kani
株式会社インフォバーン
インフォバーンKYOTO テクニカルディレクター
可兒 健城
カニ タケシロ
フロントエンドエンジニア・プログラマ出身
• 2005年よりウェブ業界に従事
• Adobe Flashを中心にキャンペーンサイト、インタラ
...
モバイルファーストで考える最新トレンドと
アダプティブデザイン
本日のアジェンダ
ーモバイルファースト(MOBILE FIRST)
ーアダプティブデザインとレスポンシブ/アダプティブwebデザイン
ーまとめ
ー国内事例
ーモバイルファースト視点...
モバイルファースト
MOBILE FIRST
モバイルファーストとは?
「モバイルファースト」という言葉は2009年ごろ、デジタルプロダクトデザイ
ナーのルーク・ウロブルスキー(Luke Wroblewski)氏よって提唱されました。
モバイルファーストとは?
サービスを提供・開発する上で
モバイル利用を起点に設計、コンテンツ、ナビゲーションを考える事
考え方の背景
3つの理由
GROWTH:「成長」
CONSTRAINS:「制約」
CAPABILITIES:「機能」
GROWTH=OPPORTUNITY:「成長」=機会
2010年末
9.7%
2013年末
62.2%
CONSTRAINS=FOCUS:「制約」=集中
操作スクリーンサイズ
制約
CAPABILITIES=INNOVATION:「機能」=能力
位置情報 マイク・スピーカー
コンパス カメラ
・
・
・
モバイルファースト モバイル利用を起点に設計
ユーザーがモバイル端末を利用する状況・環境を起点に設計
アダプティブデザイン
と
レスポンシブ/アダプティブwebデザイン
アダプティブ
Adaptive
【形容詞】適応する,適応できる,適応性のある
適応性
状況や環境などに合うように自分を変えていく性質・能力
状況変化への適応
ユーザーが利用する状況に対して異なる手段・手法を持つ“アダプティブデザイン”
アダプティブデザイン
ユーザーの置かれている状況、環境、コンテキストに合わせて
コンテンツ・表示を切り替える
Webページをモバイル端末など複数の機器や画面サイズ(ブレークポイント)に応
じて表示内容が最適な状態にレイアウトの切り替えを「適応」する。
手法:その1
アダプティブwebデザイン レスポンシブwebデザイン
アダプティブwebデザイン
SERVER
PC用HTML
SP用HTML
PC用の
HTMLを表示
SP用の
HTMLを表示
従来型の考え方で、特定の画面サイズのみに最適化されたデザイン、HTMLペー
ジをそれぞれ用意しユーザー環境によって表示...
レスポンシブwebデザイン
CSS
1200px用の
装飾・レイアウト
480px用の
装飾・レイアウト
768px用の
装飾・レイアウト
HTML
※ワンソース
画面サイズの応じてフレキシブルにレイアウト、デザインを最適化し、さまざま
な端末...
レスポンシブwebデザイン
●メンテナンス性がよい、運用コストの削減
●URLの統一、SEO対策の優位性
●様々な画面サイズに最適化される
●開発コストの削減
メリット
●サイトの表示速度が遅くなる
●デザインやレイアウトの柔軟性の低下
●構築...
アダプティブwebデザイン
●PCサイト、スマートフォンサイト別々の設計が可能
●デザインやレイアウトの柔軟性が高い
●サイトの表示速度を最適化しやすい
メリット
●メンテナンス性が下がる、運用コストの増加
●URLが統一されない
デメリット
さまざまなデバイスを横断しての
デザイン・機能の一貫性 レスポンシブwebデザイン
ブランド普及の一貫性を担保
ユーザー環境に最適化された
デザイン・機能の提供 アダプティブwebデザイン
ユーザーコンテキストを重視した
コンテンツ・機能を担保
New York Times
http://www.nytimes.com
アダプティブwebデザイン
Lufthansa
http://www.lufthansa.com/
アダプティブwebデザイン
レスポンシブwebデザイン
TRANSPORT FOR LONDON
https://www.tfl.gov.uk/
Image from TFL
レスポンシブwebデザイン
Time.com
http://www.time.com/time/
手法:その2
ユーザーのおかれている状況、環境に合わせて表示内容を切り替える。
例えば、年齢、性別、職業などのユーザー属性や、普段の移動は車か?、電車か?、
バスにのるのか?どこに行くのか?どこにいるのか?などユーザーの行動分析を行い、
様々な...
店舗以外の場所
事例
GAP Inc. スマートフォンアプリ
店舗
ユーザーが家や店舗以外の場所ではオンラインショップに接続。
実際に店舗にいるときはショップアシスタントにつながります。ユーザーの位置情報
に応じて自動で異なるコンテンツ・機能を...
事例
Google Now スマートフォンアプリ
キーワード入力や検索などのトリガーになる操作を行うことなく、ユーザーが必要と
している情報を表示。
まとめ
●上位概念としてのアダプティブデザイン
●webデザインとしての従来型のアダプティブwebデザイン
●レスポンシブwebデザインはアダプティブwebデザインからの拡張
●広義の意味でアダプティブデザインはweb以外の領域も含まれる
extens...
Canon Inc.
http://canon.jp/
国内事例
モバイルファースト視点からの
スマホ対応Tips
1. ターゲット端末は事前に選定。すべての端末に対応するのは不可能。
2. レスポンシブwebデザインは万能ではない。
1. 要素を詰め込み過ぎない。画面サイズが限られているので、極力シンプルなUI、
インターフェイスを意識する。
2. ユーザ...
7. Androidの日本語フォントで太字が表現できない。
8. iPhoneでは明朝体に対する扱いがiOSバージョンで異なる。
9. リンクにCSSでシャドウを装飾するとタップしても反応しなくなる機種がある。
10.スマートフォンサイトでオー...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

3,909 views

Published on

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

Published in: Mobile

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

  1. 1. モバイルファーストで考える最新トレンドと アダプティブデザイン 2014.8.8 株式会社インフォバーン 可兒 健城 Takeshiro kani
  2. 2. 株式会社インフォバーン インフォバーンKYOTO テクニカルディレクター 可兒 健城 カニ タケシロ フロントエンドエンジニア・プログラマ出身 • 2005年よりウェブ業界に従事 • Adobe Flashを中心にキャンペーンサイト、インタラ クティブデザイン、Webアプリケーション開発、RIA 開発、ゲーム開発なと数多くの案件を担当 • 制作会社を数社経験の後2012年より、インフォバー ンKYOTOにテクニカルティレクターとして従事
  3. 3. モバイルファーストで考える最新トレンドと アダプティブデザイン 本日のアジェンダ ーモバイルファースト(MOBILE FIRST) ーアダプティブデザインとレスポンシブ/アダプティブwebデザイン ーまとめ ー国内事例 ーモバイルファースト視点からのスマホ対応Tips
  4. 4. モバイルファースト MOBILE FIRST
  5. 5. モバイルファーストとは? 「モバイルファースト」という言葉は2009年ごろ、デジタルプロダクトデザイ ナーのルーク・ウロブルスキー(Luke Wroblewski)氏よって提唱されました。
  6. 6. モバイルファーストとは? サービスを提供・開発する上で モバイル利用を起点に設計、コンテンツ、ナビゲーションを考える事
  7. 7. 考え方の背景 3つの理由 GROWTH:「成長」 CONSTRAINS:「制約」 CAPABILITIES:「機能」
  8. 8. GROWTH=OPPORTUNITY:「成長」=機会 2010年末 9.7% 2013年末 62.2%
  9. 9. CONSTRAINS=FOCUS:「制約」=集中 操作スクリーンサイズ 制約
  10. 10. CAPABILITIES=INNOVATION:「機能」=能力 位置情報 マイク・スピーカー コンパス カメラ ・ ・ ・
  11. 11. モバイルファースト モバイル利用を起点に設計 ユーザーがモバイル端末を利用する状況・環境を起点に設計
  12. 12. アダプティブデザイン と レスポンシブ/アダプティブwebデザイン
  13. 13. アダプティブ Adaptive 【形容詞】適応する,適応できる,適応性のある 適応性 状況や環境などに合うように自分を変えていく性質・能力
  14. 14. 状況変化への適応 ユーザーが利用する状況に対して異なる手段・手法を持つ“アダプティブデザイン” アダプティブデザイン ユーザーの置かれている状況、環境、コンテキストに合わせて コンテンツ・表示を切り替える
  15. 15. Webページをモバイル端末など複数の機器や画面サイズ(ブレークポイント)に応 じて表示内容が最適な状態にレイアウトの切り替えを「適応」する。 手法:その1 アダプティブwebデザイン レスポンシブwebデザイン
  16. 16. アダプティブwebデザイン SERVER PC用HTML SP用HTML PC用の HTMLを表示 SP用の HTMLを表示 従来型の考え方で、特定の画面サイズのみに最適化されたデザイン、HTMLペー ジをそれぞれ用意しユーザー環境によって表示するレイアウトを切り替える。
  17. 17. レスポンシブwebデザイン CSS 1200px用の 装飾・レイアウト 480px用の 装飾・レイアウト 768px用の 装飾・レイアウト HTML ※ワンソース 画面サイズの応じてフレキシブルにレイアウト、デザインを最適化し、さまざま な端末に単一のHTMLで対応できる。 ワンソースマルチユース
  18. 18. レスポンシブwebデザイン ●メンテナンス性がよい、運用コストの削減 ●URLの統一、SEO対策の優位性 ●様々な画面サイズに最適化される ●開発コストの削減 メリット ●サイトの表示速度が遅くなる ●デザインやレイアウトの柔軟性の低下 ●構築が複雑、ワークフローを間違えると開発コストの増加 ●PCサイト、スマートフォンサイトと別々の構造設計はできない デメリット
  19. 19. アダプティブwebデザイン ●PCサイト、スマートフォンサイト別々の設計が可能 ●デザインやレイアウトの柔軟性が高い ●サイトの表示速度を最適化しやすい メリット ●メンテナンス性が下がる、運用コストの増加 ●URLが統一されない デメリット
  20. 20. さまざまなデバイスを横断しての デザイン・機能の一貫性 レスポンシブwebデザイン ブランド普及の一貫性を担保
  21. 21. ユーザー環境に最適化された デザイン・機能の提供 アダプティブwebデザイン ユーザーコンテキストを重視した コンテンツ・機能を担保
  22. 22. New York Times http://www.nytimes.com アダプティブwebデザイン
  23. 23. Lufthansa http://www.lufthansa.com/ アダプティブwebデザイン
  24. 24. レスポンシブwebデザイン TRANSPORT FOR LONDON https://www.tfl.gov.uk/ Image from TFL
  25. 25. レスポンシブwebデザイン Time.com http://www.time.com/time/
  26. 26. 手法:その2 ユーザーのおかれている状況、環境に合わせて表示内容を切り替える。 例えば、年齢、性別、職業などのユーザー属性や、普段の移動は車か?、電車か?、 バスにのるのか?どこに行くのか?どこにいるのか?などユーザーの行動分析を行い、 様々なセンサーが環境を感知して必要としている情報を表示する。 性別?年齢?職業? etc… 電車?車?バス? 移動中?etc… 自宅?店舗?ショッピングモール? どこにいる?etc…
  27. 27. 店舗以外の場所 事例 GAP Inc. スマートフォンアプリ 店舗 ユーザーが家や店舗以外の場所ではオンラインショップに接続。 実際に店舗にいるときはショップアシスタントにつながります。ユーザーの位置情報 に応じて自動で異なるコンテンツ・機能を提供。
  28. 28. 事例 Google Now スマートフォンアプリ キーワード入力や検索などのトリガーになる操作を行うことなく、ユーザーが必要と している情報を表示。
  29. 29. まとめ
  30. 30. ●上位概念としてのアダプティブデザイン ●webデザインとしての従来型のアダプティブwebデザイン ●レスポンシブwebデザインはアダプティブwebデザインからの拡張 ●広義の意味でアダプティブデザインはweb以外の領域も含まれる extension まとめ
  31. 31. Canon Inc. http://canon.jp/ 国内事例
  32. 32. モバイルファースト視点からの スマホ対応Tips
  33. 33. 1. ターゲット端末は事前に選定。すべての端末に対応するのは不可能。 2. レスポンシブwebデザインは万能ではない。 1. 要素を詰め込み過ぎない。画面サイズが限られているので、極力シンプルなUI、 インターフェイスを意識する。 2. ユーザーの利用状況・環境を意識したデザインを心がける。 1. モバイルファーストのコンセプトを関係者全員が共有している。 モバイルファースト視点からのスマホ対応Tips
  34. 34. 7. Androidの日本語フォントで太字が表現できない。 8. iPhoneでは明朝体に対する扱いがiOSバージョンで異なる。 9. リンクにCSSでシャドウを装飾するとタップしても反応しなくなる機種がある。 10.スマートフォンサイトでオーバレイは多用しない方が良い。 モバイルファースト視点からのスマホ対応Tips 続いて制作実装面から注意点を何点か…
  35. 35. ご清聴ありがとうございました

×