Antigravity直伝・コーディングの鉄則

スマホ版をベースにすれば、デスクトップ版は「追加」だけで済みます。
「スマホでシンプルな形を作る」→「画面が広かったら横並びにする（@media）」

勇気を出して、元の記述を書き換える。
ファイル内検索（Ctrl+F）を使って、該当箇所の元の記述を探し出し、そこを直接修正します。

インラインCSSに書いて良いもの

• ✅ @font-face 定義
• ✅ CSS変数（:root）
• ✅ 基本レイアウト（html, body）

外部CSSのみに書くべきもの

• ❌ コンポーネントスタイル（.section-badge, .cta-buttonなど）
• ❌ レスポンシブルール（@mediaクエリ）
• ❌ アニメーション（@keyframes）

CSS修正ワークフロー：
① 外部CSS（renewal.css）を直接修正
② .min.css に同期：Copy-Item -Force "css\renewal.css" "css\renewal.min.css"
③ インラインCSSは絶対に触らない（フォント定義や変数以外）

中身の配置は必ず Flexbox か Grid を使います。
absolute は「背景の赤い丸」や「装飾アイコン」 など、崩れても読めるものだけに限定します。

各セクションは上下に依存する余白(margin-top/bottom)を持たせない。
自分の内側の余白(padding)だけで完結させる。
→ これなら、どの順番に入れ替えてもレイアウトが崩れません。

• :where() セレクタでベーススタイルを定義（詳細度を上げない）
• HTMLのクラス名を見直す
• セレクタの強さ（詳細度）を整理する

git add .
git commit -m "PRICE section 修正前"

# 実験的な変更はブランチで
git checkout -b fix/price-section

これで、いつでも git reset --hard HEAD で戻れます。

1. ボタンの幅を変更 → ブラウザ確認
2. OK → 色を変更 → ブラウザ確認
3. OK → フォントを変更 → ブラウザ確認

• ✅ デスクトップ表示（Chrome/Edge）
• ✅ スマホ表示（DevTools: F12 → デバイスモード）
• ✅ ボタンのクリック可否（実際にクリックしてみる）
• ✅ テキストの読みやすさ（コントラスト、文字サイズ）

特に、スマホ表示は必須。ユーザーの8割はスマホです。

# 最後のコミットに戻す
git reset --hard HEAD

# 特定のコミットに戻す
git reset --hard [コミットID]

# ファイル単位で戻す
git checkout HEAD -- file.css

💡 ビジュアルツールでの復旧方法
VS Codeのタイムライン機能やGit Graphを使った画像付きの復旧手順は、 トラブル・復旧マニュアルを参照してください。

[System.IO.File]::WriteAllText('file.css', $content, (New-Object System.Text.UTF8Encoding $false))

確認方法： VS Codeの右下に表示されるエンコーディングが「UTF-8」であることを必ず確認する。

• ☐ -Encoding UTF8 は指定したか？
• ☐ バックアップは取ったか？（cp file.css file.css.bak）
• ☐ 対象ファイルのパスは正しいか？
• ☐ Gitでコミット済みか？

最強の共通パーツを作る。
.btn-cta のような共通クラスを作り、どのページ、どの場所に置いても絶対に崩れないように独立させて管理します。

HTMLテキスト＋CSSで作る。
変更の可能性がある情報は、意地でもテキストデータとして実装します。

FontAwesome等のアイコンフォントは使用禁止（250KBの無駄）。
アイコンは必ずSVGコードとしてHTMLに埋め込む。

動画などの重いファイルは、HTMLに直接書かない。
window.innerWidth でPC判定してから、JSでタグを生成・注入する。
（スマホでの裏ダウンロードを完全に防ぐため）

スマホ用画像は品質(Quality)を 50 まで落とす。
小さな画面では劣化が気にならず、容量を劇的に削減できる。

• OS（Windows）、シェル（PowerShell）、エンコーディング（UTF-8）を常に意識させる
• PowerShell環境では grep ではなく Select-String を使うよう指示

