UIデザインに奥行きを効果的に取り入れるテクニックを解説 -Designing Depth

Post on:2024年9月19日

はじめに

ビジュアルデザインにおいてもっとも難しく、基本的な柱の一つが構成です。ストーリーや奥行きを伝えながら、三次元の世界を二次元（静止画）のフレームに収めるにはどうすればよいのでしょうか。これを実現する私のお気に入りのテクニックは、シーンをレイヤー化されたオブジェクトで合成することです。

この方法は一般的に、小道具や型にはまったフレーミングなどの前景要素で「フレームを汚す」と呼ばれます。通常、もっとも明白できれいな正面からのショットでは、ストーリーを進めたり、視覚的に魅力的にしたりすることはできません。

たとえば、下記の構成では、被写体が別のオブジェクトの背後から観察されていることを示唆することで、不安感を生み出しています。前景の障害物がなければ、このような推測はできず、この1つのフレームが伝える感情や情報は少なくなります。

「フレームを汚す」と呼ばれる手法

また、下記の1は窓越しに撮影して斬新な視覚効果を得てみたり、2はピントの合っていない前景の被写体でフレームをぼかしたり、3は被写体を中央に配置して周囲の環境を使ってコンテクストを提供したものです。

写真による効果

UIのデザインにおいても同様に、周囲の前景オブジェクトと背景オブジェクトを導入することで、構成を強化できます。私がVercelのマーケティングページのために作成したビジュアルを見てみましょう。

Vercelのために作成したビジュアル

最初のイテレーションでは、ブラウザのフレームやオーバーレイのサーフェスに奥行きがないため、デザインがうまくいきませでした。後から雑に配置されているように見えるかもしれません。

奥行きを出すためにわたし達ができる簡単な変更は、内側の背景をぼかしてz軸上で視覚的に下げ、コンテナの下端をフェードアウトさせて境界が不明瞭に見えるようにすることです。

内側の背景をぼかす

さらに、オフセットされてブラウザのフレームやピントの合っていないオブジェクトを追加することで、デザインの階層構造をさらに強調できます。また、フォーカルポイントの周りにギミック的な装飾を加えるだけでなく、主要な主題（ブラウザフレームとバブルサーフェス）を意図的に使用して、Vercelプラットフォーム上の豊富なプレビューデプロイメントを伝えています。

デザインの階層構造をさらに強調する

ぼやけた背景

下記の1のようにオーバーレイを起動するときに背景を暗くすることは、かなり一般的です。これはわたし達の目が期待する被写界深度をシミュレートさせることで、インターフェイスに立体感を伝えています。

たとえば、iOSのホーム画面で2のようにレイヤーを強調せずにコンテキストメニューが起動されるとかなり違和感を感じると思います。また、アプリの背景全体がインタラクティブであることを示すことにもなりますが、これは正しくありません。コンテキストメニューのみが操作可能であり、背景をタップすると閉じます。

1: 背景をぼかす、2: ぼかされていないと違和感がある

モーションの振付

私の考えでは、振付とは構造化されたシーケンスで何かが起こるときに意図的に編成することです。「フレームを汚す」とモーションの振付の間には微妙な類似点があると思います。どちらの場合も高いレベルでは複数の楽器を重ねて音に変化をつけるのと同じように、物語にさらなるレイヤーを加えようとしています。アニメーションのコンテキストでは、わたし達の楽器は時間と人工的な遅延であり、自然界に見られる動きに忠実な方法で活用されます。木の葉がすべて同時に不協和音のコンサートで動くのを見ることはめったにないということです。

優れたモーションの振付の例としては、iOSのホーム画面で下にスワイプした際に見ることができます。下にスワイプしてキーフレーム付きのアニメーションをトリガーすることでしょう。

iOSのホーム画面で下にスワイプ

このモーションを段階的に見てみると、そのニュアンスが明らかになります。

4つの段階に分解

1の段階ではホーム画面の1行目のアプリとSiriの提案は画面上で同じスペースを占めているため、4つのSiriの提案をきれいに表示する前に、ホーム画面のレイヤーをぼかす必要があります。

