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

Apples Fluid Interface Design
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

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

たとえば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)

34,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

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

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 34,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

RELATED

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