対象: AIに興味はあるけれど、プログラミング用語や公開作業に不安がある人。コードを全部暗記する講習ではありません。CodexやClaude Codeに頼み、AIが変えた内容を確かめ、安全に公開するまでの道順を学びます。
ゴール: 「何を作りたいか」をAIに伝え、変更点を見て、画面を確認し、公開してよいか判断できること。CodexやClaude CodeなどのAIエージェントをコーディングの相棒として使い、人が結果を確かめる進め方を学びます。専門用語は、最初に日常の言葉へ置き換えて説明します。
知ること: AIは制作を速くしますが、目的を決めたり、間違いに気づいたり、公開後の責任を取ったりはできません。だから人が確認できる範囲を少しずつ広げます。
一度画面が表示されても、利用者が増えたり、設定が変わったりすると問題が出ます。仕事で使う前に、次の4点を説明できるか確認します。
これは次の「Level 0〜5」とは別の確認表です。どのレベルでも、自分が担当する範囲を説明します。
知ること: 同じAIツールを使っていても、任せられる仕事の広さは違います。目標となるレベル5から、入口のレベル0へ逆順に並べました。まず全体像を見てから、今の自分に近い位置まで下りてください。
アーキテクト（全体設計の責任者）として、複数サービス、組織、データ、料金、運用責任まで判断します。
安全なログイン、アクセス集中への対応、監視、バックアップ、障害対応を含めて設計します。
利用者が使う本番環境へ安全に公開し、サーバー、DB、更新作業、障害時の復旧まで見ます。
Webページの基本構造を説明し、AIが書いたコードを読み、必要な場所を修正・改善できます。
ノーコード（ほとんどコードを書かない制作方法）で、サイト更新や小さな自動化を作ります。
文章や指示を入力し、AIに画面やコードのたたき台を作ってもらう入口です。まずは小さな成果物から始めます。
知ること: 技術名をたくさん言えることより、「なぜ必要か」「問題が起きたらどうするか」を利用者や事業者に説明できることが大切です。
知ること: AIコーディングとは、AIにコードを書かせるだけではありません。相談する場所、ファイルを変える場所、変更を記録する場所、完成画面を見る場所を分けます。
作る目的、文章、AIへの頼み方を整理します。まず「誰の何を良くしたいか」を言葉にする場所です。
指定したフォルダのファイルを編集し、動作確認まで進めるAIです。触ってよい範囲を伝えて使います。
VS Codeはファイルを見る作業机。Gitは変更前後を記録し、必要なら元へ戻す仕組みです。
実際のページを開き、文字、リンク、フォーム、スマホ表示を利用者の目線で確かめます。
知ること: ここでの5段階は、この資料を学ぶ順番です。前のLevel 0〜5は仕事で任せられる範囲なので、別のものとして見ます。「作業場所を知る → 言葉を知る → 小さく作る → 公開する → 仕事へ広げる」の順に進みます。
フォルダ、GitHub、本番URL、管理画面、資料ファイルを区別します。場所を取り違えないことが、安全なAI利用の最初の一歩です。
HTMLは内容の骨組み、CSSは見た目、JavaScriptは動き、APIとDBは情報の受け渡しと保存です。分けて言えると依頼が伝わります。
1画面、1つのまとまり、1フォームのように作業を分けます。AIには「どこを」「どうする」「何を確認する」を一緒に伝えます。
Vercel（Webサイトを公開するサービス）、Git、環境変数、検索で見つけてもらう工夫（SEO）、レビューをつなげます。本番URLを取り違えないことが第一条件です。
LP（申込用の紹介ページ）、資料、動画、業務画面も進め方は同じです。目的を整理し、AIに初稿を任せ、人が品質を決めます。
知ること: コードを全部手書きできなくても大丈夫です。AIが何を変えたか判断するために、6つの役割だけ先に覚えます。
ページの骨組みです。見出し、文章、リンク、画像、フォームを置きます。例: 「紹介カードを1枚追加する」。
色、文字サイズ、余白、並び方、スマホ表示を決めます。例: 「ボタンを青くし、指で押しやすくする」。
クリック後の表示、検索、保存、フォーム送信などを動かします。例: 「メニューを押すと開く」。
APIは情報を受け渡す窓口、DB（データベース）は情報を保存する棚です。例: 申込内容を送り、保存する。
いつ、何を変えたか記録する仕組みです。diff（差分）で変更前後を比べ、問題があれば前の版へ戻します。
Markdownは見出し付き文章、YAMLは項目を並べる設定形式です。教材やカード一覧を人にもAIにも読みやすくします。
知ること: 「いい感じに直して」では、必要以上の場所が変わることがあります。頼み方と確認方法を先に決めると、初心者でも変更を管理しやすくなります。
場所、変更内容、守る条件、最後の確認を、短い文で順に書きます。
AIの報告だけでなく、Gitのdiff（変更前後の比較）を見ます。関係ないファイル、秘密情報、意図しない削除がないか確認します。
PCとスマホで開き、文字のはみ出し、リンク、メニュー、タブ、フォーム送信を実際に試します。
バグ、表示崩れ、誤情報、著作権、秘密情報を順に探します。独立レビューとは、制作担当とは別の視点で見ることです。
知ること: push（変更を共有先へ送ること）だけでは公開完了ではありません。本番URLで見て、利用者が使えることを確認して初めて完了です。
ビルドは、公開できる形にファイルをまとめる処理です。Productionは本番、Previewは確認用。環境変数は、公開コードに直接書かない設定値です。
ログイン、DBへの書き込み、決済、管理画面、秘密情報は、確認画面と権限設定を用意します。迷ったまま本番を変えません。
知ること: 「目的を決める → 材料を整理する → AIに初稿を頼む → 人が確認する → 公開後に直す」という流れは、コード以外にも使えます。
LPは、講座や商品の申込につなげる1枚の紹介ページ。見出し、よくある質問、CTA（次の行動を促すボタン）、フォームを順に作ります。
Markdown、HTML、スライド、PDFを同じ場所で管理すると、変更履歴が残り、講座ごとの並べ替えや再利用がしやすくなります。
講座の実例を、説明図、Web記事、SNS画像、動画台本へ展開します。AIに初稿を頼み、事実、権利、言葉づかいは人が整えます。
フォーム、顧客管理、在庫、記事、問い合わせをつなぎます。CMSは、専門知識がなくてもWeb内容を更新するための管理画面です。
ここからは参考資料です。初心者は読み飛ばして演習へ進めます。詳しく調べたいときは、情報のまとめ記事ではなくOpenAIの公式発表を開きます。
職種別の追加機能、Webページ作成、修正箇所へのメモなど、AI開発を仕事全体へ広げる発表です。
2026-02-02 / OpenAI複数のAI作業を一覧で管理し、編集画面やクラウドとつなぎ、よく使う手順を再利用するCodexアプリの発表です。
2025-09-15 / OpenAIコードの編集画面、GitHub、変更提案の確認をつなぎ、日々の開発で使いやすくした更新です。
2025-05-16 / OpenAIクラウド上の分離された安全な作業場所で、機能追加、問題修正、変更案の作成を進めるCodexの最初の発表です。
1回で全部を作るのではなく、4つの演習を小さく積み上げます。演習カードはいつでも見られ、詳しい講習メモだけを下で折りたたんで確認できます。
HTML/CSS、画像、リンク、スマホ表示を確認。AIにはセクション追加やデザイン調整を小さく頼みます。
Markdown、見出し、要約、線画、タブUIを扱い、文章の流れを保ったまま整理します。
JavaScript、API、入力検証、送信後の表示を学び、秘密情報の扱いを確認します。
Git、ビルド、Vercel、本番URL、SEO、独立レビューを学び、公開前に止める力を作ります。
最初に全体像を投影し、ステージタブで現在地を確認します。その後、基礎語彙を実画面で見せ、最後に各自の題材で小さな依頼文を作ります。
AIに何を作るか説明できる、AIが変えたファイルを差分で見られる、ブラウザで表示と動きを確認できる、公開前に止めるべき点を言える状態を目指します。
実際の受講者ワーク、修正前後のスクリーンショット、失敗例の差分、講師のレビュー例、Codexで作った教材の更新履歴を追加すると、受講資料としてさらに強くなります。