Appleから学ぶUIデザイン。何も考えず直感的にiPhoneを使いこなせる秘密

スティーブ・ジョブズ氏は、説明書がなくても誰もが使える製品を作るべきだと考えました。

たとえばiPhoneのホーム画面は、本のページと同じく、上下に「めくる」ことはできません。あくまで左右の動きです。

いまとなっては珍しくないこうした基本的なデザインは、かつてのAndoroidにとっては当たり前ではありませんでした。iOSとAndroidをくらべると、Appleは「使いやすさ」や「動きのなめらかさ」に重点を置いていることがわかります。

今回はApple製品のUIデザインについて学んでいきましょう。

誤操作を見越したジェスチャーデザイン

画面に触れてから、何かしらの反応が返ってくるまでに時間がかかると、スマートフォンが反応していないかのように感じますよね。反応が素早く滑らかほうが、ユーザーにとって親切です。

Appleが注目したのは、画面の反応速度だけではありません。ジェスチャーデザインによって、ユーザーの反応速度もより高めています。

ジェスチャーと速度の関係に重要なのが「考える時間」です。ユーザーの考える時間を減らせば、そのぶんスピードを高められます。

▲間違ったアプリを開いても、すぐに元のページに戻れる

▲アプリを開いてる途中から、アプリをいじれる

こうした工夫は不必要に思えるかもしれません。しかし間違ったアプリを開いたときを想像してみましょう。

iPhone8まではホームボタンがありましたが、ホームボタンがあるとアプリを開くまで指はホームボタンにありますよね。しかしホームボタンがない場合は、指はずっと画面上にあることになります。

iPhoneXからホームボタンが削除されましたが、それによってより高度なジェスチャーデザインが可能となり、アプリが完全に開く前に閉じられるのです。

▲「Twitterを開こうと思ったけど、やっぱり先にメールが見たい」そんなときにはこの動作

アイコンを起点に動くアプリ

アプリを選択したり、通知センターを開いたりするとき。振動やアイコンの色変化など、画面上になんらかの反応を期待しますよね。

アプリを開くときは小さいアイコンを起点に拡大し、すぐに画面全体を覆うようデザインされています。

▲アプリを閉じる時は、小さなアイコンへと収縮してく

▲タップすると前面に出てくるような動きがついている

ゴムのように反発するラバーバンドスクロール

Web上で記事を読むとき、記事がどこくらいの長さかを確認するためにスクロールすることがありますよね。

Appleはその動作に対し、ラバーバンドスクロールを採用しています。もう上や下にコンテンツがないことを知らせるために、ゴムのように反発するフィードバックを設けたのです。

▲ラバーバンドスクロールの例

GIFに登場しているチャン・カルナムニ氏は、ラバーバンドスクロールについて以下のように答えています。

「こうしたフィードバックがなければ、ユーザーはスマートフォンがフリーズしたのか、それとも単に画面の端に達したのかが分からなくなってしまうだろう」

アニメーションのスピードや見栄え

目に優しく、かつ複数の処理をなめらかにするためには、アニメーションにどのような工夫をするべきでしょうか？

Appleは、1秒あたりに表示されるフレーム数について考えるだけでは不十分で、別の基準が必要だと考えています。

▲どちらも30fps（frames per second）で、1秒あたりのフレーム数は同じ

フレーム数と同じく重要なのが、アニメーションのスピードや各フレームの見栄えです。ここではモーションブラーやモーションストレッチなどが活用されます。

▲左から、通常、モーションブラー、モーションストレッチ

たとえばアプリのアイコンに触れたとき、アプリが拡大して画面全体を覆いますよね。こうしたスムーズな動きは、モーションストレッチによるものです。

おわりに

いまでは当たり前に感じられるUIの裏には、無数の工夫が隠されています。そもそも私たちユーザーがなにも考えずにノーストレスで使えること自体が、Appleの努力の証です。

今後新たに出てくるであろう機能にも、こうした工夫が詰まっているはずです。分析してぜひ自分のプロジェクトにも役立ててみましょう。

（本文：AliÇORAK　翻訳：Nakajima Asuka　編集：Kitamura Yuu）