tuhacci-lp 開発仕様書

この環境でできること

FutureShop（ショップのCMS）に貼り付けるLPのHTMLを、手元のPCでリアルタイムプレビューしながら制作できます。

• ファイルを保存するたびにブラウザが自動でリロードされる
• SCSSを書くと自動的にCSSに変換される
• ヘッダー・フッターなど共通パーツを含めた状態でプレビューできる
• 本番サイトの画像・CSS・JSを自動でダウンロードして使える

最終的な成果物と提出先

• 2602_flower_lingeriy_collection Flower Lingeriy Collection 2026
• swimstyle_2026 Swim Style Collection 2026

※ 新規LP追加後はこのリストに1行追記してください。

このプロジェクトを初めて使う場合、以下を一度だけ実行してください。

① Node.js がインストールされているか確認

ターミナル（Macの場合は「ターミナル.app」）を開いて以下を実行します。

v18.0.0 のようなバージョン番号が表示されればOKです。表示されない場合は nodejs.org からインストールしてください。

② プロジェクトのインストール

ターミナルでこのプロジェクトフォルダに移動して、依存パッケージをインストールします。

完了したら環境セットアップは終わりです。次回からは不要です。

新しいLPを作るときは以下のコマンドを実行します。必要なフォルダとファイルが自動で生成されます。

コマンド

プロジェクト名の命名規則：年月_LP名称（例：2603_spring_collection）

生成されるもの

コマンド実行後にやること

1. このドキュメント（index.html）の「LP 一覧」に追記する index.html を開いて「LP 一覧」セクションの <ul> に新しい <li> を1行追加してください。
2. 本番サイトのアセットをダウンロードする（必要な場合）
   $npm run fetch プロジェクト名
   既存のCSSや画像を参照している場合、本番サイトから自動ダウンロードします。

開発サーバーの起動

コーディングを始める前に毎回このコマンドを実行します。ファイルを保存するたびにブラウザが自動更新されます。

ブラウザが自動で開きます。終了するときはターミナルで Ctrl + C を押します。

各ファイルの役割と書く場所

このプロジェクトでは Figmaでデザインを確認 → AIにコードを生成させる → 自分で微調整 という流れでコーディングを行います。

全体の流れ

1. Figmaからデザイン情報を取得する

   デザインファイルを開き、セクションごとにスクリーンショットを撮ります。Dev Modeが使える場合は数値（サイズ・余白・カラーコード）も確認します。

2. AIにコーディングを依頼する

   スクリーンショットとデザインの数値をAIに渡し、HTMLとSCSSを生成してもらいます。依頼のポイントは後述。

3. 生成されたコードをファイルに貼る

   HTMLは _parts/プロジェクト名_html.html の <article> 内に、SCSSは scss/style.scss に貼ります。保存するとブラウザが自動更新されます。

4. ブラウザで確認しながら微調整する

   Figmaと見比べて、ズレている部分のSCSSを直接編集して調整します。

5. スマホ表示を確認する

   ブラウザのDevToolsでスマホサイズに切り替えて確認します（後述）。必要であればAIに再調整を依頼します。

Figma MCP のセットアップ（初回のみ）

Claude Code に Figma MCP を設定すると、FigmaのデザインデータをClaudeが直接読み取れるようになります。スクリーンショットよりはるかに正確なコードが生成されます。

① Figmaのパーソナルアクセストークンを取得する

1. Figmaを開き、左上のアイコン →「Help and account」→「Account settings」
2. 「Security」セクションの「Personal access tokens」→「Generate new token」
3. トークン名を入力（例：claude-code）して「Generate token」
4. 表示されたトークンをコピーして手元に保存する（一度しか表示されません）

② Claude Code に Figma MCP を登録する

ターミナルで以下を実行します（YOUR_TOKEN の部分を①のトークンに置き換えてください）。

コマンドが成功したら設定完了です。次回以降は不要です。

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp"],
      "env": { "FIGMA_API_KEY": "YOUR_TOKEN" }
    }
  }
}

Figma MCP を使ったコーディングの依頼方法

① FigmaのフレームURLをコピーする

1. Figmaでコーディングしたいフレーム（またはセクション）を選択
2. 右クリック →「Copy link to selection」でURLをコピー

② Claudeに依頼する

コピーしたURLと以下のテンプレートを貼り付けて送るだけです。

以下のFigmaフレームをコーディングしてください。
https://www.figma.com/design/XXXXXX/...?node-id=XX

ルール：
- プロジェクト名は 2603_spring_collection
- HTMLは <article class="2603_spring_collection"> の中身だけ（タグ自体は含めない）
- SCSSは .2603_spring_collection { } で囲む
- 画像パスは /img/feature/2603_spring_collection/ファイル名.jpg
- スマホ対応は @media screen and (max-width: 768px)
- jQuery・Swiper8・GSAP はすでに読み込み済み

③ Claudeがファイルに直接書いてくれる

ClaudeはFigmaのデザインを読み取り、_parts/プロジェクト名_html.html と scss/style.scss に直接コードを書き込みます。自分でコピー&ペーストする必要はありません。ファイルが保存されるとブラウザが自動更新されるので、Figmaと見比べて確認します。

ブラウザで微調整する方法

DevToolsの使い方（Chrome）

1. ブラウザ上で右クリック →「検証」（または F12 / Cmd+Option+I）
2. 左上の矢印アイコンをクリックしてページ上の要素を選択すると、そのHTMLとCSSが右側に表示される
3. 右側のCSSを直接クリックして数値を変更すると、リアルタイムで画面に反映される（一時的な確認用）
4. 確認できたら scss/style.scss に反映して保存する

スマホ表示の確認