• AIが生成したコードを盲信せず、必ずブラウザで確認（ルール6）を行う
• 一気に大量の修正を頼まず、セクションごとに段階的に依頼する

`.vscode/settings.json` を作成（プロジェクト全体に適用）:

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": false,
  "files.eol": "\n"
}

`.editorconfig` を確認（既存ファイルを更新）:

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true

絶対に守る3つのステップ:

1. テンプレートからコピー（ゼロから作らない）
2. 右下のエンコーディング表示を確認（必ずUTF-8）
3. 日本語を1文字入力→保存→ブラウザ確認（文字化けテスト）

全てのスクリプトに必須のヘッダー:

# ===== エンコーディング安全設定 =====
$OutputEncoding = [System.Text.Encoding]::UTF8
[Console]::OutputEncoding = [System.Text.Encoding]::UTF8

# ファイル保存時は必ずこのヘルパー関数を使う
function Save-Utf8NoBom {
    param([string]$Path, [string]$Content)
    $utf8 = New-Object System.Text.UTF8Encoding $false
    [System.IO.File]::WriteAllText($Path, $Content, $utf8)
}

新規HTMLファイル作成後:

• ☐ VSCode右下が「UTF-8」表示か？
• ☐ 日本語コメント <!-- テスト --> を入力して保存
• ☐ ブラウザで開いて日本語が正しく表示されるか？
• ☐ Gitでコミット（git add → git commit）

PowerShellでファイル操作後:

• ☐ -Encoding UTF8 パラメータを付けたか？
• ☐ または Save-Utf8NoBom 関数を使ったか？
• ☐ VSCodeで開いて日本語が崩れていないか？

# 1. Gitで元に戻す（最優先）
git checkout HEAD -- ファイル名.html

# 2. または手動で修正
$content = Get-Content "ファイル.html" -Raw -Encoding UTF8
$utf8 = New-Object System.Text.UTF8Encoding $false
[System.IO.File]::WriteAllText("ファイル.html", $content, $utf8)

許可されるCSS構成

• ✅ インラインCSS（<style>タグ）：フォント定義・CSS変数・FOUC防止の最小限のみ
• ✅ 外部CSS 1本（renewal.css）：全スタイルをここに集約

禁止事項

• ❌ 機能単位でCSSファイルを分割（cta-enhancement.css など）
• ❌ 修正用の上書きCSS（hero-fix.css など）
• ❌ AIに「新しいCSSファイルを作って」と依頼すること

新機能を追加したいときは：
renewal.css の該当セクションを探して、そこに直接追記する。

:root {
  /* ✅ 具体的な値を直接書く */
  --text-main: #333333;
  --text-sub: #555555;
  --text-muted: #888888;
  --bg-light: #f4f6f9;
  --border-light: rgba(0, 26, 61, 0.1);
}

→ どのファイルが先に読まれても、必ず正しい値が適用されます。

変数の値が正しく設定されているかは、ブラウザのDevToolsで確認できます：

1. F12 → 「要素」タブで対象の要素を選択
2. 右の「スタイル」パネルで color: var(--text-main) を探す
3. 変数名の横に色が表示されていれば正常。何も表示されなければ循環参照の疑いあり

height: 100vh;
min-height: 100vh;
padding-top: calc(50vh - 240px);

vh は全ブラウザ対応。見た目への差は数px程度で実害なし。
新しいビューポート単位（svh / dvh / lvh）は使用禁止。

<!-- CSS修正のたびに ?v=X.X を上げる -->
<link rel="stylesheet" href="css/hero.css?v=3.2" />

CSSファイルを修正したら、index.html のバージョン番号を上げる。これがスマホ・LINEへの確実な反映方法。

.visual { position: relative; top: auto; /* ← 必須！ */ width: 100%; margin: 0; }

/* モバイル用に親カードへ追加 */
.card { max-width: 100%; overflow: hidden; }

/* NG（詳細度が低くてデスクトップに負ける） */
body .card .visual { margin: 0; }

/* OK（親クラスを足して詳細度を上げる。!importantは不要） */
body .voice-grid .card .visual { margin: 0; }

