LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

iOS7で変わる(かもしれない)デザインプロセス

大坪と申します。さてiOS7専用アプリ「へやくる!」を開発して考えたことシリーズ(シリーズだったのか)第二弾(第一弾はなんだったのか)

 

iOS7での変更点、新機能は数多いですが今日はその中で特に「デザイン」(その定義がなんであれ)に関する点について。

 

iOS6までの実在の材質を模した意匠はiOS7ですっぱり消えました。それは時々「フラット」という言い方をされるわけですが、iOS7の基本的なDesign Principlesには「フラット」という言葉はありません。その代わり逆の意味を持つであろうDepth(深さ)という言葉が入っている。ではDepthとは具体的に何なのか?

 

 

それは画面が複数レイヤーから構成され奥行きを持っていることを知らせるため半透明の画面を使用することだったり、あるいはトップ画面のようにユーザがデバイスを持つ角度によって微妙に動きを見せることによってあたかもアイコンが浮かんでいるように見せること、と理解しています。

 

iOS6までは最初にJobsがOS Xを紹介した時に使った「人々が舐めたくなるようなボタンをデザインした」という言葉に代表されるこんな意匠を使っていたわけです。

 

f:id:nextdeveloper:20131107094615j:plain

 

こうした意匠は一見立体的であるかのように見え、深みを感じさせる、と言いたくなります。しかしそれは「まやかし」にすぎない。意匠は静的な画像であり、人々がそれに慣れてしまえばそれまでです。iOS6でのメモ帳は現実のNotepadを非常に精巧に模した意匠を持っていましたが、使っているうちそうした「工夫」はユーザの意識から消え、単なるコンピュータ上の「簡易エディタ」としてだけ使われます。

 

私の考えではiOS7でAppleは「静的な深さ」から「動的な深さ」に方向を変えたのではないかと。一番大切なのはユーザに見せたいコンテンツ。ボタンなどそれ以外の静的な意匠はシンプルなものにし、単独では確かに「フラット」に見える。しかしそれが「動的」に動くことによりユーザに深さを感じさせるようにした、と。

 

あるインタビューでIveはこう語っています。

 

One of the things that we were interested in doing is, despite people talked about this being “flat,” is that it’s very, very deep. It’s constructed and architected visually and from an informational point of view as a very deep UI, but we didn’t want to rely on shadows or how big your highlights could get.  

 引用元:Apple's Jonathan Ive and Craig Federighi: The Complete Interview

 

Iveの言葉は私にとって訳すのが難しいのですが、おそらくこんな意味かと

我々がやろうとしていること-”フラット”という言われ方をすることが多いが-はとてもとても深いものだ。視覚的に構成されており、情報の面から見るととても奥行きのあるUIを作ろうとしている.しかし影や、ハイライトに頼ろうとは思わない。

 

さて、それがデザインプロセスにどう影響するのか?

 

UIを持つシステムを作るうえでプロトタイプはとても重要だと言われますし、私もそう思います。問題はそのためにどんなツールを使うか。

 

例えばこんな製品が最近発売されたようです。

 

スマホアプリのペーパープロトタイピング用のノートを作成、販売開始いたしました。iPhone実寸のグリッド入り&各種バーのガイド線付ノートブックです。

 

確かにこの製品を使い紙の上でプロトタイプを作ることも可能でしょう。しかしiOS7から「動き」がUI設計の中で重要性を増しています。

 

異なる画面間の遷移を動的になめらかに遷移させるカスタムトランジション、画面部品に簡単に重力とかバネとか従来ゲームでよく用いられていた「物理エンジン」の動きを付加する機能、デバイスの動きを検知し、画面部品を動かすことができる機能等。そしてそれらによってDepthを感じさせようとしている。

 

紙の上で、こうした動きを含むデザインのプロトタイプが可能でしょうか?「動き」が付帯的な要素であれば「プロトだから」ということでそれらを省略することもできるでしょう。しかし「動き」がインタフェースデザインの中でより重要な意味を持つとしたら?

 

