世界を動かす技術を、日本語で。

UIの未来はカラフルで立体的です

概要

  • Flat design の時代は終焉を迎え、新たな カラフルで立体的なデザイン が主流へ
  • Airbnbの 大規模リデザイン がこの流れの象徴
  • 新しいデザイン潮流を表す言葉として「 Diamorph」を提案
  • AIの進化 がデザイン制作のハードルを大幅に低減
  • 今後は 表現豊かで遊び心あるUI が増加する見込み

フラットデザインの終焉と新時代の到来

  • Flat design の時代は終わり、 カラフルで立体的なビジュアル が新たな潮流
  • Airbnbの Brian Chesky CEO による大規模リデザインが象徴的事例
  • 3Dアイコンアニメーション、温かみのある質感が特徴
  • パラダイムシフトの瞬間は後から気づくことが多いが、今まさにその時
  • iOS 7 以来の大きな変革期

新たなデザイン用語「Diamorph」の提案

  • Skeuomorphism(スキューモーフィズム) という用語への違和感
    • デジタルが物理的な概念を借用する意味だが、深みや質感を指すには不十分
  • 新しい言葉「 Diamorph」を提唱
    • 深度・光・質感・階層性 を重視したデザイン
    • 現実模倣ではなく、 デジタルネイティブ な表現
    • 遊び心表現力 を重視
  • Diamorphism :デジタルならではの意図的な立体感やキャラクター性を持つ傾向

デザイン潮流の変化とAIの役割

  • Big Surアイコン や多様な「-phism」実験、リッチなライティングなどが新潮流の兆し
  • WWDC でもAppleが新たな素材感を導入する可能性
  • AI が新しいデザインパラダイムの普及を加速
    • Airbnbのリデザイン後、 AI生成の立体的なアイコン がネット上で急増
    • かつては高度なスキルが必要だったが、今は AIプロンプト で簡単に作成可能
  • Photoshop などのツールで微調整すれば、実用レベルのアイコン作成が可能

AIとデザインの未来

  • AI の進化でデザインの敷居が低下
    • 素材や光、色彩はAIが得意
    • 視点や比率、一貫性は人間のチェックが依然重要
  • AIをツール として活用し、最終的な仕上げやセンスはデザイナーの役割
  • コアデザインスキル の重要性は今後も不変
    • 構図、光、奥行き、テイストなどの基本はAI時代でも必須

新しいビジュアル言語の夜明け

  • Diamorphic design は懐古主義ではなく、 デジタル時代の前進
  • AIの普及 で多様な人がデザインに参加可能
  • インターフェースが 個性的で楽しいもの に変化
  • 未来はカラフルで立体的、すでにその変化は始まっている

スポンサー募集

  • デザイン志向の読者 (約4万人)向けニュースレターのスポンサーを募集中
  • 製品・アプリ・サービスを 画像・テキスト・明確な誘導ボタン で紹介可能
  • スポンサー希望者 はぜひご連絡を

Hackerたちの意見

古いものがまた新しくなったね。ファッション業界はこれを何十年も前から知ってるけど、テック業界もやっと追いついてきた。次に「次元的」デザインの後に来るのは、ラディカルなミニマリズムだよ。「余計なものを全部取り除いたら、残るのは真実だけ、それ以上でもそれ以下でもない」これで2030年のデザイントレンドのキャッチフレーズを書いたよ。

でも、カレンダーアプリのUIにステッチ入りのレザーがあったら、もっと使いやすくなるのに。

他に何がある?

「デザインの観点で真実とされていたものが、自己満足と平均への窮屈な後退に取って代わられた。私たちが提供するのは代替案であり、スキルや細部へのこだわり、人間中心のディテール志向を大胆に表現した複雑なデザインだ。これは、私たちの日常に溢れるAIシステムには真似できないものだ」これが2035年のビジョンだね。

Fluxboxが復活するの?

ミニマリズムってもう10年以上も主流のトレンドじゃない?戻ってくるには5年じゃ足りないと思うし、そもそも去るのかどうかも怪しい。

さっき、オンラインバンキングのUIで「転送」ボタンをクリックしたんだけど、あのボタンがめっちゃ綺麗で、フォントも魅力的だし、背景のグラデーションもいい感じなんだよね。でも、クリックしても押したっていう表示が全然出ないから、モーダルスピナーが現れるのを待たなきゃいけないんだ。個人的には、最高のUIはWindows 89/2000だと思ってる。シンプルでモノクロだけど、クリックする場所や期待できることが分かる程度の立体感があったしね。それに、キーボードショートカットも大事。

