# Pronga Site Production Guide

Prongaは「AIで一発生成して納品するサービス」ではありません。

ヒアリング、テンプレート選定、CodexによるElementor再構築、Claude Codeレビュー、人間の最終確認を通じて、編集できるWordPressサイトを丁寧に作る制作文化です。

## 基本思想

- 速さだけでなく、訪問者が安心して次の行動を取れることを重視する。
- お客様の事業、言葉、写真、目的を理解してから設計する。
- AIの出力をそのまま納品せず、人間の目で違和感を確認する。
- 完成後にお客様がElementorで編集できる構造にする。
- 「それっぽい」より「意味がある」デザインを優先する。

## 制作フロー

1. ヒアリング内容、参考URL、素材、目的を確認する。
2. Pronga Template Libraryから方向性に合うテンプレートを選ぶ。
3. 制作設計書を文章で作る。
4. CodexがElementor Native形式でページを構築する。
5. ローカルWordPressでPC・スマホ確認を行う。
6. Claude Codeにレビューを依頼し、改善点を受け取る。
7. Codexが修正し、再検証する。
8. Web制作者が最終確認する。
9. 承認後にデモ環境へ反映し、顧客に通知する。

## Elementor制作ルール

通常コンテンツはElementor Freeで編集できるWidget Native構成にします。

基本的に使うWidget:

- container
- heading
- text-editor
- image
- button
- icon-box
- icon-list
- divider
- spacer
- shortcode
- toggle / accordion相当

避けるもの:

- HTML widgetへの逃げ
- 巨大なText Editor HTML
- Elementor Pro依存
- TailwindやReact構造の直接移植
- インラインCSSだらけのページ
- 複雑なJSアニメーション

## デザイン判断

### テンプレート

- テンプレートは色味ではなく、構造・余白・写真の扱い・感情温度で選ぶ。
- 同じ構造の色違いを量産しない。
- 制作実績で並んだときに「全部同じ」に見えないよう、ヒーロー、カード、流れ、CTA、フッターに違いを作る。

### 見出し

- 見出しは、まず言葉として何を伝えるかを決める。
- 大きくすれば良いわけではない。
- 明朝体、丸ゴシック、モダンサンセリフなどは、業種や雰囲気に合わせて使い分ける。
- 一部だけ色を変える場合は、意味のある言葉だけにする。
- 差し色は背景とのコントラストを必ず確認する。

### 改行

- PCでは意味の切れ目で意図的に改行する。
- スマホでは不自然な改行を避ける。
- 1か所で改行の問題が出たら、同様の見出しをサイト全体で確認する。

### 写真

- 画像を余白消しのために伸ばさない。
- 必要なら自然にトリミングする。
- PC・スマホで人物や重要物が切れていないか確認する。
- 写真が合わない場合は、カードや比率を調整するか、別画像を選ぶ。

### カード・数字・バッジ

- 大きな数字、年号、短いバッジは「意味が伝わる場合だけ」使う。
- ただの装飾としての数字カードは避ける。
- 意味が弱い場合は、具体的なメリット、工程、支援内容に置き換える。

### エフェクト

- 控えめな影、hover、fadeInUp程度に留める。
- 読ませたい本文や重要カードに強いアニメーションを入れない。
- 高級感は「余白、文字、写真、影の控えめさ」で出す。

## ヘッダー・フッター

- ロゴや会社名は必ずホームにリンクする。
- 会社名と下の説明文は近づけて、1つのブランドブロックとして見せる。
- 通常メニューは、できるだけWordPress標準メニューで管理する。
- フッターは余り物ではなく、信頼を作る最後の場所として扱う。

## Prongaのこだわり

Prongaは、AIの速さとWeb制作者の目を組み合わせます。

プロンプトや制作ルールは公開できます。
けれど、本当に大切なのは、ひとつずつの事業と訪問者に向き合い、「この言葉で伝わるか」「この余白で安心できるか」「このサイトは自分で直せるか」を確認し続ける姿勢です。

それがProngaです。