2の段階ではSiriの提案を直線的に表示すると、視覚的に奇妙なレイヤーの状況になるため、ここでは表示を意図的に遅らせています。

1, 2の段階

3の段階では、検索に入力を遷移させ、キーボードを完全に拡大することなく、さりげなく表示します。キーボードのポップアップが遅れているのはデザインがユーザーを誘導しようとしている可能性のあるSiriの提案と認知的に競合しないようにするためだと推測しています。

4の段階では、下にスワイプしているため、ジェスチャの発信元である可能性が高い画面上部に即時のフィードバックを表示するのも理にかなっています。ジェスチャが終わると、アニメーションは最終状態に達し、タッチを離すのと連動してキーボードが拡張されます。

3, 4の段階

スワイプする代わりに、ホーム画面のフッタにある検索ボタンをタップして同じオーバーレイを起動することもできます。

ホーム画面のフッタにある検索ボタンをタップ

興味深いことに、この場合は振付が逆になっています。検索ボタンをタップすると、1のようにポイントはすぐに入力に遷移し、2のようにごくわずかな遅れでSiriが提案するアプリが表示されます。

ここでもインターフェイスがユーザーの操作を理解したことをすぐに伝えるために、トリガー位置（検索ボタン）の近くでの遷移を優先することは理にかなっています。

検索ボタンをタップすると、振付が逆になる

わずかにずらすアニメーション

海を泳ぐ魚の群れにはその動きやタイミングにわずかな違いがあるにもかかわらず、視覚的に区別がつかないため、魅力的なエフェクトを生み出します。

海を泳ぐ魚の群れ

また、鳥の群れがどのように飛び立つのかを観察すると、自然界全体が必ずしも完全に同期して動いているわけではないことが分かります。

飛び立つ鳥の群れ

UIにも自然界からヒントを得て、兄弟アイテムの動作をずらすことがあります。たとえば、OpenAIはグリッドレイアウトで読み込まれたコンテンツのフェードインをずらしています。その結果、UIが遅く感じることはありません。むしろ、要素が不規則に表示されることで、動きに深みが生まれます。ユーザーはページがスクロールされたかどうか、スクリーン上で新しいアイテムがいくつ更新されたか疑問に思うことになります。

OpenAIのグリッドレイアウト

iPhoneでロック解除のインタラクションを観察すると、ホーム画面のアプリも移動がずれていることに気がつくと思います。ここでのずれは基本的なスワイプを立体的で誇張した感じにすることでロック解除のジェスチャーを増幅させ、操作した結果を満足させます。ホーム画面はiOSにとってリビングルームのようなもので、デバイスをセットアップした際に最初に触れる場所であるため、アニメーションの斬新さを伝える絶好の瞬間です。

iPhoneでロック解除

iPhoneの上からスワイプするコントロールセンターも、各アイテムをわずかにずらしてパネルを反応させています。こうすることで、有機的なラバーバンディングのフィードバックを提供します。

iPhoneのコントロールセンター

アフォーダンスを示す

今度はiPadOSを見てましょう。
iPadOSがアニメーション化に特に力を入れているのが、Dockです。たとえば、ホームで右にスワイプすると、Dockがスライドしてフルスクリーンのオーバーレイが表示されます。Dockはホームとは違いぼやけません。不透明度を維持したままスクリーン外にスライドさせることで、インタラクティブ性が維持され、スワイプジェスチャで戻せることが伝わります。

iPadOSのDock

Appleは、動きによってインターフェイスの奥行きをさりげなく伝え、インターフェイスが積み重ねられたレイヤーで構成されているというメタファーを強調しています。確かに、スライドを避けてDockをそのままにしてもよかったような気がしますが、Dockはサイドバーの上に重なっているため、邪魔にならないように移動させることで、スワイプしたサーフェスとインタラクとしようとするユーザーの意図を尊重するものです。

Dockにスライドのアニメーションがないのは、その方がかわいいからだと確認できます。Dockはサイドバーと同様にフルスクリーンのオーバーレイであるコントロールセンターを表示しながら、別のレイヤーは表示しません。代わりに、ホーム画面とともにぼかされ、ホームバーが上のレイヤーとして表示され、閉じることができることを示します。