Skill.md検索

3店舗対応のコーポレート＋ブランドサイトをゼロから構築 — 「山芋の多い料理店」の川崎店・西葛西店・3号店に対応したトップページと個別店舗ページを、HTML/CSS/JavaScript で完全構築できます。デザインリファレンスは marco.tokyo ですが、白ベース×現代カジュアル×大きな写真配置という独自の方向性で差別化します。 AIデザインを排除した「手作り感」の実現 — 非対称レイアウト、セクション間の余白変動、写真のはみ出し・重なり、緊張感あるタイポグラフィなど、テンプレート感をなくす実装ルールを完全準拠できます。 レスポンシブ対応と高速化を同時実現 — モバイルファースト設計、4つのブレークポイント対応、Swiper.js を用いたスムーズなスライダー、IntersectionObserver によるスクロールトリガーアニメーション、SEO 対策（構造化データ）もセットで実装可能です。 画像差し替え前提で即運用可能 — ダミー画像はプレースホルダー div で表現しているため、実写真への差し替えだけで本番環境に移行できます。 飲食店・飲食チェーンの Web 担当者 — マルチブランド対応サイトを短期で立ち上げたい、店舗ごとのカスタマイズを含めたい方 HTML/CSS/JS での Web サイト構築を依頼したい発注者 — フレームワーク不使用・シンプル実装で、長期保守性が必要な場合 デザイナー＋コーダー協業チーム — デザインシステム（色・タイポグラフィ・スペーシング・コンポーネント）が整理されているため、分業がしやすい このスキルは「山芋の多い料理店」マルチブランド飲食店サイトの HTML/CSS/JS 構築を完全にカバーしています。トップページ＋3店舗ブランドページのフル構成で、必須リファレンスは design-system.md（カラー・タイポグラフィ・スペーシング・コンポーネント仕様）、site-structure.md（全ページ構成・セクション順序・ナビゲーション）、content-data.md（店舗情報・メニュー・コピー）、interaction-spec.md（アニメーション・スライダー・レスポンシブ仕様）です。技術は HTML5/CSS3/Vanilla JS 、レスポンシブは モバイルファースト・375/768/1024/1440px のブレークポイント、画像はダミー div で後差し替え前提、フォント Google Fonts CDN、アニメーション CSS transition + IntersectionObserver、外部ライブラリは Swiper.js CDN のみ許可、SEO は構造化データ（LocalBusiness）対応、パフォーマンスは lazy loading 実装です。デザイン鉄則として AIっぽさを排除するため、均等配置禁止・テンプレ感排除・タイポグラフィ緊張感・写真の動きのある配置・余白の呼吸・色のアクセント・テクスチャ質感・スクロール体験の緩急つけを厳守し、マルコ（ダーク背景・酒場温もり）との差別化として白ベース・素材感・開放感、セクションごとのレイアウト変動、文脈応じた CTA 表示切替が実装仕様です。