frontend-design

このスキルでは、ありきたりな「AI っぽい粗雑さ」を避け、個性が際立つ、本番品質のフロントエンドインターフェースを作成します。美的な細部や創造的な工夫に細心の注意を払い、実際に動作するコードを実装してください。

スタックの把握

プロジェクトのスタックを確認し、それに合った実装方法を選んでください。作業を始める前に、既存の設定ファイル（package.json、tailwind.config.*、globals.css、Blade レイアウト）を読み込んでください。

Next.js / App Router プロジェクト

• デフォルトでは Server Components を使用し、状態やインタラクティブな処理が必要な場合に限り 'use client' を使用します
• プロジェクトに独自の CSS デザインシステムがある場合は、それを必ず使用してください。Tailwind を新たに導入しないでください
• プロジェクトで Tailwind を使用している場合は、それを使用してください。別のカスタムシステムを並行して導入しないでください
• アニメーションライブラリより、Intersection Observer と組み合わせた CSS のみのアニメーションを優先してください
• 新しいトークンを作るのではなく、既存のデザイントークン（--color-*、--space-*、--font-*、--ease-*）を再利用してください

Laravel プロジェクト（Blade + Alpine / Livewire）

• コンポーネント構文（<x-button>、<x-layout>）とスロットを使った Blade テンプレートを使用します
• Tailwind CSS が標準です。プロジェクトですでに使われている場合を除き、カスタム CSS を追加しないでください
• クライアントの状態管理には Alpine.js を使用し、Livewire が導入されている場合は Livewire を使用します
• プロジェクトで Tailwind JIT を使用している場合は、新しいユーティリティクラスがバンドルに含まれるよう、スキャン対象ファイルに記述されている必要があります。新しいクラスを追加したら、ビルドを実行してください

スタンドアロンページ（ランディングページ、ツール、マイクロサイト）

• ビルド手順不要で、自己完結したプレーンな HTML/CSS/JS を使用します
• 創造性を最大限に発揮できます。大胆な美的実験が映えるのは、こうしたページです

デザインの考え方

コーディングの前に背景を理解し、明確な美的方向性を定めてください。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：プロジェクト既存の美的スタイルに合わせます。新規プロジェクトなら、方向性を選びます。極限までミニマル、ラグジュアリー／洗練、エディトリアル／雑誌風、レトロフューチャー、ブルータリスト／生々しい、アールデコ／幾何学的、インダストリアル／実用重視などです。
• 制約：使用するスタックは何ですか？サーバーコンポーネントですか、それともクライアントコンポーネントですか？既存のデザイントークンはありますか？
• 差別化：何が印象に残りますか？見る人が気づく、たったひとつの細部は何ですか？

重要：明確なコンセプトの方向性を選び、精密に形にしてください。大胆で装飾的なデザインも、洗練されたミニマルなデザインも、どちらも効果的です。大切なのは強さではなく、意図の明確さです。

そのうえで、次の条件を満たす、実際に動作するコードを実装してください。

• 本番品質で、機能すること
• 視覚的に印象的で、記憶に残ること
• 明確な美的視点を持ち、一貫性があること
• 細部まで丁寧に仕上げられていること

フロントエンドの美的ガイドライン

次の点に注力してください。

• タイポグラフィ：文脈に合ったフォントを選びます。プロジェクトですでにフォントの組み合わせが定まっている場合は、それを使用してください。そうでなければ、個性のある特徴的なフォントを選びます。Arial、Roboto、意図なく選んだシステムフォントなど、ありがちなデフォルトは避けてください。ディスプレイフォントと、洗練された本文用フォントを組み合わせます。
• 色とテーマ：統一感のあるパレットを選びます。一貫性を保つため、CSS 変数を使用してください。控えめで均等に配色するより、支配的な色に鋭いアクセントを添えるほうが効果的です。
• モーション：CSS のみのアニメーションを優先します。効果の高い場面に集中してください。段階的に表示される、演出の整ったページ読み込みは、散発的な小さなインタラクションよりも大きな喜びを生み出します。スクロールに応じた演出や、意外性のあるホバー状態を活用してください。標準的な設定として、cubic-bezier(0.16, 1, 0.3, 1) のイージングと、400ms の時間を使用できます。
• 空間構成：意外性のあるレイアウトを取り入れます。非対称、重なり、斜めの流れ、グリッドを崩す要素を活用してください。余白を広く取るか、密度を意図的に制御します。
• 背景と視覚的な細部：雰囲気と奥行きを生み出します。デザインに役立つ場合は、グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透過表現、印象的な影、装飾的な境界線、粒子状のオーバーレイを取り入れてください。

