Claude Code の UIデザインスキルと選択疲れ — 9.5 億通りに、輪郭を引く

Claude Code のデザインスキル ui-ux-pro-max は、配色も書体も合わせると 9.5 億通り。デザインが怖いのは選択肢が多いからではなく、その輪郭が見えないからだ。見本帳と調合台、ふたつの道具で 9.5 億に線を引いてみた記録です。

ある日、デザインの辞書が手元に来た

きっかけは、Claude Code で使えるスキルを物色していたときのことでした。

気になったのは ui-ux-pro-max という、名前からしていかにも盛ってある一本です。正直に言うと、中を覗いてみるまで「UI/UX を PRO MAX する」とはどういうことなのか、具体的な像が 1 ミリも結ばなかった。このスキルに何か頼むと、何色で、どういう書体で、どういう骨格のデザインが返ってくるのか、まったく想像がつかない。

ドキュメントを開けてみると、このスキルはデザインを5つの軸で決めていました。

  • Product Type（どんな種類のプロダクトか）
  • UI Style（ミニマル／ブルータリズム／グラスモーフィズムなどの様式）
  • Color Palette（配色）
  • LP Pattern（ランディングページの骨格）
  • Typography（書体の組み合わせ）

それぞれに用意されている選択肢の数は、順に 96、67、96、27、57。思ったより具体的で、思ったより多い。名前のマックス感は、どうやら数字の圧で来るタイプでした。

96 × 67 × 96 × 27 × 57 — 数字が怖くなる前に、遊ぶ

5 軸から 1 つずつ選ぶと、理論上のデザインは 96 × 67 × 96 × 27 × 57 ≈ 9.5 億通り になります。

この数字を見た瞬間、少しぞっとしました。選択肢は多いほど自由なのではなくて、多いほど麻痺に近づいていく、というあの感覚です。Iyengar と Lepper がスーパーのジャム棚でやった例の実験 (2000) — 24 種類並べた棚よりも 6 種類の棚のほうが売れる、というやつ — を、画面で浴びている気分でした。

ただ、9.5 億が怖いのは、それが「見えていない」ままだからであって、見える状態にしてしまえば、少なくとも何分の一かは触れるはずでした。

そこで欲しくなったのが、2 つの道具です。

  • 軸ごとに選択肢を並べて、選ぶ前に眺めるための辞書
  • 5 軸から 1 つずつ選んで、組み合わせた結果を見るための調合台

「辞書（Dictionary）」と「調合台（Composer）」。この 2 つさえあれば、9.5 億は少なくとも「数え切れない無限」ではなくて、「僕が今のところ見ていない残り」くらいのサイズに縮む気がしました。

Composer と Dictionary — 見本帳と調合台を、手で作ってみる

作ったのはこれです。 https://github.com/longdrift/uipro-demo ライブデモ（index） スタック: 静的 HTML + JavaScript + Google Fonts 3 書体（Fraunces / Inter / JetBrains Mono）。ビルドステップなし。

Dictionary — 343 枚の見本帳

軸ごとのカード枚数: Products 96、UI Styles 67、Colors 96、LP Patterns 27、Typography 57。合計 343 枚。

全部同じサイズのカードで、タブで軸を往復する。決める前に、まず眺めるためだけの棚です。 Dictionary（見本帳）を開く

Composer — 5 枠の調合台

  • ピッカーを 5 つ埋める
  • Render を押す
  • LP が 1 枚立ち上がる

Composer（調合台）を開く

ふたつの部屋だけの入口

入口（トップページ）も、道具に合わせて作り直しました。

Before は、ヒーロー／特徴／CTA／ジャーナルが積み重なった、スクロール必須・装飾アニメあり・マーケ調のヘッドコピーの 1 枚。After は、2 枚のカードと「Compose, or look around.」の一行だけ、スクロールも装飾もなし。

Before は、ランディングとしては綺麗でも、インデックスとしての仕事を何ひとつしていない 1 枚でした。Composer と Dictionary を試したい人に、上から下までスクロールさせるのは、ただの遠回りです。

だから削りました。このサイトには 2 部屋しかないので、好きな方に入ってください — そうとだけ言うための入口です。

マーケサイトの構造をそのまま入口に流用してはダメな場面、というのは、世の中に地味に多いのだと思います。

輪郭を引くとは、入口を作ること

ここまでを振り返ってみると、やっていたことは案外ひとつの動きでした。

9.5 億通りが怖かったのは、それが「見えない」ままだったからで、見本帳に並べれば「眺めるだけの在庫」になり、調合台を通せば「いま試している 1 枚」になりました。入口をハブに作り替えたのも、たぶん同じ動機です。見せたいものを、まず見える場所に置き直す。

デザインが怖くなるのは、選択肢が多いときではなくて、選択肢の輪郭が見えないとき。輪郭を引くというのは、結局、入口を作ることだったのだと思います。

時間を、ゆっくりに。 — longdrift

関連書籍