タスク情報を補完しました。

• 開始日・工数・優先度を設定
• 作業方針をdesc2に記載
• 現在保留中（進捗80%、チェックリスト12件登録済み）

XSS: $top_url, $area の未エスケープ出力 全出力箇所で htmlspecialchars($var, ENT_QUOTES, 'UTF-8')

オープンリダイレクト $top_url をホワイトリスト or 同一ドメイン検証

HTTPホストヘッダーインジェクション $_SERVER['HTTP_HOST'] の代わりに固定値を使用

商標/コラム記事からTOPページに戻れるように

コラムや商標記事はGoogleの広告出稿審査上必要なだけで、初動の段階ではコラムにこだわりはないのでAI前提にしよう自体を変更したい

コラム記事にパンクずを入れて、LPトップ→コラムのように遷移した時に戻れるようにしたい

$top_urlの変数を持たせておく

マニュアル:
https://plus-creative.xyz/nakata/2026/0219/

作業場所:
XXXXXXXX

表示URL:
XXXXXXXXX

利用スキルズ:
XXXXXXXXXX/plus-first-lp-biluder/SKILL.md

LPの作成をしてください。
トップページのコンテンツや絞り込み検索、ぶら下がるコラム記事の作成を一通りお願いします。

案件とジャンル/コラム情報:
XXXXXXX/data.md
XXXXXXX/column-data.md

https://plus-creative.xyz/nakata/2026/0219/

スキルズダウンロード：
https://plus-creative.xyz/nakata/2026/0219/plus-first-lp-biluder.zip

汎用的なLPベース作成

• ミニランキング
• 教育コンテンツ
• 比較表
• ランキング
• 絞り込み検索フォーム

(1)それぞれのパーツ作成
(2)スキルズ作成

ディレクトリ構成
/hoge/ ─ index.php
            ├ /template/
             └/web/
                    ├ hoge.php
                    ├ fuga.php
                     └ style.css

メタリフ内の案件バナーはランキングで表示しているバナーと統一
メタリフのトンマナはtopページに揃える
メタリフのCSSは/web/style.cssを読むように

森さん作成
php_data_management.md
をテスト。

テストするにも
このスキルを試す上での
ベースファイルを用意した上ではないとテストが出来ないと思われ。

絞り込み検索とはなにか、
それをどのように変更するかの
知識や状況の説明、変更の流れをステップに分けて経緯を伝える必要あり。

AIが行う上で精度を高めて、
回るフローを考え、markdownに落とし込む。

一旦できる範囲で定義。

AI自身に調査/分析：
https://plus-creative.xyz/nakata/2026/0205/midashishita_report/

https://lifework.link/task_manage/uploads/20262983350_CONTEXT_midashishita.md

まず見出し下画像の定義や言語化が必要。

『良い見出し下画像とは何か』を、誰が聞いても同じイメージを共有できるくらい、具体的な言葉で定義するところが必要。

https://plus-creative.xyz/nakata/PLUS_LP_BASE/beauty

https://plus-creative.xyz/nakata/PLUS_LP_BASE/medical

https://plus-creative.xyz/nakata/PLUS_LP_BASE/finance

https://plus-creative.xyz/nakata/PLUS_LP_BASE/lifestyle

未だに汎用性のない内容、テキスト、クラス名になっている部分があるのでその修正。

LPベースの作成、対象LP

金融
https://finance-listing.com/factoring/

オンライン診療
https://medical-list.net/diet/

ライフスタイル
https://style-lives.com/kids/

ビューティー
https://medikel-beauty.com/kuma/

ある見本で、SKILLSを利用したLPの生成を行う。

• ホワイトペーパー
• LPのベース
• SKILLS

SKILLSを作成してみて、テスト

• MVした簡易ランキング
• 比較表
• ランキング
• 学習コンテンツ

1. AIによるLP作成の理想と現実
   理想は「簡単な指示（プロンプト）を出すだけで、高品質なLPが自動で完成する」ことですが、
   現状の技術ではまだその段階には至ってないと思っています。

以下のような課題があります。
AIは社内のLPを知らない:
AIは一般的なLPの作り方は知っていますが、独自の考え、ターゲット顧客、デザインのトーン＆マナー、そして過去の成功事例に基づいた「社内のLPの型」までは理解していません。

