minoan-frontend-design

生成されたものではなく、明確に「デザインされた」と感じられるフロントエンドのインターフェースを構築します。どのインターフェースにも、特定の文脈に合わせて特定の選択をした、特定のデザイナーの意図が感じられるようにします。

コンテキストプロトコル

デザインに取りかかる前に、プロジェクトのルートに .design-context.md があるか確認します。存在せず、新規プロジェクトであれば、完全なデザインブリーフを作成するために /shape を実行するか、ユーザーに直接尋ねます。誰が使うのか、どんな雰囲気にしたいのか、どんな見た目にはしたくないのかを確認してください。コードからユーザー像を推測してはいけません。コードからわかるのは何が作られたかであって、誰のためのものかではありません。

クリエイティブディレクション

コーディングの前に、コンセプトの方向性に名前を付けます。「Bloomberg Terminal」「医療ジャーナル」「ジンコラージュ」「VHSの夢世界」「インテリジェンス資料」のように。名前が、その後のあらゆる判断の軸になります。

あらゆる美的選択を、対象そのものに根差したものにします。ジャズクラブのウェブサイトなら、煙と真鍮を感じさせるべきです。子ども向けの読書アプリなら、飛び出す絵本を開くような感覚にします。フィンテックのダッシュボードなら、おもちゃではなく管制室のようにします。デザインを別のプロジェクトに移したときに違和感が生じるほど、その文脈にぴったり合ったものにしてください。

ひとつの方向性に振り切ります。徹底したミニマル、マキシマリストな混沌、ラグジュアリーで洗練されたスタイル、ローファイなジン、ダークでムーディー、エディトリアル／雑誌風、ブルータリスト／生々しい表現、レトロフューチャー、幾何学的なアールデコ、シネマティックなワイドスクリーン、データ密度の高い科学的な表現など、あるいはまったく新しい方向性でも構いません。最終的なデザインは、ほかの何にも似ていないものにしてください。

どのデザインにも、人が友人に説明したくなるほど際立った要素をひとつ盛り込みます。その要素を見つけ、それ以外のすべてを引き立て役にします。

タイポグラフィ

タイポグラフィはデザインの声を担います。触れられるほどの存在感を持たせてください。定番フォントは定番の発想を招きます。Arial、Inter、Roboto、Space Grotesk、システムフォントのスタックは避けてください。ディスプレイ書体には見る人を揺さぶる力を持たせ、本文には読みやすさと洗練を求めます。舞台の役者を組み合わせるように書体を組み合わせ、緊張感から個性を生み出します。極端なサイズ差、ウェイトのコントラスト、権威を示す大文字、優雅さを演出するゆったりとした字間など、タイポグラフィの幅を最大限に活用してください。階層はサイズだけでなく、ウェイトと色でも調整します。

巨大なエディトリアルタイポグラフィ、つまり 6xl〜9xl の特大ディスプレイ書体、コンテンツの背後に置く透かしのような数字、タイポグラフィによる取り消し線は、権威を感じさせます。どのデザインにも、情報を整理するだけでなく、強いメッセージを放つタイポグラフィの見せ場を少なくともひとつ設けてください。

Inter、Roboto、Arial、Open Sans、Lato、Montserrat は、モデルが反射的に選びがちな定番フォントとして扱い、すべて避けてください。Fraunces、Playfair Display、DM Sans、Space Grotesk などは実によくできた書体ですが、第二の定番になっています。定番を避けるよう求められたときに、モデルが次に選びがちな書体です。目指すのは、このプロジェクトにだけふさわしい書体です。Pangram Pangram、Velvetyne、ABC Dinamo、Future Fonts、Klim などのファウンドリーのカタログを掘り下げ、シルエットだけで見分けられる書体を探してください。

色

