# NextCode CMS 利用説明書

最終更新: 2026-07-04（v2.4.0）

## 1. サインインと編集モード

サインインの方法は3つあります。どれを使っても同じです。

| 方法 | 操作 | 向いている環境 |
|---|---|---|
| タップ | フッターの**コピーライト表記を5回連続タップ** | スマホ・タブレット（おすすめ） |
| キーボード | 公開ページ上で **ESCキーを3回連打** | PC |
| URL | `/system/signin` を直接開く | どちらでも |

- いずれも、未ログインならサインインボックスが表示され、**ログイン済みならそのまま編集モードに切り替わります**
- サインイン後、管理画面ツールバーの **「編集モードへ」** を押すと、公開ページ上で直接編集できるようになります

### 編集モードでできること
- 各ブロックにマウスを乗せる（スマホはタップ）と編集ツールバーが表示
- **＋** … その位置に新しいブロックを追加
- **∧ / ∨** … ブロックの並べ替え
- **フォルダ** … 別シート（main / visual / right）への移動
- **×** … ブロックの削除
- 「ページ管理」からページの追加・名前変更・並べ替え・非表示設定

## 2. ブロック一覧（22種）

| ブロック | 用途 |
|---|---|
| 見出し | h1〜h3の見出し。★区切りでチップ表示にも対応 |
| テキスト | リッチテキスト（モダンエディタSunEditor）。表・色・リンク可、画像はドラッグ&ドロップ/貼り付けで直接アップロード＋メディアライブラリから選択 |
| 写真 | 1枚画像＋配置・サイズ・alt設定 |
| テキスト と 写真 | 左右2カラムの定番レイアウト |
| フォトギャラリー | 複数画像のスライダー / グリッド |
| ヒーロー | 全幅のメインビジュアル（画像/動画背景＋キャッチ＋CTAボタン） |
| 記事一覧 | ブログ記事をカード一覧で任意ページに埋め込み |
| ブログ記事 | 最新記事を件数指定で表示 |
| お問い合わせフォーム | 名前/メール/種別/本文の完成済みフォーム。送信内容はDB保存＋メール通知＋自動返信 |
| メールフォーム | 項目を自由に設計できる汎用フォーム |
| メニュー | リンク集（アイコン・サムネ・サブテキスト付き） |
| 電話・LINEボタン | サイドバー用CTA（電話 / LINE / 予約 / メール、表示は個別ON/OFF） |
| 予約フォーム | 名前/電話/メニュー/希望日時の予約受付（クーポン入力欄付き）。受信は[予約管理]へ＋メール/LINE通知 |
| 店舗情報・地図 | 住所・電話・Googleマップ・営業時間を1枚のカードで表示 |
| スタッフ紹介 | 顔写真＋名前＋役職＋ひとことのカードグリッド |
| コード | HTML/CSS/JSを直接書けるブロック（CodeMirrorエディタ）。**スニペット保存**で再利用可 |
| 動画ギャラリー | YouTube URL貼り付け＋mp4混在OKのグリッド。クリックでライトボックス再生（遅延読込で軽い） |
| 広告タグ（AdSense） | 広告コードを貼るだけ。編集モード中は誤クリック防止のプレースホルダー表示、PC/スマホ別ON/OFF |
| アフィリエイト商品カード | 商品画像・説明・星評価・ボタン最大3つ（Amazon/楽天/Yahoo!色）。ステマ規制対応の「PR」表記自動 |
| 商品カタログ（外部決済） | 商品グリッド＋購入ボタン（Square/BASE/STORES等の決済リンク）。手軽なEC入門 |
| ライン | 区切り線 |
| スペース | 余白調整 |

### スニペット（コードブロックの再利用）
コードブロックの編集画面で「スニペットとして保存」すると、作ったパーツ（料金表・FAQなど）に名前を付けて保存し、他のページで呼び出せます。

## 3. シート構成（ThemeModern）

| シート | 表示場所 |
|---|---|
| visual | ページ上部の全幅エリア（ヒーロー向け） |
| main | メインコンテンツ（左カラム） |
| right | 右サイドバー※ |