漠然とした指示では、ありきたりな成果物しか生まれない: 「〇〇のLPを作って」というような簡単な指示だけでは、AIは当たり障りのない、成果に繋がりにくいLPしか生成できません。

2. 課題解決へのアプローチ：AIを育てる

社内のルールを理解した、優秀なアシスタントとして活用すること

そのためには、AIが能力を発揮できるよう、以下の2つのステップで土台を整備する必要があります。
Step 1: 社内のノウハウを言語化し、AIが理解できるものにする

まず、これまで暗黙知や個人の経験に頼っていたLP作成のノウハウを、誰でも理解できる「ルールブック」として明文化。
これは、AIに私たちのやり方を教えるための教科書になる。

【言語化する情報の例】
LPの基本構造:技術スタック、ディレクトリマップ、includeルール、ファーストビュー、ボディ、クロージングなど、各セクションに何をどのような順番で配置するかのルール。
コーディングデザイン：クラス名のルール、使用するフォント、フォントサイズ、行間設定、スタイル設定の順番、利用する色、案件に対してのデザインルール、レイアウト。
コンテンツの考え方: ターゲット響く訴求ポイント、社内で取り扱っているコンテンツの種類と見せ方。
デザインの規則: ブランドイメージを統一するためのフォント、色使い、画像のスタイルガイド。
社内独自のルール:解析タグについて、解析するためのパラメータの付与ルール、 薬機法などのコンプライアンス遵守事項、特定の表現の禁止ルールなど。

→今まで手作業していたもや独自ルールのものやタスク運びでの考えをすべて言語化する。

Step 2: SKILLSを活用し、AIの作業を標準化・自動化

言語化・構造化したノウハウを、SKILLS という仕組みを使ってAIに教え込む。

SKILLSとは...
AIに対して「こういう時は、この手順で、このように動いて」という具体的な作業手順やルールを記憶させ、再利用可能な「スキル（能力）」として登録できる機能。
これにより、AIは一般的な知識だけでなく、私たち独自の社内ルールに基づいた作業を実行できるようになります。

【SKILLSの活用イメージ】
LPを構成する各パーツ（比較表、ランキング、お客様の声など）ごとに、SKILLSを作成します。
例：比較表作成SKILL
指示: 「マウスピース矯正の比較表を作成して、扱っている案件は~~~比較表の項目は~~~~利用する色~~~~１位〜〜〜〜５位〜〜〜〜」
AIの動き:
あらかじめSKILLに登録された「比較表のテンプレート」を読み込む。
SKILLで定義された項目（ブランド名, 総合評価, 月額, 総額など）に従って情報を整理する。
指定されたブランド（スマイルモア, WE SMILEなど）の情報を入力し、標準化されたフォーマットで比較表を出力する。

このように、コンテンツの種類ごとにSKILLSを整備することで、誰が指示しても、いつでも、同じ品質のパーツを迅速に作成できるようになります。
最終的に、これらのパーツを組み合わせることで、LP全体の作成を効率化できると思います。

SKILLSを使ったワークフロー例:

【人間】準備: LP作成に必要な情報と素材を、どのようなコンテンツが必要言語化しAIに渡す。
【AI】パーツ作成: 指示に基づき、SKILLSを活用して各コンテンツパーツ（比較表、文章案など）を生成。
【人間】レビュー: AIが生成したパーツをレビューし、品質は十分かを確認・修正。
【人間/AI】LPの組み立て: 完成したパーツを組み合わせて、LP全体を仕上げる。

3. まとめ
   AIによるLP作成の効率化は、仕組み化によって実現。
   その仕組み化は独自のルールやノウハウを言語化・構造化が必要。
   言語化・構造化でSKILLS作成し、それを使ってAIへの作業を標準化。
   これ組み合わせてワークフロー化。

1.readdy.aiやgenspark.aiなどの活用について

これらを使う場合のワークフローのイメージは？

ファイルを生成してくれる形ではないので扱いづらいのでは？

こちらの用意したベースのファイルやルールに沿って対応してくれるのがいいのでは？

2.もしLP作成/修正をAIとともに行う場合は？

• ルールの言語化、各タスクのルール（LPのディレクトリ構成、includeのルール、ページ構成のルール、パラメータの付与、クッションページについてなどなど）
  -　ベースファイルの作成、AIの扱いやすいファイルへテンプレ化。