1. ファイル確認：Select-Stringで変更が実際に書き込まれているか確認
2. PCで確認：F12 → Network → 「キャッシュを無効化」→ Ctrl+Shift+R
3. バージョンバンプ：CSS読み込みを renewal.css?v=9.2 のように更新
4. スマホのシークレットモード：スマホはPCと別キャッシュのためIncognitoで確認

• ❌ すべてのbr表示制御タグ（.sp-only-br等）の使用を禁止します。
• ✅ 解決策： 見出しや文章をPCとスマホで最適化したい場合は、必ず <h2 class="pc-only"> と <h2 class="sp-only"> の別ブロックとして完全に分離（HTMLごと用意） してください。

• 原因： /blog/（末尾スラッシュ）のURLでは pathname.split("/").filter(Boolean) が ["blog"]となりdepth=1になる。/blog/index.htmlならdepth=2。同じページなのにdepthが変わる
• 解決策A（根本修正）： 末尾が/のURLは"index.html"を付与してからdepth計算する

  var pathname = window.location.pathname;
  if (pathname.endsWith("/")) pathname += "index.html";
  var depth = pathname.split("/").filter(Boolean).length;

• 解決策B（確実）： 全サイト共通の重要リンク（実績・デザイン）は href="/works.html" のように絶対パスを使う

• 原因： 新しいJSファイルを追加する際、一部ページへの適用を漏らした
• チェック方法： grep -r "shared-nav.js" site/ で全ページの適用状況を確認する
• ルール： 全ページ共通のスクリプトを追加した際は、必ず全HTMLを対象にgrepして確認する

• 原因： テンプレートフォルダ名が type-speed/（過去の仮称）のまま残っており、実際のフォルダ名 type-b/ と不一致だった
• チェック方法： href="templates/ でgrepし、実際のフォルダ一覧と照合する
• ルール： テンプレートを追加・改名したとき、参照しているHTML全ファイルのリンクも同時に更新する

• 原因A（読み込み）： 日本語Windowsでは Get-Content -Raw のデフォルトエンコードが Shift-JIS。UTF-8のHTMLをShift-JISとして誤読して内部文字列が壊れる
• 原因B（書き込み）： Set-Content -Encoding UTF8 は BOM付きUTF-8 で書き出す。ブラウザが誤解釈して文字化けする場合がある
• 解決策（根本）： 日本語テキストを含むHTMLファイルは replace_file_content / multi_replace_file_content ツールのみで編集する。PowerShellの文字列操作は使わない
• 解決策（復旧）： git checkout <正常commitハッシュ> -- <ファイルパス> で正常版に戻してから、編集ツールで再適用する
• 例外（OK）： バイト操作（[System.IO.File]::ReadAllBytes）でBOM除去など、文字列を一切解釈しない処理は安全

• 原因： CSSの height: 100dvh / min-height: 100dvh を使用。dvh（Dynamic Viewport Height）はLINEの内蔵ブラウザ（LINE IAB）が非対応のため高さ計算が崩れる
• 解決策： dvh を vh に全て置き換える。vh はほぼ全ブラウザで対応しており、見た目への影響は数px程度で軽微
• ルール： svh / dvh / lvh などの新しいビューポート単位はLINE IABで動作しない。モバイルでは vh を使う

/* NG: LINE IAbで非対応 */
height: 100dvh;
min-height: 100dvh;

/* OK: 全ブラウザ対応 */
height: 100vh;
min-height: 100vh;

• 原因： CSSファイルが hero.css?v=3.1 のようにバージョン番号付きでブラウザにキャッシュされている。ファイルの中身を変えてもURLが同じなら古いキャッシュを使い続ける
• 解決策： index.html の CSS読み込みのバージョン番号を上げる（例: ?v=3.1 → ?v=3.2）
• ルール： CSSを修正したら必ずバージョン番号を上げてからアップロードする。PCは「キャッシュを無効化」で確認できるがスマホ・LINEは無効化できないため、バージョンバンプが唯一の確実な方法

