Web UI Craft

Web UI Craft は何をしますか？

凡庸なUIはスタイルではありません。それは、誰も決断しなかったすべての選択を埋めるもの、つまりモデルやテンプレート、フレームワークが最も一般的な答えを提供した結果であり、その結果はどのプロダクトにも当てはまる可能性があります。最も美しいサイト（Linear、Vercel、Stripe、Family、Awwwards受賞サイト）は、ほとんど何もデフォルトに委ねません。彼らは小さなシステムを計算し、一つのアイデアにコミットし、機能的な詳細を測定可能な基準にまで高めています。

したがって、私たちの仕事は、決断を下し、それを書き留め、それぞれの決断を対象、ユーザー、または知覚の物理学に結びつけることです。以下の5つのステップを順に実行してください。タスクに応じてスケールを調整してください。単一のボタンには一文のブリーフと簡単な批評で十分であり、ランディングページには完全なプロセスを適用します。

1. 対象を読む

視覚的な選択の前に、以下を確立します。

• 対象: 製品、組織、またはコンテンツが実際に何であるか、それが属する世界（その業界、素材、語彙、人工物）。
• オーディエンス: 誰が訪れるか、彼らが既に何を知っているか、どのデバイスを使う可能性が高いか。
• 主要なジョブ: そのページまたは画面が必ず達成しなければならないこと。他のすべてはこれに従属します。
• 既存の制約: ブランドアセット、既存のデザインシステム、トークン、コンポーネントライブラリ、またはリポジトリ内のフレームワーク。トークンが存在する場合はそれらを使用し、このスキルをその枠組みの中で適用します。確立されたプロダクトに、依頼がない限り新しいアイデンティティを押し付けないでください。

ユーザーから十分な情報が得られなかった場合は、対象から推測し、その前提をブリーフに記載してください。質問のリストを投げかける必要はありません。

2. デザインブリーフを書く

コードを書く前に、レスポンスにコンパクトなブリーフを書いてください。それがデザインです。したがって、他の誰かがそれに基づいて同じものを構築できる程度に具体的でなければなりません。

方向性:    名前付きの美学と、それがこの対象に合う理由（1～2行）
シグネチャ: このページが記憶されるための一つのアイデア、それを体現するヒーローピース、そして
           そのピースがどのように作られるか（提供されたアセット、生成画像、またはコードで構築）
パレット:    ニュートラル（…に傾けた色味）、一つのアクセント（役割）、セマンティックカラー、OKLCH値
タイポグラフィ:  表示用、本文用、モノ用（必要な場合）の各ファミリーと役割、およびそれぞれが対象と共有するもの
           表示タイプがコンポジション内でどのように振る舞うか、スケール比、ボディサイズ
レイアウト:   最初の画面の2～3のオプション。それぞれ一行のコンセプトとASCIIワイヤーフレーム。
           選択されたものとその理由、グリッド、文字数、密度、セクションのリズム
奥行き:      サーフェスがどのように分離するか（トーンステップ、ヘアライン、シャドウ）、光源がどこから来て
           何に当たるか
モーション:   ティア（プロダクトまたはブランド）、シグネチャモーメントとその先頭要素、他に何が動き
           どのくらいの時間動くか、そして意図的に動かないもの
イメージ:     写真、イラスト、3D、プロダクトUI、またはタイプのみ。アートディレクションを一行で
コピー:       このオーディエンスのために書かれたヘッドラインとプライマリアクション。アクションの名前は
           ボタンから確認まで一貫させる
予算:        ページ全体の圧縮スクリプトサイズと、スペクタクルレイヤーが占めるシェア
           （デフォルトで合計365 KiB、スペクタクルがないページで75 KiB）

ブリーフのルール:

• 派生させよ、装飾するな。 各行は「なぜこれが、この対象に必要なのか？」に答える。製品の素材から取ったパレット、その言語圏の書体、その世界で最も特徴的なものから始まるヒーロー。
• 一つのシグネチャ、他はすべて静かに。 Stripeにはグラデーション波、Appleにはスクロールに合わせて切り替わる製品写真、Familyには飛ぶトレイがある。大胆さは一度だけ使え。その周りの抑制こそが、それを際立たせる。
• 抑制は有効な方向性である。 落ち着いた、タイポグラフィ主導の、一つのアクセントを持つモノクロームシステムは、WebGLのヒーローと同じくらい意図的であり、通常はツールやドキュメントにとって正しい選択です。
• 静かであることは、素裸であることではない。 抑制はページが持つアイデアの数を制限するのであって、それぞれのアイデアの豊かさを制限するのではない。シグネチャは、長く見るに値するものであるべきです。この対象のために描かれたイラスト、丁寧に配置された実データ、テクスチャ、真の表示スケールでのタイポグラフィ。食品、文化、消費者向けおよびブランドの対象は、通常、暖かみを伝えるためにイメージやイラストを必要とするため、タイプのみのページにはその理由を明記する必要があります。
• ヒーローピースに労力を注げ。 高い評価を得ているサイトは多くのルールを破りながらも、高級感がある。それは、一つのピースが非常に高い水準で作られているからです。信頼できるデータを持つプロダクト画面、照明が当たったオブジェクト、オリジナルのイラスト。references/artefacts.md を参考に選び、構築してください。灰色のバーが入った角丸ボックスはプロダクトショットではありません。
• タイポグラフィはコンポジションの一部であり、そのための単なるキャリアではない。 表示サイズにおいて、設定そのものがデザインです。ページ内の最小のテキストに対するスケール、ウェイト、幅、ケース、行の折り返し位置、ヘッドラインが何に対して配置されているか。Linearの64pxのヘッドラインと12pxのインターフェーステキストの対比は、その効果の大部分を占めています。
• レイアウトは選択する前に比較せよ。 本当に異なる2～3の最初の画面（画像を移動させただけの1つのレイアウトではない）をスケッチし、対象の主要ジョブに基づいて選択せよ。最初に思い浮かぶレイアウトは、たいていテンプレートである。
• 主張、証拠、アクション。 ほとんどのページには、1つの明確な主張、1つの実際の証拠（製品ビュー、実際の数字、顧客、デモ）、そして1つの主要アクションが必要です。構造はコンテンツに従うべきであり、テンプレートに従うべきではありません。
• アクションには名前を一つ。 「公開」と書かれたボタンは、「保存しました」ではなく「公開しました」という確認を生成する。インターフェースの語彙は、人々がその中を移動する方法です。

方向性やシグネチャを選択する際は references/exemplars.md を、パレット、タイポグラフィ、レイアウト、奥行きを設定する際は references/visual-system.md を、Motion行を書く際は references/interaction.md のモーションセクションを参照してください。

3. ブリーフに挑戦する

構築する前に、それを攻撃してください。

• 交換テスト。 競合他社の名前をこれに置き換えても、誰も気づかないでしょうか？もしそうなら、ブリーフはまだ決断を下していません。
• 選択ごとのテスト。 すべての行について、それがどんなプロダクトにも当てはまるかどうか尋ねてください。もし当てはまるなら、それは以下のビルドシートからの意図的で適切に調整されたデフォルトであるか、または変更されなければなりません。
• 収束テスト。 隣接する対象について書くであろうブリーフを数行でスケッチしてください。同じカテゴリの別のツール、同じ業界の別のメーカー。同じように出力されるすべての行はデフォルトであり、決断ではありません。それを変更し、何が変わったか、なぜ変わったかをブリーフに記述してください。行は、2つの対象が共有する事実（両方の製品がハードウェアである、両方のオーディエンスがコードを読むなど）に基づく場合にのみ残すことができます。その事実を明記してください。
• Tellチェック。 全体的な外観のクラスターを含む references/slop-tells.md と比較してください。あるデフォルトを次に一般的な別のデフォルトに交換しないでください（InterをSpace Groteskに、紫をティールに）。理由がある選択に置き換えてください。

ブリーフを修正し、それから構築してください。

4. 構築する