ループじゃなくて、スパイラルなんだよね。各アイデアは前のアイデアに対して(部分的な)反応を引き起こす。例えば、フラットなモノクロアイコンが出てきたのは、以前のUIがメインコンテンツを圧倒してたからなんだよね。だから、アイコンの認識性を犠牲にして、UI全体の階層を良くしたんだ。今、その問題は解決したから、デザイナーたちは以前の目標を犠牲にせずに認識しやすいアイコンを再導入しようとしてる。AirBnBのアプリでは、忙しいアイコンはメインの焦点の時だけ使われてるよ。補助的なアイコンはフラットなまま。

2000年代が進んでると思ってたけど、実際はただの流行のサイクルの一部だったって気づくの、めっちゃ変な感じ。

グラフィックデザインの人たちに美的感覚で決めさせるのはやめてほしい。実際に使いやすさに関わっている人たちからのデータがあるんだから、UIはどう作るべきかを考えるべきだよ。

そうなんだけど、その使いやすさを重視する人たちは、最低限の人に合わせたインターフェースをデザインする傾向があるんだよね。これがしばしば大失敗に終わる。最低限の人は「使える」インターフェースすらナビゲートできないことが多いから。一方で、そのグループに入ってない人はほとんど幼児扱いされる感じ。24ポイントのフォントでスプレッドシートの行が10行しか表示されないようなアクセスしやすいインターフェースよりも、私には非常に密度の高いUIの方がいいよ。視力が低い人のことも考えてほしい!

美的トレンドがUIに影響を与えるのは避けられないし、それ自体は悪くないと思う。ただ、ひどいのは(また起きてるけど…)新しいトレンドが実際により良いUXだっていう理由を作り出す人がいること。実際には少しの革新とたくさんの新しさがあるだけなのに。自分の経験から言うと、もっと多くの人が「もっと良い」見た目のUIが欲しいって正直に言えば、プロダクトやUXはもっと明確になると思う。

毎日、試したオープンソースやフリーソフトが古すぎてUIがダサいって文句を言ってるコメントがたくさんあるけど、現代的なUIの例を出す人は見たことない。「でもUIがひどい!」って言うけど、グラフィックデザイナーが必要なんじゃないかな。

美的なユーザーインターフェースの方が、使いやすさが高いっていうデータもあるから、両方の関係があるんだよね。

グラフィック関係の人たちは、パソコンが主流になってからずっとこういうことを決めてきたよ。これを説教するには、もう30年遅いんじゃない?

そのハードデータ、シェアしてくれない?

新しい考えではないけど、こういう状況で集団思考がどれだけ影響するかにはいつも驚かされる。Airbnbが新しいデザインを発表したけど、みんなそれが未来だと受け入れちゃったの?…何それ?トレンドが嫌いなわけじゃないけど、期待外れだな。Airbnbのサイトを開いてみたけど…新しいアイコンがあるだけ。実際に触ってるUIは全然変わってないし。数日前のGoogleのマテリアルUIの方がずっと面白かった。

なんか変な感じがするんだけど、アイコンが4つ変わっただけに見えるけど、実際には2000年代初頭にあった3Dアイコンをほこりを払って使ってるだけなんじゃないかな?あんまり納得できない。

確実に読み込みが遅くて、スクロールがカクカクしてる。

それって、パフォーマンス重視のデザインチームのナンセンスだよね。

うん、俺も新しいMaterial UI好きだよ。微妙な物理エフェクトがすごくいい感じ。

ああ、そうだね、今のところ見たアイコンは合計で5つだけど、たくさんのフラットアイコンと混ざってる。しかもめっちゃダサい、2000年代初頭の悪夢みたいだ。

新しいアイコン、マジでダサいし、シムズ1からパクったみたいだね。デザイナーが会社での存在意義を正当化しようとしてるだけだよ。

Airbnbが新しいデザインを発表したけど、みんなそれが未来だって受け入れちゃったの? 一人のニュースレターに過剰反応しない方がいいよ。この記事を読んで感じたのは、次のトレンドを予測しようとしてる人がいるってこと。彼はそれが次のトレンドだって主張する証拠を何も挙げてないし、ただ自分がその名前を付けることで影響力を持ちたいだけなんだよね。あと、彼はこのスタイルのアイコンを何十年もデザインしてきたって言ってるけど、懐疑的な人はここに願望的な考えがあるんじゃないかって思うかも。確かなことは、プロのデザイナーとして、こんなアイコンスタイルを使うようにというメモは一切受け取ってないってこと。もし受け取ったら教えるよ。