このようにiOS7がもたらした変化は従来「デザイナー」と「エンジニア」と呼ばれていた職種(個人的にはこのような固定的な職種の呼び方は問題があると思っていますが)の垣根についても再考を促すものです。

 

iOS7でどのような画面間遷移のアニメーションが可能になったかを知らずに画面設計ができるでしょうか?どのような動きが簡単に実装でき、どのような動きがそうでないのか知らずに仕様を決めることができるでしょうか?

 

極論を書きます。iOS7からは、デザイナーと呼ばれる人であっても、どのような動きが可能か、可能でないかを理解しなくては「良いデザイン」ができなくなるのではないか。そして実際に動くものの「手触り」を確かめずにどうして「良いデザイン」ができるか。

 

つまりiOS6以前よりもさらにデザイナーとエンジニアは緊密にインタラクションする必要がある、と主張したい。iOS7を作った側のトップ二人はこう述べています。

 

But the idea of how we could create this sense of depth, that was just the most phenomenal collaboration which required everything from motion graphics to sensing in the hardware to the most remarkable sort of algorithms from a software point of view.

 引用元:Apple's Jonathan Ive and Craig Federighi: The Complete Interview

 

Depth-深みを感じさせるためには、モーショングラフィックスから、ハードウェアの姿勢のセンシングや素晴らしいアルゴリズムなどが互いに協力しあうことが必要だった。

 つまりiOS7自体が、エンジニアリングとデザインと呼ばれているものの緊密な協力なしには成り立たないものだったのです。であれば、その上で動くアプリケーションが

  • デザイナーが仕様を作る
  • それを受けてエンジニアがコードを書く

といった従来のやり方で作れるものでしょうか?

 

具体的にアプリのUIで説明しましょう。

 

最近Sunrise CalendarというiPhone用カレンダーアプリを使い始めました。iOS7の純正カレンダーアプリ(iPhone版)も先ほど述べたような「動き」をうまく使っていますが、これはさらに上を行っています。

例えばこの画面では下半分に個々の日の予定が表示され、上のほうに日付が並んでいます。

 

f:id:nextdeveloper:20131107094949p:plain

 

ここで日付が並んでいるエリアをスクロールすると、自動的にその部分の面積が大きくなり、個々の日の予定エリアが小さくなる。

 

f:id:nextdeveloper:20131107095010p:plain

 

ユーザがスクロールする、ということはその部分に着目しているということであり、それに応じて画面の「デザイン」を動的に変更しています。こうやって静止画だけ見ると「はあそうですか」と思うでしょう。しかし実際にiPhoneの上でさわってみると、その自然さ、ユーザを戸惑わせないコンテキスト切り替えの滑らかさに驚きます。このような「動き」を含んだデザインは静止画像だけで可能でしょうか?できないとすればどうすればよいのでしょう?

 

---------

「へやくる!」の開発にあたっては開発の初期から「ワーキングプロトタイプ」を使うことを心がけました。iPad,iPhoneアプリのインタフェースがPC上のインタフェースと異なるのは「手触り」を評価する必要がある点。実機上で触って動かしてみないとそれが良いデザインか否かはわからない。

 

というわけで「手触り」「動き」を再現できるプロトをごりごり作る。捨てコードと割り切ってとにかく早く動くコードを作る。いわばダンボールと両面テープでモックアップを作っているようなものです。もちろん製品のコードはそれとは別に作ります。開発の後半でもこのワーキングプロトタイプは新しいUIの検討をする際に「それなりに」役立ちました。捨てコードだから、せっかく作った部品がボツになっても泣かない(キッパリ)

 

とはいえ

 

ワーキングプロトタイプを作るのもそれなりに大変。というわけで「動き」を検討できるよいプロトタイプツールはないものですかねえ....