frontend-skill

フロントエンドスキル

コンポーネントの数ではなく、アートディレクション、階層、抑制、画像、モーションが成果物の品質を左右する場合に、このスキルを使用します。

目標：意図が感じられ、上質で、現代的なインターフェースを提供します。受賞レベルの構成を基本とし、ひとつの大きなアイデア、力強い画像、簡潔なコピー、厳密な余白設計、印象に残る少数のモーションを取り入れます。

作業モデル

構築を始める前に、次の3つを書き出します。

• ビジュアルの主張：ムード、素材感、エネルギーを説明する一文
• コンテンツ計画：ヒーロー、補足、詳細、最終CTA
• インタラクションの主張：ページの印象を変える2～3個のモーションのアイデア

各セクションには、ひとつの役割、ひとつの主要なビジュアルアイデア、ひとつの主な要点またはアクションを持たせます。

美しいデフォルト設定

• コンポーネントではなく、構成から始めます。
• 画面全体に広がるヒーロー、またはキャンバス全体を使ったビジュアルを優先します。
• ブランド名または製品名を、最も目立つテキストにします。
• 数秒で読み取れる長さにコピーを抑えます。
• 装飾を追加する前に、余白、配置、スケール、トリミング、コントラストを活用します。
• デザインシステムを絞り、書体は最大2種類、アクセントカラーは基本的に1色にします。
• カードを使わないレイアウトを基本とします。代わりに、セクション、カラム、区切り線、リスト、メディアブロックを使います。
• 最初のビューポートは文書ではなく、ポスターとして扱います。

ランディングページ

基本的な構成順：

1. ヒーロー：ブランドまたは製品、価値の提示、CTA、主要なビジュアルひとつ
2. 補足：具体的な機能、特典、または実績ひとつ
3. 詳細：雰囲気、ワークフロー、製品の奥行き、またはストーリー
4. 最終CTA：コンバージョン、開始、訪問、または問い合わせ

ヒーローのルール：

• 構成はひとつだけにします。
• 画面全体に広がる画像、または主役となるビジュアル面を使います。
• 画面全体に広がる表示の基本ルール：ブランドのランディングページでは、ヒーロー自体を端から端まで広げ、ページから引き継いだ余白、枠付きコンテナ、共通の最大幅を設けません。幅を制限するのは、内側のテキスト／アクションカラムだけにします。
• ブランドを最初に、見出しを2番目に、本文を3番目に、CTAを4番目に配置します。
• 特に理由がなければ、ヒーローカード、統計情報の帯、ロゴの集合、ピルの乱用、フローティングダッシュボードは使いません。
• 見出しはデスクトップでおよそ2～3行に収め、モバイルではひと目で読み取れるようにします。
• テキストカラムの幅を狭くし、画像の落ち着いた領域に配置します。
• 画像に重ねるテキストは十分なコントラストを確保し、タップ領域を明確にします。

画像を取り除いても最初のビューポートが成立するなら、その画像は弱すぎます。ナビゲーションを非表示にしたときにブランドが目立たなくなるなら、階層が弱すぎます。

ビューポートの配分：

• 最初の画面にスティッキー／固定ヘッダーがある場合、そのヘッダーもヒーローの高さに含めます。ヘッダーとヒーローコンテンツを合わせて、一般的なデスクトップとモバイルの画面サイズで初期ビューポート内に収めます。
• 100vh／100svhのヒーローを使う場合は、常時表示されるUIの装飾要素の高さを差し引く（calc(100svh - header-height)）か、通常フローに積み重ねず、ヘッダーをオーバーレイ表示します。

アプリ

Linearのような抑制を基本とします。

• 落ち着いたサーフェスの階層
• 力強いタイポグラフィと余白
• 色数を抑える
• 情報量は多くても読みやすく
• 装飾を最小限に
• カードを使うのは、カード自体がインタラクションとなる場合に限る

アプリUIは、次の要素を中心に構成します。

• メインの作業領域
• ナビゲーション
• 補助的なコンテキストまたはインスペクター
• アクションまたは状態を示す、明確なアクセントひとつ

次のものは避けます。

• ダッシュボードカードのモザイク
• あらゆる領域を囲む太い境界線
• 通常の製品UIの背後にある装飾的なグラデーション
• 競合する複数のアクセントカラー
• 情報の読み取りを改善しない装飾的なアイコン

意味を損なわずにパネルを通常のレイアウトに置き換えられる場合は、カードとしての装飾を取り除きます。

画像

画像には、ストーリーを伝える役割を持たせます。

