frontend-design

このスキルでは、ありがちな「AI っぽさ」を避けた、独自性のある本番品質のフロントエンドインターフェースを作成します。美的な細部や創造的な選択に並外れた注意を払い、実際に動作するコードを実装してください。

ユーザーからは、作成するコンポーネント、ページ、アプリケーション、またはインターフェースのフロントエンド要件が提供されます。目的、対象ユーザー、技術的な制約についての背景情報が含まれることもあります。

デザイン思考

コーディングを始める前に、背景を理解し、大胆な美的方向性を決めてください。

• 目的：このインターフェースはどんな課題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びます。極限までミニマル、マキシマリストなカオス、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／生々しい表現、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用本位など、選択肢は数多くあります。これらを発想のヒントにしながら、その美的方向性に忠実なデザインを作ってください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：記憶に残るものにする要素は何ですか？人が覚えているのは何でしょうか？

重要：明確なコンセプトの方向性を選び、精密に形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強さではなく、意図が感じられることです。

次に、以下を満たす動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番品質で、機能する
• 視覚的に印象的で、記憶に残る
• 明確な美的視点で統一されている
• 細部まで丁寧に磨き上げられている

フロントエンドの美しさに関するガイドライン

以下に重点を置いてください。

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選びます。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める個性的なフォントを選んでください。特徴のあるディスプレイフォントと、洗練された本文用フォントを組み合わせます。
• 色とテーマ：統一感のある美的方向性を貫きます。一貫性を保つために CSS 変数を使いましょう。控えめで均等に配色するより、主役となる色にシャープなアクセントを組み合わせるほうが効果的です。
• 動き：効果やマイクロインタラクションにアニメーションを使います。HTML では CSS のみで実現できる方法を優先してください。React では利用可能な場合に Motion ライブラリを使います。効果の大きい瞬間に注力しましょう。遅延表示（animation-delay）を組み込んだ、丁寧に演出されたページ読み込みを一度行うほうが、細かなマイクロインタラクションを散在させるよりも大きな喜びを生みます。スクロールをきっかけとする演出や、意外性のあるホバー状態を取り入れます。
• 空間構成：意外性のあるレイアウトを使います。非対称、重なり、斜めの流れ、グリッドからはみ出す要素、広々とした余白、または制御された密度を取り入れます。
• 背景と視覚的な細部：単色に頼るのではなく、雰囲気と奥行きを作り出します。全体の美的方向性に合う効果やテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透過表現、ドラマチックな影、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を使います。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白背景に紫のグラデーション）、予測しやすいレイアウトやコンポーネントパターン、文脈に即した個性のない型どおりのデザインなど、典型的な AI 生成風の美的表現は絶対に使わないでください。

創造的に解釈し、文脈に合った、真にデザインされたと感じられる意外性のある選択をしてください。どのデザインも同じものにならないようにしてください。ライトテーマとダークテーマ、さまざまなフォントや美的表現を使い分けます。世代を重ねてもよくある選択肢（たとえば Space Grotesk）に収束することは絶対に避けてください。

重要：実装の複雑さを美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションや効果を使った作り込んだコードが必要です。ミニマルまたは洗練されたデザインでは、抑制と精密さを保ち、間隔、タイポグラフィ、さりげない細部に注意を払う必要があります。ビジョンを巧みに形にすることで、エレガンスが生まれます。

Claude には、並外れた創造力があります。遠慮せず、既成概念にとらわれず、独自のビジョンに徹底的に取り組んだときに何が生み出せるのかを示してください。

よくあるデザイン上の問題

タイポグラフィの問題

問題：ありきたりなフォントの選択（Inter、Arial、Roboto） 解決策：Google Fonts の個性的なフォントの組み合わせや、カスタムフォントを使用します。例：ディスプレイフォント（Playfair Display、Bebas Neue、Archivo Black）と、洗練された本文用フォント（Source Serif、Crimson Text、Work Sans）を組み合わせます。

問題：階層構造と読みやすさが不十分 解決策：CSS 変数を使って明確な文字サイズのスケールを設定します。サイズ、太さ、間隔を使って視覚的な階層を作ります。

色とテーマの問題

問題：ありきたりな配色（白地に紫のグラデーション） 解決策：大胆で、文脈に合った色の選択を徹底します。一貫性を保つために CSS 変数を使用します。単色にアクセントカラーをひとつ加える配色、コントラストの強いブルータリズム、落ち着いたアースカラー、鮮やかな補色の組み合わせなどを検討します。