Airbnbのサイトを開いたら…新しいアイコンが出てきた。でも、実際に触ってるUIは全く変わってないよ。過小評価しないで。デスクトップで最新のゲーミングGPUを使っても動きがクソみたいだし、ギガビット接続で5年かかって読み込むし。位置情報も間違ってるし、母国語から機械翻訳された内容になってるし。

シーッ、企業はまだデザイナーが集団でループにいることを理解してないんだ。そうじゃなきゃ、ほとんどの時間何もしないからね。アイコンを変えたり、ボタンのサイズを大きくしたり小さくしたり、グラデーションを追加したり削除したりすることが、私たちを忙しくさせてるんだ。ほとんどの会社では、私たちが始めた時点で既にデザインシステムがあるから。

うーん、個人的にはこれ、古いNeXTstepやそのクローンにしか見えない…弾痕から手が伸びてるアイコンのフラッシュバックがあるんだけど、あれ何だったっけ? とにかく、Airbnbのウェブサイトをチェックしたら、Androidでは本当に場違いに見える。クソみたいなiOSポートの雰囲気が漂ってる。

この記事はちょっとふわふわしてて大げさだけど、全体的な感情には共感するな。ほとんどの製品のUIは、少なくとも少しは楽しいものであるべきだと思う。「楽しい」UI/UXは今やクリシェになってるけど、使っているソフトウェアにクラフトや意図の要素が見えると本当に嬉しいし、こういう細かいアイコンがそれをうまく実現してるんだよね!

僕が思った一番のポイントは、今流行りのUIデザインじゃなくて、デザインにおけるAIツールの扱いだね。>「AIはただのツールとして扱ってる。最終結果へのショートカットじゃないから、まだまだクラフトやセンス、気遣いの余地がある。」この意見には心から同意だわ。

美しさや楽しさは使いやすさの次に来るべきだよね。「楽しい」ものを作ることがデザインを使いにくくするなら、それは避けるべきだと思う。もちろん、企業はデザインで自分たちのイメージを定義する必要があるけど、それは悪いデザインの言い訳にはならないよ。

AirBnBのリデザインはデザイントレンドが変わってるっていう指標にはならないよ。アプリの大部分はミニマルで「フラット」なままだし、3Dの要素は不均一に混ざってる。アプリは完全にミニマリストに戻る方が、完全に3Dデザイン言語に移行するより簡単だと思う。フラットなUIの中でも、アプリアイコンとして3Dアイコンはずっと前から存在してるし、一部のプラットフォームではフラットアイコンとUIの両方があった時期もある。ある意味では、既存の使い方としてサブアプリアイコンを採用してるんだよね。一番変なのは、光沢のある「新しい」タグで、UIの中で光沢があるのはそれだけ。フラットなタグやボタンと混ざってるのは正直混乱するし、実際のボタンよりボタンっぽく見える。> 2000年代初頭には、こういうUIデザインは高いスキルが必要だった。ライティングやマテリアル、深さをマスターするのに何年もかかった。でも今は?そのレベルのクラフトはプロンプト一つでできちゃう。どんなデザインスタイルでもマスターするには時間がかかるし、スキルの上限も特に変わらないと思う。AIがフラットなアイコンでも3Dアイコンでも一貫性を持てるかどうか、かなり疑わしい。

うん、アイコンスタイルはフラットデザインについて気にしてる部分じゃないんだ。問題は、インタラクティブな要素が全く視覚的に示されないことなんだよね。ボタンやハイパーテキストに見えないクリック可能なアイテムは、ページの他の部分と同じに見えちゃうし、スクロールバーや他の視覚的な手がかりがないスクロール可能な領域も、コンテンツが下や右にもっとあるってことが分からない。選択されているウィンドウの表示も、タイトルが薄いグレーから中間のグレーに変わるだけなんだ。

フラットなシルエットアイコンは、フラットなテキストと同じように、もっと多様な文脈で使えるんだ。確かに、3Dのアイコンは表現力があるけど、それにはちゃんとした舞台が必要で、そうじゃないと小さく見えたり、読みにくかったり、棚に並んでると密集しすぎて見えるだけなんだよね。マキシマリズムは視覚的に要求が高いし、見た目はクールだけど、その主張が大きすぎて文脈には合わないんだ。多様性は大事だけど、これはAppleがスキューモーフィズムを捨てた時のようなゲームチェンジャーにはならないと思う。