色は空間の温度を決めます。パレットには明確な立場を持たせてください。大胆で鮮やか、ムーディーで控えめ、あるいは高コントラストでミニマルなものにします。曖昧で中途半端な印象は避けてください。主役となる色をひとつ定め、鋭いアクセントで引き締めます。意外性のあるアクセントカラーひとつのほうが、バランスを取った5色の配色より効果的です。純粋な黒は使いません。コントラストが強すぎて、奥行きを平坦にしてしまうためです。亜鉛色の950番や濃紺など、深みのあるオフブラックを使います。影には背景色の色味を加えます。クリーム、羊皮紙色、チャコールに琥珀色を重ねた暖色系のエディトリアルパレットも、ダークモードと同じくらい大胆です。文脈が暖かさを求めているなら、安易にダークを選ばないでください。ダークテーマが適切な場合は、深みのあるオフブラックに、酸性イエロー、生物発光を思わせるシアン、深いローズなど、単一のアクセントカラーを組み合わせて徹底してください。

HSL ではなく OKLCH を使います。知覚的な均一性に優れているためです。ニュートラルカラーにもブランドカラーの色味を加えます（クロマを 0.005 にするだけでも構いません）。テーマは、利用される状況に合わせて決めます。トレーディング端末ならダーク、病院のポータルならライト、子ども向けアプリならライト、午後9時のバイクフォーラムならダークです。どちらかに決めつけてはいけません。正しいテーマとは、実際のユーザーが実際の利用状況で求めるものです。

モーション

CSS のみのアニメーションを優先してください。JavaScript によるクラスの切り替えで非表示になるコンテンツは、スクリーンショットや静的レンダリングでは見えません。最初から表示し、そこからアニメーションさせてください。ページ読み込み時に段階的に表示する演出は、散発的なマイクロインタラクションよりも魅力を生み出します。スクロールに反応するアニメーションやホバー状態には、意外性を持たせてください。見出しの表示、エディトリアルな段階表示、テキストの切り替えなど、テキストに特化したアニメーションパターンについては、タイミング仕様が正確に記載された 24 種類の名前付きエフェクトをまとめた references/text-animation-catalog.md を参照してください。

空間的な構成

意外性のあるレイアウト。非対称性。重なりと Z 軸方向の奥行き。斜めの流れ。グリッドからはみ出す要素。大胆なスケールの変化。画面いっぱいに広がる演出。分割画面の構成。タイルのサイズに変化をつけた弁当箱型グリッド。広々としたネガティブスペースか、意図的に制御された高密度の構成か、どちらかに振り切り、中途半端な状態にはしないでください。中央揃えのヒーローセクションは定番です。左揃えのテキスト、非対称の分割、エディトリアルな余白などで、その定番を崩してください。カードは、階層を示すためにエレベーションを使う場合にのみ使用し、あらゆるものを入れる汎用コンテナーとしては使わないでください。

ダッシュボードや情報量の多いインターフェースでは、ファーストビュー内の情報量を最大化してください。メトリクス、チャート、コントロールを、カード型コンテナーではなく、細い境界線とネガティブスペースで区切った高密度のグリッドにまとめてください。すべての数値には等幅フォントを使用してください。ダッシュボードはギャラリーではなく、コマンドセンターとして扱ってください。

雰囲気と質感

平坦な単色をデフォルトにせず、奥行きとムードを生み出してください。背景は壁ではなくキャンバスです。グラデーションメッシュ、ノイズや粒子のオーバーレイ、幾何学模様、内側の屈折境界線を加えたグラスモーフィズム、ドラマチックまたは柔らかなシャドウ、視差による奥行き、clip-path の図形、印刷物を思わせる質感（ハーフトーン、デュオトーン、リソグラフ）、抜き文字のタイポグラフィ、手描きの SVG アクセント、生成的なパターン背景など、文脈に合ったエフェクトを適用してください。

文脈に合わせたカスタム SVG イラストを作成してください。プレースホルダー画像は使わないでください。ラーメン店なら手描きの丼、海洋保護の非営利団体なら生物発光する粒子を使います。イラストは単なる装飾ではなく、デザインそのものです。