• トークンを最初に。 コンポーネントの前に、パレット、タイプスケール、スペーシング、半径、シャドウ、モーションをCSSカスタムプロパティ（またはプロジェクトのトークンシステム）として記述してください。コンポーネントはトークン名のみを使用し、bg-indigo-500 や #6366f1 のような生の値は決して使用しません。
• 構造を次に。 セマンティックHTML、ナビゲーションのための実際のリンク、見出しを正しい順序で、その後にスタイルを適用します。
• 以下のビルドシート および references/visual-system.md と references/interaction.md の詳細を適用します。
• すべての状態をデザインする。 ホバー、アクティブ、フォーカス可視、無効、ローディング、空、エラー、成功、長いコンテンツ、短いコンテンツ。生成UIはここで最も弱く、修正もここで最も安上がりです。
• スペクタクルは安価でオプショナルに保つ。 重いエフェクト（WebGL、ビデオ、大きなぼかし）は、ブリーフの予算内で隔離された1つのレイヤーにのみ存在し、最初のペイント後に開始し、静的なフォールバックを持ち、prefers-reduced-motion: no-preference の背後に配置します。

5. 批評とカット

最初のビルドをドラフトとして扱います。

1. 静的チェッカーを実行します。スクリプトパスにはスキル自身のディレクトリを使用します。Python 3.12以降と、パッケージは不要です。変更したファイルだけでなく、フロントエンドのソース全体をスキャン対象に指定してください。フォーカスとモーション削減のルールは、スキャン範囲内のどこかにグローバルスタイルを探すため、部分スキャンでは誤った欠陥を報告します。

   python <skill-dir>/scripts/check_slop.py <front-end source folder>
   

   すべての defect（欠陥）を修正してください（終了コード1は少なくとも1つが残っていることを意味します）。すべての tell（AIらしさ）については、それを変更するか、レポートにその理由を記載してください。チェッカーはソーステキストのみを読み取るため、結果がクリーンであることは必要十分条件ではありません。

2. ページをレンダリングし、1440px幅と375px幅で、2つのカラースキームがある場合は両方で見てください。セッションにブラウザツールがあればそれを使用してください。そうでない場合、ほとんどのマシンにはヘッドレスChromeまたはEdgeがあります。スクリーンショットとブラウザプロファイルを一時フォルダに書き込み、その後画像を読み取ってください。

   chrome --headless=new --hide-scrollbars --user-data-dir=<temp>/profile --window-size=1440,2600 --virtual-time-budget=4000 --screenshot=<temp>/desktop.png <file or http URL>
   

   スクリーンショットは指定されたサイズの単一ビューポートであり、ページ全体ではありません。したがって、必要なコンテンツが収まるようにウィンドウを十分に高くしてください。ヘッドレスChromeは約500pxより狭いウィンドウを作成しないため、390pxのスクリーンショットはより広いレイアウトから静かにトリミングされます。ループするピースはループのランダムなポイントでキャプチャされます。完成したフレームを見るには --force-prefers-reduced-motion を追加し、ループ途中のフレームを見るためにもう一枚スクリーンショットを撮ってください。電話チェックでは、サイトを375px幅の <iframe> に保持する小さなラッパーページのスクリーンショットを撮ってください。スクロールで明らかになる要素は、ヘッドレススクリーンショットに表示されない場合があります。ソースで、それらの隠れた初期状態がスクリプトによって適用されていることを確認してください（references/interaction.md を参照）。実際のブラウザツールを使用する場合は、すべてのフローをタブキーで移動してテストしてください。

3. ページを推定ではなく測定します。HTTPで提供し（静的フォルダの場合はそのフォルダで python -m http.server）、デフォルトのモバイルプロファイルでLighthouseを実行し、その後予算リーダーでレポートを読み取ります。

   npx [email protected] <http URL> --output=json --output-path=<temp>/report.json --quiet --chrome-flags="--headless=new --user-data-dir=<temp>/lh-profile"
   python <skill-dir>/scripts/check_budgets.py <temp>/report.json --script-kib <the brief's budget>
   

   LCP（2.5秒）、CLS（0.1）、総ブロッキング時間（200ミリ秒、INPのラボ代用）、ブリーフに対するスクリプト重量をチェックし、要素ごとに合成されていないアニメーションをすべてリストアップします。すべての breach（違反）を修正してください（終了コード1）。終了コード2は、数値が unmeasured（未測定）であるか、レポートが使用できないことを意味します。再実行し、それでも失敗する場合は、その数値を未測定として報告し、合格として報告しないでください。http.server は圧縮しないため、スクリプト重量は高めに読み取られますが、これは安全側です。LighthouseがChromeを見つけられない場合は CHROME_PATH を設定してください。Nodeまたはネットワークが利用できない場合は、レポートにその旨を記載してください。Lighthouseはシグネチャモーメントのフレームレートを測定しません。セッションにブラウザツールがあればパフォーマンストレースを記録し、そうでない場合は未測定と記載してください。

