マジさん、突然ですがプログラムを書いた経験がなくてもアプリケーションが作れるとしたらどうしますか？

では、『AIコーディングツール』はご存知ですか？

OpenAI社の『Codex』やAnthropic社の『Claude Code』など、日本語で指示するだけで自動でプログラムを書いてくれるAIのことです。

いえ、『AIコーディングツール』はもはやエンジニアの作業を楽にするだけではなく、エンジニアではない人でも『つくる側』に回ることを可能にするツールなのです。

例えば、マーケターがキャンペーンを告知するWebページを作ったり、経理担当者が定型業務を自動化するプログラムを組んだりと、エンジニアではない人でもプログラムを使ってアイデアを実現できる、

そんな時代がやってきたのです。

もちろんです。

今回はまったく経験がない人向けの入門編として、数分でWebページやアプリケーションを作成できる具体的な方法をお伝えします。

AIコーディングツールは2025年で劇的に進化したのです。

特に、Anthropic社の『Claude Code』の登場が革命的でした。

以前まで、『AIが開発を自動化する』という言葉はどこか現実味のない煽り文句のように聞こえていました。

しかし、Claude Codeで『こんな機能を作ってほしい』という日本語の簡単な指示を行うだけでプログラムが生成できるようになってから、『本当に開発が自動化できるかもしれない』と多くの人が実感し始めたのです。

お気持ちはわかります。

しかし、今のAIコーディングツールは『プログラミングが難しいと感じる3大ハードル』をすべて解消してくれるのです。

ハードルの1つ目は『専門言語の学習』です。

プログラミングを始めるには、ページに見た目を作るためのHTMLやCSS、裏側でデータを操作するためのPythonなどといった目的ごとに違うプログラミング言語を大量に覚える必要があります。

AIコーディングツールは日本語の指示を理解してプログラムを生成してくれます。

複雑なシステムになるほどAIに指示するために専門的な知識が必要になるので、プログラミング言語を習得する必要がなくなったわけではありません。

ですが、以前ほど知識がなくてもアイデアを形にできるようになったことが大きな変化です。

ハードル2つ目は『複雑でとっつきにくい開発環境』です。

これまでプログラミングをするには、コマンドを打ち込む黒い画面や専門的な開発ツールのインストールが必要でした。

ええ。今は、皆さんが普段使っているブラウザさえあればすぐにプログラミングが始められるAIが登場しています。

CodexやClaude Codeがその代表例です。

ハードル3つ目は『エラーの解決』です。

書いたコードが動かない時、どこが間違いなのか分からず、誰にも質問できずに挫折する人が後を絶ちませんでした。

しかし、今は『このボタンが動かないんだけど』と日本語で相談すれば、AIが原因を突き止め修正案を提示してくれるのです。

もちろん100%直せるわけではないのですが、対話できるだけでも大きな助けになります。

では、さっそく実際にAIコーディングツールを使って簡単なWebページを作ってみましょう。

その前に、開発を進めるための本質的な考えとして、『モックアップ』を作る重要性についてお話します。

実際にサイトやアプリケーションをつくる前に、機能がついていない見た目だけのページを作成することです。

はい。AIコーディングツールが強力なので、モックアップを作らずにいきなり『こんなアプリを作って』『こんなこともできるようにして』と全部一気に実装しようとする人は多いです。

しかし、一気に作り終わった後に配置の違和感を見つけたら、見た目の修正だけではなく、その裏にある設計作業もやり直す必要があり、無駄な作業が増えてしまいます。

その通りです。モックを作成すると、仕事をする上で一番時間のロスになる『やり直し』を防げます。

それでは、モックアップを作成していきましょう。

今回のテーマは『社内で開催するAI勉強会の告知ページ』です。

実際に参加者に見せるページを作成し、上司へ勉強会の企画・提案をする際にイメージとして見せることを想定しています。

使用するツールはOpenAI社の『Codex』です。

多くの方が使っているChatGPT Plusプランで追加費用なしに使えるため、Codexを選びました。

Codexは黒い画面で使えるCLI版とブラウザ版がありますが、今回は初期設定が不要なブラウザ版で進めます。

では、段階的に3つのステップで進めていきましょう。

さっそくステップ1として『ページの土台を作成』します。

まずはChatGPTをブラウザで開いてください。

左サイドバーにある『Codex』をクリックしましょう。

ページが開くと、GitHubというツールとの連携を求められます。

GitHubは簡単にいうと、プロのエンジニアも使っている『プログラミングのコードを管理するツール』です。

Codexと連携することで、作成したコードをGitHubに保存しておくことができます。

