【翻訳】フラットデザインの次に来るもの(Marcus Fleckner, Bootcamp)

https://bootcamp.uxdesign.cc/what-comes-after-flat-design-ffbdc7022c49bootcamp.uxdesign.cc

スキューモーフィズムからフラットへの進化

進化を続けるデジタルデザイン空間において、ユーザーエクスペリエンスは、技術の進歩やユーザーの期待の変化に適応するデザイン哲学とともに、大きな変貌を遂げてきました。UXデザインの歴史における最も顕著な変化のひとつに、スキューモーフィズムからフラットデザインへの移行があります。この進化は、美的な好みの変化を反映するだけでなく、テクノロジーとの関わり方のより深い変化を体現しています。

スキューモーフィズムとは

2000年代初頭に一世を風靡したデザイン哲学であるスキューモーフィズムは、デジタルインターフェースにおける物理的なオブジェクトのリアルな表現が特徴です。このデザインアプローチは、物理的な世界から馴染みのある視覚的な手がかりを借りて、デジタルインターフェースをユーザーにとってより直感的なものにします。ドン・ノーマンは、スキューモーフィズムを文化的な制約という観点から次のように説明しています。システムとのやりとりは文化を通じてのみ学ばれる。また、ノーマンは「知覚されたアフォーダンス」という造語を考案し、普及させました。これは、ユーザーがオブジェクトの外観から、そのオブジェクトが何を提供し、何を行うのかを理解できるというものです。スキューモーフィズムは、これを容易にします。 ボタン、アイコン、テクスチャなどの要素は、実世界のオブジェクトを模倣しており、直ちに親しみやすさと快適さを感じさせます。

スキューモーフィズムの背景にある理論的根拠は、ユーザーがグラフィカルユーザーインターフェース(GUI)に初めて触れたパーソナルコンピューティングの初期にまで遡ります。現実世界のオブジェクトを再現することで、デザイナーはユーザーが慣れないデジタル環境を簡単にナビゲートできるようにしました。

左の実際のフロッピーディスク(クレジット:Vicenfoto)。右のフロッピーディスクのグラフィック表現(クレジット: Georgiana_Lavinia 作成)。

Appleの初期のiOSバージョンは、スキューモーフィズムデザインの典型的な例です。メモアプリは、罫線と革製の表紙を備えた黄色のリーガルパッドに似ており、カレンダーアプリは伝統的な卓上カレンダーを模倣していました。

2つの異なる時代のAppleのメモアプリ。左は、Appleのアプリデザインで知られるようになったオリジナルのスキューモーフィズムを体現しています。中央は、Appleのデザインがフラットデザインの時代へと向かう中間的なものです。右は、Apple iOSの現代的なメモアプリです。左の画像は次のサイトより:https://ilounge.com/wp-content/uploads/2021/05/244_6.jpg。右の画像は、https://support.apple.com/en-am/118442

スキューモーフィズムの利点と欠点

スキューモーフィズムの主な魅力は、その直感的な操作にあります。現実世界のメタファーを活用することで、スキューモーフィズムのデザインは、デジタルインターフェースを初心者にも使いやすくする、緩やかな学習曲線を提供します。この使いやすさは、新しいテクノロジーの普及に不可欠な信頼性と信頼感を育みます。例えば、見た目も使い心地も実際のメモ帳のようなデジタルメモ帳は、ユーザーがその機能を理解し、効果的に使用することを容易にします。ファイルを削除するためのゴミ箱や保存用のフロッピーディスクなど、実際の物体に似せたアイコンは、その目的を視覚的に即座に理解させる手掛かりとなります。このデザインアプローチは、ユーザーの認知負荷を軽減し、物理的な物体に関する既存の知識をデジタル操作にシームレスに移行することを可能にします。

