LP Production & Asset Management Guidelines

Created: 2026-02-05

LP制作における「画像」「ファイル管理」「作業フロー」のルール定義。09_coding_rules (コード) と 11_recruit_content_guide (コンテンツ) の間を埋める、実務的な制作進行ガイドです。

1. 画像・アセット管理 (Asset Management)

ファイル形式 (Formats)

• 写真 (Photos): 原則 WebP (.webp) を使用。
  • 品質設定: 80% (劣化が目立たない範囲で軽量化)
  • フォールバック: 基本不要（現代ブラウザはほぼ対応）。必要な場合のみJPEG。
• ロゴ・アイコン (Logos/Icons): SVG または WebP (透過)。
• 動画 (Videos): MP4 (H.264), muted, playsinline, autoplay, loop。
  • 1ファイル 3MB〜5MB 以内に抑えること。

命名規則 (Naming Convention)

[category]_[detail]_[suffix].webp の形式で統一。

• hero_main.webp (ヒーローイメージ)
• work_office_01.webp (実績: オフィス1)
• member_tanaka.webp (社員紹介: 田中)
• bg_texture_paper.webp (背景素材)

NG例:

• DSC00123.jpg (意味不明)
• saisyuu_fix_v2.png (バージョン名入り)
• image1.webp (具体的でない)

画像配置ディレクトリ

• テンプレートルート直下には置かない。
• 必ず images/ フォルダを作成し、その中に格納する。
  • images/hero/
  • images/works/
  • images/members/

2. 制作・実装フロー (Production Workflow)

Step 1: ベース構築 (Setup)

1. テンプレート選定: Type-A/B/C や Type-G（ハイエンド向け）から最適なものをコピー。
2. 不要ファイル削除: v2, backup, unused などのゴミファイルを即座に削除。
3. 画像フォルダ整理: images/ ディレクトリを作成。

Step 2: コンテンツ流し込み (Content)

1. テキスト置換: 11_recruit_content_guide に基づき原稿を作成・反映。
2. 画像差し替え: クライアント支給画像を WebP 変換して配置。
   • ※ 画像がない場合は、一時的にダミー（Generative AI）を使用するが、ファイル名に _dummy を付与する。

Step 3: モバイル最適化 (Mobile First)

1. 1024pxの壁: mobile_optimization_guide を適用。
2. 実機確認: Chrome DevTools で iPhone SE, iPhone 12/13, iPad Air の3サイズを確認。

Step 4: クリーンアップ (Cleanup)

1. 未使用CSS/JS削除: 使っていないクラス定義やスクリプトを削除。
2. コンソールエラー確認: F12 で赤文字のエラーが出ていないか確認。
3. 最終ファイル整理: 納品用フォルダ（dist）を作成し、必要なファイルのみをコピー。

3. ガイドライン体系図（5大マニュアル）

このプロジェクトのルールは以下の5つのマニュアルで構成されます。

1. コーディング鉄則 (Code): 09_coding_rules (バグ回避、ワンソース管理、gitコミット)
2. レスポンシブ/レイアウト (Layout): responsive_lp_guide (エディトリアル余白、Flexの扱い、PC/SP分離設計)
3. モバイル最適化 (Mobile/Type): mobile_optimization_guide (スマホ固有制約、タイポグラフィ、行間・文字間の一元管理)
4. コンテンツ (Content): 11_recruit_content_guide (構成、ライティング、トンマナ)
5. 制作進行 (Production): 12_production_guidelines (本ガイド: 画像管理、WebPルール、ディレクトリ)