フラットデザインに対する多くの人の問題は、コンテキストの混同だと思う。ボタンとアイコンは同じじゃないし、普通のテキストとリンクも違う。状態を持つボタン(ワードプロセッシングの太字ボタン)と、状態を持たないもの(画像編集のフリップボタン)は、同じように扱うべきじゃない。ミニマリズムが好きかどうかに関わらず、これらは使いやすさに影響を与える制約なんだ。今のデザイナーはこれを避けがちだけどね。

「これはデザインの大きなリブランドを意味するものではない。完全に作られた言葉で、深さや質感、光を取り入れたスタイルの仮タイトルなんだ。現実世界を模倣するのではなく、画面に馴染む何かを作り出すためのもの。表現力豊かで、遊び心がある。」こういう自己満足的な謙虚さが嫌いなんだよね。小さな価値から何かを作り出そうとするような感じ。著者には同意しないよ。Googleのマテリアルテーマがしばらくの間、デファクトスタンダードになってるのは間違いないし、僕はそれが時間とともに「感染」していく様子でしか知らない。

「著者には同意しない。Googleのマテリアルテーマがしばらくの間、デファクトスタンダードになっている。」そうだね、今それがトレンドだよ。著者は、そのトレンドが終わりに近づいている変化を感じているって言ってるだけで、トレンド自体が終わったわけじゃないんだ。FTFA: > 「パラダイムシフトが起こる瞬間を特定するのはいつも難しい。通常、振り返って初めて気づくものだ。」これを「トレンドが終わった」とは読まない。「未来(つまり振り返ったとき)に、これらの出来事が新しいトレンドの始まりとして見られるようになる」と読んでる。彼の立場に同意するかどうかは別として、彼が言ってるのはそういうことだと思う。

まず業界は、才能あるデザイナーをUIビジネスから追い出して、みんなにあのダサいフラットスタイルを押し付けてきた。そして今、彼らはスキューモーフィズムに戻ろうとしていて、残っている人間のデザイナーをAIに置き換えようとしてるんだ。

10年前にフラットデザインが消えてほしかった。驚くほど直感的じゃなくて、ダサいし、スタイルの真逆で、人間にとって反人間的だよね。まだ理解できない抽象的なアイコンがいくつかのアプリやUIにあって、クリックしてみて正解かどうかを祈るしかないんだ。インタラクティブかどうかも、ランダムにタップしないと分からないことが多い。コントラストやカラ―コーディングが罪だと決めた誰かのせいで、探してるものが見つからないことが多すぎる。フラットデザインは適切なデザインの原則に反してる。40年後に「伝統に戻る」みたいなクソみたいなことが起こらないことを願うよ。新しい世代が2000年代から2020年代の「クールなクラシックスタイル」に戻るべきだって言い出さないことを願ってる。美しいソフトウェアに囲まれて、老後を迎えたいな。

超スキューモーフィックな未来を楽しみにしてるよ。ARグラスが、アール・ヌーヴォー時代のベルボーイが電報を渡してくれるような通知を届けてくれるんだ。

まだ「業界」がこれを提案しているかどうかは分からないけど、ただこの一人とAirbnbの人だけかもしれないね。

「その醜いフラットスタイルをみんなに押し付けてる」って、実際のところ「醜いフラットスタイル」って言った方が正しいよ。それと、もう一つ嫌いなことは、リストアイテム間に今ある巨大なスペースだね。それのせいで、いくつかのアプリではスクロールドロップダウンメニューが出てくる。そう、彼らはアイテム間のスペースを圧縮するよりも、画面に収まらないメニューをスクロールさせる方がいいみたい。

最近うちであったことを思い出すな。内部で扱ってるのは、Oracle/SAPのごちゃごちゃの上に乗っかってる巨大なクソみたいなものなんだ。ユーザーインターフェースは2001年頃のもので、実際にはほとんど変わってない。MotifとGTK1の中間みたいで、ほんとにひどい。アイコンはクリップアートコレクションからの既製品だし。だから、書き直す必要があって、コンサルタントを雇ったんだ。UI全体がReactを使って書き直されて、既製のフラットデザインが使われた。ローンチから1週間後にユーザー調査を送ったら、ほとんどの回答者がフラットUIに不満を持ってた。だから、すぐに昔のデザインに戻したんだ。今は2001年のものみたいに見える新しいReactアプリがあるけど、誰かフラットなユーザーインターフェースが好きな人いるのかな、それともユーザー調査が壊れてるのかな。

自分は、パーツが簡単に区別できる限り、フラットスタイルのUIの方が好きだな。スキューモーフィックなやつよりね。

これはUXよりも広い話だね。多くのトレンドはサイクルを持ってるから、スキニージーンズは捨てない方がいいよ!

