結論はシンプルです。「作れた人」ではなく、「なぜそう作ったかを説明できる人」が残ります。AIやエージェントにコードを書かせても構いません。ただし、目的、設計、データ、運用、セキュリティ、コストを自分の言葉で説明できなければ、仕事では使えません。
この講習は、専門用語を削って簡単に見せるものではありません。必要な用語は残し、意味と使いどころを横に置くことで、AIが作ったものを判断し、直し、仕事に入れる力を育てます。
AIツールで画面やコードは速く作れます。しかし仕事で問われるのは、なぜその技術を選び、壊れた時にどう戻し、誰の責任で運用するかです。ここを説明できる人が、本物のエンジニアです。
AIで一度動いても、次の質問に答えられないと「たまたま動いているだけ」になります。
下の層ほど入口です。上に行くほど価値、難易度、責任範囲が大きくなります。
AIが普及すると、レベル0から2までは短期間で届きやすくなります。差が出るのは、運用、障害、セキュリティ、データ、コストまで説明して任せられるかです。
企業全体の設計ができる。複数サービス、組織、コスト、運用責任まで含めて判断する。
システム全体を任せられる。設計、認証認可、負荷分散、監視、障害対応を扱う。
本番運用できるシステムを作れる。開発だけでなく、サーバー、DB、デプロイまで見る。
AIが書いたコードでも、読んで修正・改善できる。Webの基本構造を説明できる。
ノーコードで業務改善できる。既存サービスをつないで小さな自動化を作る。
AIツールを使って作れる。ここは入口であり、実務では確認と説明の力が必要になる。
説明できるとは、専門用語を避けることではありません。専門用語を使いながら、相手が判断できる言葉に置き換えられることです。
AIコーディングで混乱する原因は、AIの性能よりも作業場所の混線です。相談、実装、確認、公開の役割を分けると、初心者でも安全に学習を進められます。
目的、説明、講習文、依頼文、判断材料を整理する相談役。
フォルダを持ち、ファイル編集、コマンド実行、差分確認まで進める共同作業者。
作業対象、変更履歴、戻し方、レビュー対象を見える化する作業机。
見た目、リンク、フォーム、スマホ表示を自分の目で確かめる検査場所。
AIコーディングを使いこなす人は、完璧なコードを書ける人ではありません。何を任せるか、何を確認するか、どこで止めるかを決められる人です。
フォルダ、GitHub、本番URL、管理画面、資料ファイルを分けて見ます。ここが整うだけで、AIへの依頼と確認が一気に安定します。
HTMLは構造、CSSは見た目、JavaScriptは動き、APIとDBは情報の出入口。これだけで修正依頼の精度が上がります。
1画面、1セクション、1フォームのように単位を切ります。AIには完了条件と確認方法を同時に渡します。
Vercel、Git、環境変数、SEO、レビューをつなげます。本番URLを取り違えないことが公開作業の第一条件です。
コードの外側も同じです。要件を整理し、AIに初稿を任せ、人が品質と公開可否を判断します。
全部を手書きできる必要はありません。ただし、AIがどの層を触ったか分からないと、修正も公開判断もできません。
見出し、段落、リンク、画像、フォーム。AIに「カードを追加して」と頼むと、まずこの構造が変わります。
余白、色、レイアウト、スマホ対応、グラス表現。見た目の違和感はCSSの言葉で直します。
タブ、検索、保存、フォーム送信、表示切替。インタラクティブな表示はここで作ります。
問い合わせ、記事、ユーザー、商品、在庫。画面に出る情報の出入口を扱います。
変更履歴、差分、戻し方、別案比較。AIに任せるほどGitを見る力が必要です。
教材、カード一覧、設定ファイル。AIに編集させやすく、人も読みやすい入口です。
AIに頼む時は、作業対象、完了条件、触ってはいけない範囲、確認方法を同時に渡します。
「この部分だけ」「この条件で」「最後にこれを確認して」と書くと、AIは作業単位で動きやすくなります。
AIの返事ではなく、実際にどのファイルが変わったかを見ます。関係ない変更、秘密情報、意図しない削除を止めます。
文字のはみ出し、スマホ崩れ、タブやフォームの動き、リンク切れを確認します。見た目の品質は実画面でしか分かりません。
公開前は、褒めてもらうより止めるべき点を探します。バグ、表示崩れ、誤情報、権利、秘密情報を重大度順に見ます。
公開して終わりではありません。URL、ビルド、環境変数、SEO、ログ、問い合わせまでを見て、仕事で使える状態にします。
push、ビルド、Production URL、Preview URL、環境変数を分けます。公開確認は必ず本番URLで行います。
認証、DB書き込み、決済、管理画面、秘密情報は確認モーダルや権限設計とセットで扱います。
コードの講習で終わらせず、文章、画像、プレゼン、SNS、CMS、管理画面へ広げます。共通するのは、構造化してAIに任せ、人が確認して公開する流れです。
ヒーロー、カード、FAQ、CTA、フォームを作りながら、HTML/CSS/JSの基礎をまとめて学びます。
Markdown、HTML、スライド、PDFを同じリポジトリで扱うと、更新履歴と再構成が楽になります。
説明図、線画、OGP、SNS素材、動画台本までAIに初稿を任せ、デザインの統一感は人が整えます。
フォーム、顧客管理、在庫、記事、問い合わせ。AI制作を日常業務の中に入れる段階です。
OpenAI公式発表では、Codexは単なるコード生成ではなく、複数エージェント、アプリ、IDE/CLI、ロール別プラグイン、Sites、annotationsへ広がっています。講習では、この流れを実務で使える順番に落とし込みます。
ロール別プラグイン、Sites、annotations、非エンジニア活用の広がり。AIコーディングを業務全体へ広げる根拠リンク。
2026-02-02 / OpenAI複数エージェント管理、CLI/IDE/クラウドとの連携、Skills、Automations、クラウドデプロイまでの導線。
2025-09-15 / OpenAIIDE拡張、GitHub連携、PRレビューなど、日常開発ワークフローへCodexを近づける公式アップデート。
2025-05-16 / OpenAIクラウド上のサンドボックスで複数タスクを並行し、機能追加、バグ修正、PR提案まで行うCodexの基礎発表。
1回で全部を作るのではなく、成果物を小さく積み上げます。各演習は講習中に投影しやすく、通常閲覧では折りたたんで読めます。
HTML/CSS、画像、リンク、スマホ表示を確認。AIにはセクション追加やデザイン調整を小さく頼みます。
Markdown、見出し、要約、線画、タブUIを扱い、文章の流れを保ったまま整理します。
JavaScript、API、入力検証、送信後の表示を学び、秘密情報の扱いを確認します。
Git、ビルド、Vercel、本番URL、SEO、独立レビューを学び、公開前に止める力を作ります。
最初に全体像を投影し、ステージタブで現在地を確認します。その後、基礎語彙を実画面で見せ、最後に各自の題材で小さな依頼文を作ります。
AIに何を作るか説明できる、AIが変えたファイルを差分で見られる、ブラウザで表示と動きを確認できる、公開前に止めるべき点を言える状態を目指します。
実際の受講者ワーク、修正前後のスクリーンショット、失敗例の差分、講師のレビュー例、Codexで作った教材の更新履歴を追加すると、受講資料としてさらに強くなります。