狠狠撸

狠狠撸Share a Scribd company logo

スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-

?
?
Tak Inamori
Tak Inamori

event page http://eventdots.jp/event/172659

1 of 21
2014.10.20(mon) GMOインターネット株式会社 稲守 貴久 スマートフォンUIおさらい >
自己紹介 稲守 貴久（いなもり たかひさ） GMOインターネット株式会社 次世代システム研究室 シニアクリエイター 在京テレビ局を経て、2006年 GMOインターネット入社。 ヤプログ！、GMOクリック証券を経て現職。CTO直下で各種プロダクトのUI/UX設 計、改善が主な業務。スマートフォン向けゲームサービス「Gゲー」の他、各種メ ディアコンテンツ、ECサービスのUI/UX改善。KPIツール設計、開発を行っている。 Twitter：@inamoly Blog：http://inamoly.com >
今日のアジェンダ 趣旨と目的 各社のガイドラインおさらい まとめ >
?スマートフォンのUIが踊り場にきたので振り返ろう - 端末が変わりつつある（大画面化など） - 多画面化（時計/眼鏡などスマホ以外の画面） - UIガイドラインが転換ステージへ ?設計と実装のギャップを埋める手法を考える ?今後モバイル向けサービス事業者はどう対応するか考える 趣旨と目的 >
各社のガイドラインおさらい スマホトレンドおさらい iOS Human Interface Guidelines Android Design >
2007年 iPhone発表 翌年、3Gが日本含め22地域で発売
2008年 Android発売 日本での販売は09年秋のHT-03が初
2008年 Google Chrome リリース
?iOS7, iPhone5s 発表 (2013.09) ?Android 4.4(KitKat), Nexus5 発表 (2013.10) ?ドコモが Tizen搭載端末の発売延期を発表 (2014.01) ?Android Wear 発表 (2014.03) ?Material Design, Android L 発表 (2014.06) ?iOS8, iPhone6, iPhone6 plus 発表 (2014.09) ?Mozilla が firefox OS を年内に国内投入を発表 (2014.10) ?Android 5.0, Lollipop, Nexus6/9 発表 (2014.10) スマホトレンドおさらい >
iOS Human Interface Guidelines >
Deference - 服従?尊重 UIは、コンテンツ理解や操作に役立ちますが、UIとコンテンツが 競合することはない。（コンテンツ尊重） Clarity – 明快?はっきりしてる テキストは全サイズで読みやすく。アイコンは正確かつ明快。 装飾は目立たつ適切に。機能に焦点をあてたデザイン設計。 Depth – 層化?奥行き ヴィジュアルレイヤー（層化UI）とリアルな動作がユーザーの 喜びと理解を高める。 iOS Human Interface Guidelines >
Android Design >
Enchant me - 魅了する 美しいことはあなたが考える以上に重要なことです。そのため、Androidアプリは様々な面でスマートさ、美しさを 備えています。画面の切替はすばやくはっきりしており、レイアウト?タイポグラフィははっきりとした意味を持ち、 アイコンはまさしく芸術品のようです。簡単に、パワフルになれる魔法のエクスペリエンスを作り出すためには、洗 練された工具がそうであるように、アプリは、美しさ、シンプルさ、機能性を兼ね備えるべきです。 Simplify my life - 生活をシンプルにする Androidアプリは理解しやすく、生活を楽にする手伝いをします。あなたのアプリを初めて使うとき、直感的に重要 な機能を理解してもらうデザインが必要です。さらに、デザインは初めてアプリを使う時だけではなく、その後のア プリ使用時にも重要な働きをします。Androidアプリはファイル管理や同期などの日常的な雑務をなくします。単純 なタスクは複雑な手順を必要とせず、複雑なタスクは人間の能力や思考に合わせてデザインを調節する必要がありま す。さまざまな年齢や文化の人々がアプリによってタスクを管理できていると感じることが重要であり、多くの選択 肢や装飾によって操作の混乱を招くことは避けるべきです。 Make me amazing - 驚かせる 簡単に使えるアプリを作るだけでは十分ではありません。Androidアプリは、新しいことに挑戦する力や独創的な方 法でアプリを使う力をユーザーに与えます。Androidは複数のアプリを結合し、マルチタスク、通知、アプリ連携を することで、新しいワークフローを作り出します。同時に明快さと優雅さと素晴らしい技術を体感させ、アプリと ユーザの一体感を感じさせなければなりません。 Android Design >
MSDN Design >
モダン デザイン Windowsは「真のデジタル化」原則を活用しながらモダン デザインをリー ドしています。そして、スイス スタイルと、地下鉄の案内標識などからイン スピレーションを得ています。 エッジ (端) Windows には、デザインツールの 1 つとしてエッジがあります。エッジを 効果的に使ってアプリのシナリオにフォーカスし、コンテンツが隠れないよ うにしましょう。 ライブ タイル ライブ タイルは、スタート画面のタイルに直接送られる通知を通じてアプリ の使用を促すユニークなツールです。 MSDN Design >
?UIはサービスを作る為の一機能に過ぎない ?標識のように[シンプル]で分かりやすい - 適切な距離を - パネル / タイル - エッジ等による連続性 スマホ各社のガイドライン >
まとめ >
PC、スマホ、ガラケーのPV比率を 「ざっくり」ご紹介します。 iPhoneとAndroidの数字 >
iPhoneとAndroidの数字 > 非公開部分
まとめ ガイドラインと実装でギャップがある [境界線]はシリコンバレー感を出したいなら重要 [日本国内]ではiPhoneとAndroidの2強は続く >
Thank you so much all for coming today. Internet for everyone!!! ご静聴ありがとうございました スマートフォンUIおさらい >