※ ThemeModernのサイドバーは「電話CTA → ブログの最新記事/カテゴリ（ブログページのみ自動表示） → メニューブロック」を自動組み立てします。サイドメニューの中身は管理画面 **[サイドメニュー編集]** で編集します。

## 4. 管理画面

ツールバー（画面上部）から各機能へ移動できます。

| メニュー | パス | できること |
|---|---|---|
| ダッシュボード | `/admin/dashboard/front/index` | 概要表示 |
| ブログ | `/admin/blog/blogs/listing` | 記事の作成・編集・予約投稿（公開日時を未来に設定）・コメント承認 |
| お問い合わせ | `/admin/inquiry/inquiries/listing` | 受信箱。スレッド形式の返信履歴・定型文・検索・未読バッジ |
| サイドメニュー編集 | `/admin/menu/items/index` | サイドバーのリンク集をグループ単位で編集 |
| 設定 > 基本設定 | `/admin/settings/general/input` | サイト名・キャッチコピー・メール・電話・住所・会社名 |
| 設定 > 管理者一覧 | `/admin/settings/staffs/index` | スタッフの追加・削除・パスワード変更 |
| 設定 > 権限管理 | `/admin/settings/permissions/index` | ロール別に管理ページの 編集可/閲覧のみ/非表示 を設定 |
| テーマ | `/admin/themes/general/installed` | 使用テーマの切替（レスポンシブ・全デバイス共通） |
| メディア | `/admin/media/general/index` | 画像・ファイルの一括管理（アップロード / URLコピー / 削除） |

### スタッフのロール（権限）
| ロール | 権限 |
|---|---|
| developer | すべて可（権限管理の対象外） |
| admin | 既定ですべて可（権限管理で制限可能） |
| editor | ブログ投稿のみ（ページ編集UIは非表示） |

## 5. ブログの使い方

1. ブログページ（PageBlog型のページ）を「ページ管理」で作成（初期サイトに1つ作成済み）
2. 管理画面 [ブログ] → 「新規投稿」で記事を作成
3. **公開日時を未来にすると予約投稿**になります
4. 記事はページ上でも、編集モード中に直接編集ボタンから修正できます
5. コメント機能は記事ページ単位でON/OFF・承認制を設定可能

### モダンエディタ（v2.2〜）
記事の執筆画面は最新のWYSIWYGエディタ（SunEditor）です。
- **画像はドラッグ&ドロップ／コピペでそのまま挿入** — 自動でメディアに保存され、webp最適化も効きます
- 見出し（h2/h3/h4）・表・リンク・YouTube埋め込み・コード表示・全画面モード
- スマホ・タブレットでも快適に編集できます

### エディタのAIアシスト
編集画面上部の「🤖 AIアシスト」バーから:
| ボタン | 動き |
|---|---|
| 続きを書く | ここまでの本文と同じ文体で、続きを2〜4段落書き足します |
| 選択をリライト | 選択した部分を読みやすい自然な文章に書き直します |
| タイトル案 | 本文からクリックしたくなるタイトルを5案。クリックでタイトル欄に反映 |

## 6. お問い合わせの流れ

1. 訪問者が「お問い合わせフォーム」ブロックから送信
2. 内容がDBに保存され、**[設定 > 基本設定] のメールアドレスへ通知**＋送信者へ自動返信
3. 管理画面 [お問い合わせ] の受信箱で確認・返信（返信もメール送信され履歴に残る）
4. ステータス（新着/既読/返信済み/完了）で整理

> メール送信はサーバーのPHP `mail()` / sendmail を使用します。共用サーバーでは通常そのまま動きます。

## 7. テーマのカスタマイズ

同梱テーマは4種類。**[テーマ > テーマリスト]** でいつでも切替できます（すべてレスポンシブでPC/タブレット/スマホ共通）。

| テーマ | 特徴 |
|---|---|
| **ThemeModern**（標準） | Bootstrap 5・万能ビジネス系・日本語フォント M PLUS Rounded 1c |
| **ThemeTailwind** | Tailwind CSS・雑誌風エディトリアルミニマル（生成り×墨×弁柄、明朝見出し）。上質・落ち着き系に |
| **ThemeMotion** | 若者向けプレミアム。**フルスクリーン動画ヒーロー**・パララックス・自動スライダー・カウントアップ・三→Xアニメのハンバーガー・スマホ固定CTAバー。LP向き |
| **ThemeBlogger** | ブログ特化の柔らかフラット（角丸カード×パステル×丸ゴシック）。**目次自動生成**・吹き出し/注意ボックス/マーカー等の記事装飾・シェアボタン・プロフィール&新着サイドバー。アフィリエイトブログに最適 |

