10月20日（月） 、GMO Yoursで「スマホUI勉強会 」が開催されました。
iPhone 6とiOS 8のリリースにあたり、新しいガイドラインが出てきました。今回のテーマとして、このガイドラインを元に「UIがどう変わる必要があるのか？」「 どこは変えなくて良いのか？」ということを取り上げました。また、「 踊り場に出たスマートフォンのUI設計」について、IT/Web各社の設計者、デザイナー、実装者に関わる5名の方によるパネルディスカッションを行いました。
本稿ではその模様についてレポートします。
スマートフォンUIおさらい
最初のセッションは、勉強会の発起人であるGMOインターネットの稲守貴久氏です。まずは会の趣旨と目的、今日のアジェンダについて説明しました。その後、スマートフォンのUIについておさらいしました。
スマートフォンUI、振り返り
スマートフォンのUIが踊り場にきたので振り返ってみると、次のことが言えます。
端末が変わりつつある（大画面化など）
多画面化（時計／眼鏡など、スマートフォン以外の画面）
UIガイドラインが転換ステージに
そして、各社ガイドラインについておさらいしました。
iOS Human Interface Guidelines
Android Design
MSDN Design（Microsoft）
特に、iOS Human Interface Guidelinesでは「Defence - 服従・尊重」を取り上げ、コンテンツ尊重について紹介しました。
そしてこれらのガイドラインから、次のことが言えます。
コンテンツを犠牲にするUIは存在しない
UIはUXを実現するためのツール（機能）である
標識のようにシンプルで分かりやすいものが良い
まとめとして、稲守氏はガイドラインと実装でギャップがあることを指摘し、「 シリコンバレー感を出したいなら境界線が重要なこと」「 日本国内ではiPhoneとAndroidの2強は続くこと」を言及しました。
めんどくさがりなデザイナーへのタッチデバイスUI攻略法
WebSig24/7のあくやん氏は、デザイナーためのタッチデバイスUIの考え方について発表しました。なお、WebSig24/7は設立10年目ということで、10周年記念イベント が開催される予定だそうです。
タッチデバイスUIにおける3つのポイントとして、「 画面内のスクリーン領域とコントロール部分を意識する」「 グリッドとマージンを統一させる」「 UIガイドラインは一度見たら忘れる」ことを挙げました。そして、それぞれ詳しく取り上げました。
画面内のスクリーン領域とコントロール部分を意識する
画面内のスクリーン領域とコントロール部分について、次のように定義しました。
スクリーン領域
情報を表示する場所であり、ユーザーの無意識に訴えかけるパーツを配置する部分。動作の流れで何気なく使わせたいもの。
コントロール部分
情報を操作する部分であり、ユーザーに無意識に使ってもらいたいパーツ（入力エリアなど）を配置する部分。「 これ！」だと、意識させる明治的なもの。
なぜこのように画面領域を区分けするのかについては、それぞれの意識付け（意識的に使う、無意識に訴えかける）の整理ができていないためと解説しました。なお、iPhone6 plusが発表されてさらに画面が大きくなったことにより、片手操作で指が届かない等の問題も懸念されています。しかし、そもそも手が小さい人はiPhone5の時点で既に届かなくなっており、画面サイズをここで問題しているわけではないと補足していました。
ボタンを例にして、次のように意識付けすることを紹介しました。
無意識に使わせたいもの
意識的に使うもの
（例）前のページに戻りたい「 戻る」ボタンを押す
（例）写真を投稿したい「 投稿」ボタンを押す
グリッドとマージンを統一させる
グリッドの最新事情として、多画面へ対応するための「マテリアルデザイン」の概念が導入されることで、今後コンテンツのグリッド化が進んでいくと言及し、基本単位となる次の2つの数字を頭に入れておくと良いとアドバイスしました。
基本単位
続いて、マージンの絶対領域キーラインを説明しました。キーラインとは段落のことで、印刷物を作ったことがある人にはなじみ深い考えかもしれません（グリッドに通じる部分もあるとのこと）。コンテンツを切り替えても画面サイズが変わっても、スペース間さえ統一されていれば、それなりにかっこよく見えます。また、世界観さえも統一できると紹介しました。
UIガイドラインは一度見たら忘れる
あくまでガイドラインはUIにおける考え方の基本で、そして最低限のアクセシビリティです。これらを意識しつつも、自分たちが作るものが「誰に、いつ、どんなときに使われるのか」で考えていくこと。また、ガイドラインを考えのベースにし、ユーザーの動向に対して最優先でUIを考えていくことが重要であると説明しました。
Apple信者だったボクはきづくとiPhone嫌いになっていたんだが
Yahoo! Japanの宇野雄氏による発表です。毎回Appleの新製品を楽しみにしていたという宇野氏ですが、iPhone 6 plusを購入したことを強く後悔したそうです。その後悔した「5つの理由」と、自分なりにiPhone 6 plusで対応しようと思っていることを紹介しました。
iPhone 6/6 Plusに思うこと
iPhone 6 Plusを買って後悔した理由として、次の5つを挙げました。
曲がる
刻印が傾いている問題（製品の品質が危うい）
とにかくデカい（ダブルタップでも指が届かない）
アプリが対応していない
持ちにくい（でかいだけじゃない。さらさらしているし、バランスが悪い）
iOSと比較してAndroidの場合は「端末自体がフリーダムであり、自由の中で発展し振り回されながら進化したOSなので、いろんな端末に慣れている」「多種多様なメーカーが参画し、画面に対応してきたので比較的スマートに対応している」ということを挙げました。
iPhone6のUIを考える上で、次のポイントに言及しました。
届かないボタンにメインアクションを割り当てない。
対象となるユーザーのiPhone6の持ち方や動作の起点を知り、なにから始まるのか？一番押されるのは何か？を考える。
大事な動作は隠さずに、何を一番して欲しいのかを考えていくと、おのずと答えがでてくる
また、iPhone 6/ 6 Plusにまだまだ対応できているアプリは少ないと言います。FacebookやGmailが対応してきているが、国内ではLINE、Yahooも対応できていません。そして実際に対応しようとすると、とても面倒くさい上に結構な工数になってしまいます。そのため、各社段階的に対応しているのが現状だと思うと指摘しました。
面倒な理由としては、次のことを挙げていました。
iOS 8対応（ウィジェットなどの追加機能）
@3x対応（高解像度素材用意）
iPhone 6/6 Plusのレイアウト対応
高解像度対応は非常に種類が増えました。たくさんバリエーションができてしまい、ものすごくやっかいな話になっています。非常にめんどくさいのは「@3x」。まだ意識する必要はないですが、今後普及してくので放っておくわけにはいきません。
素材の制作がより複雑になっているとし、次の注意点を挙げました。
ベクターで作れば安全というわけでもない
ツールバーを除いた画面比率も変更している
PDFを利用する場合でも、結局@1x, @3xの作り分けは必要になる
人の手では限界があるのでツールを活用しよう
一方で、次の点をアドバイスとして挙げました。
Xcodeの機能、アイコンフォント、WebFontを使うとか
ベクターデータは@1xで作る
@2xで作るくらいが丁度いいかも（Yahoo! Japanはフラットデザインなので@2xで問題ない）
結局、iPhone6/6 plusについて次のように考えていると述べていました。
デバイスとOS/アプリの親和性はまだ低い
正直日常の中で使わないとこの感覚は分からない
ぜひ購入して、ユーザー目線で使ってほしい
皆さんの想像の3倍くらい使いづらい
店頭で触ったり検証機で見るのはユーザー目線ではない
対象ユーザーを知る
視点を変えて、対象となるユーザーを知ることも大事だと話します。統計データの平均値はあくまで平均値であり、対象ユーザーが平均的なユーザーとは限らない（大概違う）と示しました。
また、スマートフォンの利用シーンが変わっていると言います。これまでは一日150回程度スマートフォンを見ているという話もありましたが、それがぐっと減った実感があるそうです。その代りに1回あたりの利用時間は延びていると言及しました。今後はスマートウォッチやTVなど、あらゆるものとの連携がさらに強まってくるのは間違いないとも述べていました。
では、ユーザーを知るためにはどうすれば良いのかというと、まだ模範解答すら出ていないのが現状です。既存の概念に縛られない発想をする必要があると指摘しました。なお、想定ユーザーを定めるには、「男性か女性か」「いつ使うか（電車の中、歩きながら、会社）」「持ち方はどうか」ということを考える必要があると述べていました。
まとめ
まとめとして、宇野氏は次のことを挙げました。
iPhone6/6 plus の大きさはスマートフォンの使い方と利用シーンを大きく変えた。
UIもそれに合わせて変わる事が望まれるが、まだ追いついていないのが現状。今はまだ過渡期である。
高解像度であることよりも大きさによる問題が深刻。
サービスによってユーザー層は大きく異なるなるので、どんなユーザーがどれだけ使っているかを見極めて今後の対応を進めるのが重要。
そして、「ユーザーファーストのサービスを作るためには、まず自分が最高のユーザーになりましょう」という言葉でセッションを締めくくりました。
いろいろな発表があったので、これからのデザイン環境について考えてみた
グリーの村越悟氏による発表です。今回のiPhone 6／iOS 8リリースについてはあまりワクワクしなかったけれども、登壇をきっかけに自らiPhone 6の犠牲者となったそうです。そして、実際に経験したことを踏まえて、これからのデザインはどのように考えると良いかについて話しました。
one handed modeを考える
キャッチコピーに見るAppleの変遷を考えると、これまでは何ができるかを推していました。しかし現在はBigger than Bigger（とにかくでかい） で、大きさと薄さを推しており、プロダクトメーカー化してきた気がすると言います。
また、スマートフォンの大型化とタブレットの小型化が最近の流れとなっていて、5～7インチの画面が多くなり、ファブレット化が進むと考えているそうです。スマートフォンとタブレットでの行動比較では、双方が隙間を埋め合って利用されていくだろうとのこと。
そのような中、親指でリーチできる領域が変わってきています。iPhone 6はダブルタップで、画面の上半分がホームボタン側に降りてくる機能が搭載されていますが、下がってくるとタップできるのは合理的でしょうか。
もっと他に方法がないのか等、デザインに関わっている者として素通りしないで考えた方がいいのではないかと考えているそうです。「Androidの片手モードとニアリーイコールなのか」「人の持ち方が変わるのか、UI設計で解決するのか」など検討しなければいかないと述べていました。
これからのデザインで大切なこと
これから考えていかなければいけないことを、次の変数と定数で考えたそうです。
変数：市場、テクノロジー、UI／UX
定数：人間の能力
変わらない人間が、変わっていくものとどう対峙するか。机上で語るよりも、ユーザーが使っている利用シーンを見ることが大事だと言います。そこでグリーでは、ユーザーテストやインタビューを行い、デザインプロセスにフィードバックしながらUI/UXを向上させる取り組みを行っていると説明しました。
まとめとして、伊藤穰一氏の言葉「我々が自らにこうしているのだと言い聞かている思考や行動からではなく、実際に行っている思考や行動から影響を受けるかたちで、医療用機器、コンピューター、乗り物、コミュニケーション用のツールをデザインする必要がある」を引用しました。
最後に、10月29日にグリーで行われる「GREE Creators' Meetup ! 」を告知しました。
次の5年のUIを考えてみた
ミクシィのノハナにおける、UXデザイナーの馬場沙織氏の今後のUIについての発表です。
馬場氏はフォトブック作成サービス「ノハナ」立ち上げメンバーとして、プロダクトの調査、企画、設計、評価、開発、制作ディレクションを行っています。冒頭、9月30日にリリースされたノハナの年賀状アプリを紹介しました。ノハナ自体は先にiOS版から開発しました。審査期間があるためiOS版を先に着手して、その後にAndroid版を対応したそうです。現在、ノハナはiOSユーザーが多い（Androidユーザーの倍）とのこと。
方向性を見渡してみる
デバイスの方向性は、次のようになると予測されています。
モバイルシフトがさらに進む。タブレットも2015年にはPCの出荷台数を超える見込み。
スマートフォンの大画面化。世界の出荷台数からみて、ファブレット（画面サイズが約5～7インチのスマートフォン）は2016年のスマートフォン出荷台数の半分を占める見込み。
世界ではAndroidシェアが84.7％。日本はAndroidとiOSは半々くらい。
技術革新の方向性としてキーワードになるのがIoT（Internet of Things）です。2020年には、ネットワークに接続されるデバイスは数百億規模にものぼり、全世界で一人あたりつながるデバイス数は、単純でも5、6台あたりの計算にもなります。自動車や自動販売機、工場設置機器、医療機器などのデバイスにつながり、これらにつながるデータを活用したビジネス展開が鍵になってきます。
ここでGoogleとAppleはどのような方向をたどっていくでしょうか。現在リリースされているものを見ると、Android Auto, Android TV/NEST, Android Wear/Google Glass, CarPlay, Apple TV, Apple Watchといったものがあります。そのため、生活領域のプラットフォーマー化が進む（自動車、住宅、家電、ウェアラブル）と考えられます。
また、UIはどこに向かうでしょうか。パソコンで行っていた多くのことは、モバイル（スマートフォン、タブレット、ファブレット）で行うようになります。UIはタッチ、音声入力が中心になるでしょう。
次の5年のUIの方向性
さて、次の5年のUIの方向性を考えてみます。
スマートフォン、タブレット、ファブレットについては上記でも触れたように、パソコンで行っていたことをモバイル（スマートフォン、タブレット、ファブレット）で行うようになると考えられます。そのため、タッチや音声入力を考える必要があります。
IoTについては、IoTでつながった偏在する多種のデバイスとデータをやりとりするようになるはずです。IoTデバイスとの相互作用による自動入出力や半自動入出力（パーソナライズなどのデータ処理の技術革新も）が考えられていきます。
Google、Appleは標準仕様を作っているため、その動向を追いかけるエンジニアやデザイナーが増えていくはずです。よりデザイン性が重視されている生活領域にテクノロジーが進出し、デザインとテクノロジーが高度に統合されます。ただ、そのためには、プラットフォームやデバイスを超えた統一された体験を可能にするためのルールとツールが必要です。新しいデザインのガイドラインとは、これまでにデザインの中で美しいとされていたものをテクノロジー的な言い方に置き換えているものだと考えています。
ウェアラブルについては、制約がある中で新しい操作方法が登場するはずです。
デザイナーは何をしたら良いか？
最後に、馬場さんは「次の5年のために、あなたは何をしますか？」と言及し、そして「5年後は東京オリンピック特需もあるので楽しみです。人がたくさん来る一大イベントがあって、東京は面白い環境ではないかと思っています。みなさんで討議しましょう」と述べていました。
パネルディスカッション
発表した宇野氏、馬場氏、村越氏、稲守氏（モデレーター）によるパネルディスカッションが行われました。主な内容を箇条書きでまとめました。
誰のためのUI？
ノハナは20～40代の女性ユーザーが多い（ついて来れない人たちがいるので、ガイドラインを一旦忘れた。サービス立ち上げ時は簡単なUIで良いが、慣れてくると慣れてきた人のUIが必要） 。
ゲームの場合、端末にUIをあわせている。今後はデバイスごとにUIを変える必要があるかもしれない。
ABテスト（PlanBCDなど）を使って、ボタンやUIの検証を行っている。
Yahoo!はログインした時点でユーザー層がほぼ把握できるため、ユーザーの属性をかなり高い角度で知っている。そのターゲット（ユーザ属性）を狙ってUIを変える。もちろんユーザーテストやABテストも行い、ニュースサイトがどこまで読まれているか、適度な時間で読めているかなどを調べている。
どうする？ 多画面対応
デザインはリキッドにする？ タブレットとか。ファブレットとか。
5年前からタブレットと言われているのに思ったほどシェアが伸びていない。ファブレットに期待する。
現状、タブレット対応してもPVがあまり伸びていない。
力（工数）を掛け過ぎてもあまりメリットがない。
スマートフォン、ファブレットへの対応をメインに考える。
スマートフォン vs ガラパゴスケータイ
シェアが約半々（スマートフォンが少し多い）
むしろガラパゴスケータイの普及率が上がってきそうな勢い。ガラパゴス化がまだ進化する？
ガラパゴスケータイ向けのサービスをやっているサービスはまだ多い。
スマートフォンが伸び悩み中だから、逆にガラパゴスケータイのビジネスが儲かるのでは？
サービスはスマートフォンにシフト仕切れない（ユーザーの年齢的な問題など）
やりたくないけどやらないと対応しないといけない状況（iPhone 6対応よりユーザ数多い）
iOS 8で既に起こっている致命的な問題（既に解決済み）
画像がアップロードできない
Unityでコンパイルできない
懇親会
トークセッション終了後、スピーカーを囲んで懇親会を催しました。
今回の勉強会に参加された方々の属性としてデザイナーが半数、残り半数がエンジニア、次いでディレクターといった構成でした。懇親会は食事をしながら和やかに行われ、参加者同士で積極的に意見交換し、情報収集を行っている場面が見られました。
終わりに
iPhone 6／iOS 8の登場によって今後スマートフォンUIに関わる方がやるべき対応、そして各社の考え方などに対して、関心の高さが伺えたイベントでした。
