Codex・Claude Codeって何？ AIと一緒に小さなページを作ってみよう

使う道具を知る

コードを書く、2つのAI

コードは、画面に何を表示するか、ボタンを押したらどう動くかなどを、コンピューターに伝えるための記述です。

Codex（コーデックス）はOpenAI、Claude Code（クロードコード）はAnthropicの開発支援ツールです。作りたいものを言葉で伝えると、コードの作成や修正を手伝います。作業用フォルダーを選び、ファイルを作ったり直したりできる点が、今回使うところです。

まずは「今日やること」を3つ表示する、小さなページを作ります。HTMLという、Webページの土台になる形式を使います。最初からコードを全部覚える必要はありません。

準備する

パソコンに、練習用の空フォルダーを用意する

この記事はパソコンのデスクトップアプリで、ローカルのフォルダーを使う手順です。どちらか一方を使えれば進められます。ターミナルに文字の命令を打つCLI版や、クラウド上で動かすWeb版とは手順が異なります。

まず、自分のパソコンに ai-page-practice という空フォルダーを作りましょう。仕事の資料が入ったフォルダーとは分けます。

作ってもらう

このお願いを送って、1枚のページを作る

練習用フォルダーを開いた新しいチャットに、次を貼って送ります。

この空フォルダーに、index.htmlを1つ作ってください。
見出しは「今日やること」。青い見出しにしてください。
その下に「メールを確認」「資料を読む」「明日の準備」の3つを表示してください。
パソコンとスマホで読みやすくしてください。
外部のサービスや追加ライブラリを使わず、このHTMLだけで開けるようにしてください。
完成したら、ブラウザーで開く方法を初心者向けに教えてください。公開はしないでください。

ファイル変更や実行の確認が出たら、対象が練習用フォルダーか、何を行うかを読んで判断します。意図と違う場所を変更しそうなら、止めて伝え直してください。

自分で開く

できたページを開いてみる

完成したら、練習用フォルダーの index.html をダブルクリックします。別のアプリが開く場合は、ファイルの「このアプリケーションで開く」などから、普段のブラウザーを選びます。

青い「今日やること」と3つの項目が見えれば、最初の確認ができます。文字の一覧ではなくコードが見えるときは、こう聞いてみましょう。

index.htmlを開くとコードが表示されます。使っているOSとアプリを確認して、ブラウザーでページとして開く手順を教えてください。

一つ、変える

応用：見出しを緑に変えてもらう

同じチャットで、変えたいところだけ伝えます。

見出しの色を、読みやすい濃い緑に変えてください。見出しの文章と3つの項目は、そのまま残してください。

変更が終わったら、ブラウザーの再読み込みボタンを押します。緑になったか、3つの項目が消えていないかを見てください。変わらなければ「再読み込みしても青いままです」と、そのまま伝えて大丈夫です。

緑に変えた作例を開く ↗

作る → 見る → 気になるところを言葉で直す。この往復が、AIと一緒にコードを書く最初の体験です。

次の一歩

次に直すときも、小さく確かめる

例えば「3つ目を『机を片付ける』に変えて」と、文字の修正から続けられます。一度にたくさん変えるより、変えた部分を見つけやすくなります。

• 変更前のHTMLをコピーして残す。うまくいかなければ元へ戻せるようにする。
• パスワード・APIキー・顧客の情報は、練習の指示やファイルに入れない。
• AIが完了と言っても、自分で開いて確かめる。外部公開や業務利用は、練習とは別に確認する。

この作例は文字を表示するページです。入力の保存、メール送信、ログインなどは付いていません。最初の1枚ができたら、何を足したいかを一つずつ考えてみましょう。

製品と環境の確認：OpenAIの開始ガイド、Claude Codeの概要。本記事の作例は編集部が隔離したローカル環境で表示確認したものです。

図で、やり取りの流れを振り返る

作って、開いて、直してみる

1. 日本語で頼む見出しと3つの項目を伝える。
2. ページを開くできたHTMLをブラウザーで見る。
3. 一つだけ直す見出しを青から緑に変えてもらう。