4. 最初の画面が目にとって価値のあるものかどうかを自問し、references/artefacts.md の忠実度チェックリストをヒーローピースに対して実行してください。正しいが記憶に残らないページは、シグネチャが弱すぎます。要素を追加するのではなく、シグネチャを強化してください。

5. ページをリファレンスと比較してください。選択した方向性で評価の高いサイトを一つ、対象分野のデザイナーが賞賛するものを選び（references/exemplars.md にいくつか名前があります）、項目2のコマンドで1440pxのスクリーンショットを撮り、2つの画像を並べて見てください。ヒーローピースの忠実度、最大のタイプと最小の詳細の間のスパン、信頼できる詳細の量、そして光を比較してください。最大のギャップを特定してそれを埋めるか、レポートにその理由を記載してください。リファレンスはクラフトのバーを設定するものであり、見た目ではありません。その表面から何も取らないでください。サイトにアクセスできない場合は、レポートにその旨を記載してください。

6. references/interaction.md のチェックリスト（状態、フォーカス、ターゲット、フォーム、パフォーマンス）を実行してください。

7. references/slop-tells.md のTellチェックを、ブリーフではなく構築されたページに対して再実行してください。中央に配置されたバッジヒーロー、3つの同一カード、全体的な外観のクラスターなど、チェッカーが認識できない構造的なTellをカバーします。

8. 対象またはユーザーに役立たないものをすべて削除してください。装飾的な区切り線、自明なコンテンツの上のラベル、バッジ、グロー、テキストを繰り返すアイコン、2つ目のアクセントカラー。削除することは、通常、利用可能な最大の改善です。

9. ブリーフ、批評で変更された点、リファレンスに対する最大のギャップ、予算に対する測定値、および確認できなかったこと（ブラウザなしでのレンダリングされたコントラストなど）を報告してください。

ビルドシート

十分に裏付けられた初期値です。これらは良い決断を保護します。ブリーフ内のアイデンティティの決断を置き換えるものではありません。

次元	デフォルト値
本文テキスト	16～20 px、行の高さ約1.5、文字数45～90文字（約65を目指す）
見出し	行の高さ1.0～1.2、トラッキング24px以上で約-0.02em、text-wrap: balance
段落	text-wrap: pretty、ボールドとイタリックは決して同時に使用しない
タイプスケール	clamp() による流動的、比率は小画面で約1.2、大画面で1.25
すべて大文字	稀に、1行未満、文字間隔0.05em～0.12em
色	OKLCH、1つの色味付きニュートラルスケール、1つのアクセント、3つまたは4つのセマンティックカラー、それぞれ役割ベースのステップを持つ
コントラスト	WCAG 4.5:1（本文）、3:1（大きなテキストとUIパーツ）。本文テキストでAPCA Lc 75以上を目指す
ダークモード	別のパレット：暗いグレーベース（約 oklch(0.18 0.01 h)）、浮き上がりサーフェスには明るい色、彩度を下げたアクセント
グラデーション	in oklch で補間、隣接する色相、オプションで細かい粒度、最大で1つの意図的なグラデーション
スペーシング	4pxベース：4、8、12、16、24、32、48、64、96、128、グループ間のギャップはグループ内の少なくとも2倍
奥行き	トーンステップとヘアラインボーダーを優先、シャドウはレイヤー化、1つの光源、サーフェスの色味で色付け
半径	2つまたは3つの値、ネストされた半径＝外側の半径からパディングを引いた値
アイコン	1つのファミリー、1つのグリッド、1つのストローク幅、テキストの隣に隣接して配置、単独では使用しない

…

（原文が途中で切れていますが、可能な限り翻訳しました）