UI GRAPHICS新版に寄稿しました - Appleが目指す「流れるインターフェース」
2015年に初版が発行された「UI GRAPHICS」は、当時の数多くのモバイルアプリの最先端のデザイン事例と共に、スマートフォン以降に生まれたUIのデザイン思想、インターフェース論について、UIの専門家達による様々な考察を掲載した、大変人気を博した書籍でした。
そして先日発売された「UI GRAPHICS」の続編「新版 UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェースデザインとUX」に大変光栄な事に、共著者の一人として参加させていただきました。
今回出版元のBNN新社様より、当方のパートをnoteに掲載する事をご許可いただいたので、前半部分に限り一部ご紹介したいと思います。
テーマはAppleの開発者向けカンファレンスWWDC 2018のセッション「Designing Fluid Interfaces」で紹介された、新たなUIデザイン思想についての考察です。
--------------------------------------------
Appleが目指す「流れるインターフェース」
iPhoneが初めて登場した2007年から現在まで、iOSのUIデザインには大きく2つのフェーズがあった。
一つ目がiPhoneの最初のインターフェース「スキューモーフィズム」と呼ばれるデザイン。
二つ目が2013年にiOS 7の発表と共に登場した「フラットデザイン」。
そしてiOSのモバイルインターフェースにおける、三つ目のフェーズが始まった。2017年のiPhone Xの登場と共に生まれた「Fluid Interfaces」である。
本稿ではiOSを取り巻くモバイルインターフェースのUIデザインの変遷、「Fluid Interfaces」の特徴とそれによってAppleが目指す未来について考察してみたい。
iOSのUIデザインの変遷
まずiOSのUIデザインの変遷を3つのフェーズで振り返ってみたい。
iPhone登場初期の「スキューモーフィズム」と呼ばれるUIデザインでは、現実世界に存在する物質や素材がUIに採り入れられ、紙を模した部品が置いてあったり、革のテクスチャを使ったものや、立体的な表現が施されたナビゲーションバー等が多用されていた。
これは「メタファー」と言い、現実に存在するコンパスや、メモ帳を見立てたUIデザインを施す事で、ユーザーは新しいテクノロジーの使い方の手掛かりを得る事が出来る。スマートフォンという、これまで存在しなかったタッチインターフェースのデバイスという新しいテクノロジーを普及させるには有効なデザイン手法だった。
しかしスキューモーフィズムには限界がある。それは現実世界に存在しないものは、UIに見立てるものが無くなってしまうのでメタファーとして利用出来るものが無くなってしまう点である。
初代iPhoneの登場から6年が経った2013年にリリースされたiOS 7によって、スキューモーフィズムに代わるフラットデザインが発表され、UIから物質的なテクスチャや立体感は取り払われた。6年間のうちにユーザーはモバイルのインターフェースに十分に慣れ親しみ、スキューモーフィズムはその役目を十分に果たしたと考えられる。
ここからは、よりコンテンツやアプリの機能そのものにフォーカスをシフトする為に、極力UIとしての装飾を取り払い、UIをディスプレイの端から端まで一杯に広げる「エッジ・トゥ・エッジ」のフラットデザインを推奨するようになったのである。
そしてiOS 7の登場から4年後の2017年にiPhone Xが登場し、モバイルのUIは次の段階に進んだ。
iPhone XというデバイスがもたらしたUIの革新
iPhone Xは2007年に初めて姿を見せた初代iPhoneの登場から10年目を迎えた2017年に登場した、記念すべきモデルである。iPhone Xの特筆すべき変更点は、iPhoneの特徴とも言える物理的なホームボタンが無くなった点や、端末の認証をユーザーの顔で行う「Face ID」が搭載された事などが特徴として挙げられる。しかし、UIの観点で何よりも大きな変化はディスプレイの大きな変更だろう。
iPhone Xのディスプレイは「ベゼルレス」とも形容される程、デバイスの縦横一杯にディスプレイが広がっている。四隅の角がラウンドの形状になった事も相まって、アプリの世界の境界に大きな変化をもたらした。まるでiPhoneのディスプレイを通して、アプリの世界を覗き見ているような没入感(Immersive Experience)を与えているのである。
巨大化しつづけるディスプレイサイズ
歴代のiPhoneのデバイスを振り返ると、モデルを重ねる毎にディスプレイは大型化し、より縦長になり続けている。2007年に登場した初代iPhoneと現在の最新機種iPhone XS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっている。
ディスプレイサイズというUIとしての前提の環境にこれだけ変化があれば、それに伴いUIのルールもアップデートされる必要がある。
iPhone XからはじまったFluid Interfaces
ここまではビジュアルとしてのUIの変遷を振り返ってきたが、iPhone Xで行われたUIの革新はそれに留まらない。ベゼルレスなディスプレイへの変更だけでなく、デザインとインタラクションに大きな変更が行われた。それが「Fluid Interfaces」だ。
既にiPhone Xを操作した経験のある方はディスプレイのビジュアル的な表示だけでなく、その操作の滑らかさに驚いた記憶があるのではないだろうか。ホームスクリーンからアプリのアイコンをタップしてからのアプリの起動の速さや、アプリからホームに戻る時のスムースさ。別のアプリに切り替える時のタスクスイッチの滑らかさ。それこそがiPhone Xから搭載されたFluid Interfacesなのだ。
Fluid InterfacesはiPhone Xに搭載されたものの、その詳細な仕様は2018年に行われたAppleの開発者向けカンファレンスWWDC 2018まで語られる事はなかった。WWDC 2018で行われた開発者向けセッション「Designing Fluid Interfaces」を是非一度ご覧いただきたい。
身体の延長としての道具
インターフェースデザインの名著、渡邊恵太著「融けるデザイン ハード×ソフト×ネット時代の新たな設計論」にて人間と道具の関係の歴史の中で、「道具の透明性」と「自己帰属感」が語られている。
直接手に持つ道具、例えばハンマーであれば対象物を叩いた時に、その反動がハンマーを通して手に伝わりダイレクトに返ってくる。こうした感触を繰り返し感じる事で、次第に道具が身体の延長の様に感じ、道具の事をまるで意識せずに作業に集中する事が出来るようになる。これが「道具の透明性」である。
石器時代から始まった直接手に持つ道具から始まり、産業革命を経て道具が発展すると共に人間は大きな力を得られるようになった反面、人間と道具の関係は次第に間接的になっていった。関係が間接的になる程に、人間の道具に対するインプットから実際に得られる結果がダイレクトではなくなっていった。
2007年に登場したiPhoneは、なぜそのインターフェースで多くの人を魅了できたのか。それは道具としての「自己帰属感」にある。指でタッチスクリーンに直接触れ、ボタンをタップした時に得られるダイレクトなフィードバックや、画面をスクロールした時にさも慣性に従っているように減速するモーションや、スクロールが画面の端に達した時のバウンスが、まるで画面の中の世界に直接触れているような感覚を人間に与え、高い「自己帰属感」をもたらしたからである。
この様にしてタッチインターフェースを備えたスマートフォンの歴史がiPhoneから始まり、現在に至る。そしてFluid Interfacesはこの自己帰属感を更に一歩先に進めようとしている。
--------------------------------------------
以上、前半部分でした。
後半部分は以下の様な構成になっています。
✓ 身体の拡張のために生まれたFluid Interfaces
✓ Fluid Interfacesに対応したUIデザイン
✓ ディスプレイの巨大化に対応するハーフモーダル
✓ マルチプラットフォームを通したブランドの一貫性
✓ Fluid Interfacesをどう自分達に採り入れていくか
錚々たる執筆陣による多数のコラムを収録した、大変読み応えのある一冊です。これからのUI・UXをデザインする上で参考にしていただけると幸いです。
いいなと思ったら応援しよう！
