価格は今だけ500円にしています。
10部売れたら3,980円に上げる予定なので、気になる方は早めに読んでおいてください。

「こんなものがあったら便利」を、自分で形にしてみませんか？

自分のサービスを紹介するWebサイト。頭の中を整理できるマインドマップ。毎日の作業を少しラクにするChrome拡張機能。思わず誰かに見せたくなる、オリジナルのゲーム。

作ってみたいものはある。でも、プログラミングとなると急に遠い話に感じてしまう。

「何から勉強すればいいの？」「黒い画面に英語が並ぶだけで難しそう」「AIに頼めるらしいけど、その後どうすればいいの？」

この教材は、そんな方に向けて作りました。

目指すのは、AIとのやり取りを通じて、自分のアイデアを動く成果物にすること。導入から制作、修正、公開まで、実際の画面を見ながら一歩ずつ進めていきます。

AIに「作って」と頼む。その先まで進めたい方へ

たとえば、こんな依頼から制作を始めます。

「Difyを使ったチャットボット制作を紹介する、個人サイトを作ってください」

できあがった画面を見て、「ここに画像を入れたい」「このボタンを押したらこう動いてほしい」と、さらに伝えていく。

頭の中のイメージが画面になり、修正を重ねて自分の作品になっていく。本編では、この流れを複数の制作例で紹介します。

ただし、ひとこと指示するだけで、いつでも理想どおりに完成するわけではありません。途中で承認が必要になったり、思った動きにならなかったり、公開前の設定で迷ったりすることもあります。

だからこそ、「何を伝えるか」だけでなく、どこを確認し、どう直して、次に何をするかまで知っておくことが大切です。

まずはHTML/CSSを使ったサイト制作から。作業フォルダの準備、AIへの依頼、完成したページの確認まで、最初の作品を作る流れをつかみます。

テトリスを例に、作りたいゲームの条件を整理してから制作へ進みます。背景画像の設定も扱い、「動けばOK」から自分好みの見た目へ近づけていきます。

選択したテキストの文字数を表示する拡張機能を制作。仕様書、アイコンの準備、ブラウザへの読み込みまでを紹介します。「こんな小さな機能が欲しかった」を形にする実践です。

アプリを作り、使ってみて、操作を修正する。その後、GitHubへソースコードを公開する流れへ進みます。公開前に確認したいファイルの扱いも説明します。

キャラクター画像を組み込み、ゲームの見た目や動きを調整。Vercelを使った公開まで取り組み、作ったものを他の人に見てもらうための手順を学びます。

「制作例は面白そう。でも、そもそもCodexを使う準備ができていない」という方のために、本編は導入手順から始まります。

説明には、200点以上の画像を掲載しています。実際の画面と照らし合わせながら、操作の流れを追える構成です。

ツールや利用プランによって料金・制限が異なるため、ご自身の環境に合わせて進めてください。無料で始める選択肢も、本編で紹介しています。

まずは、小さな作品をひとつ作るところからで大丈夫です。制作例をなぞりながら、慣れてきたら「自分なら何を変えるか」を考えてみてください。

紹介したサイトやゲームをそのまま再現するだけでなく、次に自分のアイデアを形にするときの進め方を持ち帰っていただくことが、この教材の狙いです。

自分の活動を伝えるサイト。毎回手作業で数えていたものを数えるツール。家族や友人に遊んでもらうゲーム。

今、ひとつでも作ってみたいものが浮かんだなら、そのアイデアを出発点にしてみてください。

本編では、使うための準備から、最初の制作、修正、公開までを順番に解説します。

「いつか作ってみたい」を、実際に手を動かす一歩へ。ここから一緒に始めましょう。

ここから本編：Codexの導入とAI駆動開発の実践