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

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)
スマホトレンドおさらい
>

>

Deference - 服従・尊重
UIは、コンテンツ理解や操作に役立ちますが、UIとコンテンツが競合することはない。（コンテンツ尊重）
Clarity – 明快・はっきりしてる
テキストは全サイズで読みやすく。アイコンは正確かつ明快。
装飾は目立たつ適切に。機能に焦点をあてたデザイン設計。
Depth – 層化・奥行き
ヴィジュアルレイヤー（層化UI）とリアルな動作がユーザーの
喜びと理解を高める。
>

Enchant me - 魅了する
美しいことはあなたが考える以上に重要なことです。そのため、Androidアプリは様々な面でスマートさ、美しさを備えています。画面の切替はすばやくはっきりしており、レイアウト・タイポグラフィははっきりとした意味を持ち、アイコンはまさしく芸術品のようです。簡単に、パワフルになれる魔法のエクスペリエンスを作り出すためには、洗練された工具がそうであるように、アプリは、美しさ、シンプルさ、機能性を兼ね備えるべきです。
Simplify my life - 生活をシンプルにする
Androidアプリは理解しやすく、生活を楽にする手伝いをします。あなたのアプリを初めて使うとき、直感的に重要な機能を理解してもらうデザインが必要です。さらに、デザインは初めてアプリを使う時だけではなく、その後のアプリ使用時にも重要な働きをします。Androidアプリはファイル管理や同期などの日常的な雑務をなくします。単純なタスクは複雑な手順を必要とせず、複雑なタスクは人間の能力や思考に合わせてデザインを調節する必要があります。さまざまな年齢や文化の人々がアプリによってタスクを管理できていると感じることが重要であり、多くの選択肢や装飾によって操作の混乱を招くことは避けるべきです。
Make me amazing - 驚かせる
簡単に使えるアプリを作るだけでは十分ではありません。Androidアプリは、新しいことに挑戦する力や独創的な方法でアプリを使う力をユーザーに与えます。Androidは複数のアプリを結合し、マルチタスク、通知、アプリ連携をすることで、新しいワークフローを作り出します。同時に明快さと優雅さと素晴らしい技術を体感させ、アプリとユーザの一体感を感じさせなければなりません。
Android 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おさらい
>

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

More Related Content

Viewers also liked (12)

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