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

AIの美学

概要

  • 時代ごと に生まれる新しいデザインイディオムの存在
  • 一部は 流行 で消えるが、他は 定着 し長期的に利用される
  • AI技術 特有のUIパターンや美的感覚の拡大
  • デザイン要素の 他分野 への波及と定着可能性
  • 今後の UI/UX進化 への問いかけ

時代とともに生まれるデザインイディオム

  • 各時代 特有のデザインイディオムの登場
  • 一時的流行 で消えるものと、深く定着するものの二極化
  • ハンバーガーメニュー(≡) の例:モバイル時代の画面制約から普及、今や多くのソフトウェアで定番
  • シンボル としての簡潔さ、「ここにメニューがある」ことを示す役割

AI時代の象徴的UIパターンとその波及

  • AI登場前 のスパークル絵文字(✨)の意味の曖昧さ
  • 現在は AIの象徴 として定着(AI=スパークル、レインボー、ユニコーン)
  • AI特有 のインタラクションパターン
    • ストリーミングテキスト :チャットUIで発展、他分野では限定的な実用性
    • シマー(きらめく)テキスト :AIでは「思考中」表示、他の非同期処理でも利用拡大中

AIアプリに見られる美的傾向とUI特徴

  • 小さなアイコン の多用:AIアプリ特有、Electronアプリで顕著
    • ネイティブアプリ (Apple Finder, Photos, Mail)との比較で明確な違い
    • 小型・細身アイコンが今後の主流になるかは疑問
  • その他の美的特徴
    • ベージュ/クリーム色オレンジ アクセント
    • セリフ体フォント の使用
    • ワックアモールUI (非決定的なUI挙動):トグル操作でUI全体が再描画され、操作性に影響

今後のデザインイディオムの進化と普及

  • AI時代 に生まれる新たな美的感覚やUIパターン
  • どの要素が 一般的なソフトウェア設計 に根付くかは未知数
  • UI/UXの進化 と今後のトレンドへの期待

Hackerたちの意見

例えば、ハンバーガーメニュー(≡)は、画面サイズの制約からモバイルの普及とともに増えてきたよね。そういえば、GitHubはそれをパンケーキの絵文字に変えたんだ。今日の早い段階でのスタックされたプルリクエストの発表に関連してるかも。

それがそうだったんだ。誰かが画像パスを間違えたのかと思ったよ。

どこかに書いてあった?気づいたんだけど、システムの絵文字を使ってるみたいで、パンケーキがシステムによって違うのに気づいたんだ。

いくつかのサイトは「ワッフル」を使ってるね。全部食べ物ってのが変だな。

こういうのって、前のトレンドの延長線上にあるものが多いよね。キラキラしたテキスト効果はスケルトンUIを思い出させるけど、チャットインターフェース用に再利用されてる感じ。デザインはいつも、明確な変化よりも連続的な進化っていうのが基本だよね。

「ゆっくり、そして一気に」という言葉があるよね。

実は、シマー効果が好きなんだ。ほとんどのスピナーよりもこっちの方がいいと思う。エージェントが意図をちゃんと示すように設定されてれば、スピナーや指数関数的に減少するロードバーよりもこっちの方がいいよ。

でも問題は、LLMがデザインを表現するためにもコードを書くから、結果として一貫したデザインが生まれるってこと。そうなると、一般的な平均に揃っちゃうから、繰り返し見かける美学が生まれるんだよね。FigmaでAIツールを作ってたときに感じたことなんだけど、LLMからクリエイティブでユニークな出力を得るのはすごく難しかった。これを避けたいなら、最初に拡散モデルを試してみるのをおすすめするよ。gpt-image-2はすごく優秀なデザイナーだし、OpusやFableは画像をウェブページに変換するのがめちゃくちゃ得意。画像から始めることで、LLMの出力の均一性をかなり回避できるよ。これは私がFigmaを離れて作ろうとしたものだから偏見があるけど、gpt-image-2を使って全体的な見た目や感じをつかむだけでも、デザイン面で大きく差別化できるよ。ここに私が遊んでる画像→ウェブページの出力の例があるよ: https://html.non.io/tarot/ https://html.non.io/neonRamen/

拡散モデルにはどうやってプロンプトを出してるの?この分野の創業者なんだね :)

でも問題は、LLMがデザインを表現するためにもコードを書くから、結果として一貫したデザインが生まれるってこと。そうなると、一般的な平均に揃っちゃうから、繰り返し見かける美学が生まれるんだよね。面白いのは、みんなと同じように見えることが良いUIデザインの定義とされていた時期もあったんだよね。新しいインターフェースを理解するのに役立つから。でも、モバイルアプリが登場してからは、UIデザインは「ブランドを表現する」ことになったりして。

あなたの製品が好きで、試してみようと思ってる。最近「Claude生成のウェブサイトの美学」が嫌になってきたから。でも、$0.13は安すぎるよね。

タロットのために、ベースカラー、粗さ、ノーマルマップを生成した?粗さマップがベースカラーから少しでもずれないようにどうやって確認してるの?

Hacker Newsで議論の続きを見る