しかし、スキューモーフィズムには欠点もあります。テクノロジーが進歩し、ユーザーのデジタルリテラシーが高まるにつれ、過度に詳細で現実的なデザインの必要性は低下しました。視覚的に魅力的なスキューモーフィズムの要素は、しばしばごちゃごちゃしたリソース集約型のインターフェースを生み出しました。複雑なテクスチャや詳細なグラフィックはより高い処理能力を必要とし、処理能力の低いデバイスではパフォーマンスに支障をきたす可能性がありました。さらに、インターフェースが複雑になるにつれ、スキューモーフィズムの限界が明らかになってきました。現実世界のメタファーに頼ることで、デザイナーが物理的なオブジェクトを模倣するのではなく、より抽象的または効率的な表現を模索することが妨げられ、創造性や革新性が制限されることがありました。また、スキューモーフィズムの要素を過度に使用すると、視覚的に圧倒的な体験につながり、インターフェースの機能的な側面が審美的な細部に隠れてしまい、ユーザーがタスクに集中しにくくなる可能性もあります。そのため、スキューモーフィズムはデジタルデザインの初期には重要な役割を果たしましたが、その限界により、より合理化され効率的なデザイン哲学が台頭する道筋が整いました。

フラットデザインの台頭

スキューモーフィズムの限界に対応して、ミニマリストの代替案としてフラットデザインが登場し、近年では主要なデザイン哲学として再び台頭しています。

フラットデザインでは、不必要な装飾要素を排除し、シンプルなライン、単色、シンプルなタイポグラフィーを採用しています。このデザイン哲学は、デザインの機能性と効率性から美的な魅力が生まれるというモダニズムの原則「形態は機能に従う」に沿ったものです。フラットデザインとスキューモーフィズムの使用例を視覚的に比較すると、フォルクスワーゲンの歴代のデザインが挙げられます。ロゴがよりスキューモーフィズム的なスタイルに変更されたのは、2000年代初頭になってからのことです。それ以前、そして2019年以降のフォルクスワーゲンのロゴは、シンプルで明快なデザイン(すなわちフラットデザイン)のみを使用しています。

フォルクスワーゲンのロゴの進化。左から右へ;1990年代初頭、2000年~2019年、2019年。画像(左から右へ:https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQEK9g8bmP9BFngbm4wK9W3C6vQLmplFyBZyd2YMyjgRd_7Q4Z0https://www.cleanpng.com/png-car-volkswagen- group-volkswagen-golf-vehicle-volks-6349276/, https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjf0wzC755l3P1KUj4Eh0MJNUIU1GNqfHY_sEaR6pmoa_I0GVn)

マイクロソフトは、Windows Phone 7でメトロデザイン言語を導入し、その後Windows 8でも採用したことで、フラットデザインのパイオニアとなりました。メトロのデザイン言語)は、クロームやシャドウよりもコンテンツに重点を置いており、大胆なタイポグラフィとシンプルなアイコンを使用してユーザーを導きます。

テキスト、画像、その他の幾何学的な素材を排除したMicrosoft Windows 8.1のスタート画面。画像出典:https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTQrz9dcCJRW7bVoOk2rC8tfw1Bav1_z65F6tFszbQwT-AHnSzM

このミニマリズムへのシフトは、アップルのiOS 7によってさらに普及しました。この新しいデザイン言語は、よりフラットなアイコン、明るいカラーパレット、全体的により合理化されたユーザーエクスペリエンスを特徴としています。つまり、スキューモーフィズムのデザイン言語に別れを告げることを意味します。

iOS 7とiOS 6の比較。画像出典:https://cdn.osxdaily.com/wp-content/uploads/2013/06/ios-6-vs-ios-7-homescreens.jpg

フラットデザインの利点

フラットデザインには、その普及に貢献しているいくつかの利点があります。まず、フラットデザインのシンプルさは、視覚的なごちゃごちゃを減らし、重要な要素に焦点を当てることで、ユーザビリティを向上させます。ユーザーはより簡単にインターフェースをナビゲートでき、ユーザー満足度とエンゲージメントの向上につながります。

