modern-web-design

モダンなWebデザイン作成ツール

モダンなデザイン原則、Tailwind CSS、現代的なUIパターンを使用して、美しくレスポンシブなWebサイトを構築します。アニメーション、レスポンシブレイアウト、アクセシビリティ機能を備えた、本番環境ですぐに使えるコードを作成します。

このスキルを使用する場面

以下の場合にこのスキルを使用します。

• ランディングページやマーケティングWebサイト
• ポートフォリオや個人ブランドのサイト
• ビジネスや企業のWebサイト
• SaaSアプリケーションのインターフェース
• Eコマースの商品ページ
• ブログやコンテンツサイト
• ダッシュボードや管理画面

デザインシステムの基盤

基本原則

• ブレークポイントを最適化したモバイルファーストのレスポンシブデザイン
• 余白、色、タイポグラフィに一貫性を持たせるデザイントークン
• 保守性の高いコードを実現するコンポーネントベースのアーキテクチャ
• ARIAラベルとセマンティックHTMLを用いたアクセシビリティ優先の開発
• CSSを最小限に抑え、アニメーションを効率化するパフォーマンス最適化

スタイルカテゴリ

スタイルの仕様全体については、references/design-systems.mdを参照してください。

ミニマルでプロフェッショナルなデザイン

• 十分な余白を取り入れた、すっきりとしたタイポグラフィ
• アクセントカラーを戦略的に配したニュートラルなカラーパレット
• 控えめなシャドウと最小限のアニメーション
• コンテンツの階層と読みやすさを重視

モダンなSaaS

• 大胆なグラデーションと鮮やかな色
• 浮き上がり効果のあるカードベースのレイアウト
• マイクロインタラクションとホバー時の状態
• ダッシュボード風のコンポーネント

クリエイティブなポートフォリオ

• 実験的なレイアウトとグリッドシステム
• 大胆なタイポグラフィと独創的な配色
• 高度なアニメーションとスクロールエフェクト
• 画像を中心としたデザインパターン

Eコマース向け最適化

• 商品を中心としたレイアウト
• 信頼性を示す要素とソーシャルプルーフ
• コンバージョンに最適化されたCTA
• ショッピングとチェックアウトのフロー

実装ワークフロー

1. 要件を分析する：サイトの目的、ターゲットユーザー、必要な機能を特定します
2. デザインカテゴリを選択する：リファレンスから適切なスタイルシステムを選びます
3. 構造を生成する：適切な見出し階層を備えたセマンティックHTMLを作成します
4. スタイルを適用する：デザインシステムのトークンを使ってTailwind CSSクラスを実装します
5. インタラクションを追加する：アニメーション、ホバー時の状態、マイクロインタラクションを含めます
6. レスポンシブ表示を最適化する：モバイルファーストのレスポンシブ動作を確保します
7. アクセシビリティを強化する：ARIAラベル、代替テキスト、キーボードナビゲーションを追加します

コード生成の標準

HTML構造

• セマンティックなHTML5要素（<header>、<main>、<section>、<article>）
• 適切な見出し階層（h1 → h6）
• アクセシビリティ属性（ARIA、代替テキスト、ロール）
• SEOとレスポンシブデザインのためのメタタグ

CSSフレームワーク

• 迅速な開発を実現するTailwind CSSユーティリティクラス
• 複雑なアニメーションや独自のエフェクト向けのカスタムCSS
• デザイントークンの一貫性を保つCSS変数
• モバイルファーストのメディアクエリ

JavaScriptの機能

• 軽量なインタラクションを実現するバニラJavaScript
• スクロールアニメーション向けのIntersection Observer
• フォームの検証と送信処理
• モバイルメニューとナビゲーションの切り替え

コンポーネントライブラリ

再利用可能なコンポーネントを利用するには、assets/component-templates.htmlを読み込みます。

ナビゲーションコンポーネント

• モバイルメニューを備えたレスポンシブヘッダー
• スクロールエフェクト付きの固定ナビゲーション
• パンくずナビゲーション
• ソーシャルリンク付きのフッター

コンテンツセクション

• さまざまなレイアウトのヒーローセクション
• 特徴のグリッドと比較表
• お客様の声のカルーセル
• FAQのアコーディオン
• お問い合わせフォーム

インタラクティブ要素

• アニメーション付きのボタンとCTA
• 画像ギャラリーとライトボックス
• プログレスバーとカウンター
• モーダルダイアログとツールチップ

高度な機能

アニメーションシステム

• スムーズなインタラクションを実現するCSSトランジション
• 複雑な動きのためのキーフレームアニメーション
• スクロールをトリガーとするエフェクト向けのIntersection Observer
• パフォーマンスを最適化したアニメーション

パフォーマンス最適化

• ユーティリティファーストのアプローチによる最小限のCSS
• 画像やサイズの大きいコンテンツの遅延読み込み
• ファーストビューのコンテンツ向けのクリティカルCSSのインライン化
• プログレッシブエンハンスメントの戦略

SEO の基盤

• セマンティックな HTML 構造
• メタタグと Open Graph
• JSON-LD 構造化データ
• Core Web Vitals のパフォーマンス最適化

関連リソース

• references/design-systems.md：スタイルガイドとカラーパレット一式
• assets/component-templates.html：再利用可能な HTML コンポーネントライブラリ
• scripts/build-tools.js：最適化およびビルド用ユーティリティ