勉強会レポート -スマホUI勉強会 iPhone6で変わるUI、変わらないUI-

イベント詳細

[【iOS8発表】スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-]
(http://eventdots.jp/event/172659)
株式会社ガイアックス フロントエンドエンジニア 間明田 旭 氏 病欠のため19時15分開始

GMO 稲守貴久 氏

次世代システム研究所

勉強会開催のきっかけ

端末がかわりつつある＝大画面、多画面化
UIガイドラインが転換

スマートフォンUIおさらい

iPhone発表は2007
Android発表は2008
Chromeリリース2008

などなど

iPhoneとAndroidの開発ガイドラインは似ている
シンプルでわかりやすく
パネル化

実はまだガラケーの需要もあるんだよ、忘れないでね

以上

WebSig24/7 ディレクター・デザイナー あくやん 氏

デザインやディレクション担当
WebSig24/7：WEBが好きな人たちが集まるコミュニティ

タッチデバイスUI攻略

1. スクリーン領域・コントロール領域を意識する

指が届かないのは昔から！
問題は画面サイズでなく、意識付けができていないこと。
→意識的に使うか（コントロール部分）、無意識的に使う（スクリーン部分）か決める。
意識的：写真投稿
無意識：前画面に戻る

パーツごとの意識付けができていれば画面サイズが関係ない

2. グリッドとマージンを一致させる

マテリアル・デザインについて（Andrid）
→グリッドで考える

基本単位
ios:8px
Android:4px

マージンの絶対領域のキーライン
キーラインとは段落のこと

スペース間を統一させることで全体の統一感をだす

3. UIガイドラインは読んだら忘れる

ガイドラインの考えをベースにユーザの動向を最優先

ヤフー株式会社 UIデザイナー 宇野 雄 氏

Apple信者だったのにiPhone嫌いになっていた・・・

iPhone6後悔してます。嫌いになった5つの理由。

1. 曲がる
2. 刻印が傾いてます
3. デカい
   ダブルタップでも届かない（怒）
4. 戻るボタン超欲しい
5. 持ちにくい（サラサラしてるし、バランス悪い）

Android

マテリアルデザインはどんなハードウェアに対応する。
そのために凄く自由なデバイス。
iOSは縛りがあるのが特徴だったのにiPhone6で自由化したためAndroidに抜かれた感。

マテリアルデザインは、動作の起点を考えてデザインしましょう！

アプリが対応していない

対応しようとするとめんどくさい：
高解像度素材用意（拡大機能が追加された）、iOS8対応、レイアウトをiPhone6、6+両方・・・
→未対応のiPhone6は、らくらくフォン状態
→アプリよりスマフォサイトが適合化した。

iPhone6の解決策を無理矢理考えてみた

1. 届かないボタンにメインアクションを割り当てない。
2. 素材の制作がより複雑にになったので注意する。
   →ツールバーを除いた画面比率が変更された
   →@1x、@3xの作りわけが必要なので要注意
   →ベクターで作れば安全というわけでない
3. 対象となるユーザのiPhone6の持ち方を知る。
   →平均値はあくまで平均値としてとらえる。対象ユーザが平均的ユーザとは限らない。
4. 利用シーンが変わったので意識する。
   →1回あたりの接続時間がのびた。それまでは1日150回など。

まだ模範回答すらでていない
既存の概念にしばられない発想をする必要がある
妄想ユーザを定める

iPhone6、6+ってどうなの？
iPhone6、6+を買ってユーザ目線になること。
そのうち人がスマフォに最適化する。

スマフォの使い方と利用シーンを大きく変えた。
UIもそれにあわせて変える必要がある。

ユーザファーストのサービスを作るためには、まず自分が最高のユーザになること！

グリー株式会社 村越 悟 氏

ゲーム開発チームに所属
iPhone6ワクワクしなかった。

キャッチコピーの変遷に見るアップル
最近のアップル・・・
Bigger than Biggar.
大きさ薄さ推し。

スマフォが巨大化、タブレットは縮小化。そのうち同化するかも。
注目は、Androidゲーム。モバイルからTVへ。
ダブルタップの機能はギャラクシーにもある＝このモードだけで大きさに対応は駄目では？

現状の持ち方比率
片手持ち：49%
片手添えて片方持ち：36%
両手持ち：15%

変わらない人間がどうやって変わっているものに対応するか？
現場に出て向き合う。
ユーザインタビューやユーザにより試験を実施する＠Gree
→机上の話では通用しない。

言い聞かせている思考や行動からでなく、実際に行っている思考や行動を大事にする。

10/29 Greeカンファレンスあるのでよろしくお願いします。

株式会社ミクシィ ノハナ UXデザイナー 馬場 沙織 氏

UXデザイナー
サービス「ノハナ」の立ち上げメンバー

次の5年のUIを考える

デバイスの方向性

• モバイルシフトがさらに進む。
• スマフォの出荷台数はPCの３倍。タブレットも2015年にはPCと逆転予想。（世界統計）
• スマフォは大画面化。
• AndroidとiOSの2強時代（世界的だとAndroidが84.7%シェア。日本国内だと五分五分？？→アップルの申請期間があったため？？）

技術革新の方向性

• 一人あたりのデバイスが5〜6台になる。

GoogleとAppleの方向性

• 生活領域のプラットフォーマー化（自動車、住宅、家電、ウェアラブル）

上記3つの結果UIはどうなるか

• PCで行っていたことを、モバイルで行うようになる（スマフォ、タブレット、ファブレット）
• タッチ、音声入力が中心
  →モーションを大事にする
• 対IoT
  →相互作用による入出力や半自動入出力ができるようになる。多種デバイスとのデータやりとり。
• 対GoogleとApple
  →標準仕様をつくる2社の動向を追いかけるエンジニアやデザイナー。
  デザインとテクノロジーが高度に統合される。
  プラットフォームやデバイスを超えた統一された体験を可能にするためのルールとツールが必要。
• 対ウェアラブルデバイス
  →制約がある中での新しい操作方法が登場

デザイナーは何をするのか？

• 東京オリンピック特需もあるので楽しみです。
• みなさんで討議しましょう。

トークセッション モデレーター：稲守氏 スピーカー：宇野氏、馬場氏、村越氏

どうする多画面対応

• ウェアラブルに対応しますか？
  →どうしましょうかね・・・。OSがあるならアプリをのせて試して見るのもありです。
• デザインはリキッド？タブレットとか。ファブレットとか。
  →やりたくないですね。５年前からタブレットと言われているのにシェアがのびてないです。

だれのためのUI

• ノハナは30代の対象(そのため着いて来れない人たちがいるのでガイドラインを一旦忘れた。サービス立ち上げ時は簡単なUIで良いが、慣れてくると慣れてきた人用のUIが必要)
• ゲームの場合、端末にUIをあわせてます。
  →今後はデバイスごとにUIを変える必要があるかも。
• ターゲット(ユーザ属性)を狙ってUIを変えます（ヤフーはいろいろと情報を取得してますので可能ですw）

スマフォ vs ガラケー

• ガラケー向けのサービスをやっている人は多い。
• スマフォ伸び悩み中だから逆にガラケー儲かるのでは？
• サービスはスマフォにシフト仕切れない（ユーザの年齢的な問題など）
• やりたくないけどやらないと対応しないといけない状況（iPhone6対応よりユーザ数多いです＠ヤフー）

致命的エラー

• 出始めの写真がアップできない
• Unityでデプロイできない