クライアント向けWebデザイン（AIテンプレート禁止）

クライアント向けWebデザイン（AIテンプレート禁止） は何をしますか？

このスキルは、あらゆるWebデザイン依頼（Webサイト、ページ、ランディングページ、ホームページ、モックアップ、リデザイン、リビルド、提案用サイト）に自動的に適用されます。ユーザーが名前を指定する必要はありません。

実際の代理店が制作したようなクライアントWebサイトを構築します：独自性のあるデザイン、実際のコピー、クリーンなコード、引き渡し前に実ブラウザで確認済み。

ステップ0 — 質問し、決して推測しない

コードを書く前に、不足しているものだけを確認します：

• スタック：プレーンなHTML/CSS/JS、Angular、React/Next.js、またはWordPress/Elementor。
• ビジネス：名称（正確な綴り）、業種、都市、提供サービス/製品、ターゲット顧客。
• 実際のアセット：ロゴ、写真、プロジェクト一覧、連絡先番号、WhatsApp、住所、Googleマップリンク、Google評価、ソーシャルリンク。
• 言語（例：英語＋タミル語/カンナダ語） — 決して推測しない。
• サイトの主な目的：電話問い合わせ、WhatsApp問い合わせ、見積もり依頼、予約、またはオンライン注文。 アセットが不足している場合は、明確に「TODO」スロットとしてマークします — ストック写真や架空の情報は決して使用しません。

ステップ1 — まずデザイン仕様（コンポーネントはまだ）

短い仕様書を作成し、承認を得ます：

1. 美的方向性 — 1つに決定：エディトリアル、高級感、工業的、温かみのあるローカル、ブルータリスト、ミニマルプレミアム。このビジネスに適している理由を1文で。
2. タイポグラフィ — 1つの特徴的なディスプレイフォント＋1つのクリーンなボディフォント。厳密なモジュラースケール（例：1.25）でclamp()を使用した流動的なサイズ。ディスプレイフォントにデフォルトのInter/Roboto/Arialは絶対に使用しない。
3. カラー（60-30-10） — 60%ベース（例：暖かみのあるオフホワイト#F7F6F2やチャコール#111214）、30%構造面、10%の強いブランドアクセント。CSS変数/デザイントークンとして定義。
4. グリッドとレイアウト — 12カラムグリッド、少なくとも1つの非対称/エディトリアル分割セクション、ヘアライン1pxボーダー、十分な余白。
5. ページ一覧＋実際のコピー — 各セクションの見出しと本文コピー。この業種と都市向けに作成。

方向性プリセット（クライアントに応じて調整）

• 宝飾品/金製品：高級エディトリアル；セリフディスプレイ（例：Cormorant、Instrument Serif）；アイボリー＋深みのあるマルーン/グリーン＋金のアクセントを控えめに；大きな商品写真；日時付き金価格表示ブロック；積立制度セクション；BISホールマーク信頼表示。
• 工業/製造/B2B：工業的で精密；グロテスクディスプレイ（例：Space Grotesk、Archivo）；チャコール＋スチールグレー＋1つの安全アクセント（オレンジ/イエロー）；スペック表、プロジェクトケーススタディ（クライアント、場所、面積、期間）、パンフレットダウンロード、詳細見積もりフォーム。
• ホテル/宿泊施設：温かみのあるエディトリアル；実際の写真を使ったルームカード、料金/アメニティ、場所と近隣の観光スポット、予約/WhatsApp CTA。
• 写真/クリエイティブ：ミニマルギャラリーファースト；画像主体の非対称メイソンリーレイアウト、最小限のクローム、名前/カテゴリに強いタイポグラフィ。

ステップ2 — 厳禁（AIの決まり文句）

絶対にしないこと：

• 紫/インディゴ/青紫のグラデーション、ガラスモーフィズムのブロブ、浮遊するグラデーションオーブ。
• カラーサークル内の汎用アイコンを使用した3カラム中央揃えの機能グリッド。
• プレースホルダーコピー：「Transform your workflow」、「Empowering businesses」、「Unlock your potential」、「Elevate your experience」、Lorem Ipsum、「Example Title」。
• ビジネスと無関係な笑顔のストックフォト。
• 偽の統計、偽の推薦文、または「0+」と表示されるアニメーションカウンター。
• 絵文字をアイコンとして使用、すべてを中央揃え、すべてのカードの高さを同一に。
• 完成サイトでの「#」へのリンク。

ステップ3 — 構築ルール

• コンポーネントは小さく、合成可能にする（例：見出し/本文/フッター部分を持つカード）。巨大なプロップだらけの単一コンポーネントにしない。
• モバイルファースト；390pxと1440pxの幅でテスト。
• 画像：実際のaltテキスト、width/heightを設定（レイアウトシフトなし）、スクロール位置より下はlazy-load、可能な場合はWebP/AVIF。
• モーション：控えめで意図的に（スクロールに応じたフェード/スライド、実際のホバー状態）；prefers-reduced-motionを尊重。
• アクセシビリティ：WCAG AAコントラスト、可視のフォーカス状態、セマンティックな見出し（ページごとにH1は1つ）、説明的なリンクテキスト（「もっと詳しく」のみは不可）。
• Angular + TranslateModule：常にすべてのプロジェクト言語のi18nキーファイルを生成。
• 出力が長くなる場合は、最初にバッチ計画を提案し、各バッチを完全に生成 — ファイルを途中で切らない。

ローカルビジネス必須項目（インドのSMBクライアント向け）

• 固定WhatsAppボタンとクリックトゥコール（tel:）リンク。
• 住所＋埋め込みGoogleマップ＋営業時間。
• Google評価/レビュー（実際のもの、プロフィールにリンク）。
• 実際に送信される（メールおよび/またはWhatsAppアラート）問い合わせ/見積もりフォームとスパム対策。
• SEO：ページタイトル =「都市のサービス | ブランド」；各ページのメタディスクリプション；LocalBusiness JSON-LDスキーマ；Open Graph画像；sitemap.xml；robots.txt。
• プライバシーポリシーページ；正しい現在の著作権年。

ステップ4 — 実ブラウザで検証

Playwright（ヘッドレスChromium）を使用：

1. すべてのページを1440pxと390pxでスクリーンショットし、スクリーンショットを確認。
2. 水平オーバーフロー、重なり合うテキスト、壊れた画像、小さなタップターゲット（<44px）をチェック。
3. コンソールエラーと失敗したネットワークリクエストをチェック。
4. 修正し、問題がなくなるまで再スクリーンショット。

ステップ5 — 引き渡し前チェックリスト（すべて合格必須）

• Lorem Ipsum /「Example」/「TODO」テキストが表示されていない。
• href="#"やデッドリンクがない；すべてのソーシャルリンクが実際のプロフィールにリンクしている。
• 公開ページに管理/ログインリンクがない；メタタグやソースに開発者メールや内部パスがない。
• ビジネス名、クライアント名、住所が正しく一貫して綴られている。
• カウンター、スライダー、レートティッカー、フォームが実際の値を表示し、動作する。
• すべての画像に意味のあるaltテキストがある；タイトルとメタディスクリプションがページごとに一意。
• モバイルとデスクトップのスクリーンショットを確認済み。
• Lighthouse：パフォーマンス、アクセシビリティ、SEOそれぞれ90以上（または理由を説明）。

最後に短いサマリーを添付：選択したデザイン方向性、構築したページ、チェックリスト結果、まだクライアント待ちのもの（写真、コンテンツ、認証情報）。