• ブランド、施設、エディトリアルページ、ライフスタイル製品には、実在感のある力強い画像を少なくとも1枚使います。
• 抽象的なグラデーションや偽物の3Dオブジェクトより、実際の環境で撮影された写真を優先します。
• テキストを配置できる、色調が安定した領域を含む画像を選ぶか、トリミングします。
• UIと競合する、看板、ロゴ、文字要素がすでに写り込んだ画像は使いません。
• UIフレーム、分割、カード、パネルがあらかじめ組み込まれた画像を生成しません。
• 複数の場面が必要なら、ひとつのコラージュではなく、複数の画像を使います。

最初のビューポートには、実際のビジュアル上の主役が必要です。装飾的なテクスチャだけでは不十分です。

コピー

• デザインについて語るのではなく、製品の言葉で書きます。
• 見出しで意味を伝えます。
• 補足コピーは通常、短い一文にします。
• セクション間での繰り返しをなくします。
• プロンプトの文言やデザインについての解説を UI に含めません。
• 各セクションに、説明、実証、掘り下げ、コンバージョンのいずれか一つの役割を持たせます。

コピーを30％削ることでページが改善するなら、削り続けます。

製品 UI 向けの実用的なコピー

ダッシュボード、アプリ画面、管理ツール、業務ワークスペースを制作する場合は、マーケティングコピーではなく、実用的なコピーを基本とします。

• 期待、雰囲気、ブランドの語り口より、状況把握、ステータス、操作を優先します。
• まず、KPI、グラフ、フィルター、テーブル、ステータス、タスクのコンテキストなど、実際の作業画面から始めます。ユーザーが明示的に求めない限り、ヒーローセクションは設けません。
• セクションの見出しでは、その領域の内容や、そこでユーザーができることを示します。
• 良い例：「選択した KPI」「プランのステータス」「検索指標」「上位セグメント」「最終同期」
• 特に求められていない限り、製品画面では、意欲をかき立てるヒーローコピー、比喩、キャンペーン風の表現、エグゼクティブサマリーのバナーを避けます。
• 補足テキストでは、対象範囲、動作、新しさ、または意思決定に役立つ情報を一文で説明します。
• ホームページのヒーローや広告にも使えそうな文は、製品 UI らしく感じられるまで書き直します。
• 操作、監視、判断に役立たないセクションは削除します。
• 確認の目安：担当者が見出し、ラベル、数値だけをざっと見て、ページの内容をすぐに理解できますか？

モーション

モーションは、存在感と階層を生み出すために使い、ノイズにならないようにします。

ビジュアルを重視する制作では、意図的なモーションを少なくとも2～3種類実装します。

• ヒーローにおける一連の登場アニメーション
• スクロール連動、スティッキー、または奥行きの効果
• 操作性を明確にするホバー、表示、またはレイアウトのトランジション

利用できる場合は、次の用途に Framer Motion を優先します。

• セクションの表示
• 共有レイアウトのトランジション
• スクロール連動の不透明度、移動、拡大縮小
• スティッキーなストーリーテリング
• スペースを埋めるだけでなく、ストーリーを進めるカルーセル
• メニュー、ドロワー、モーダルの表示効果

モーションのルール：

• 短い録画でも目に留まること
• モバイルでも滑らかに動作すること
• 速く、控えめであること
• ページ全体で一貫していること
• 装飾だけが目的なら削除すること

厳守事項

• カードをデフォルトにしません。
• ヒーローカードをデフォルトにしません。
• 全面表示が求められている場合、枠で囲んだヒーローや中央カラムのヒーローにしません。
• 各セクションの中心となるアイデアは一つまでにします。
• 多数の小さな UI 要素がないと説明できないセクションを作りません。
• ブランドを打ち出すページでは、見出しがブランドの存在感を圧倒しないようにします。
• 中身のないコピーを入れません。
• テキストが落ち着いた一体感のある領域に配置されていない限り、画面を分割したヒーローにしません。
• 明確な理由がない限り、書体は二種類までにします。
• 製品にすでに強固なデザインシステムがある場合を除き、アクセントカラーは一色までにします。

避けるべき失敗

• 最初に表示される、ありきたりな SaaS のカードグリッド
• ブランドの存在感が弱い美しい画像
• 明確なアクションを示さない強い見出し
• テキストの背後にある煩雑な画像
• 同じ雰囲気を繰り返すセクション
• ストーリー上の目的がないカルーセル
• レイアウトではなく、カードを積み重ねて作ったアプリ UI

確認項目

• 最初の画面で、ブランドまたは製品がはっきりと分かりますか？
• 視線を引きつけるビジュアルの中心が一つありますか？
• 見出しだけをざっと見てページの内容を理解できますか？
• 各セクションに一つの役割がありますか？
• カードは本当に必要ですか？
• モーションによって階層や雰囲気が改善されていますか？
• 装飾的なシャドウをすべて取り除いても、デザインに高級感がありますか？