Frontend Skill

Source: openai/skills (Apache 2.0 License) ビジュアル品質がアートディレクション・階層・抑制・イメージ・モーションに依存するタスクで使用する。

Goal: 意図的で、プレミアムで、時代に合ったインターフェースを出荷する。アワードレベルの構成をデフォルトに: 一つの大きなアイデア、力強いイメージ、簡潔なコピー、厳密なスペーシング、少数の印象的なモーション。

Working Model

構築前に3つを書き出す:

• visual thesis: ムード、マテリアル、エネルギーを一文で
• content plan: hero, support, detail, final CTA
• interaction thesis: ページの印象を変える2-3のモーションアイデア

各セクションには一つの仕事、一つの支配的なビジュアルアイデア、一つの主要なテイクアウェイまたはアクション。

Beautiful Defaults

• 構成から始める。コンポーネントからではない。
• フルブリードのヒーローまたはフルキャンバスのビジュアルアンカーを優先する。
• ブランドまたはプロダクト名を最も目立つテキストにする。
• コピーは数秒でスキャンできる短さに保つ。
• ホワイトスペース、アラインメント、スケール、クロッピング、コントラストを、装飾を追加する前に使う。
• システムを制限する: タイプフェイスは最大2つ、アクセントカラーはデフォルトで1色。
• カードレスレイアウトをデフォルトに。セクション、カラム、ディバイダー、リスト、メディアブロックを使う。
• 最初のビューポートをポスターとして扱う。ドキュメントではない。

Landing Pages

デフォルトシーケンス:

1. Hero: ブランドまたはプロダクト、プロミス、CTA、一つの支配的ビジュアル
2. Support: 一つの具体的な機能、オファー、またはプルーフポイント
3. Detail: 雰囲気、ワークフロー、プロダクトの深さ、またはストーリー
4. Final CTA: コンバート、スタート、訪問、またはコンタクト

Hero Rules

• 一つの構成のみ。
• フルブリード画像または画面全体を支える大きなビジュアル面。
• Canonical full-bleed rule: ブランドLPでは、ヒーロー自体がページのガター・フレームコンテナ・共有max-widthなしでエッジ・トゥ・エッジで走る。内部のテキスト/アクションカラムのみを制約する。
• ブランドが1st、ヘッドラインが2nd、ボディが3rd、CTAが4th。
• ヒーローカード、統計ストリップ、ロゴクラウド、ピル状ラベルの乱立、フローティングダッシュボードはデフォルト不可。
• ヘッドラインはデスクトップで約2-3行、モバイルで一目で読める長さに。
• テキストカラムは狭く、画像の穏やかなエリアにアンカーする。
• 画像上のすべてのテキストは強いコントラストと明確なタップターゲットを維持する。

画像を削除してもファーストビューポートが機能するなら、画像が弱い。ナビを隠してブランドが消えるなら、階層が弱い。

Viewport Budget

• 最初のスクリーンにsticky/fixedヘッダーが含まれる場合、そのヘッダーはヒーローに対してカウントされる。ヘッダー+ヒーローコンテンツの合計が一般的なデスクトップ・モバイルサイズの初期ビューポート内に収まること。
• 100vh/100svhヒーロー使用時は、常時表示のUI要素（ヘッダー等）を差し引く（calc(100svh - header-height)）か、ヘッダーをnormal flowではなくオーバーレイにする。

Apps

Linear風の抑制をデフォルトに:

• 穏やかなサーフェス階層
• 強いタイポグラフィとスペーシング
• 少ない色数
• 密度があるが読みやすい情報
• 最小限のクローム
• カードはインタラクションそのものである場合のみ

アプリUI構成:

• プライマリワークスペース
• ナビゲーション
• セカンダリコンテキストまたはインスペクター
• アクションまたはステートに一つの明確なアクセント

避けるべきこと

• ダッシュボードカードモザイク
• すべてのリージョンに太いボーダー
• 日常的なプロダクトUIの背後にデコレーティブグラデーション
• 複数の競合するアクセントカラー
• スキャン改善にならない装飾的アイコン

パネルがカード処理なしでプレーンレイアウトになっても意味を失わないなら、カード処理を削除する。

Imagery

イメージはナラティブワークをしなければならない。