問題：コントラストが低く、アクセシビリティに影響する 解決策：色のコントラスト比が WCAG AA（テキストは 4.5:1、大きなテキストは 3:1）を満たしていることを確認します。WebAIM Contrast Checker などのツールを使用します。

レイアウトの問題

問題：予測しやすく、画一的なレイアウト 解決策：非対称、要素の重なり、斜めの流れ、グリッドを崩すコンポーネントを試します。CSS Grid と Flexbox を工夫して使用します。

問題：レスポンシブのブレークポイントが機能しない 解決策：320px、768px、1024px、1440px でテストします。可変タイポグラフィ（clamp()）とコンテナクエリを使用します。

アニメーションの問題

問題：アニメーションが過剰、または唐突 解決策：控えめで目的のあるアニメーションを使用します。prefers-reduced-motion に配慮します。散発的なマイクロインタラクションではなく、綿密に設計したページ読み込み時の演出に集中します。

問題：アニメーションによるパフォーマンスの問題 解決策：JavaScript より CSS アニメーションを優先します。transform と opacity（GPU アクセラレーション対応）を使用します。width、height、top、left のアニメーションは避けます。

アクセシビリティ違反

問題：キーボードナビゲーションがない 解決策：すべてのインタラクティブ要素にキーボードでアクセスできるようにします。視認できるフォーカス状態を追加します。

問題：セマンティック HTML が不十分 解決策：セマンティックタグ（<nav>、<main>、<article>、<section>）を使用します。必要に応じて ARIA ラベルを追加します。

問題：画像に alt テキストがない 解決策：画像に説明的な alt テキストを追加します。装飾用画像には空の alt（alt=""）を使用します。

デザイン検証チェックリスト

デザインを作成したら、次の点を確認します。

ビジュアル品質

• 色のコントラストが WCAG AA の基準を満たしている（テキストは 4.5:1）
• タイポグラフィに個性があり、読みやすい
• 視覚的な階層が明確（見出し、本文、アクセント）
• デザインに明確な美的方向性がある（ありきたりではない）
• 間隔と配置に一貫性がある
• 使い古された AI 風のパターン（紫のグラデーション、Inter フォントなど）がない

レスポンシブデザイン

• モバイルのブレークポイント（320px～480px）でテスト済み
• タブレットのブレークポイント（768px～1024px）でテスト済み
• デスクトップのブレークポイント（1440px 以上）でテスト済み
• どのサイズでもテキストが読みやすい
• 画像とメディアが適切に拡大・縮小される
• 小さい画面で横スクロールが発生しない

アクセシビリティ

• すべてのインタラクティブ要素にキーボードでアクセスできる
• フォーカス状態が明確に見える
• 全体でセマンティック HTML を使用している
• 画像に alt テキストがある
• 色だけを唯一の手がかりにしていない（色覚障害のあるユーザー向け）
• アニメーションが prefers-reduced-motion に配慮している

パフォーマンス

• アニメーションに GPU アクセラレーション対応のプロパティ（transform、opacity）を使用している
• アニメーションによるレイアウトの頻繁な再計算がない
• 画像を最適化している（WebP、適切なサイズ）
• フォントを効率よく読み込んでいる（font-display: swap）
• 初回描画を高速化するため、重要な CSS をインライン化している

コード品質

• テーマの一貫性を保つために CSS 変数を使用している
• クラス名が簡潔で意味を表している
• ハードコードされたマジックナンバーがない
• 複雑な判断についてコメントで説明している
• JavaScript なしでも動作する（プログレッシブエンハンスメント）

ブラウザー互換性

• Chrome／Edge（Chromium）でテスト済み
• Firefox でテスト済み
• Safari（WebKit）でテスト済み
• 最新の CSS 機能（Grid、clamp など）にフォールバックがある

デザインのテスト

ビジュアルテスト

# Test responsive breakpoints
# Open browser DevTools → Toggle device toolbar
# Test at: 320px, 768px, 1024px, 1440px, 1920px

アクセシビリティテスト

# Check color contrast
# Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

# Test keyboard navigation
# Tab through all interactive elements
# Verify visible focus states
# Test with screen reader (VoiceOver on Mac, NVDA on Windows)

パフォーマンステスト

# Open browser DevTools → Performance tab
# Record page load and interactions
# Look for layout shifts (CLS)
# Verify animations run at 60fps
# Check for memory leaks with long animations

クロスブラウザーテスト

• Chrome/Edge：主なテスト対象
• Firefox：CSS Grid/Flexbox の動作を確認
• Safari：WebKit 固有の問題をテスト
• モバイルブラウザー：タッチ操作とビューポートをテスト