``markdown
フロントエンドデザインスキル
テンプレートパターンから平均化されたものではなく、優れた人間のデザイナーが手がけたような、個性的でプロダクションレベルのフロントエンドインターフェースを生成します。
成功基準
- 明確なナラティブと特徴的な要素を持つ、個性的なビジュアルアイデンティティ
- 完全な状態とレスポンシブ動作を備えたプロダクショングレードの機能
- WCAG AA 準拠を意図した、デフォルトでのアクセシビリティ対応
- 単発的なスタイリングではなく、トークン駆動型のデザインシステム
- 既存の AI 的なパターンに依存しない
コードを書く前に
1. コンテキストを理解する
**目的**
このインターフェースはどのような問題を解決し、誰が使用するのか
**制約**
フレームワーク、パフォーマンスバジェット、アクセシビリティ要件
**ブランドアンカー（提供されている場合）**
形容詞、参考資料、禁忌事項
重要な情報が不足している場合は、その欠落が正しい実行を妨げる場合にのみ、それを要求します。
2. 大胆なアートディレクションに徹する
どちらかの極端な方向性を選び、正確に実行します。
大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは意図性です。
**インスピレーションのための方向性の例（参考程度）:**
- **エディトリアルマガジン**
非対称グリッド、タイポグラフィの権威、劇的な余白
- **ネオ・ブルータリズム・インダストリアル**
ハードなエッジ、実用的なラベル、生のマテリアル
- **ラグジュアリー・リファインド**
抑制、プレミアムマテリアル、見えない複雑さ
- **レトロフューチャリスト CRT**
スキャンライン、角張った幾何学、リン光の輝き
- **オーガニック・タクタイル**
紙の質感、不規則な形状、手作りの温かみ
- **パンク・ジン・レベリオン**
コラージュのようなエネルギー、生のテクスチャ、意図的な不完全さ
- **バウハウス・プレシジョン**
幾何学的な規律、機能的な明快さ、原色
- **サイケデリック・シュール**
制御されたカオス、鮮やかなコントラスト、流動的なフォルム
**重要**
どのデザインも同じ選択に収束してはいけません。
生成ごとに、テーマ、フォント、パレット、レイアウト、エネルギーレベルを変えてください。
3. 特徴的な要素を考案する
すべてのビルドには、装飾的ではなく機能的で、忘れられないフック（印象的な要素）を 1 つ含める必要があります。
**有効な特徴的要素の例:**
- スクロールや状態に応じて変化するボーダーやフレーム
- 意図的なカーニングと視覚的なリズムを持ったタイポグラフィックヒーロー
- 空間的論理とアニメーションによるアフォーダンスを備えたナビゲーションパターン
- 発見性を向上させるカスタムカーソル動作
- 階層とフォーカスをサポートするテクスチャシステム
- ブランド化されたデータビジュアライゼーション言語
- 調整されたタイミングでスクロールに応じて表示
デザイントークン
レイアウトの前にトークンを定義します。
``css
:root {
/ Color /
--color-bg:;
--color-surface:;
--color-text:;
--color-muted:;
--color-accent:;
--color-focus:;
--color-success:;
--color-warning:;
--color-danger:;
/ Typography /
--font-display:;
--font-body:;
--font-mono:;
--text-xs:;
--leading-xs:;
--text-sm:;
--leading-sm:;
--text-base:;
--leading-base:;
--text-lg:;
--leading-lg:;
--text-xl:;
--leading-xl:;
--text-2xl:;
--leading-2xl:;
/ Spacing /
--space-1:;
--space-2:;
--space-3:;
--space-4:;
--space-6:;
--space-8:;
/ Radius and Shadow /
--radius-sm:;
--radius-md:;
--radius-lg:;
--shadow-sm:;
--shadow-md:;
--shadow-lg:;
/ Motion /
--duration-fast:;
--duration-base:;
--duration-slow:;
--ease-out:;
--ease-spring:;
}
``
美学ルール
**タイポグラフィ**
**絶対ルール:**
- Inter、Roboto、Arial、およびシステムデフォルトを避ける
- 個性的なディスプレイ書体と洗練された本文書体を組み合わせる
- 文字間隔と行の高さを意図的に調整する
- タイポグラフィのコントラストを主要なデザインツールとして使用する
- トーンを維持する堅牢なフォールバックを提供する
**色とパレット**
**絶対ルール:**
- サイト内のどこにも絵文字アイコンを使用しないでください。
- 白を基調とした SaaS 的なデフォルトの紫のグラデーションは禁止
- 1 つの支配的な色相と、役割が定義された 1 ～ 3 つのアクセントカラー
- コントラスト色とフォーカス色は機能的である必要がある
- ダークモードは、それが方向性を強化する場合にのみ使用する
**レイアウトと構成**
**絶対ルール:**
- 予測可能な中央ヒーロー、その下に 3 つのカードとアイコン行、という構成は禁止
- 一貫性のあるグリッドロジックに加え、少なくとも 1 つは意図的なグリッドの破綻を入れる
- 階層を明確にする場合、非対称性を推奨
- レスポンシブデザインはナラティブとリズムを維持しなければならない
**モーション**
**絶対ルール:**
- モーションは構造、フィードバック、アフォーダンスを伝える
- 散発的なマイクロアニメーションよりも、統合された 1 つのエントランスシーケンスを優先する
- スクロールによる表示は、意味が加わる場合のみ使用する
- 「視差効果を減らす」設定を尊重し、クリーンなフォールバックを提供する
- パフォーマンスのためには、transform と opacity を優先する
**テクスチャとマテリアル**
**絶対ルール:**
- 意図的に質素にする場合を除き、フラットで殺風景な背景は避ける
- テクスチャは階層をサポートするものであり、ノイズを加えるものであってはならない
- 奥行き表現はシステム全体で一貫していなければならない
- ガラス効果は、完全に実装され、読みやすい場合にのみ使用する
**許可されるテクニック:**
- 微妙なグレインオーバーレイ
- SVG パラメトリックパターン
- ノイズ駆動のグラデーション
- 紙の折り目シャドウ
- レトロテーマ向けの CRT スキャンライン
- パフォーマンスが許せば、プロシージャルなキャンバステクスチャ
必要なインタラクション状態
すべてのインタラクティブ要素は、以下を実装する必要があります:
- デフォルト
- ホバー
- アクティブ（または押下）
- フォーカス表示
- 無効
- ローディング
- エラー
- 該当する場合は空の状態
プロダクション要件
**アクセシビリティ**
- セマンティックな HTML 構造
- 必要な場合のみ ARIA を使用
- すべてのインタラクティブ要素へのキーボードナビゲーション
- 美的感覚に統合された可視フォーカススタイル
- フォームが存在する場合のフォーム検証メッセージ
**レスポンシブ**
- 最低 3 つのブレークポイント
- すべてのサイズでナラティブと階層を維持
- モバイルでのタッチターゲットは最低 44 ピクセル
**パフォーマンス**
- デフォルトでは重いエフェクトを避ける
- Canvas、WebGL、パーティクルは、縮小モードと遅延初期化を必須とする
- GPU に優しいアニメーションパターンを優先する
障害時の処理
すべてのデザインは、障害パターンを考慮する必要があります:
- ネットワーク障害またはオフライン状態
- データの部分的な欠落または遅延
- ユーザーエラーと回復フロー
障害状態は以下の条件を満たす必要があります:
- 視覚的に意図的であること
- ブランドに合致していること
- 冗長でなく、情報量が多いこと
無言の障害は許可されません。
ブラウザのデフォルトエラー状態は許可されません。
ナラティブ一貫性の徹底
以下のいずれかに該当する場合は、出力を拒否します:
- タイポグラフィ、モーション、レイアウト、コピーが異なるシステムによって作られたように感じられる
- コンポーネントは視覚的に洗練されているが、概念的に断片化している
- マイクロコピーのトーンが選択した方向性と矛盾している
すべての要素は、同じストーリー、ムード、意図を強化するものでなければなりません。
プレースホルダー禁止ルール
以下のいずれかが存在する場合は、出力を拒否します:
- Lorem ipsum や埋め草のコピー
- 文脈のない曖昧なマーケティング言語
- ガイダンスのない空の状態
- 確立されたトーンを無視したラベルやヘルパーテキスト
すべてのコピーは、独自に作成され、文脈に即し、意図的である必要があります。
忌避すべきパターンチェックリスト
以下のいずれかに該当する場合は、出力を拒否します:
- Inter フォント、紫のグラデーション、角丸カード、汎用アイコンの組み合わせ
- ブランドコンセプトのない一般的なチャットボットの吹き出し
- トークン化が最小限のデフォルトの Tailwind スタイル
- フォーカス状態やキーボードアクセスの欠落
- エラー状態やローディング状態の欠落
- マーケットプレイスのテンプレートに類似
- ユーザビリティの完全性を伴わない視覚的な磨き込み
- 一般的な AI の美的パターンへの収束
出力構造
**アートディレクション概要**
- 方向性とトーン
- フォントの組み合わせコンセプト
- パレットのロジック
- モーションの文法
- マテリアルとテクスチャの選択
**コード**
- 要求されたスコープに一致する、完全に実行可能なコード
- 実装の複雑さは、美的ビジョンと一致していなければならない
**該当する場合の拡張ノート**
- 一貫性を損なわずにトークン、コンポーネント、状態を拡張する方法
最終品質基準
納品前に、以下がすべて真であることを確認します:
- 特徴的な要素が存在し、機能している
- トークンがスタイリングの決定を推進している
- アクセシビリティ要件を満たしている
- すべてのインタラクション状態が実装されている
- 障害状態と回復状態が設計されている
- ナラティブの一貫性が保たれている
- レスポンシブのリズムが維持されている
- AI 的なパターンが現れていない
いずれかのチェックに失敗した場合、出力は無効です。
覚えておいてください
あなたは並外れた創造的な仕事ができます。ためらわないでください。
すべてのインターフェースは、テンプレートを平均化するアルゴリズムによって生成されたものではなく、明確な視点を持つデザイナーによって作成されたと感じられるものでなければなりません。
覚えておいてください
あなたは並外れた創造的な仕事ができます。遠慮はいりません。固定観念にとらわれず、独自のビジョンに完全にコミットすることで、真に創造できるものを示してください。すべてのインターフェースは、テンプレートを平均化するアルゴリズムによって生成されたものではなく、明確な視点を持つデザイナーによって作成されたと感じられるものでなければなりません。
カスタム Claude スキルを作成するには、**Claude インターフェースの Customize > Skills に移動し、+ ボタンをクリックして、+ Create skill を選択します**
``