AI委譲フロー（データ整形 → プロンプト設計 → API連携）の実現性を検証、リサーチ
現実的なワークフローと実装要件を洗い出しなど。

タスクの定型性を評価
- 繰り返し作業か？
- ルールベースで処理できるか？
- 入力と出力がある程度パターン化されているか？
入力データをデジタル化・構造化
- 表形式（スプレッドシート、CSV、DBなど）に変換可能か
- テキストであれば前処理（クリーニング、正規化）が可能か
AI（LLM）によって処理が可能か
- GPTで自然言語生成や要約
- VisionやCode Interpreter機能が必要か
人間の確認が必要なタイミングを明確化
- 最終確認のみ人間が行う「半自動化」が現実的なケースも多い

AI活用メモ

1. はじめにAI活用の基本的な考え方や概念を共有しておくことで、

話しやすくなり、ワークフローへの落とし込みも進めやすくなると思います。
以下は、私がAIを活用する上での考え方や利用内容をかんたんにまとめました。

2. AIの得意・苦手

得意

• 情報の要約・整理
• パターン化された処理の自動生成
• アイデア出し・ブレストの補助
• 調べ物の効率化

苦手

• 判断・意思決定（最終判断は人間）
• 文脈やニュアンスの深読み
• 最新情報・ローカルな情報（例：社内ルールなど）
• フォーマットの違い、感情配慮

3. 「コーディング」という立場でのAI活用

• 設計とチェックは人間が担当

  • 設計意図や背景は事前に伝える
  • ドキュメントがあれば共有する

• コードレビューやバグチェックが得意

  • リファクタ提案
  • 構文ミスや漏れの発見
  • 一旦AIに確認してから自分でもチェックする形が有効

• たたき台コードの生成には最適

  • 生成されたコードを整えて使うと効率的

• ドキュメント生成

  • 関数の説明、使い方マニュアルの生成などに活用可能

• 注意：出てくるコードは完璧ではない

  • 動作確認や社内ルールへの適合チェックは必要

4. AIの利用例：具体的なプロンプト例

(1) 要約

以下の文章を3行で要約してください。重要なポイントだけ抜き出してください。

文章：沖縄県名護エリアでのAIオンデマンド交通「mobi」サービス開始： WILLER株式会社のプレスリリースによると、本日より沖縄県名護エリアでAIオンデマンド交通サービス「mobi」が提供開始されます。これは、AIが地域の交通インフラに導入され、人々の移動手段を大きく変える可能性を示すものです。特に、公共交通機関が手薄な地域での移動課題解決に貢献することが期待され、AIが社会生活の利便性向上に直接的に寄与する事例としてインパクトがあります。 

(2) キャッチコピー作成

以下のXXXXXという商品のキャッチコピーを10個箇条書きで出してください。

XXXXXの商品情報:

初回1,600円

セット内容:洗顔,化粧水,乳液,美容液,クレンジング,洗顔パウダー

ニキビ予防の有効成分が2種類:グリチルリチン酸2Ｋ,トラネキサム酸

特徴:思春期に多い黒ずみ毛穴やテカリも防止

(3) 画像の内容をHTMLに変換

添付した画像の内容を以下のHTMLにテキストで記述してください。画像の部分は無視してOK。  

5. プロンプト設計で気をつけること

• 出力されるコードが古いバージョンの場合がある
  → バージョンを明示的に指定する

• 前提や目的、条件が不足していると
  → 「とりあえず動く一般的なコード」が返る
  → 目的に沿わないコードになる可能性がある

プロンプトの改善例

悪い例：

swiperをつかったスライダーのコードを出して。

良い例：

以下のコードを使って、swiperのスライダーにしたい。

slideの画像は.choiceListの親要素の幅100%にしたい。

HTMLで足りない部分の編集とscriptコードを出して。

CSSのデザイン部分はこちらで設定するが、動的に必要な部分は設定してほしい。

nextとprev、ページネーションを利用したい

→HTML部分を仮組み、利用方法の補足、お願いしたい部分の指定する。

MTG用まとめ:
- AI基本概念
- コーダーの立場のAI
- コーディングでの利用

• CLIツール
• MD形式の仕様・ルール
• ワークフローに落とし込む