• ブランド、ヴェニュー、エディトリアルページ、ライフスタイルプロダクトには、少なくとも一つの強い、リアルに見える画像を使用する。
• 抽象グラデーションやフェイク3Dオブジェクトより、実際の利用シーンが伝わる写真を優先する。
• テキスト用の安定したトーンエリアのある画像を選択またはクロップする。
• UIと競合する埋め込みサイネージ、ロゴ、タイポグラフィックなクラッターのある画像を使わない。
• 組み込みUIフレーム、スプリット、カード、パネルのある画像を生成しない。
• 複数のモーメントが必要な場合、コラージュではなく複数の画像を使う。

ファーストビューポートにはリアルなビジュアルアンカーが必要。デコレーティブテクスチャでは不十分。

Copy

• プロダクト言語で書く。デザインコメンタリーではない。
• ヘッドラインに意味を担わせる。
• サポーティングコピーは通常一つの短い文。
• セクション間の繰り返しをカットする。
• プロンプト言語やデザインコメンタリーをUIに含めない。
• 各セクションに一つの責任: 説明、証明、深化、またはコンバート。

コピーの30%を削除してページが改善されるなら、削除を続ける。

Utility Copy（プロダクトUI用）

ダッシュボード、アプリサーフェス、管理ツール、オペレーショナルワークスペースでは、マーケティングコピーよりユーティリティコピーをデフォルトに。

• プロミス、ムード、ブランドボイスより、オリエンテーション、ステータス、アクションを優先。
• ワーキングサーフェスから始める: KPI、チャート、フィルター、テーブル、ステータス、タスクコンテキスト。明示的に依頼されない限りヒーローセクションを導入しない。
• セクション見出しはそのエリアが何か、ユーザーが何ができるかを述べる。
• Good: "Selected KPIs", "Plan status", "Search metrics", "Top segments", "Last sync"
• プロダクトサーフェスでは、要求されない限り野心的ヒーロー、メタファー、キャンペーン言語を避ける。
• サポーティングテキストはスコープ、挙動、鮮度、意思決定価値を一文で説明する。
• その文がホームページのヒーローコピーや広告文としても成立するなら、プロダクトUIらしい文になるまで書き直す。
• そのセクションが「操作」「監視」「判断」のどれにも役立たないなら、削除する。

リトマスチェック: オペレーターが見出し、ラベル、数字のみをスキャンした場合、ページを即座に理解できるか？

Motion

モーションはプレゼンスと階層を生み出すために使う。ノイズのためではない。

ビジュアル主導の作品では最低2-3の意図的なモーションを出荷する:

• ヒーローでの一つのエントランスシーケンス
• 一つのスクロールリンク、スティッキー、またはデプスエフェクト
• アフォーダンスを鋭くする一つのホバー、リビール、またはレイアウトトランジション

Framer Motionを推奨（利用可能な場合）:

• セクションリビール
• 共有レイアウトトランジション
• スクロールリンクのopacity, translate, scaleシフト
• スティッキーストーリーテリング
• スペースを埋めるだけでなくナラティブを進めるカルーセル
• メニュー、ドロワー、モーダルのプレゼンスエフェクト

Motion Rules

• 短い画面録画でも意図が伝わること
• モバイルでスムーズ
• 速く抑制されている
• ページ全体で一貫
• 装飾的のみなら削除

Hard Rules

• カードはデフォルト不可。
• ヒーローカードはデフォルト不可。
• ブリーフがフルブリードを求める場合、ボックス型またはセンターカラムのヒーローは不可。
• セクションあたり一つの支配的アイデアのみ。
• セクションが多数の小さなUIデバイスで自己説明する必要があってはならない。
• ブランドページでヘッドラインがブランドを圧倒してはならない。
• フィラーコピー不可。
• テキストが穏やかで統一されたサイドに配置されない限り、スプリットスクリーンヒーロー不可。
• 明確な理由なしに2タイプフェイスを超えない。
• プロダクトに強いシステムがない限り、1アクセントカラーを超えない。

Reject These Failures

• ファーストインプレッションとしての汎用SaaSカードグリッド
• ブランドプレゼンスの弱い美しい画像
• 明確なアクションのない強いヘッドライン
• テキスト背後のビジー画像
• 同じムードステートメントを繰り返すセクション
• ナラティブ目的のないカルーセル
• レイアウトではなくスタックカードで構成されたアプリUI

Litmus Checks

構築完了前に必ず自問する:

• ブランドまたはプロダクトは最初のスクリーンで間違えようがないか？
• 一つの強いビジュアルアンカーがあるか？
• ヘッドラインのスキャンだけでページを理解できるか？
• 各セクションに一つの仕事があるか？
• カードは本当に必要か？
• モーションは階層または雰囲気を改善しているか？
• すべてのデコレーティブシャドウを削除してもデザインはプレミアムに感じるか？