Appleのアニメーションはなぜ美しいか考える
第８章では、ふだん当たり前のように使っているiPhone やiPad はどうしてこんなに気持ちのいい使い⼼地になるのか、コントロールセンターのUI のパーツに着⽬し、アニメーショントレースを⾏い考察した内容を紹介します。
全章を一括して購入されたい方はこちらの記事をご購入ください。https://note.mu/nikkei_staff/n/n44623c9b9ab4
⽇経電⼦版のアプリチームでiOSアプリを開発しているまりーな/ @marina10172003です。
ふだん当たり前のように使っているiPhone やiPad はどうしてこんなに気持ちのいい使い⼼地になるのでしょうか。iOS 10 からiOS 11 にアップデートするにあたり⼤幅な変更が⾏われたコントロールセンターのUI のパーツに着⽬し、観察しました。iOSDC2018で、この触り⼼地がいい理由は何か、Human Interface Guidelines やWWDC 2018Designing Fluid Interfaces の発表内容をもとに、Apple が何を⽬指してこのように設計したのか、Adobe After Effects でアニメーショントレースを⾏い考察しました*1。
本稿は、発表内容をより詳しく解説し、その魅⼒に迫りました。iPhone を⽚⼿に⼀緒に⼿を動かしながら魅惑のアニメーションの世界を体験しましょう（図8.1）。
8.1 なぜコントロールセンターに着⽬したのか
iOS 10 からiOS 11 にアップデートするにあたり、次の図のようにコントロールセンターが⼤幅に変わりました（図8.2）。
ユーザーがコントロールセンターを使う需要があったが、実際はうまく使いこなせていなかったため、⼤きな変更が⾏われたのではないかと考えました。WWDC 2017 のKeynote（1:02:02 付近）*2でコントロールセンターに関して⾔及されていたことをまとめると、すべての機能をひとつのページにまとめ、3D Touch を使って多くのコントロールにアクセスできるようになったため、ユーザー⾃⾝が任意の機能を簡単に組み込めるデザインになったとのことでした。
iOS 10 とiOS 11 を⽐較してみると、⾳量やタイマーをスライダーで細かく操作できるようになった例があります。
タイマーを例に出すと、iOS 10 では時計アプリに遷移して設定する必要があったのが、スライダーで1 分、2 分、3 分、4 分、5 分、10 分、15 分、20 分、30 分、45 分、1 時間、2 時間と選べるようになりました。
このようにコントロールセンター内で操作が完結するような変更が⾏われています。また、ユーザーが⾏った変更に対して触覚フィードバックの付加や、コントロールセンターを⾃分でカスタマイズできるようになったことで利便性が向上し、ひとつひとつのアイコン（画⾯回転のロック、画⾯の明るさ、⾳量など）に対して状態が変化する時により気持ちのいいアニメーションが表現されるようになりました。このアップデートから、Appleが使い勝⼿や触り⼼地に対して⼀番気を遣っているなのではないかと考え、アニメーションを解析することにしました。
8.2 iOS におけるAnimation の役割
まずはコントロールセンターのアニメーションを解析する前に、iOS のAnimation の役割をHuman Interface Guideline のAnimation の項⽬で確認します。
Animation
Beautiful, subtle animation throughout iOS builds a visual sense of connection between people and content onscreen.When used appropriately, animation can convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions.
Animation のページ全体で記載されている効果をまとめると次のようになりました。
アニメーションの効果
1. 状態を伝える
2. ⾏動に対するフィードバック
3. ユーザーが操作しているという感覚を⾼める
4. ユーザーの⾏動の結果を可視化
これらの説明を⼀⾔でまとめるとアニメーションでユーザーとコンテンツをつなぐということです。
8.3 アニメーションを観察する
それではアニメーションの観察を始めてみましょう。お⼿元にiPhone がある⽅は是⾮⼀緒にコントロールセンターを開いてみてください。
トレースをするにあたり使⽤した端末はiPhone X（iOS 11.4）とiPhone SE（iOS 10）です。画⾯録画機能やスクリーンショットを⽤いて画⾯を収録しました。また、収録した動画をスローで再⽣し、Adobe After Effects を使ってUI アニメーションのトレースを⾏いました。
コントロールセンターを観察した結果、次の４視点より気がついたことをまとめました。
1. ユーザーの動きに応じたアニメーションの変更
2. 段階を⽰す表現⼿法
3. ⽚⼿で使える設計とユーザーに結果をフィードバックする⼿法
4. 視差効果を拡張する⼿法
それぞれの４視点について、順に紹介します。
8.3.1 ユーザーの動きに応じたアニメーションの変更
指の動きの速さに応じてスクロールするスピードを変化させている例を紹介します。ユーザーの動きに応じてアニメーションを変更することで、⾃分が動かしている感覚を増幅させています。
ユーザーの動きに応じたアニメーションの変更の項⽬では
• コントロールセンターを表⽰する速度の違い
• あえてヌルヌルにしない効果
• フラッシュライト点灯時に3D Touch を要求する変更
を紹介します。
• コントロールセンターを出す速度の違い
⼿元のiPhone X でコントロールセンターを開き、指の動きによってどのような変化が⾒られるかを次の図で⽰します（図8.3）。
左が上から端末の下まで指を画⾯につけたまま引き伸ばし指を離した図であり、右が上から端末の上部付近で指を離した図です。特に着⽬してほしいのが、イージング効果の違いです。⼤きく跳ね上がる左の場合、⼀番上部のグループ（機内モードやWi-Fi をコントロールするグループとミュージックのグループを含む）は⼀度上に跳ね上がった後、定位置に戻っています。⼀⽅で、⼀番下部のグループ（ライト、タイマーなどのグループ）は緩やかに元の位置に戻っています。Designing Fluid Interfaces で紹介されていたように、バネと同様の物理現象に近い⾃然な動きを再現していると推測できます。右と⽐較すると⼀番上部の跳ね上がり⽅が、指の動きによって異なることがわかります。
• あえてヌルヌルにしない効果
iPhone のテーブルビューは指の動きに合わせてスクロールする速度が変わっています。しかし、あえて指の動きを拡張してアニメーションを表現させていない部分がコントロールセンターにはあります（図8.4）。
コントロールセンターの明るさや⾳量の調節部分を3D Touch するとタッチした部分がポップされますが、このときにスクロールをしてもシームレスに変更されません。これは、ユーザーにとって意図的ではない動作を避けたい意図があると考えました。明るさ、⾳量の部分は画⾯のスクロールとは異なりハードの設定を変更する部分です。⾳楽を聞いているときに⾳量を上げたくなり、コントロールセンターの⾳量部分でこの機能を使う状況を考えます。このスライダーがシームレスに動く場合、指を意図せず速く動かしてしまうとユーザーの意図に沿わず必要以上に⼤きく/⼩さくなってしまうことが考えられます。
iOS 11 では、ロック画⾯でフラッシュライトを点灯させる場合、ライトボタンを強く押し込む必要があります。これも、ユーザーにとって意図的ではない動作を避けたいという意図があることに繋がるのではないでしょうか。Designing Fluid Interfaces（38 分22秒付近）*3でiPhone のライトのON/OFF の切り替えについて⾔及されています。iOS 10 ではタップすればライトが点灯していましたが、iOS 11 ではさらに押し込む必要があります。
また押し込む強さによってライトボタンの半径の⼤きさが変わるようにアニメーションが変わっています。現実の物質と同じように圧⼒を書けたら伸びる柔らかいもののような動きの質感が再現されています。
上記２つの例から、ユーザが意図していない動作を回避させるために、このようなトランジションを実現していると考えました。
8.3.2 段階を⽰す表現⼿法
段階を表す⼿法も複数種類があるのが⾯⽩いところです。⾳声とライトを例に取ると次のように違いがあることがわかります。下の部分に変化していくアイコン⼀覧を掲載しています。ライトはON/OFF というアイコンの状態に加え、光の強さを４段階に分けて設定できるようにしていますが、⾳量に関しては、変化するバーの位置によってアイコンの状態が変わっていくことがわかります（図8.5）。
段階を表すのにも違いがある理由はよくわからなかったのですが、曖昧なものでいいものと段階的に表現するものを分けていると考えました。
8.3.3 ⽚⼿で使える設計とユーザーに結果をフィードバックする⼿法
• 指先の位置を変えずに設定変更できる
⼿元のiPhone のコントロールセンターの⾳量部分を調整するところを押し込むと、スライダーのView がPop されると思いますが、指の位置を変えずにそのまま上にスライドしてみると、指の移動位置に合わせて⾳量バーがアニメーションし⾳量を調整できているというフィードバックを確認できます（図8.6）。
• 指先がある⼀定ラインを超えると元の状態に戻る
次はおやすみモードのボタンに軽く⼿を触れながら、指を別の位置に移動してみます。アイコンが膨らみ少し⽩っぽい⾊味に変わりそのアイコンが選択されたアニメーションが表⽰されますが、指がある程度アイコンから離れるともとの灰⾊の⾊味に戻ります。指が離れることで、そのボタンの選択は解除されたということをアニメーションでユーザーに伝えている役割を果たしていると考えました（図8.7）。
• 指先をずらして押し込んでも反応する
ボタンに軽く触れて指を離さずに別の所に移動して、押し込むと、押し込んだ位置のボタンが拡⼤するのではなく、⼀番始めにボタンに触れた機能のウィンドウが拡⼤されます。
下の例のようにカメラのアイコンに指を置きながら、画⾯ミラーリングに近い位置まで移動して指を押し込むと、カメラのウィンドウが開きます。ウィンドウを開いた状態で指を上下にずらしてみると、指の移動位置によってカメラの機能の中のさらに深いセルフィーをとる、ビデオ撮影などの細かい設定を選択できるようになっています（図8.8）。
上記3 つの例は、どれも画⾯内に画像として境界はあるのですが、触れる境界に関しては曖昧です。正確にタップしないと操作できないのではなく、境界に曖昧さを残した設計であると考えました。アニメーションの役割としては、そういった境界の曖昧さを埋め、動かした結果をフィードバックとしてユーザに返しているのではないかと思います。
8.3.4 視差効果を拡張する⼿法
コントロールセンターを開いて閉じる動画を録画して、コントロールセンターの出し⼊れを解析しました。After Effects で動画のUI トレースを⾏い、左から順番に元動画、設定画⾯の背景の動き、上からかぶさるコンテンツの動きと透明度の変化でそれぞれの要素を分解しました（図8.9）。
• 背景の動き
まずは背景の動きに着⽬してみます。録画とトレースした画⾯を⾒⽐べてみると設定画⾯のコンテンツが、上からかぶさるコントロールセンターの表⽰に合わせて少し⼩さくなることがわかります（図8.10）。
これは奥⾏き感を背景の動きによって作り出していると考えられます。⼿元のiPhoneで背景の動きを観察しながら、ゆっくり動かしてみると変化が分かりやすいかとおもいます。
• コンテンツの動き
次にコンテンツの動きに着⽬してみます。コンテンツの動きをよく⾒てみると加速度を徐々に増しながら、⾯積を広げ表⽰されていることがわかります。これを視覚化すると右側の図のようになります。このようなアニメーションをつけるとコンテンツが奥から浮き出てくるような別のレイヤー層があるような感覚が増すことがわかります。
また位置にかかわらずコンテンツの広がるタイミングがどのコンテンツも同じということもわかりました。これは次に紹介する透明度の変化のタイミングの話と⼤きく関わってきます（図8.11）。
• 要素の透明度の動き
要素の透明度の動き⽅に着⽬します。下の図では左側から順番に時系列が進んでいきます。コンテンツが出現するところを観察してみると、上から下の順番でツールの透明度が下がります。左から三番⽬くらいの段階になると、全てのコンテンツが同じくらいの透明度になり、最後にすべてのコンテンツが同じタイミングで透明度が０になります（図8.12）。
次は消失時の様⼦を観察してみます。こちらも同様に左から右にかけて時系列順に並んでいます。
消失するときも同様に上から下の要素の順番で透明度が上がっていきます（図8.13）。
しかし、なぜか⾳量とライトの部分が⼀番最後に透明度が上がるのが⾯⽩い発⾒でした（図8.14）。
透明度を変えるタイミングを変えるとどのような効果が⽣み出されるのか考えてみました。
さきほどのコンテンツの動きの項⽬で紹介したとおり、実際にコンテンツが広がるタイミングは変わっていません。しかし透明度が変化するタイミングを変えることで、次々とコンテンツが上から滑り出てくるような感覚が増すのではないかと考えました（図8.15）。
1. なぜ視差効果を拡張するのか
視差効果はiOS7 から導⼊されました。Apple はなぜ視差効果を拡張するようなアニメーションを取り⼊れてきたのでしょうか。
インターフェイス∕インタラクションデザインを研究している渡辺さんが書いた溶けるデザインによると、視差効果の効果として次のように⾔及しています。
iPhone のiOS7 で取り⼊れられた、加速度センサーと連動して少しだけ動く壁紙ーーアイコン郡のパララックス効果（視差効果）は動きによって⼿前と奥を切り分けたし、複雑な壁紙を選んでしまってアイコンが埋没してしまったとしても、動きにより遮蔽の発⽣から縁を発⽣させアイコンを際⽴たせる効果があると⾔える
また、そもそもなぜ視差効果を導⼊したのかという説が次のように紹介されています。
バーチャルな質感表現だ。あるものを⼿に持ち傾けると光の反射によって材質の質感がわかるわけだが、それを画⾯の中でもできる可能性を⽰したのだ。ガラスのコップやペットボトルを持ってみてほしい。そして少し動かしてみてほしい。そうすると、そのものはユニークに反射し、その反対部分がユニークに動く。その反射の動きは⼿の動かしに連動するわけだから、その反射による光沢感の変化からも⾃⼰帰属感が⽣まれるはずだ。実世界であればそれは当然すぎるし、コップは⼿に持っているため事故に帰属しているのは当たり前のように感じてしまうかもしれないが、ピカピカした質感やザラザラした質感は、⾃分が持って動かす事によってその動きにユニークに対応するため、「⾃分が持っている感」の⽣起に⼀役買っていると⾔える
まとめると、端末を傾けると画⾯に変化が現れ現実世界と同様な質感表現をバーチャルで再現し、⾃⼰帰属感を増幅させているからという説でした(図8.16)。
8.3.5 まとめ
今回解析をした結果からApple のアニメーションがなぜ美しいかを考えてみた結果、意図に応じて適切なアニメーションを使っているからなのではないかと思いました。今まで紹介してきた例のように、ただアニメーションをつければきれいということではなく、何かしらの意図があって作られているのだと感じました。
WWDC 2018 Designing Fluid Interfaces によると
iPhone という道具を使っていることを意識させないまるであたかも⾃分の⾝体の延⻑と感じるような使い⼼地を⽬指している
WWDC 2018 Designing Fluid Interfaces (3:34 秒付近) より引⽤
と動画内で紹介されていました。このようにOS ⾃体が、⾃分の⾝体の⼀部と感じるような感覚を⽬指して作られているため、Apple のアニメーションは美しいと思います。
8.3.6 おわりに
こういったOS の設計思想にそったアニメーションをデザイナーが考え、エンジニアが実装するというのは、かなり距離があるのではないかと思いました。アニメーションという⾔葉にしにくいものをどうやって伝えればいいのかというのは難しい問題です。iPhone を使っているという意識をさせることなく、まるであたかも⾃然に⾃分の⾝体の⼀部になるような使い⼼地を⽬指すために実世界の観察や、iPhone の全体的な使い⼼地を観察するのが⼤事なのではないかと考えました。
エンジニア・デザイナーなどの職種を問わず実世界を観察して⾝体感覚に近いプロダクトを⽬指していきたいです。
8.3.7 参考⽂献
• WWDC 2018 Designing Fluid Interfaces *4
• 融けるデザイン ハード×ソフト×ネット時代の新たな設計論 渡邊恵太著
• iPhone の視差効果を減らすとどうなるの？ 視差効果を減らす設定の解説！*5
• Inside the technology behind iOS 7’s parallax effect *6
著者：まりーな/ @marina10172003
Adobe 製品が好きなiOS エンジニアiOSDC2018 で登壇した内容の本版です。解析したアニメーションは参照先のWeb ページでみれます。After Effects でアニメーショントレース・・次はやらないかな（遠い⽬）
140年の歴史ある会社が、AIやデータを駆使した開発を現場で実践しています。是非疑問や感想を #nikkei_dev_book をつけてツイートしてください！
全章を一括して購入されたい方はこちらの記事をご購入ください。
https://note.mu/nikkei_staff/n/n44623c9b9ab4
この記事を購入すると、この下に第８章だけのダウンロードリンクが表示されます。
ここから先は
¥ 100