---------------------------------------- ●STEP1：環境構築 1、ノートPCに「Visual Studio Code」をインストール 2、VS Codeを起動し、左側の「拡張機能」から「Live Server（作成者：Ritwick Dey）」 を検索してインストール 3、Google Chrome ブラウザをインストール ●STEP2：フォルダとファイルの準備 1、デスクトップに新しいフォルダを作成 → フォルダ名：lp-training 2、lp-trainingフォルダの中に新しいファイルを作成 → ファイル名：index.html ●STEP3：VS Codeでフォルダを開く ① VS Codeを開く ② 「フォルダを開く」をクリック ③ lp-trainingフォルダを選択 左側にフォルダ構造が表示されればOK ●STEP4：テストコードを記載 index.htmlに以下を貼り付け 

<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
</head>
<body>
<h1>表示テストOK</h1>
</body>
</html>
貼り付け後は保存する ●STEP5：表示確認 ① VS Code内で「index.html」を右クリック ② Open with Live Server をクリック ブラウザに「表示テストOK」と出れば完了 ---------------------------------------- ●ここまでの躓きポイント ・拡張子が「index.html.txt」になっている 　→「index.html」に修正して保存 ・「Open with Live Server」が出てこない 　→VS Codeを再起動する 　→右下の「Go Live」をクリック ・VS Code使用時に、フォルダではなくファイル単体を開いている 　→必ず「フォルダを開く」を使用 ・Macの場合の右クリック 　→トラックパッドを2本指でタップすると右クリックと同じ操作になります ・画面が更新されない場合 　→保存後、ブラウザを再読み込み ---------------------------------------- ●LP制作に於けるAIの有用性の体感と確認 第1回目の講習科目 ゴール：プロンプトを理解し、デザインフレームを完成させる ① フリーハンドでAIにLPを作らせる ② 表示して確認（スマホ表示も） ③ 言語化（何がダメか） ④ プロンプトを入れて再生成 ⑤ 比較して言語化（何が良くなったか） ⑥ プロンプト改善＆再生成 ⑦ 「プロンプト」の理解 第2回目の講習科目 ゴール：画像生成完了、LP作成完了 ① ①フリーハンドでAIでLPを作ってみる VS Codeとブラウザの両方を開く。 ブラウザではAIを開いておく。使用するAIは何でも良し。ChatGPTでもGeminiでも。 【AIに入れるプロンプト：「index.htmlに入れるソースコードを考えて」】 ②indexをブラウザで見てみる(F12でスマホでも確認する) 出来上がったindex.htmlをVS Code内で右クリック→「Open With Live Server」を選択してブラウザで表示してみる この時、立ち上がるブラウザは各個人のPCで異なる。デフォルト使用に設定してあるブラウザが立ち上がる。 デフォルトで立ち上がったindex.htmlがchrome以外のブラウザを使用している場合はURLをコピーしてchromeで表示してみる。 chromeを開いたら、キーボードでF12を押下、デベロッパーモードにする。 デベロッパーモードにすると、左側に表示されるhtmlは「スマホ表示」に近しい表示になる。 可処分時間を対象にしている事が多い弊社サービスの場合、スマホでの閲覧率は90%以上のシェア。 必ずスマホでのフェイスを前提にする事。 ③言語化：「どんなLPにしたいか」 作成した「プレーンなLP」を見て「どんなLPにしたいか」を言語化する。 まずは自身だけで考えてみる。項目でテキストに書き出す。 ④前提条件(プロンプト)を入力して、再出力する AIにもう一度「index.html」を出力させる。 【AIに入れるプロンプト：「さっき出力して貰ったindex.htmlを下記項目を満たす様にバージョンアップして】 ・項目 ・項目 ・項目 ⑤ 比較して言語化（何が良くなったか） テキストに書き出して、この書き出した「プロンプト」を共有し合って、 上手く行った「プロンプト」が「何故うまく出来たのか」を共通認識化する。 ⇒何名かで「上手く行ったプロンプト」を公開する。 ⇒その「上手く行ったプロンプト」が何故上手く行ったのかを言語化、共通認識してスキル化する。 ⑥ プロンプト改善＆再生成 自身が考えていた「どんなLPにしたいか」に再度取り組む。この際、共通認識化した「上手く行ったプロンプト」の考え方も取り入れた上で実施する。 ⑦ 「プロンプト」の理解 プロンプトとは「AIに何を・誰向けに・どのように作ってほしいかを伝える指示（設計図）」 AIを最適に取り扱う為に、何よりも重要な事は「言語化」 ・AIへの指示文 ・AIへの依頼内容 ・AIへの設計指示 ・何を作るか（指示） ・誰向けか（対象） ・どういう条件で（条件） ・どういう目的で（意図）

AI LP研修（40分）

① ゴール

② 事前準備




●STEP1：環境構築 1、ノートPCに「Visual Studio Code」をインストール 2、VS Codeを起動し、左側の「拡張機能」から「Live Server（作成者：Ritwick Dey）」 を検索してインストール 3、Google Chrome ブラウザをインストール ●STEP2：フォルダとファイルの準備 1、デスクトップに新しいフォルダを作成 → フォルダ名：lp-training 2、lp-trainingフォルダの中に新しいファイルを作成 → ファイル名：index.html ●STEP3：VS Codeでフォルダを開く ① VS Codeを開く ② 「フォルダを開く」をクリック ③ lp-trainingフォルダを選択 左側にフォルダ構造が表示されればOK ●STEP4：テストコードを記載 index.htmlに以下を貼り付け 

<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
</head>
<body>
<h1>表示テストOK</h1>
</body>
</html>
貼り付け後は保存する ●STEP5：表示確認 ① VS Code内で「index.html」を右クリック ② Open with Live Server をクリック ブラウザに「表示テストOK」と出れば完了 貼り付け後は保存する ●STEP5：表示確認 ① VS Code内で「index.html」を右クリック ② Open with Live Server をクリック ブラウザに「表示テストOK」と出れば完了
フォルダ名：lp-training
ファイル名：index.html

③ 実践①（まず作る）

index.htmlのLPコードを作って

👉 AIに入力して生成 → 表示 → スマホ表示（F12）

④ 実践②（改善する）

さっきのLPを以下条件で改善して ・ターゲット： ・訴求： ・構成： ・トーン：

👉 再生成 → 表示 → 比較

⑤ まとめ

プロンプトは設計図 ・何を作るか ・誰向けか ・条件 ・目的