1. DevToolsを開いた状態で、上部の「スマホ+タブレットアイコン」をクリック（または Cmd+Shift+M）
2. 上部のドロップダウンで端末を選ぶ（iPhone 14 Pro など）
3. 崩れている箇所があればSCSSの @media screen and (max-width: 768px) ブロック内を調整する

よくあるAIへの追加依頼パターン

ローカルで表示されるページは、本番サイトと見た目がほぼ一致するよう設計されていますが、以下の点が異なります。

lp/プロジェクト名/index.html はページの骨格です。実際のHTMLは書かず、パーツの呼び出しを並べるだけです。この内容をそのままFutureShopのフリーページに貼ります。

テンプレート（npm run new で自動生成）

<!-- ローカル専用ヘッダー。本番では無視される -->
<!-- @include header.html -->

<!-- パンくずリスト（共通パーツ）-->
{% parts[th-freepage-lp-pankuzu] %}

<!-- LP本体（_parts/プロジェクト名_html.html の中身が展開される）-->
{% parts[プロジェクト名_html] %}

<!-- カテゴリ（共通パーツ）-->
{% parts[renewal2024_top_category] %}

lp/プロジェクト名/_parts/プロジェクト名_html.html がLPの本体HTMLです。

基本構成（自動生成されるテンプレート）

<!-- 入れない -->
<link rel="stylesheet" href="/css/feature/プロジェクト名/style.css">
<script src="/js/feature/プロジェクト名/main.js" defer></script>
<!-- 入れない -->

<article class="プロジェクト名">

  <!-- ここにLPのHTMLを書く -->

</article>

「入れない」ブロックについて

画像のパスについて

画像は /img/feature/プロジェクト名/ファイル名.jpg のように絶対パスで書きます。

<img src="/img/feature/プロジェクト名/main_visual.jpg" alt="メインビジュアル">

ローカルでは img/feature/プロジェクト名/ フォルダに画像を置けばそのまま表示されます。

SCSSとは

CSSを便利に書けるようにした言語です。変数やネスト（入れ子）が使えます。npm run dev を起動しているあいだ、保存するたびに自動でCSSに変換されます。

書く場所と出力先

SCSSの書き方（基本）

/* プロジェクト名でクラスを囲うことでスタイルが他ページに影響しません */
.2603_spring_collection {

  /* ネスト（入れ子）で書けます */
  .section-title {
    font-size: 24px;
    color: #333;
  }

  .banner {
    width: 100%;

    img {
      width: 100%;
    }
  }

  /* メディアクエリ（スマホ対応） */
  @media screen and (max-width: 768px) {
    .section-title {
      font-size: 18px;
    }
  }
}

書く場所と出力先

利用できるライブラリ

以下のライブラリはすでにページに読み込まれています（_includes/head.html 経由）。

画像ファイルの置き場所

LP用の画像は以下のフォルダに置きます。

HTMLでの参照方法

<!-- パスは / から始める絶対パスで書く -->
<img src="/img/feature/プロジェクト名/image.jpg" alt="説明">

画像の推奨仕様

FutureShopに移植する前に、Vercelの検証環境でチームに共有・確認してもらいます。

Vercelへの反映方法

このプロジェクトはGitと連携しています。mainブランチにプッシュすると自動的にVercelへデプロイされます。

1. コーディングが完了したら変更をコミットする
   $git add .
   $git commit -m "add: 2603_spring_collection LP"
2. mainブランチにプッシュする
   $git push origin main

   数分でVercelに自動デプロイされます。

3. Vercelで表示を確認する

   https://tuhacci-lp.vercel.app/ にアクセスして、LPが正しく表示されているか確認します。

4. 確認OKならFutureShopへ移植する

   次の「FutureShopへの移植手順」を参照してください。

開発フロー全体像

1. パーツを登録する

   FutureShop管理画面 →「パーツ管理」→「新規追加」

   lp/プロジェクト名/_parts/プロジェクト名_html.html を開き、<!-- 入れない --> の行とその間のCSS・JSリンク行を除いた部分をコピーして貼り付けます。

   貼り付けるのはここだけ：

   <article class="プロジェクト名">
     ...LP本体のHTML...
   </article>

   CSS・JSリンク（<link> / <script>）は貼りません。

   パーツコードは プロジェクト名_html で登録してください（例：2603_spring_collection_html）。

2. フリーページを作成する

   FutureShop管理画面 →「フリーページ」→「新規追加」

   lp/プロジェクト名/index.html の内容をそのままコピーして貼り付けます。

   <!-- @include header.html --> の行はそのまま貼って構いません。FutureShop上ではHTMLコメントとして無視されます。
3. ファイルをFTPでアップロードする

   以下のフォルダをまるごとFTPでサーバーにアップします。詳細は次のセクション参照。

4. 本番で表示を確認する

   フリーページのURLにアクセスして表示を確認します。ローカルプレビューと見た目がほぼ一致していればOKです。

アップロードが必要なフォルダ

アップロードのタイミング

コードの修正があるたびにアップロードが必要です。CSSを変更した場合は css/feature/プロジェクト名/style.css だけアップロードすればOKです。

LOCAL インクルード構文

<!-- @include ファイル名.html -->

_includes/ 内のHTMLファイルを読み込んでそのまま展開します。本番ではHTMLコメントとして無視されます。

CMS パーツ呼び出し構文

{% parts[パーツコード] %}

FutureShopのパーツ呼び出しです。ローカルでは以下の順でHTMLファイルを探します。

1. lp/プロジェクト名/_parts/パーツコード.html（プロジェクト固有）
2. _parts/パーツコード.html（全LP共通）
3. どちらにもない場合 → ピンク色のプレースホルダーを表示