More Related Content

スマートフォンUIおさらい スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-

  • 1. 2014.10.20(mon) GMOインターネット株式会社 稲守 貴久 スマートフォンUIおさらい >
  • 2. 自己紹介 稲守 貴久（いなもり たかひさ） GMOインターネット株式会社 次世代システム研究室 シニアクリエイター 在京テレビ局を経て、2006年 GMOインターネット入社。 ヤプログ！、GMOクリック証券を経て現職。CTO直下で各種プロダクトのUI/UX設 計、改善が主な業務。スマートフォン向けゲームサービス「Gゲー」の他、各種メ ディアコンテンツ、ECサービスのUI/UX改善。KPIツール設計、開発を行っている。 Twitter：@inamoly Blog：http://inamoly.com >
  • 4. ?スマートフォンのUIが踊り場にきたので振り返ろう - 端末が変わりつつある（大画面化など） - 多画面化（時計/眼鏡などスマホ以外の画面） - UIガイドラインが転換ステージへ ?設計と実装のギャップを埋める手法を考える ?今後モバイル向けサービス事業者はどう対応するか考える 趣旨と目的 >
  • 8. 2008年 Google Chrome リリース
  • 9. ?iOS7, iPhone5s 発表 (2013.09) ?Android 4.4(KitKat), Nexus5 発表 (2013.10) ?ドコモが Tizen搭載端末の発売延期を発表 (2014.01) ?Android Wear 発表 (2014.03) ?Material Design, Android L 発表 (2014.06) ?iOS8, iPhone6, iPhone6 plus 発表 (2014.09) ?Mozilla が firefox OS を年内に国内投入を発表 (2014.10) ?Android 5.0, Lollipop, Nexus6/9 発表 (2014.10) スマホトレンドおさらい >
  • 10. iOS Human Interface Guidelines >
  • 11. Deference - 服従?尊重 UIは、コンテンツ理解や操作に役立ちますが、UIとコンテンツが 競合することはない。（コンテンツ尊重） Clarity – 明快?はっきりしてる テキストは全サイズで読みやすく。アイコンは正確かつ明快。 装飾は目立たつ適切に。機能に焦点をあてたデザイン設計。 Depth – 層化?奥行き ヴィジュアルレイヤー（層化UI）とリアルな動作がユーザーの 喜びと理解を高める。 iOS Human Interface Guidelines >
  • 13. Enchant me - 魅了する 美しいことはあなたが考える以上に重要なことです。そのため、Androidアプリは様々な面でスマートさ、美しさを 備えています。画面の切替はすばやくはっきりしており、レイアウト?タイポグラフィははっきりとした意味を持ち、 アイコンはまさしく芸術品のようです。簡単に、パワフルになれる魔法のエクスペリエンスを作り出すためには、洗 練された工具がそうであるように、アプリは、美しさ、シンプルさ、機能性を兼ね備えるべきです。 Simplify my life - 生活をシンプルにする Androidアプリは理解しやすく、生活を楽にする手伝いをします。あなたのアプリを初めて使うとき、直感的に重要 な機能を理解してもらうデザインが必要です。さらに、デザインは初めてアプリを使う時だけではなく、その後のア プリ使用時にも重要な働きをします。Androidアプリはファイル管理や同期などの日常的な雑務をなくします。単純 なタスクは複雑な手順を必要とせず、複雑なタスクは人間の能力や思考に合わせてデザインを調節する必要がありま す。さまざまな年齢や文化の人々がアプリによってタスクを管理できていると感じることが重要であり、多くの選択 肢や装飾によって操作の混乱を招くことは避けるべきです。 Make me amazing - 驚かせる 簡単に使えるアプリを作るだけでは十分ではありません。Androidアプリは、新しいことに挑戦する力や独創的な方 法でアプリを使う力をユーザーに与えます。Androidは複数のアプリを結合し、マルチタスク、通知、アプリ連携を することで、新しいワークフローを作り出します。同時に明快さと優雅さと素晴らしい技術を体感させ、アプリと ユーザの一体感を感じさせなければなりません。 Android Design >
  • 15. モダン デザイン Windowsは「真のデジタル化」原則を活用しながらモダン デザインをリー ドしています。そして、スイス スタイルと、地下鉄の案内標識などからイン スピレーションを得ています。 エッジ (端) Windows には、デザインツールの 1 つとしてエッジがあります。エッジを 効果的に使ってアプリのシナリオにフォーカスし、コンテンツが隠れないよ うにしましょう。 ライブ タイル ライブ タイルは、スタート画面のタイルに直接送られる通知を通じてアプリ の使用を促すユニークなツールです。 MSDN Design >
  • 16. ?UIはサービスを作る為の一機能に過ぎない ?標識のように[シンプル]で分かりやすい - 適切な距離を - パネル / タイル - エッジ等による連続性 スマホ各社のガイドライン >
  • 21. Thank you so much all for coming today. Internet for everyone!!! ご静聴ありがとうございました スマートフォンUIおさらい >