2026年の美的基準（高品質なデザインとありきたりなAIスロップを分けるもの）

2026年のウェブデザインを支配する美学は、派手なトレンドではなく、節度ある抑制です。公開前に、次の基準で確認してください。

基礎（最初に設定します）：

• 色はHEX/HSLではなくOKLCHで作成します。 OKLCHは知覚的に均一な色空間です。明度の値が同じなら色相を問わず同じ明るさに見え、グラデーションが濁らず、暗色と明色のシェードも色相を保ちます。カラー設計のワークフローを実用面で最も大きく改善できる方法です（references/design-tokens.mdを参照）。
• ほぼニュートラルな土台に、節度あるアクセントを一つ。 Linear／Stripe／Vercelの方式です。画面ではニュートラルカラーを主役にし、ブランドカラーはCTAや強調箇所で10％の彩りとして使います。最も多く使う色にはしません。
• AIらしさが最も強く出るのは「テックブロ・グラデーション」です。 ほぼ黒の背景に紫から青へ変化するメッシュを重ねる見た目（OpenAI／Anthropic／Midjourney由来のスタイルで、今ではProductHunt中にあふれています）は避けましょう。ブランド固有のグラデーションシステムを採用し、#000ではなく、ほのかな色味のある黒（暖色系チャコール、深いネイビーなど）を使いましょう。

取り入れるもの：

• 装飾ではなく構造としてのタイポグラフィ。明確なスケールに沿った一貫性のある階層
• 4／8pxグリッドに基づく意図的な余白。ネガティブスペースも意図的な要素として扱います
• 彩度よりも明確なコントラストを重視した、抑制の効いた配色
• ストック素材の飾りではなく、コンテンツとして扱うエディトリアル品質の画像
• 意味を深めるモーション。散発的な細かな演出より、ページ読み込み時の一貫した演出とスクロールに連動した表示のほうが効果的です
• 美しさの要素としてのパフォーマンス。LCPが速く、CLSが安定していると、高品質に感じられます

避けるもの：

• 不必要なアニメーション、スクロールジャック、目的のないパララックス
• 階層の不足を補うためだけの装飾的なタイポグラフィ
• 彩度が高すぎるグラデーションの寄せ集め（特に、白地にラベンダーを合わせたSaaSテンプレート風の見た目）
• ありきたりなストック画像、生気のない3Dの塊、デフォルトの絵文字アイコン
• 「見た目はいいけれど、読み込みに8秒かかる」デザイン

インスピレーションの情報源（目的別に探し、見て回るだけにしない）

特定のUIの課題をどう解決するか迷ったら、ゼロからデザインする前に、すでに公開されているプロダクトの解決例を見てみましょう。テンプレートではなく参考例として使ってください。

• SaaSのランディングページ → saaspo.com, saaswebsites.com, land-book.com, lapa.ninja, landingfolio.com
• 実際のプロダクトUI／SaaSダッシュボード → mobbin.com, saasframe.io, designvault.io, refero.design, interface-index.com
• 実際のユーザーフロー（オンボーディングから購入手続きまでの動画） → pageflows.com, uisources.com, theappfuel.com
• マイクロインタラクション／細部のデザイン → designspells.com, 60fps.design, detailsmatter.framer.website, nicelydone.club, ripplix.com
• ダークモードのプロダクトUI → darkmodedesign.com, godly.website, awwwards.com
• ヒーロー／CTA／ナビゲーションのサブパターン → supahero.io, cta.gallery, navbar.gallery
• モバイルアプリのUI → Mobbin（モバイル）, appshots.design, scrnshts.club, paywallpro.app
• 受賞歴のあるクリエイティブなウェブデザイン → awwwards.com, thefwa.com, siteinspire.com, hoverstat.es
• メール → reallygoodemails.com · データビジュアライゼーション → datavizproject.com

