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

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

Apples Fluid Interface Design

book

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

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

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

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

book

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

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

Application01

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

Application02

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

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

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

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

Application03

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

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

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

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

interface01

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

interface

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

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

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

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

Rubber banding

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

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

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

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

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

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

Apples Fluid Interface Design

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

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

Apples Fluid Interface Design

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

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

おわりに

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

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

(本文:AliÇORAK 翻訳:Nakajima Asuka 編集:Kitamura Yuu)

いまの働き方に悩んでいるあなたへ。

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