HNのこの会話にいる人たちは、まだ「スキューモーフィズム」と「フラット」の二項対立で考えてるみたいだけど、スキューモーフィズムは実世界に強く結びついた物理的なメタファーを持つUIにだけ使うべきだと思う。それは限られたインターフェースのセットで、実際にはあまり人気がなかった。復活する可能性も低いし、そもそも復活と呼べるほど人気だったかも疑わしい。スキューモーフィックなUIとフラットなUIは、もっと広いデザイン空間の中の特定のポイント(または小さな領域)に過ぎないから、これらの二つのポイントの間を循環する義務があるかのように話すべきじゃない。そうすると自己成就的な予言になっちゃうからね。これら二つ以外にも、たくさんの選択肢があるよ。

アイコンはフラットデザインの問題の一部に過ぎないよ。これらのアイコンの周りにはボタンの境界線や明確なタッチ可能なセクションが見当たらないし。

良いUIとUXは、どのアイコンを使うかじゃなくて、ユーザーがアプリを通じて問題をどう考えているかに合わせて旅を作ることなんだ。うちのチームはアイコンを選ぶのにすごく時間をかけていて、他のアプリのデザインパターンに合わせてる(うんざり…)から、結局、ユーザーがアプリを使う一番の理由を優先しないUXになっちゃったんだよね。

これだね。そして付け加えたいのは、時には一番いいアイコンはアルファベットっていう小さなキャラクターたちだってこと。組み合わせるとすごく力強くて、「言葉」って呼ばれるんだ。

アイコンの選択は確かに重要だよね。フラットでモノクロのアイコンは本当にゴミだと思う。特に悪い例は、Confluenceでページを編集してる時で、例えば塗りつぶしのボタンがあるはずなのに、どのアイコンも同じに見えるから見つけられないんだよね。

デザイナーってほんとに時代遅れだよね。Comic Sansに対する批判なんてその一例だし。だんだん、デザイナーは雇われるべきじゃなくて、プロジェクトごとに相談されるべきだって思うようになってきた。8時間も座ってると、何かしら変えたくなっちゃうんだよね。人間はそんなに早く変化に慣れないし、デザインに落ち着いて使い方のパターンを確立するのには時間がかかるんだ。

新しいThinkPadを買う人みたいなこと言ってるね。「なんでカメラの出っ張りを追加したの?ディスプレイの蓋から出てるし、誰も求めてないよ」って続いて、「なんでベースを平らにしたのに、丸いパームレストをなくしたの?鋭い角を追加してるし」って。「なんでディスプレイの蓋を開けるためのくぼみをなくしたの?それはデバイスから出っ張ってなかったのに?」って。いいデザインは評価するけど、機能に従わないなら害になるよね。PS: ディスプレイから出っ張ったカメラのある新しいThinkPadにはイライラしてる。みんなカメラの出っ張りが嫌いなんだから。ディスプレイの蓋は広くて、複数のカメラやマイク、センサーを追加するスペースがたくさんあるのに。知ってるけど…この話はソフトウェアのUIについてだよね。変化のための変化は、あまり良くないよ。

いろんなことがある中で、Comic Sansを持ち出すなんて、皮肉な使い方以外の defend が難しいよね。しかも、ディスレクシアに役立つって証拠もないし。もしそうだとしても、アクセシビリティの面でより良い選択肢があるし。デザイナーの友達は何人いるの?彼らが毎日何をしてるか知ってる?会社の規模や製品に関係なく、ただ数字を数えてるっていう先入観は分かるよ。

今のデザイナーは美しさを使いやすさより重視してるよね。「どうやってこれをもっとユーザーフレンドリーにするか」って質問から始めれば、全然違う答えにたどり着くよ。「どうやって他のものと同じように見せつつ、目立たせるか」って聞くとね。美しさはユーザーインターフェースには本質的に価値がないし、常に二次的な関心であるべきだと思う。でも明らかにデザイナーは美しさを使いやすさよりも重視してるから、あらゆるものの再デザインが頻繁に行われてるんだ。使いやすさを気にするなら、再デザインは大きなコストがかかることを知ってるはず。ユーザーのメンタルコネクションを壊すことになるからね。それをすることで何か大きな利益がある場合だけ正当化される。

ほとんどのデザイナーはそんなことしないし、ほとんどの組織で忙しすぎて新しいUIトレンドに無駄に手を出す時間なんてないよ。実際、こういうことはデザイナーじゃないVPやSVPから来ることが多くて、スタッフのデザイナーたちを困らせながら「製品をスパイスアップ」しようとしてるんだ(UXデザイナーと結婚してるから、これよく聞く)。