- 色を変える: 各テーマの `webroot/css/theme.css` 冒頭のCSS変数を編集（管理画面 [テーマ > テーマの編集] からも可能）
- サイト名・電話・住所などの文言はテーマに直書きせず、すべて [基本設定] の値が自動反映されます
- ThemeMotionのヒーロー動画の差し替え方法は `app/Plugin/ThemeMotion/README.md` 参照（メディアにアップしたmp4を指定可能）
- 新しいテーマはAIで作れます → **[テーマスタジオ]**（§25）。手作りする場合は既存テーマを複製し `Config/bootstrap.php` の名前を変更

### ページ別レイアウト（テーマ骨格）
管理画面 **[テーマ > ページ別レイアウト]** で、ページごとに以下を切り替えられます。
- カラム構成: 標準（2カラム右サイドバー）/ 1カラム / 2カラム左サイドバー / 3カラム
- ヘッダー・フッターの表示/非表示（LPを作りたいときは両方OFFで1カラムに）

## 8. AIチャット（標準搭載）

サイト右下に浮かぶAI接客チャットです。訪問者の質問にAIが24時間自動で答えます。

### 有効化（3分）
1. [OpenAI Platform](https://platform.openai.com) でAPIキーを取得（従量課金・gpt-4o-miniなら1会話 約0.1〜1円）
2. 管理画面 **[AIチャット]**（`/admin/chat/settings/index`）を開く
3. APIキーを貼り付け、「AIチャットを有効にする」にチェックして保存

### 設定項目
| 項目 | 内容 |
|---|---|
| ボットの名前 | チャット画面のヘッダーに表示 |
| テーマカラー | ボタン・吹き出しの色（#付きカラーコード） |
| 最初のあいさつ | チャットを開いた時の一言 |
| サイト情報・応対の指示 | **ここが頭脳。** 営業時間・サービス内容・よくある質問の答え・口調などを自由に書くと、AIがそれに沿って回答します |
| モデル | gpt-4o-mini（推奨・低コスト）/ gpt-4o（高品質） |

### 仕組みと安全性
- APIキーは**サーバー内のデータベースにのみ保存**され、訪問者のブラウザには一切渡りません（PHPがサーバー側でOpenAIへ中継）
- 迷惑利用対策: 訪問者1人あたり**毎時30回**の送信制限、1メッセージ1000文字まで、他サイトからのAPI呼び出しは拒否
- 会話はブラウザのタブを閉じると消えます（サーバーには保存しません）
- わからない質問には正直に「わかりかねます」と答え、お問い合わせフォームへ誘導します

### 表示について
- 有効にすると全ページの右下にチャットボタンが表示されます（編集モード中は非表示）
- スマホでは画面下部のシート型に自動で切り替わります

### 音声チャット（リアルタイム会話）
設定で「音声チャットも有効にする」をONにすると、チャット画面に🎤ボタンが出ます。タップするとマイク許可の確認後、**AIと声でリアルタイム会話**ができます（OpenAI Realtime・電話のような自然な会話）。
- 声は8種類から選択（おすすめ: Marin）
- コスト目安: 1分 約10〜30円と高めのため、利用は1人あたり毎時5セッションまでに制限されます
- APIキーがブラウザに渡ることはありません（使い捨ての一時トークン方式）

## 9. AI画像生成

管理画面 **[AI画像生成]**。プロンプト（作りたい画像の説明）とサイズを選んで生成すると、**メディアに自動保存**され、写真ブロック・ギャラリー・ヒーローでそのまま使えます。

- サイズプリセット: ヘッダー/バナー（1536×512）/ 横長 / 正方形 / 縦長
- 生成した画像の「ヒーローに設定」を押すと、ホームのヒーロー背景に即反映（ヒーローが無ければ自動作成）＝**AIヘッダー画像が2クリック**
- エンジンは OpenAI（gpt-image系/DALL·E）と Google Gemini を切替可。それぞれのAPIキーを設定（OpenAIはチャットのキーを自動共用）

## 10. AI記事作成

管理画面 **[AI記事作成]**。投稿先ブログ・テーマ・長さ・文体を選ぶと、AIが記事（タイトル＋見出し構成の本文）を書いて**下書き保存**し、そのまま編集画面が開きます。

- 下書きは公開日が2099年で保存されます。内容を確認し、公開日を今日に変えると公開されます
- 「下書きとして保存」を外すと即公開
- モデルは gpt-4o-mini（推奨）/ gpt-4o

## 11. AI動画作成

管理画面 **[AI動画作成]**。画像＋AIナレーションのスライド動画をブラウザの中だけで作れます（サーバーにffmpeg等は不要）。

1. シーンを追加し、画像（メディアから選択）とナレーション文を設定
2. 「音声を生成」— **リアルな人間の声**で読み上げ音声を作成
3. 「動画を作成」— ズーム演出付きで合成され、ダウンロード or メディア保存

### ナレーション音声（TTS）
| エンジン | 特徴 |
|---|---|
| OpenAI TTS（標準） | gpt-4o-mini-tts。自然な声・低コスト（1分 約1〜2円）。チャットとキー共用可 |
| ElevenLabs（任意） | 最高品質のリアル音声。日本語が非常に自然。elevenlabs.io の契約とVoice IDが必要 |

いわゆる機械音声（ロボット声）のエンジンは採用していません。

## 12. 予約機能

1. ページに「予約フォーム」ブロックを設置（メニューはブロック編集で1行1つ）
2. 予約が入ると **[予約管理]** に届き、サイトメールへ通知＋お客様へ自動返信（メール記入時）
3. 一覧でステータス管理: 新規 → 確認済み → 完了 / キャンセル（新規は黄色でハイライト）
4. LINE連携をONにしていれば、予約と同時にLINEにも通知

## 13. LINE連携

管理画面 **[LINE連携]**。お問い合わせ・予約が入った瞬間、あなたのLINEに通知が届きます。

1. [LINE Developers](https://developers.line.biz) で Messaging API チャネルを作成（無料）
2. 「チャネルアクセストークン（長期）」を発行して貼り付け
3. 宛先ID（あなたのユーザーID）を入力 → 「テスト送信」で確認
4. 通知したい項目（問い合わせ/予約）にチェック

## 14. SEO

管理画面 **[SEO]**。
- **sitemap.xml / robots.txt を自動配信**（`/sitemap.xml`・ページとブログ記事を自動収録・1時間キャッシュ）
- ページごとに検索結果の説明文（description）とSNSシェア画像（OGP）を設定
- **「AIで一括生成」**: description未設定の全ページを、ページ内容を読んでAIが書きます
- 公開後は [Google Search Console](https://search.google.com/search-console) にsitemap URLを登録するのがおすすめ

## 15. バックアップ（作成・復元・自動・クラウド）

管理画面 **[バックアップ]** で以下がすべて行えます。mysqldump等の知識は不要です。

- **作成**: ボタン1つでデータベース全体（＋希望すれば画像も）をZIP化。世代保持数は設定可能で、いつでもダウンロードできます
- **復元**: バックアップ履歴から選ぶか、ZIPをアップロードして復元。**復元直前に安全バックアップを自動作成**し、確認のため「RESTORE」の入力が必要です（developerロールのみ実行可）
- **自動バックアップ**: 有効化すると毎日/毎週、自動でバックアップを作成（cron不要・管理画面アクセス時に自動実行）。保持世代数・画像込みかも設定できます
- **クラウド送信**: AWS S3 / Cloudflare R2 などS3互換ストレージへバックアップZIPを送信（手動送信＋自動バックアップ後の自動送信、接続テスト付き）。サーバー障害に備えた外部保管ができます

## 16. 画像の自動最適化（webp）

画像をアップロード（またはAI生成）すると、**自動で軽量なwebp版が作られ**、対応ブラウザには自動でwebpが配信されます（実測: 1.5MBのPNG → 38KB）。設定は不要です。

## 17. AI多言語化

管理画面 **[AI多言語化]**。ページや記事を選んで言語（英語/中国語/韓国語）を選ぶだけで、レイアウトを保ったまま翻訳した**新しいページ/記事**を作ります。元のページはそのまま。インバウンド対応に。

## 18. AI FAQ生成

管理画面 **[お問い合わせ]** の「受信箱からAIでFAQページを生成」ボタン。**実際に届いた問い合わせ**からよくある質問ページ（Q&A形式・5〜10問）を自動生成します。個人情報は含めません。生成されたページは**非表示**で作られるので、内容を確認してからページ管理で公開してください。

## 19. AIクチコミ返信

管理画面 **[AIクチコミ返信]**。Googleクチコミ等を貼り付けて星の数を選ぶと、オーナーとしての返信文を**3案**生成。お店の口調メモ（一人称・結びの挨拶など）を保存しておくと、いつも同じトーンで書けます。低評価には言い訳をしない誠実な返信を作ります。

## 20. 営業時間・定休日

管理画面 **[営業時間]**。曜日ごとの営業時間・定休日・臨時休業日を設定すると:
- ヘッダーに「本日 10:00〜18:00 **営業中**」のリアルタイム表示
- 「店舗情報・地図」ブロックに営業時間表を自動表示
- Googleに伝わる構造化データ（OpeningHours）を自動出力

## 21. キャンペーンポップアップ

管理画面 **[ポップアップ]**。サイト訪問者の画面右下にスッと出る控えめなお知らせカード。タイトル・本文・画像・ボタン・**期間（開始日/終了日）**・**頻度（毎回/1日1回/1回だけ）**を設定できます。

## 22. クーポン

管理画面 **[クーポン]**。コード（自動生成可）と特典を発行すると、**予約フォームにクーポン入力欄**が現れ、入力時にその場で有効性を検証します。使用回数は予約から自動集計されるので、チラシ・SNS・LINEなど**どの媒体が効いたか**を計測できます。

## 23. 手動バックアップ（参考）

[バックアップ]画面を使わず手動で行う場合は、以下の2つを保存してください。

| 対象 | 内容 |
|---|---|
| データベース全体 | ページ・ブロック・記事・設定のすべて（mysqldump等） |
| `app/webroot/files/` | アップロードした画像・ファイルの実体 |

復元は「ファイルを戻す → DBをインポート → `app/tmp/cache` 内を空にする」の順で行います。

## 24. メディアライブラリ

管理画面 **[メディア]**。サイト内の画像・ファイルを一括管理する独自ファイルマネージャーです。

- **ドラッグ&ドロップで複数アップロード**（画像 / PDF / 動画 / 音声 / ZIP、25MBまで。画像は自動でwebp最適化）
- グリッド表示・「画像のみ」フィルタ・ページ送り
- **URLコピー** ボタンでファイルURLをすぐ取得（コードブロックやリンクに貼り付け）
- 削除は誤操作防止の2段階クリック
- テキスト系ブロックやブログのエディタからは、**ギャラリーとしてこのメディア内の画像を選択**できます

## 25. テーマスタジオ（AIテーマ生成）

管理画面 **[テーマスタジオ]**。AIがオリジナルテーマを丸ごと生成します。3つのモードがあります。

| モード | 使い方 |
|---|---|
| AIテンプレ生成 | サイト名・業種・雰囲気・メインカラーを選ぶ → AIが設計書（配色・フォント・構成）を提案 → 確認して生成 |
| 参考URL模倣 | 参考にしたいサイトのURLを入れる → 配色・フォント・レイアウトの「デザイン言語」を解析し、雰囲気を模倣したオリジナルテーマを生成（HTMLのコピーはしません） |
| WordPressテーマ変換 | WPテーマのZIPをアップロード → デザインをAIが理解し、NextCode CMS用テーマとして再実装（コード移植はせずAIによる再設計。GPLコードは混入しません） |

- 生成前に配色スウォッチ・フォント・構成のプレビューで確認できます
- 生成されたテーマは **[テーマ > テーマリスト]** に追加され、いつでも切替可能
- 生成テーマはAI出力を構文検証・危険コード検査してから書き込む安全設計です

## 26. AIブロックのビジュアルエディタ

「AIブロック」の編集画面が、パワポ感覚のビジュアルエディタに進化しました（従来のコードモードもタブで併用可）。

- **コンテナ**を追加し、1〜3カラムに分割・幅調整。テキスト/画像/ボタンを配置
- **レイヤーモード**: 要素をドラッグで自由配置し、重ね順（前面へ/背面へ）で画像の上に文字を重ねられます
- **PC/スマホタブ**: デバイスごとに表示順・表示/非表示を調整。プレビューも切替
- フォント（サイズ/太さ/色/行間/書体）・背景（色/グラデ/画像/角丸/影/余白）をパネルで調整
- **AIアシスト**: 選択した要素に「もっと高級感を」など自然言語で指示 → その場で改善 →「元に戻す」で復帰
- **画像化**: 選択したコンテナの内容からAI画像（gpt-image-2）を生成してメディアに保存・差し込み
- **テンプレ生成**: 業種と雰囲気を選ぶと、ヒーロー＋特徴＋CTAの構成一式を自動生成（美容/飲食/クリニック/士業/ジム/IT のプリセット付き）
- **参考URL模倣**: URLを入れるとそのサイトの雰囲気を模倣した構成を生成
- **下書き**: 作りかけのブロックは「下書き」にしておくと公開ページには表示されません

## 27. 1クリック自動アップデート

管理画面 **[設定 > アップデート]**（developerロールのみ）。新しいバージョンが配信されると通知が表示され、ボタン1つで更新できます。

安全のための仕組み（自動で行われます）:
1. 更新内容（リリースノート）を確認して「自動アップデート」を押す
2. **適用前に安全バックアップ（DB）を自動作成**（失敗したら更新を中止）
3. 配信サーバー（update.nextcode.ltd・HTTPS）からZIPをダウンロードし、**SHA-256チェックサムを検証**（改ざん・破損があれば中止）
4. 適用中は旧環境を退避し、**失敗したら自動で元に戻ります**
5. `.htaccess` / `my.php` / アップロードファイル（files）/ 自作テーマ・追加プラグインは温存されます

手動更新したい場合は https://update.nextcode.ltd/download からZIPをダウンロードできます。

## 28. AI設定ハブ（マルチプロバイダ対応）

管理画面 **[AI設定]**。すべてのAI機能のAPIキーを1ページで管理できます。

- **対応プロバイダ**: OpenAI / Google Gemini / Anthropic Claude / OpenRouter / Groq / DeepSeek / **Ollama（ローカルLLM・無料）** / カスタム（LM Studio・vLLM等のOpenAI互換サーバー）
- プリセットボタンでbase_URLと代表モデルが自動入力。**接続テスト**ボタンで応答時間を確認できます
- OpenAIキーを保存すると、AIチャット・AI記事作成・AI画像生成・AI動画・テーマスタジオ等の既存機能へ自動反映（各画面で個別設定する必要なし）
- 機能別にプロバイダを割り当て可能（例: チャットは低価格なGroq、記事作成はOpenAI）
- 注意: 画像生成・音声系はOpenAI/Gemini限定。ローカルLLM（Ollama）はCMSのサーバーから到達できるURLが必要です

## 29. 収益化（広告・アフィリエイト・簡易EC）

「小遣い稼ぎ」用のブロック3種で、ブログ収益化サイトが作れます（ThemeBloggerテーマとの組み合わせが最適）。

| ブロック | 使い方 |
|---|---|
| 広告タグ（AdSense） | AdSense等の審査後に発行される広告コードを貼るだけ。編集モード中は実広告を読み込まないので誤クリックの心配なし |
| アフィリエイト商品カード | Amazonアソシエイト・楽天アフィリエイト等のリンクをボタンに設定。**「PR」表記が自動表示**されステマ規制（景品表示法）に対応 |
| 商品カタログ（外部決済） | 自分の商品を並べ、購入ボタンにSquare/BASE/STORES等の決済リンクを設定。カート機能なしの手軽なEC |

おすすめの流れ: AI記事作成でブログを量産 → 記事内にアフィリエイトカード/広告タグを配置 → SEO機能でsitemap自動配信。