活用方法： パターンを研究しましょう（ヒーローが高品質に感じられるのはなぜか？ タイポグラフィのリズムはどうなっているか？ モーションはどこで使われているか？）。ピクセル単位で模倣しないでください。目指すのは、自分だけの視覚的な語彙を築くことです。参考例の寄せ集めを作ることではありません。

避けるべきアンチパターン

• 汎用的なAIらしいデザイン：ありきたりなレイアウト、予測可能なコンポーネントパターン
• 使い古された配色：意図なく適用された、白地にラベンダー色を重ねたSaaS風のグラデーション
• CSSで十分に対応できる場面でのアニメーションライブラリの使用
• すでに独自のデザインシステムがあるプロジェクトでのTailwindの使用
• Laravel／TailwindプロジェクトでのカスタムCSS
• 既存のデザイントークンで対応できるのに、新しいCSS変数を追加すること
• 状態管理やインタラクティブな機能が不要なコンポーネントでの 'use client'
• LCP／CLSを確認せずにUIをリリースすること — 2026年では、遅いUIは見栄えも悪くなります

参考ドキュメント — 必要に応じて読み込む

詳細なリファレンスが references/ に4つあります。タスクに必要なものを読み込んでください。最初から4つすべて読み込む必要はありません。

• references/design-tokens.md — OKLCHのカラーパレット、3層のトークンアーキテクチャ、そのまま使えるTailwind v4の @theme ブロック、スペーシング／タイポグラフィ／角丸のスケール、明度に応じたダークモードのエレベーションを説明しています。デザインシステムの設定やトークンの定義時に読み込んでください。
• references/premium-rubric.md — 12項目のプレミアム品質フィルター（最初の600ミリ秒、タイポグラフィのリズム、色使いの規律、階層化されたシャドウ、フォーカスリング、空状態、シグネチャーディテール）と、AIらしい粗悪なデザインを見分ける明確なFAIL／PASSの基準をまとめています。リリース前のセルフレビューに読み込んでください。
• references/motion-library.md — 正確なcubic-bezier値を含むイージングカーブ集、意図別の継続時間、非対称な表示／終了のルール、コピーして使えるパターン（ホバー時の浮き上がり、段階的な表示、モーダルの表示、シマー）、および prefers-reduced-motion ブロックを掲載しています。アニメーションやインタラクションの追加時に読み込んでください。
• references/imagery-and-icons.md — AVIF→WebP→JPEGの <picture> フォールバック、srcset／sizes の割り当て、CLSの防止、ヒーロー画像のプリロード、currentColor／ARIAの設定を含むアイコンライブラリの比較、OKLCHに基づくアートディレクションを掲載しています。画像やアイコンを扱うときに読み込んでください。

実装メモ

• 新しいコードを書く前に既存のCSS／Blade／コンポーネントコードを読み、既存の規約に合わせてください
• プロジェクトに BRAND_GUIDE.md、DESIGN.md などのファイルがある場合は、まずそれを読んでください
• パフォーマンスは重要です。フォントはセルフホストし、JSは最小限に抑え、可能な限りCSSのみでアニメーションを実装してください
• 表示／スクロールをトリガーにするクラスは、.visible クラスが追加されるまで opacity: 0 を使うことがよくあります。ラッパーと子要素の両方にトリガークラスを重ねて指定しないでください

Claudeは、並外れた創造的な仕事を実現できます。遠慮せず、既成概念にとらわれず、独自のビジョンを貫くことで何が生み出せるかを示してください。ただし、プロジェクトで確立されたパターンは必ず尊重してください。