避けること

汎用的な AI らしいデザインは使わないでください。使い古されたフォント（Inter、Roboto、Arial、Space Grotesk、システムフォントのスタック）、ありきたりな配色（白地に紫のグラデーション、ネオンの外側のグロー）、予想どおりの中央揃えレイアウト、同じサイズのカードを 3 枚並べる機能紹介、過剰なグラデーションテキスト、汎用的なプレースホルダーコンテンツ（John Doe、99.99%、「ワークフローを向上」）、絵文字や SVG の卵型アバターのプレースホルダー、主要コンテンツがファーストビューより下に押しやられるヒーローセクション、不完全な実装は避けてください。 その代わり、明確な主張を持つ個性的なフォントを使ってください。大胆で一貫した配色を選んでください。意外性のある非対称レイアウトにしてください。文脈に根差した独自のディテールを取り入れてください。独創的な名前と自然なデータを使った、現実味のあるコンテンツにしてください（50%ではなく47.2%）。写真が求められた場合は、画像サービスを使うか、意味のあるビジュアルコンテンツを生成し、空のコンテナーは使わないでください。求められた機能はすべて実装し、すべての選択に意図を持たせてください。

最初に思いついた満足のいくアイデアに安住しないでください。モデルのデフォルト出力は、学習データの平均です。本当の個性を出すには、ありきたりな発想の先へ進む必要があります。

カード、コールアウト、アラートで使う次の 2 つの CSS パターンは、絶対に禁止です。

• カード、コールアウト、アラートでは、アクセントストライプとして border-left: または border-right: を 1px より太くして使わないでください（AI らしいデザインを示す、最も使い古されたパターンです。背景の色合い、全辺の境界線、またはインジケーターなしのデザインに置き換えてください）
• background-clip: text を、グラデーション背景と組み合わせて使わないでください（グラデーションテキストは装飾であり、意味を伝えるものではありません。単色を使い、太さやサイズで強調してください）

クラフト

実装の複雑さは、美的なビジョンに合わせてください。マキシマリストなデザインには、精緻なコードが求められます。ミニマリストなデザインには、徹底した抑制が求められます。どちらにも、余白、配置、統一感へのピクセル単位の配慮が欠かせません。プロンプトで求められた機能はすべて実現してください。完全さは最低条件であり、到達点ではありません。大胆さと完成度を兼ね備えた実装は、不完全な傑作にも、完全でも凡庸なものにも勝ります。

Claude は、驚くほど優れた、賞に値する創作を生み出せます。このインターフェースを見る人に、予想していなかった何かを感じてもらいましょう。可能性を余すところなく示してください。美的な選択の一つひとつに意図を持たせ、細部を磨き上げ、ビジョンを妥協なく実現すれば、何が可能になるのかを見せましょう。

ビルド後の QA ワークフロー

ビルド後、次の順序で改善作業を行います。

1. 監査（または /design-audit）：references/anti-patterns.md と、以下のドメイン別の優れたリファレンスに照らして確認します。5 つの観点（アクセシビリティ、パフォーマンス、レスポンシブ対応、テーマ、アンチパターン）をそれぞれ 0～4 点で評価します。references/heuristics-scoring.md に従って、問題に P0～P3 の優先度を付けます。
2. 批評（または /design-critique）：references/heuristics-scoring.md（ニールセンの 10 ヒューリスティックを各 0～4 点、合計 40 点満点）を使って UX をレビューします。references/cognitive-load.md（8 項目のチェックリスト）で認知負荷を評価します。references/personas.md から 2～3 人のペルソナを選んでテストします。AI の安っぽさテストを実施します。「AI が作った」と誰かに言われたら、すぐに信じてしまうでしょうか。そうなら、修正してください。
3. 調整：プロジェクトのルートに .design-context.md または DESIGN.md がある場合は、プロジェクトのデザインシステムに合わせます。そこに定義されているトークン（色、フォント、余白）は素材として扱い、レシピとして捉えないでください。上記のクリエイティブな方向性を引き続き優先します。
4. 堅牢化：長いテキストのはみ出し、RTL、空の状態、エラー状態、i18n、キーボード操作などのエッジケースをテストします。
5. 仕上げ（または /design-polish）：最終確認を行います。配置、余白、インタラクション状態、トランジション、マイクロコピーを見直します。すべてのピクセルに意図を込めてください。

