使う道具を知る

CodexとClaude Codeとは：コードを書く、2つのAI

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

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

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

準備する

使い始める準備のやり方：パソコンに、練習用の空フォルダーを用意する

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

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

使うアプリの準備と利用条件

Codexの準備と利用条件

OpenAI公式のデスクトップアプリ案内は、ChatGPTアプリ（macOS・Windows・Linux）からフォルダーを開き、Codexを選んで新しいチャットを始める流れです。ChatGPTアカウントでログインし、練習用フォルダーを作業場所にします。利用量や機能は契約プランと利用上限で異なるので、自分のアカウントで利用できることを確認してください。

Claude Codeの準備と利用条件

Claude公式のデスクトップ開始ガイドに沿ってログインし、Code → Local → Select folderから練習用フォルダーを選びます。デスクトップのCode機能にはPro・Max・Team・Enterpriseのいずれかの契約が必要です。macOS・Windowsに対応し、Linuxはベータです。Windowsのローカル利用にはGitも必要です。CLIやNode.jsの別インストールは不要です。

画面の配置・機能は更新や職場の設定で変わります。利用できない場合は、購入を急がず、先に下の作例を見てみてください。この練習のためにAPIキーを作る必要はありません。

作ってもらう

AIにページを作ってもらうやり方：このお願いを送って、1枚のページを作る

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

最初のページを作る｜コピーして試す

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

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

自分で開く

HTMLファイルの開き方：できたページを開いてみる

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

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

開き方を確認する｜コピーして試す

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

一つ、変える

AIに修正を頼む例：見出しを緑に変えてもらう

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

色を変える｜コピーして試す

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

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

緑に変えた作例を開く ↗

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

色を変えるお願いは、ページを作った同じ作業フォルダー・同じ会話で送ります。修正後は開いているページを再読み込みし、見出しが濃い緑になったことと、3つの項目が残っていることを見比べます。

次の一歩

AIでコードを直すときの注意点：次も、小さく確かめる

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

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

最初の1枚ができたら、何を足したいかを一つずつ考えてみましょう。

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

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

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

日本語で頼む → ページを開く → 一つだけ直す
  1. 日本語で頼む見出しと3つの項目を伝える。
  2. ページを開くできたHTMLをブラウザーで見る。
  3. 一つだけ直す見出しを青から緑に変えてもらう。
AI生成の概念図。手順や役割の説明用です。

Q&A / よくある質問

CodexとClaude Codeについて、よくある質問

CodexとClaude Codeとは？

CodexはOpenAI、Claude CodeはAnthropicの開発支援ツールです。作りたいものを言葉で伝えると、コードの作成や修正を手伝います（2つのAIの説明）。

CodexとClaude Codeの違いは？

この記事の手順では、Codexは ChatGPTアプリからフォルダーを開いて使い、利用量や機能は契約プランで異なります。Claude Codeのデスクトップ版のCode機能にはPro・Max・Team・Enterpriseのいずれかの契約が必要で、Windowsのローカル利用にはGitも必要です（準備と利用条件）。

コード未経験でも、どうやってページを作る？

練習用の空フォルダーを開いた新しいチャットに、記事の日本語のお願いを貼って送ります。できた index.html をダブルクリックし、ブラウザーで開いて確認します（作り方・開き方）。

AIにコードを書いてもらうときの注意点は？

仕事の資料と分けた練習用フォルダーを使い、パスワード・APIキー・顧客の情報は指示やファイルに入れません。AIが完了と言っても、自分で開いて確かめます（直すときの注意点）。

執筆：三谷悠飛（シゴツグ運営責任者）。2026年9月10日にOpenAI・Anthropicの公式資料を確認。指示文とHTMLは編集部作成の架空演習です。作例は文字を表示するだけのページで、入力の保存・メール送信・ログインは付いていません。作例はCodex・Claude Codeの製品画面ではなく、両製品で同じ結果が出るという比較実験でもありません。作例の表示確認と、各製品の操作説明は区別しています。2026年9月12日の更新では、見出しの見直し、注意事項の整理、Q&Aの追加を行いました。事実関係と出典の変更はありません。