次に、フラットデザインは、さまざまなデバイスやスクリーンサイズに汎用性が高く、適応しやすいという特徴があります。レスポンシブデザインの台頭により、スマートフォンタブレット、デスクトップで一貫したエクスペリエンスを提供できることが最重要視されるようになりました。フラットデザインのシンプルさは、デバイスに関係なく、インターフェースを明確かつ機能的に保つことを保証します。 さらに、フラットデザインのリソース効率性は、いくら強調しても強調しすぎることはありません。複雑なテクスチャや詳細なグラフィックを必要としないフラットデザインは、処理能力の消費が少なく、ロードも速いため、特にモバイルデバイスではよりスムーズなユーザー体験を実現します。

フラットデザインの先へ

フラットデザインがウェブやアプリのデザインで主流となっている一方で、UXやUIデザインの進化はまだまだ続きます。スキューモーフィズムとフラットデザインの優れた要素を組み合わせた新たな手法が模索され、「ニューモルフィズム(Neumorphism)」のようなトレンドが生まれています。

ニューモルフィズム

ニューモルフィズム(Neumorphism)または「新しい」(neo)スキューモーフィズムは、スキューモーフィズムのリアリズムとフラットデザインのシンプルさを融合させたものです。ニューモルフィズムという用語は、ジェイソン・ケリー(Jason Kelley)氏によって作られました。

ミハル・マレヴィチ(Michal Malewicz)氏の「What's the next UI design trend?」という記事に対するジェイソン・ケリー(Jason Kelley)氏のコメントのスクリーンショット

これは、微妙な影やグラデーションを使用して、ソフトで押し出されたような効果を生み出し、ユーザーを圧倒することなく奥行き感を維持しています。このアプローチは、フラットデザインの厳格なミニマリズムに触覚性と温かみを加えることを目指しています。ニューモルフィズムとは、基本的に三次元空間における光の動きのことです。 ニューモルフィズムについてさらに詳しく知りたい方は、ミハル・マレヴィッチ氏の論文をお読みください:

uxdesign.cc

Appleの適応

Appleはヌモルフィズムに移行していないと主張する人も多くいます。しかし、おそらくそこからインスピレーションを得ているものの、完全にそうしているわけではないでしょう。Appleは、一部のUIやアプリ内のアイコンに逆行する動きを見せました。一部のUIやアイコンにテクスチャや3D感を加えています。

AppleMacOSがBig Sur(Catalinaから)にアップデートされた際、UIとアイコンは大幅に変更されました。これについて、一部では、これがニューモルフィズムのルック&フィールにより近いという意見もあります。

MacOS Catalina(左)とMacOS Big Sur(右)。画像出典:https://i.redd.it/vb7rnjhyryjb1.jpg

Googleマテリアルデザイン

Googleが発表したマテリアルデザインは、物理法則や素材の特性を取り入れることで、フラットデザインをさらに進化させました。レイヤー、シャドウ、レスポンシブアニメーションを使用することで、よりダイナミックで直感的なユーザーエクスペリエンスを実現します。マテリアルデザインは、すべてのデバイスやプラットフォームでシームレスに動作する統一されたビジュアル言語を提供することを目的としています。

Google Material Design 3.

多くの人は、マテリアルデザインを完全に「フラット」なデザインとは考えていません。しかし、フラットデザインからの進化形と捉える方が適切でしょう。フラットデザインから離れる際の次のステップとなるかもしれません。

私たちはどこに向かっているのか?

現在のトレンドやデザイン言語の進化を見ると、フラットデザインの時代はほぼ終わったと言えるでしょう。私個人の意見としては、フラットデザインについては複雑な気持ちです。デザインがよりシンプルになり、ユーザーにとって理解しやすく、ナビゲートしやすくなる点については高く評価しています。しかし、少ないほど良いという考え方は、視覚的な魅力全体を鈍くしてしまう可能性があります。しかし、フラットデザイン後の時代に向かっていることは好ましいと思います。デザインが再び、ごちゃごちゃし過ぎず、ユーザーにとって圧倒的過ぎない程度に、より多くのディテールや深みを持ち始めているという事実です。