参考資料

必要に応じて references/ を参照してください。

エンジニアリング：vercel-web-interface-guidelines.md、design-system-checklist.md。 テクニック：creative-arsenal.md、design-dials.md、editorial-patterns.md（評価テスト済み）、astryx-hero.md（奥行きのある視差表現のエディトリアルヒーロー＋流体 DOM の兄弟リンク）。シェーダーの相互参照：~/.claude/skills/rocaille-shader/references/fluid-dom.md（DOM セクション上のポインター反応型流体）。 Stripe（ライトモード）：stripe-design-tokens.md、stripe-component-patterns.md、stripe-signature-techniques.md。 Mintlify（ダークモード優先のドキュメント）：mintlify-design-tokens.md、mintlify-component-patterns.md、mintlify-signature-techniques.md。 Composio（ダークな開発者ツール、モノクロのクローム＋グリッチアート）：composio-design-tokens.md、composio-component-patterns.md、composio-signature-techniques.md。 アンチパターン：anti-patterns.md（Impeccable v3.1.0 の要点をまとめたチェックリスト。ブランド表現のガードを含む）。 批評とスコアリング：heuristics-scoring.md（ニールセンの10原則、P0〜P3の重大度）、cognitive-load.md（8項目のチェックリスト、ワーキングメモリのルール）、personas.md（5つのアーキタイプ＋プロジェクト固有のペルソナ）。 デザインシステムの模範例：linear-design-md.md（DESIGN.md 形式。Linear のトークン、コンポーネント、レスポンシブルール）。 高度なテクニック：sunny-mode-technique.md（@property によるパレットのトランジション、ブレンドモードのオーバーレイ、物理法則に基づくイースターエッグ）。 Impeccable のドメイン別参考資料（コード例＋実装パターン）：impeccable-typography.md（フォントの読み込み、OpenType、スケール）、impeccable-color-contrast.md（OKLCH、ダークモードのトークン）、impeccable-spatial.md（コンテナクエリ、視覚的な整列）、impeccable-motion.md（cubic-bezier の値、スタッガーの計算式、動きを抑えた表示）、impeccable-interaction.md（Popover API、ロービング tabindex、ダイアログ）、impeccable-responsive.md（ポインター／ホバーのクエリ、安全領域、srcset）、impeccable-ux-writing.md（エラーテンプレート、ボイスマトリクス）。 色彩科学（meodai/skill.color-expert より）：color-science-deep.md（色空間の選択基準、HSL の限界、彩度とクロマ、特性を優先した調和、アクセシビリティの統計、顔料の混色、命名体系）、color-tools-palette.md（パレット生成アルゴリズム、コードライブラリ、分析／リンティング、CSS Color 4/5、セマンティックトークンのアーキテクチャ、ジェネレーティブアートの手法）。 ランディングページのコンポーネント：marquee-component.md（アニメーション、アクセシビリティ、レスポンシブな速度に対応した無限ロゴティッカー）、gallery-component.md（サイズ混在、スナップ、ライトボックスに対応した横スクロールのショーケース）、research-card-component.md（メタデータ、インラインデータビジュアライゼーション、カテゴリタグ付きの記事カード）、article-layout.md（固定表示の目次サイドバー、引用、引用元表記の仕組みを備えた長文レイアウト）、inline-dataviz.md（CSS のみで作る棒グラフ、統計コールアウト、アニメーション付きカウンター、スパークライン、比較行）。 コンポーネントの調査：component-gallery を呼び出してください。