分析結果を一覧ページ化する

トークン・コンポーネント・ブロックが揃ったので、最後にこれらを 1つのページにまとめて可視化 します。

最初に用意していたプロンプトは「すごいしっかりした、コンポーネント定義までやる」内容でした。でも、よく見ると 分析確認には過剰 です。再利用のための実装定義まで入っている。

ここで便利なのが、AIに 「最小限のやり方は何ですか？」と問う やり方です。

AIに「最小限のやり方」を問う

動画ではこんなふうに聞いています。

「私はUIの分析が欲しいだけで、コンポーネントの要素の定義とかは求めていない。このプロンプトは分析に特化した最小限の内容になっていますか？」

返ってきたのは「鋭い質問です。このプロンプトは分析確認には過剰です」。 原プロンプトは「他で使い回す実装が主目的」だったので、分析だけなら 静的に並べて見せるだけでいい という結論に。

ここから学べるのは、AIへの指示で やりたいことをちゃんと伝える こと。「目的を果たすための最小限のやり方は？」と問えば、AIは過剰な提案を削って必要なところだけに絞ってくれる。

トークンも時間も節約できるし、出力もシンプルになる。これも今シリーズの大事な原則のひとつです。

一覧ページの見方

完成した分析ページには、カラー、スペーシング、レディオス、リング、シャドウ、タイポグラフィといった トークン が並び、ロゴやボタンなどの コンポーネント、ヒーローヘッダーやテーブルなどの ブロック が一覧で書き出されます。

ただし、これだけ見ても「で、これがどこで使われているの？」が分かりません。

元のUIと並べて見る

実際に活用するときは、左に分析結果、右に元のUI を並べて見るのがおすすめです。 動画でもこの並べ方をしながら、「タイポグラフィのボディはこの普通の文章の部分かな？多分14pxが当たってる」と確認していきます。

タイポ・サイズの確認例

タイポグラフィを例にすると、こんな見方ができます。

• **Body**：通常の説明文章、14px
• **Display / Heading**：ページタイトル、34px（32や4の倍数で揃えたほうが自然そう）
• **Caption Num**：28pxあたり、ちょっと怪しい
• **Micro**：アバターの名前など、10px

並べて確認すると「タイトル系にはこれくらい」「本文にはこれくらい」のスケール感が体に入ります。これが 次に自分でUIを作るときの肌感 になる。

データがあるので、「なぜここの余白はこのくらい空いてるの？」のような質問をチャットで投げれば、AIから具体的な示唆も拾えます。

視点を持つために分解する

ここまでで「UI成り立っている要素」がトークン・コンポーネント・ブロックに分解されました。

注意点として、これを 毎回やるべき という話ではないです。本質は 要素ごとに見る視点を持つ こと。 一度この分解作業を経験すると、世の中のいろんなUIを「これってトークンレベルで言うと…」「このブロックは…」と分解的に見られるようになります。

世の中のUIを分析する目、盗む目を持つ。これが分解作業の最終的な狙いです。

次回予告

スタイリング編はこれで一区切りです。次のクエストでは、ここで分解した結果を Figmaに持ち込む 工程に進みます。AIが理解しやすい形に整理しておくと、Figmaへの反映もAIに任せられるようになります。