GitHubのアカウントは無料で作成できるので、お持ちでない方は作成しましょう。

アカウントが作成できたら、Create repositoryというボタンから新しいリポジトリを作成しましょう。

リポジトリは、プログラミングのコードを保管する箱のような役割を果たします。

今回は入門編なので、厳密に理解できていなくても問題ありません。

リポジトリを作る際は、ここでリポジトリ名をつける必要があります。

リポジトリ名は、Codexの練習で作成するコードを保存するので、『codex-practice』としましょう。

リポジトリが作成できたら、Codexの画面に戻り、GitHubと連携するボタンを押して認証を済ませてください。

この画面が出てきて、チャット欄の左下で該当するリポジトリを選択できるようになれば、CodexとGitHubの連携は完了です。

GitHubとの連携ができたら、チャット欄にこちらの指示を入力しましょう。

こちらの指示には、社内で開催するAI勉強会の告知ページを作成してほしいこと、プロのデザイナーとしてモダンなデザインを施してほしいことが書かれています。

ええ。実際にOpenAIが公式に、最小限の指示を心がけるのが重要であると言っています。

数分待つと、Codexから返信がかえってきます。

画面に表示されているのはHTMLというプログラミング言語で書かれたコードで、簡単にいうとページの骨組みを決めてくれるものです。

その通りです。『プレビュー』を押すと、HTMLが実際の見た目に変換されたページが表示されます。

せっかくなので、Codexでページを少し編集してみましょう。

ステップ2として『開催情報を更新』します。

ページの見た目が問題なければ、今仮置きになっている情報を更新してみましょう。

正式な開催情報をチャットで送ってみます。

最後にステップ3として『画像を更新』を行います。

今のままだとAIらしさに欠けるので、画像を変えてみましょう。

こちらの画像をアップロードして差し替えてもらえるよう指示を行います。

CodexをはじめとしたAIコーディングツールはアプリケーションを開発する用途で使われることが多いので、アプリケーションのモックアップを作る流れも簡単にご紹介します。

実際にこのような指示を入力して、アプリケーションのモックアップを作ってみることができます。

こちらの指示では、社内用の自己紹介アプリケーションをつくりたいので、まずは自己紹介が一覧で見られるページを作ってほしいと指示しています。

実際に出力されたモックアップがこちらです。

HTMLファイルだけが出力されるようになっています。

もしここからさらに進めるとしたら、例えば自己紹介の投稿ページ、編集ページを作ってもらうのもいいかもしれません。

やはり技術を一定理解していないと、Codexを使ってできることは限られてしまいます。

例えば今、自己紹介が一覧で見られるようになったのはどんな技術が使われているのかという仕組みを理解していれば、

次に似たようなページを作る際に『この技術を使ってページを作ってほしい』といったような具体的な指示ができるようになります。

結果、イメージとズレがないものが出力されるのです。

自分の指示でAIがどんな技術を使ってページを使ったのか理解するところから始めるのがよいです。

Codexのチャットでファイルが出力された後に、『どんな技術を使ってページを表示しているのか、技術が分からない人でも直感的に分かるように教えて』と送ってみましょう。

先ほどで言えば、モックアップを作成した際に使った仕組みを分かりやすく教えてくれますよ。

他にもわからないことがあったら、Codexのチャットで積極的にAIに質問するようにしましょう。

はい、初心者の方がブラウザで開発できるという意味では、Codexの他に『Claude Code』、『Google AI Studio』が挙げられます。

こちらが、各ツールの特徴をまとめた比較表です。

ええ。『Claude Code』はフロントエンドのデザインに強く、モックアップを作成するという点ではCodexよりも優れていると言えます。

『Google AI Studio』は無料で使用することができ、指示をしてから数分でモックアップを作成できるのが特徴です。

モックアップを作成するという点では、Claude CodeやGoogle AI Studioの方がCodexより優れているのは確かです。

しかし、いざ裏側の機能まで実装しようとなると、Codexがもっとも正確で出戻りが少ないというメリットがあります。

今回は、AIコーディングツール『Codex』を使って、簡単なWebページやアプリケーションのモックアップを作成する方法をお伝えしました。

素晴らしいです。

自分の作りたいものを追求し、そのために必要な技術を習得することが結果的には最高の学びに繋がるのです。

マジさんのアイデアの実現、応援していますよ。

もちろんです。

いつかマジさんの作ったアプリケーションも見てみたいですね。

というわけで今回のAIトピックは以上です。

皆さんのAI活用のヒントになったら幸いです。

また次回、お会いしましょう。