[&] sp ui 2014
#spui2014
【iOS8発表】スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
http://eventdots.jp/event/172659
● GMOインターネット株式会社 稲守氏
● WebSig24/7 あくやん氏
● ヤフー株式会社 宇野氏
● グリー株式会社 村越氏
● 株式会社ミクシィ 馬場氏
● トークセッション
モデレーター：稲守氏
スピーカー：宇野氏、馬場氏、村越氏
■スマートフォンUIおさらい
GMOインターネット株式会社 稲守氏 @inamoly
iOSが8になりました。いろんなことがありましたね.....
今日のアジェンダ
趣旨と目的ときっかけ
スマートフォンのUIが踊り場にきたので振り返ろう
端末が変わりつつある（大画面化など）
多画面化（時計／眼鏡などスマホ以外の画面）
UIガイドラインが転換ステージに
設計と実装のギャップを埋める手法を考える
今後モバイル向けサービス事業者はどう対応するか考える
スマホトレンドおさらい
2007年、iPhone 発表。日本では 2008年 iPhone 3G
2008年 Android 発売。日本では 09年秋 HT-03 が初
2008年 Google Chrome リリース
iPhone7, 5s
Android 4.4 Kitkat, Nexus5
Tizen 延期
Android Wear
Material Design, Android L
iOS8, iPhone6, iPHone6plus
firefox OS を年内投入
Android 5.0, Lollipop, Nexsus 6/9
●iOS Human Interface Guidelines
新しくなってから日本語されていなくって....
Deference 服従／尊重
Clarity 明解／はっきりしている
Depth 層化／奥行き
●Android Design
●MSDN Design
モダンデザイン
エッジ
ライブタイル
●スマホ各社のガイドライン
UIをサービスを作るための一機能にすぎない
標識のように「シンプル」でわかりやすい
適切な距離
まとめ
PC、スマホ、ガラケーの PV比率
ガラケーはまだまだ元気
ガイドラインと実装でギャップがある。
境界線はシリコンバレー感を出したいなら重要
■ WebSig24/7 あくやん氏 @akuyan
めんどくさがりなデザイナーのタッチデバイスUI攻略
画面サイズが多様化してめんどうなところから、
UIをUXをきちんとした話しは、この後にご期待ください。
いちばんゆるいセッションです。
こんにちは、あくやんです。
初めましての人の方がおおいかも。
Webやアプリのデザインをちょこまかとしています。
WebSIG Web制作の小難しいことを話し合うコミュニティ。
今年で 10年目。
世の中のめんどくさがり同士へささげます。
３ポイント
画面内のスクリーン領域とコントロール部分を意識する
グリッドとマージンを統一させる
UIガイドラインはひとおり読んだら忘れる
●スクリーン領域コントロール部分を意識する
スクリーン領域：情報を表示する部分
コントロール部分：情報を操作する部分
区分けして定めています。
なぜ区分けするのか？
画面サイズ大きくなっちゃって、片手操作できなくなちゃった。
制作現場の中でも話しがでてきているのでしょう。
そもそも指が届かないというのは 6plus で顕著になっただけで、
そもそも手が小さい人は iPhone5 から届かなくなっています。
Android も大きな端末があります。
多様化した画面に考えた時。
画面サイズではなく、それぞれの意識付けのっ整理ができていないということ。
意識的に使うか？／無意識にうったえかけるか？
スクリーン領域におくのは、
動作の流れで何気なく使わせたいもの
コントロール部分
これ！って意識させる明示的なもの
無意識に使うもの
さっき見たページに戻りたい
「戻る」ボタンを押す
さっき見たページが表示される
目的は前のページを表意jすること
意識的に使うもの
写真を投稿したい
「投稿」ボタンを押す
目的は写真を投稿すること
自分のレイアウトしたいものがどういう立ち位置のパーツなのか
振り分けて考えるようにしています。
片手で操作できるということにとらわれすぎない。
ユーザーによって、片手の意義が変わるから。
対象ユーザーによって使い方が異なることを念頭に.....
●グリッドとマージンを統一させる
グリッド事情
マテリアルデザインという概念が導入された
多画面に対応していく基本的な考え方。
今後よりコンテンツのグリッド化が進んでいく。
iOS - 8px
Android - 4px
この二つの数字だけ頭にいれておく！
●マージンの絶対領域キーライン
キーラインとは段落のことです。
印刷物を作ったことがある人にはなじみ深い考えかもしれません。
グリッドに通じる部分えもあります。
画面サイズが変わっても、
グリッドとマージンを統一されていれば、
それなりになんでもかっこいく見える！
世界観も統一させる
●UIガイドラインをひととおり読んだら忘れる
神よりさずけられしガイドライン
地上の人間の叫び
フラットにしすぎると気付いてもらえない！
英語だとかっこいいけど、日本語だと....
「誰にいつなんどきにつかわれるのか」で考えて行く
ガイドラインをかんがえのベースに、ユーザーの動向を最優先に
ガイドラインにとらわれすぎない。
とはいってもどうしたらいいのか
考えるのがめんどういなってあなたへ。
仕事以外で端末を良く触っている
ガイドラインをよんだ？
Web制作がメイン？ A, B
デバイスのテンプレートを触ってみた CD
これまでに端末UIを作ったことがある。
作りたいアプリと同一アプリが５つ入っている EF
既存アプリのリニューアル GH
A. まずは生活で端末にもっと触ってみよう！話しはそれから
B. ガイドラインを読み倒してみよう。Webとは別物です。
C. UIテンプレートがたくさんあるので、落としてみよう。
D. モックをつくりまくって、実機で確認を繰り返そう
E. 類似アプリを使い倒そう。可能であれば、どちらのOSでも。
F. 類似アプリで共通して採用しているパーツを見つけてみよう
G. ペルソナを明確にしてユーザーテストを繰り返そう
H. あなたがサービスのガイドラインです。数値を元に反映を。
■ ヤフー株式会社 宇野氏
Apple 信者だったボクは気づくと
iPhone嫌いになっていたんだが
毎回 Apple の新製品を楽しみにしていたのですが、
窓から捨てたいと思った端末がでてきました。
iPhone 6 plus 買いました。
ちょっと後悔しています。
僕が iPhone を嫌いになった 5つの理由
その1. 曲がる
その2. 刻印が傾いています
その3. デカい もちろん上のボタンは届かない。下半分表示でも届かない。
メッセージがその場から返信できるようになりましたが、対応していません。
戻るボタンが超欲しい。エッジスワイプが出来るようになりました。そもそも届かないです。
アップルのアプリは、変わらない。今回はデカくしただけ？
Android と比べると？
端末自体がフリーダム、自由の中で発展してきたOSなので、いろんな端末に慣れている。
動作の起点を考える。何から始まる。どこから始まる？一番押されるのは何？
Evernote の最初のアクション、一番下のボタンから展開する。
大事な動作は隠してはいけない。何を一番して欲しいのか。おのずと答えがでてくる。
届かないボタンにメインアクションを割当ない
起点になるボタンをハンバーガーメニューに隠さない
その4. アプリが対応していない。
まだまだ少ないです。
やっと Facebook, Gmail が対応。Yahoo も対応していないとか。
実際対応しようとすると、面倒くさい。
6/6plus 対応がひとくくりにされてしまうと、結構な工数。
1. iOS8対応 ウィジェットなどの追加機能
2. @3x 対応（高解像度素材用意）
dot by dot で表示できない.... 5K iMac が登場
3. 6/6+ 対応（レイアウト）
もろもろ全部対応して、6/6plus 対応。
各社段階的にやっているのが現状？
解像度自体は 9月だったので、iOS8 対応は始められましたが、
解像度は 9月。
結果ラクラクフォン状態
一気にかっこわるく。文字も大きく....
6plus ユーザー画面が大きくなり、情報量が多くなることを求めている。
キーボードがそのまま拡大している。
フリックが届かない？
Webサイトは必然的に対応できている。
結果として、iPhone6 が出ても、Android 対応ができている限りは
大きな問題は起きませんでした。
高解像度対応。
非常に種類が増えました。
ディスプレイの拡大モードがあります。
6plus, 6 は最初のチュートリアルの段階で選択が表示されます。
こんなにたくさんバリエーションができてしまいました。
ものすごいやっかいなお話しになってきます。
非常にめんどくさいのは @3x です。
何ピクセルになる？計算しても実質意味がない。
結局ダウンスケールになるので、1pixel の線が縮小されたり潰れたりします。
今後、@3x が普及してくので、ほうっておくわけにはいきません。
素材の制作がより複雑に、
ベクターデータで保持している人が増えてきました。
ベクターで作れば安全というわけでもない
ツールバーを除いた画面比率も変更になっている
PDF を利用する場合でも、結局@1x, @3x の作り分けは必要なので注意
Xcode の機能、アイコンフォント WebFont を使うとか。
Xcode が勝手に作ってくれる。
ベクターデータは @1x で作る。
@3x で作り込んでも細かすぎる。ダウンスケールされてしまう。
フラットデザインを使っているサイトが多いので、
キャラデザインを @2x でしか持っていない場合はどうするのでしょう？
これだけめんどくさいと、各社アップデートが遅れます。
アプリ放置の例がでてくると思うので、たちが悪いです。
人の手では限界もあるのでツールを活用。
Sketch スライシー PDF,
人の手は省いておまかせする。
その5. 持ちにくい
でかいだけじゃない。さらさらしている。
ラウンド処理。めちゃくしゃ滑る
対象となるユーザーを知る
平均値はあくまで平均値
対象ユーザーが一般的なユーザーとは限らない（大概違う）
Google のユーザー層がどんな持ち方をしているのか参考にするのはいいけど、
Yahoo のユーザー層はまったく違う。
一日 150回見ると言われるがグッと減った
代わりに一回あたりの利用時間は伸びた。
あらゆるものとの連携がさらに強まってくるのは間違い無い
まだ模範解答すらも出ていない
両手持ちのユーザー？
既存の概念にしばられない発想をする必要がある。
ATOK 右端に寄せるとかができる。
こういう発想が生まれないと。
想定ユーザーを定める。
男性？女性？いつ使う？
電車の中？歩きながら、会社、持ち方も変わるのでは？
結局どうなの？
デバイスとOS／アプリの親和性はひくい
今回の話しを聞いた人は iPhone6 plus を買って欲しい
日常生活の中で使わないとこの感覚はわからない
店頭で触ったり検証機で見るのはユーザー目線じゃない
本日のまとめ
6/6plus の大きさはスマホの使い方と利用シーンを大きく変えた
UIもそれに合わせて変わることが望まれるがまだ追いついていないのが現状。今はまだ過渡期
高解像度であることよりも、大きさによる問題が深刻
サービスによってユーザー層は大きく異なるので、
どんなユーザーがどれだけ使っているかを見極めて今後の対応を進めましょう。
ユーザーファーストのサービスを作るためには、
まず自分が最高のユーザーになりましょう。
■ グリー株式会社 村越氏
今ソーシャルゲーム、モバイルゲームの UXデザインチームのマネージャーをやっています。
Android Wear で Ok, Google と言った時に、反応してくれなかったという絵柄です。
本日の話しは個人の見解であり、所属企業の見解ではありません。
あまり、こういう系の話しをしたことがない。
今回の iPhone, iOS8 の発表
なんかワクワクしない
あまりにもワクワクしなかったので iPhone6 の犠牲者になっている。
キャッチコピーの変遷に見るApple
One Handed mode を考える
これからのデザインで大切なこと
iPod - 1,000 songs in your pockets.
デバイスのことではなく、体験、価値にスポットがあたっていて。
iPhone - Apple reinvent the Phone.
電話を再発明する。
Bigger than Bigger でかい。とにかくでかいよ。
大きさ、薄さ押し。
ファブレットの方が売れている。
タブレットが小型化している。
この予測はまだ変わっていくかもしれない。
スマホの大型化、タブレットの小型化。
プリント、映画、ラジオ、音楽、テレビ、音楽
モバイルができる機能はそんなに変わっていない。
モバイルショッパーの行動比較。ニールセンの調査
行動の隙間に両者が隙間を埋め合っている。
Nexus Player でゲームパッドで、ゲームができる。
モバイルからテレビへ。デバイスだけじゃなくサービスへのトランスファーも進んでいく。
もう白目をむくしかない。
One Handed Mode,
タップの領域、親指の領域が変わってきている。
デカいので、下がってくるとタップできるのは合理的？
デザインに関わっているものとしてこれでいいのか？
まだ答えがでているわけではないのですが、
素通りしないで考えた方がいい。
下がってくるじゃなくて、他にも何かないの？と思っています。
Galaxy も似たような機能があって、画面が縮小する。
片手モード ? 両手持ちが前提という想定？
暫定対応だと新字体。
両手が塞がっていて、片手しか使えない時は？
その時に、このモードだけで対応できる？
そこで画期的な「指のびーる」親指に装着すると、
スマホの奥までタッチできる。1400円ぐらいなんですが、
世界中で話題になっています。そんなに伸びていないのですが...
日本のもの作り力は凄いです。
持ち方
片手もち 49%
両手もち片手つかい 36%
両手つかい 15%
人の持ち方が変わるのか、
UI設計で解決するのか？
デカイものを無理に片手で持つ必要は無いが....
Flipboard もハンバーガーメニュー問題や、
もちかえなければいけなかったりする。
●これからのデザインでかんがえないといけないこと
変数と定数で考えた方が良い
人間の能力は変わらない。
変わらない人間が変わっていくものとどう対峙するのか？
市場、テクノロジー、UX, UI は変数。
机上でああだこうだよりも、
現場に出るのが大事な考え方。
モバイルフロンティアという本からとってきたんですが！！！！
グリーではユーザーインタビューに力を入れていて、
まのあたりにする、聞くということを通じて、
深層を聞き出す、操作の理由をききだして、
デザインにフィードバックし、
ディスカッションし、
実装するだけでは出せない価値。
人に聞く、現場にでる、観察する。
いろんなものが乗り入れている。
非常に大事。
もはや「自分を信じる」では通用しないのかも。
我々が自らにこうしているのだと
言い聞かせている指向や行動からではなく、
実際に行っている指向や行動から影響を受けるかたちで、
医療用機器、コンピュータ、乗り物、
コミュニケーションをデザインしていく必要がある。( joi ito )
Gree Creators' Meetup 10/29
■ 株式会社ミクシィ 馬場氏
次の 5年の UIを考える
ノハナというサービスで2年半ぐらいスマホアプリと格闘してきまして、
9月30日、今年の年賀状アプリをリリースしまして、
虚脱状態になってしまいまして、細かいアプリのいろいろなことを
話す状態ではなく、今回このようなテーマでやらせてもらいます。
UXデザイナー
10年ぐらい、Webの時代からやってきていて、
社内起業で、フォトブック作成サービス「ノハナ」現在は 22名のチームになっている。
去年 6月に子会社化して、転籍しています。
プロダクトの調査、企画、設計、評価、開発、制作ディレクションも。
特にノハナの立ち上げのときは４人だったので。
今はメンバーが増えたので、後輩にやってもらうという恵まれた環境です。
1. デバイスの方向性
2. 技術革新の方向性
3. Google と Apple の方向性
4. 次の 5年のUIのほうこうせい
5. デザイナーは何をするか？
2015年 スマホ／タブレット／ファブレット
モバイルシフトがさらに進む。
世界のインターネットデバイスは PCの約3倍。
2015年には、出荷台数でPCを逆転するだろうという予測。
日本の出荷台数も、
スマホはPCの４倍
タブレットも2015年にはPCとタブレットが逆転という予測
日本のスマホ普及
スマホ普及率 62.6%
タブレットの普及率 21.9%
PCの普及率 81.7%
デバイスの方向性
ファブレット5インチ以上、7インチ未満のスマーホ
2016年は、スマホ出荷台数の半分を占めるという予測
Android と iOS の 2強時代
Android が 84.7%
日本は iOS と Android と五分五分
ノハナの場合は iOS ユーザーが Android ユーザーの倍います。
iOS からサービスインをしたので。
審査期間があるので、早めに着手して、検証のために iOSでまず出してみているので。
こちら側の姿勢を反映して 2:1 になっているかもしれません。
2. 技術革新の方向性
2020年 IoT (Internet of Things)
IoT で接続されるデバイスは数百億規模にものぼり、
全世界で一人あたりのつながるデバイス数は単純でも5,6台あたりの計算になる
自動車は自動販売機、工場設置機器、医療機器などのデバイスが繋がり、
データを活用したビジネス展開になる。
モバイルの２強はどこに向かう？
生活領域のプラットフォーマー
自動車 住宅／家電 個人（ウェアラブル）
Android Auto, Android TV/NEST , Android Wear/Gooogle Glass
CarPlay, Apple TV, Apple Watch
以上の３つのシフトの結果、UIはどこに向かう？
PCで行っていたことを、モバイル（スマホ、タブレット、ファブレット）で行うようになる
タッチ、音声入力が中心
もともとPCが母艦みたいな役割から、スマホやタブレットが主流になる。
PCだとマウスとキーボードというのがあったが、スマホだとタッチ入力、音声入力が主流に
最近、マテリアルデザインが発表されて、その中でもモーションが大きく取り上げていて、
画面のトランジション、アニメーションが大きく取り上げられていて、
おそらく目で見て、文字が帰ってくるというのではなく、
それ意外の入出力に対して感覚的に素早く反応が帰ってくるものを指向している。
対IoT
IoT でつながった偏在する多種のデバイスとデータをやりとりするようになる。
IoT デバイスとの相互作用による自動入出力や反自動入出力
（パーソナライズなどのデータ処理の技術革新も）
医療とか工場とかいろいろなところでデータがとれるようになって、
流通する、パーソナライズのデータ革新もそれと一緒に始まるのでは？
対Google, Apple
標準仕様をつくる Google と Apple その動向をおいかけるエンジニアやデザイナー
よりデザイン性が重視されている生活領域にテクノロジーが進出
デザインとテクノロジーが高度に統合される
プラットフォームやデバイスを超えた統一された体験を可能にするためのルールとツールが必要
心地よさや美しさをテクノロジーの言葉で表現するようになってきたという印象
モーションのカーブ、美しいカーブ、美しく無いカーブ。
テクノロジーの言葉だと思っていて、そういうものを美しさや心地よさを
記述できるようになってくると、再現性がある。
デザイナーがすごく努力して一回いいものを作ったとしても、
デバイスが多様化すると、何回も作るのは辛いことなので、
テクノロジーの言葉で再現性のあるものを凄く感じています。
提供してくれるルールやツールはありますが、
それを利用してサービスを横断して作っていく、
プラットフォームを超えて、自分たちのルールやツールが必要。
自分たちがその事業を展開していく上で、どういう人の取り組み方、
テクノロジーとデザインをより良く統合していくのか？それも楽に。
対ウェアラブルデバイス
ウェアラブルでバイスの立ち上がり
制約がある中で、新しい操作方法が登場
そこも面白い分や。
制約がある中で新しい操作方法が登場。
そういった中で Google が少し先に行っている感。
Apple Watch で。
さまざまなデバイスで共通して使えるルール、美しさに
試行錯誤しているのではないか？
Apple Watch を楽しみにしています。
デザイナーは何をするか？
次の５年のために、あなたは何をしますか？
５年後はオリンピック特需があるので、人がいっぱい来て、
一大イベントがあって、東京は面白い環境じゃないかと思っています。
<< Home