レッスン03

ツールの実践（ハイブリッド記事編）

入力ファイルの準備、お疲れ様でした。このステップでは、ツールを実際に実行し、生成されたHTMLを完璧な状態に仕上げていきます。「生成 → 目視チェック → エラー修正 → AIによる品質チェック」という品質向上のためのサイクルを学びましょう。

1. HTMLの自動生成

まず、レッスン02で準備した3つの入力ファイルがinputフォルダに正しく配置されていることを確認し、ツールを実行します。もしレッスン01でペルソナ設定ファイルを作成している場合、この段階でAIがそのペルソナになりきって記事本文を自動でリライトします。

  1. ツールフォルダ内の「_run_gui.bat」（macOSの場合はターミナルで「./_run_gui.sh」）を実行してGUIコントローラーを起動します。
  2. 「メイン実行」タブにある「一括実行」セクションから、【B】HTMLのみ生成 ボタンをクリックします。
  3. コマンドプロンプトのウィンドウが開き、処理が自動で進みます。処理が完了すると、output/for_wordpress/フォルダにoutput_interactive.txtとoutput_article.txtが生成されます。

（上級者向け: CLIでの操作に慣れている方は、cli/_run.batを直接実行し、メニューから「B」を選択することでも同じ処理が可能です。）

2. 一次プレビューと目視チェック

生成されたHTMLが意図通りに表示されるか、WordPressのプレビュー機能を使って確認します。

  1. WordPressの「投稿」または「固定ページ」の新規作成画面を開きます。
  2. 「カスタムHTML」ブロックを一つ追加し、output/for_wordpress/output_interactive.txtの中身を全てコピー＆ペーストします。
  3. 続けて、その下にもう一つ「カスタムHTML」ブロックを追加し、output/for_wordpress/output_article.txtの中身を全てコピー＆ペーストします。
  4. 画面右上の「プレビュー」ボタンから「新しいタブでプレビュー」を選択し、PCとスマホの両方で致命的な表示崩れがないかを確認します。

3. 致命的なエラーが出た場合の対処法

プレビューで大きな表示崩れなどの致命的なエラーが見つかった場合、以下の2つのアプローチで修正を試みることができます。

3.1. 方法A：Geminiチャットで修正する（インタラクティブ部のみ）

インタラクティブ部（output_interactive.txt）に問題がある場合に有効な方法です。デザインの元となったウェブページを生成したGeminiのチャットを再利用します。

メリット

AIが元の文脈を保持しているため、比較的高い精度で修正が成功しやすい。

デメリット

修正後、再度レッスン02の「アセット抽出」からやり直し、ツールも再実行する必要がある。記事本文は修正できない。

3.2. 方法B：Google AI Studioで柔軟に修正する

インタラクティブ部、記事本文部の両方に対応できる、より高度な方法です。

メリット

問題箇所だけを修正するため、ツールを再実行する必要がない。CSSの追加など、より複雑な修正にも対応できる。

デメリット

AIに的確な指示を出す能力（プロンプトエンジニアリング）が求められる。

柔軟な修正のコツ：
  1. Google AI Studioにアクセスし、プロンプト入力欄に「以下のHTMLコードの問題点を修正してください」のように、やりたいことを具体的に入力します。
  2. 問題のあるHTMLコード（output/for_wordpress/output_interactive.txt または output/for_wordpress/output_article.txt の全文）を貼り付けます。
  3. AIへの指示を使い分ける：
    ・慣れていない場合や複数箇所の修正が必要な場合：「修正後のHTML全体をコードブロックで出力してください」と指示し、出力されたコード全体を元のファイルに上書きします。
    ・修正箇所が明確な場合：「修正点だけのコードをコードブロックで出力してください」と指示し、AIが出力した修正後コードを元のファイルの該当箇所に上書きします。
  4. 修正後のファイルを保存し、再度WordPressのプレビューで確認します。

4. AIによる品質チェックと修正サイクル

目視で大きな問題がないことを確認したら、AIによる精密な最終チェックと修正を行います。各段階でAIは一つのタスクに集中するため、より高精度なチェックが可能です。

  1. 品質レポートの生成：
    GUIの「品質・AI連携」タブにある「品質チェック」セクションから、【3】最終品質レポート 生成 ボタンをクリックします。AIがHTMLファイルを分析し、output/reports_and_seo/quality_report.txtを生成します。
  2. レポートに基づく修正：
    生成されたレポートを開き、「問題あり」と指摘された箇所をVSCで修正します。
    注意：AIの指摘は万能ではありません。特に、AIは半角記号（:）と全角記号（：）のような見た目が似ている文字を誤認識することがあります。最終的な判断は必ずご自身の目で行ってください。
  3. 「問題なし」になるまで繰り返す：
    一度修正が完了したら、再度GUIから【3】最終品質レポート 生成を実行して再チェックします。これにより、修正が正しく行われ、新たな問題が発生していないかをクリーンな状態で確認できます。レポートで「【判定】問題ありません。」と表示されるまで、この「レポート生成 → 修正 → 再確認」のサイクルを繰り返すことで、コードの品質が最大限に高まります。

お疲れ様でした！AIによる品質チェックが完了した時点で、HTMLファイルは完成です。次のレッスンでは、完成したファイルをWordPressに反映させ、公開前の最終確認を行います。