<!-- NG: CSSを変えてもURLが同じなのでキャッシュされたまま -->
<link rel="stylesheet" href="css/hero.css?v=3.1" />

<!-- OK: バージョン番号を上げてキャッシュを無効化 -->
<link rel="stylesheet" href="css/hero.css?v=3.2" />

要素の下端を基準にしたいなら bottom: Xpx を使う。「ヒーロー下から何px上」が直接数値で表せるため、他の要素（赤丸など）と合わせやすい。

/* OK: ヒーロー下端からの距離を直接指定 */
.hero-decoration { bottom: 150px; height: 200px; } /* 円の上端 = bottom:350px */
.hero-line        { bottom: 150px; }                /* ラインの下端 = 円の下端に一致 */

👆 円の bottom 値に合わせれば「ラインが円の下端まで届く」を1行で実現できる。

スマホに不要な装飾は最初から非表示にする。PCのスタイルをひとつの @media ブロックに集約できるため、管理がシンプルになる。

/* ベースCSS（モバイル）：最初から非表示 */
.hero-line {
  display: none;
  position: absolute;
  /* 以下はPC用の初期値として書いておいてもOK */
}

/* PC（1024px以上）のみ表示・配置 */
@media (min-width: 1024px) {
  .hero-line {
    display: block;
    bottom: -10px;   /* 円のbottom値に合わせる */
    height: 240px;
  }
}

スマホでは物理的に「15文字前後」しか1行に入らないため、<h2 class="pc-only"> と <h2 class="sp-only"> のブロックごと完全に分離し、スマホの幅に合わせた最適な改行リズムで表示する。

• 横長カード： スマホでは flex-direction: column を指定し、横並びの「アイコン」をフル横幅（aspect-ratio:3/2等）の美しいバナー画像へ昇華させる。
• リスト（News等）： スマホ用に display: grid; grid-template-columns: 80px 1fr; を組み直し、「上段に日付・バッジ（幅100%）」「下段に画像とテキスト」のように要素を再配置してテキスト空間を確保する。

• 原因： HTMLファイルの <head> に noindex タグを意図的に入れ忘れていたため。
• 【絶対ルール】デフォルトnoindexの原則： 新しくHTMLファイルを作成・複製する際は、「トップページ」や「SEO集客用のブログ記事」など、明確に検索エンジンに拾わせたい【特例】を除き、すべてのHTMLの <head> 直下に例外なく <meta name="robots" content="noindex, nofollow"> を配置する。
• 備考： 営業時のデモンストレーション用や内部管理用（site/templates/、site/client-work/等の内部URL）は全てSEO的鎖国状態（noindex）を基本とする。

site/client-work/
  01_hotta/          ← 完了案件
  02_hokkaido_cafe/  ← 完了案件
  03_okagesama/      ← 進行中
  04_drpedal/        ← 進行中
  05_（次の案件）/

• 番号は2桁（01, 02, 03...）
• クライアント名は英数小文字＋アンダースコア
• スペース・日本語・大文字は使わない

XX_clientname/
  docs/              ← ヒアリング資料・設計書（.md形式）
    project_brief.md ← 必ず作成する（Antigravityが読める形式）
  design/            ← Figmaスクリーンショット・参考画像
  images/            ← 本番で使用する画像素材
  index.html         ← メインファイル
  style.css          ← スタイルシート（1案件1CSS）

セッションをまたいでも即座に作業再開できるよう、受注時にproject_brief.mdを作成する。

• 目的・KPI・ターゲット・デザイン方向
• ページ構成（全ページ一覧）
• 企業情報・SNSリンク・連絡先
• 現在のステータス（どのStepか）

「docs/project_brief.md を読んで作業してください」とAntigravityに伝えるだけで即スタートできる。

事例12：スクロール連動アニメーションの中間が重く（遅く）感じる（2026-04-03）

/* NG: スクロール量に対してイージング（3乗）を掛ける */
const p2E = 1 - Math.pow(1 - p2P, 3);

/* OK: スクロール量に等速（直接）で追従させる */
const p2E = p2P;