見出し画像

Reflective UIについての雑記

Yusui Hoshino

Reflective UIについて考えをまとめていたら長くなったので、noteにまとめてみた。先に白状すると、技術的側面は1mmもない。

深夜テンションで思いつきで書いているので、ところどころ定義が間違っていても許して欲しい。

Reflective UIとは？

こちらの神記事をどうぞ。

なぜ今か？

Reflective UIが最近考案された理由としては3つあると思っている。

  • 技術発展によって実装のハードルが下がった（分野外なので略）

  • 概念モデルが追いついた

  • 逆張り

- 理由2：概念モデルが追いついた

現代では多くの人がスマホを持つようになり、デジタルのUIも珍しい物ではなくなってきた。つまり、挑戦的なUIを作っても、今のユーザーは理解できる可能性が高い。

例えば背面を抜くようなReflective UIであっても、それが四角形でテキストが中央にあれば、問題なくボタンだと認識できる。

- 理由3：逆張り

あるスタイルが流行し、似たり寄ったりなデザインで溢れかえった時代には、独自性を求めて逆張りのスタイルが考案される。

厳密には間違っているが、これまでも大きくリアル思考（複雑）、非リアル思考（シンプル）なスタイルが繰り返し考案されてきた。

  • リアルにするぞ：スキュモーフィズム

  • リアルじゃなくするぞ：フラットデザイン

  • 部分的にリアルで部分的にリアルじゃなくするぞ：Material 2

  • 現在

    • リアルじゃなくするぞ

      • Material 3（Shadowが部分的になくなったという点で）

      • オーロラUI？

    • リアルにするぞ

      • Reflective

      • グラスモーフィズム

また、単にiOSのアプリロゴをとっても、リアルと非リアルを行ったり来たりしているのが分かる。

この流れを踏まえ、またこれまでのスタイルと被らないものを考えようとすると、これからは超リアル思考 or 超非リアル 思考の両極端になる気がする。

その超リアル思考の1つとしてReflective UIが考えだされたのだと思う。

スキュモーフィズムか？

結果的には同じだが、見方によっては異なる。まず、スキュモーフィズムを以下の定義として話す。

他の物質に似せるために行うデザインや装飾のことで、（中略）
ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。

Goodpatch Blog ( https://goodpatch.com/blog/skeuomorphism-and-flat-design )


ここで考えたいのは現代において、デジタルのボタンはどこまで「ユーザーにとって馴染みがあるか」という点である。私は多くの人にとって十分馴染みがあるものだと考えている。

したがって、Reflective UIが現代においてのスキュモーフィズムの考えに基づいて作られたか？と言われれば少し違う気がする。

スキュモーフィズムは言い方を悪くすれば、現実にあるものから本質を抜き出した劣化版である。現実の物理現象の特徴や形をメタファーとして利用したり、次元を下げたり、ローポリ化して使いやすくした。

それに対して近年のReflective UIやグラスモーフィズムは、ほぼ完璧に現実である。さらに言えば、現実より現実である。日常ではあそこまで綺麗な光沢の金属も、あそこまで綺麗なすりガラスも見る機会はない。

Reflective UIの特徴3つ

特徴1. 邪魔にならない光沢アニメーション

Reflective UIのうまい点は、常時アニメーションの要素を持ちながら、UIとして邪魔にならないという点である。

例えばボタンにアニメーションを付けるのは意外と問題点が多い。

  • 色をアニメーション

    • → テキストが読みずらい、色の雰囲気が変わる、ボタンの優先順位が変わる

  • 大きさをアニメーション

    • → ボタンの優先順位が変わる、タップの印象を誤って与える

  • 輪郭をアニメーション

    • → 注意を不必要に引く

この点、Reflective UIは大まかには色、大きさ、輪郭は変化しない。さらに、光沢アニメーションは現実世界にもありふれた表現であるため、常時アニメーションの鬱陶しさを解決できている。

（少しReflective UIから離れるが、Jagatという位置情報共有アプリを紹介したい。このアプリのボタンにはノイズアニメーションがかかっている。小さすぎるノイズを使うことで、不必要に注意を引くことなく、ユニークな質感を作り出すことに成功している。）

特徴2：間接的インタラクティブ

Reflective UIは間接的にインタラクティブな体験を作り出せるという点がユニークである。

まず、インタラクティブの定義が広すぎるので、2つに分けて考えようと思う。予想的と非予想的である。

  • 予想的インタラクティブ

    • ユーザーが予想したことが明確に実現される

    • 例）トンカチを振る、ボタンを押したら沈む、カーソルを回すとスクロールする

  • 非予想的インタラクティブ

    • ユーザーの予想外の場面で、ユーザーの動きに応じてアクションが起こる

    • 例）ホバーするとボタンの色が変わる、カーソル座標で要素が変化する

非予想的インタラクティブは必須のアクションでないことが多いため、エンタメ目的で使われることも多い。例えばWebサイトではボタンを押したときより、ホバーした時のアニメーションの方が表現に富んでいることが多い。

また、ユーザーの動きに応じて発生するため、自動再生のアニメーションほど煩わしくなく、単調でもない。むしろ操作の爽快感を感じられる。

問題はこれをスマホをで体験する手段が少ないことである。スマホにはカーソルがないため、ユーザーが画面をタップするという直接的なインタラクティブのきっかけしか認識できない。

このような環境において、Reflective UIは非予測的インタラクティブの1つの答えだと思う。画面の位置、回転によって光沢が動くが、それはユーザーが予想したものでも、必須の動きでもない。だからこそワクワクを感じられる、ずっと見ていられるほど魅力的なのだと思う。

特徴3：アプリ世界の拡張

これまでのアプリはディスプレイの中に独立して世界観を作っている感覚が強かった。なぜならUIに現実の情報を全く含んでいなかったからである。現実が暗くても明るくても、ディスプレイを逆さにしても、スマホをぶん投げても、（OSとしては調整が入るが、）スマホの中の世界は全く動じない。

それに対して、Reflective UIの場合はリアル世界の情報を含んでいるため、アプリの世界を現実に拡張していると言える。

ここで拡張と没入のイメージの違いについて考えると次のような違いがある。

  • 拡張

    • アプリの要素が現実の影響を受ける

    • 意識はアプリ内と現実

    • 例）Reflective UI、現在地の天気によって背景の天気アニメーションが変化する天気予報サプリ

  • 没入

    • アプリの世界が現実に近くなる

    • 意識はアプリの中

    • 例）映画館、VR

もっと言えば、アプリを拡張すると意識が現実に少し向きやすくなるので、アナログな物に近づくる。根底の考えは異なるが、結果的にはタンジブルUIでいう「実体感」みたいなもであり、見栄えだけのOUIの側面と近い気がする。

最後に

めでたく朝5時です。
おやすみなさい


Adobe税を払うために使わせていただきます