Claude Codeで自分のWebサイトを作って公開する【2026】プログラミング未経験から1日で

完成イメージ：どんなサイトができる？

この記事で作るのは、フリーランスや個人事業主、転職活動中の方が「名刺代わり」に使える1ページの自己紹介サイトです。上から順に、次の4つのブロックが並びます。

パソコンでは実績カードが横に3枚並び、スマホでは1列に縦並びになるレスポンシブ対応（画面幅に合わせてレイアウトが変わる作り）です。完成後は https://あなたの名前.pages.dev のようなURLで、誰でも見られる状態になります。

ファイル構成は、これだけです。

my-site/
├── index.html      ← ページの中身（文章・構造）
├── style.css       ← 見た目（色・余白・レイアウト）
├── images/
│   └── profile.jpg ← 顔写真などの画像
└── CLAUDE.md       ← AIへのルールメモ（公開はされても問題ない内容だけ書く）

助手アイファイルが2つだけ！ WordPressみたいな管理画面もデータベースもないんですね。

エージェント博士そうじゃ。これを静的サイトと言う。置いてあるファイルをそのまま配るだけだから、速くて、壊れにくくて、無料で公開しやすい。最初の1本にはぴったりなんじゃよ

準備：Claude Codeのインストールとフォルダ作成

Claude Codeは、パソコンのターミナル（Macの「ターミナル」アプリ、Windowsの「PowerShell」など、文字でパソコンに命令する画面）で動くAIエージェントです。ターミナルに慣れていない方は、IT基礎 第5章 サーバー・Linux入門で基本だけ押さえておくと安心です。

なお、CursorやCodexなど他のコーディングエージェントでも、この記事の流れはほぼそのまま使えます。操作名が違う部分は各ツールの公式ドキュメントで確認してください。

1. 事前に用意するもの

• Claudeのアカウント：Claude Codeの利用には有料プランなどが必要です。料金・プランは変わることがあるため、執筆時点（2026年9月）以降はAnthropic公式サイトで確認してください
• Git：変更履歴を保存するツール。Macは初回実行時にインストールを案内されることが多く、Windowsは「Git for Windows」を入れます
• GitHubアカウント・Cloudflareアカウント：公開の段階で使います。どちらも無料で作成できます
• 載せる素材：名前・肩書き・自己紹介文・実績3件ほど・顔写真（または好きな画像）。実はここが一番時間がかかります

2. Claude Codeをインストールする

インストール方法は公式ドキュメントに複数案内されています。Node.jsが入っている環境なら、npmで入れる方法が分かりやすいでしょう。

# Claude Code をインストール（npm を使う例。最新の手順は公式ドキュメントで確認）
npm install -g @anthropic-ai/claude-code

# インストールできたか確認（バージョン番号が表示されればOK）
claude --version

1行目の npm install -g は「このパソコン全体で使えるようにインストールする」という意味です。command not found と出た場合は、Node.jsが入っていないか、ターミナルを開き直す必要があるケースが多いです。

3. 作業フォルダを作って claude を起動する

# ホームフォルダに my-site というフォルダを作る
mkdir my-site

# そのフォルダの中に移動する
cd my-site

# Claude Code を起動（初回はログインを求められる）
claude

必ず作業用フォルダに移動してから起動するのがポイントです。Claude Codeは起動したフォルダを「作業場所」として扱うので、ホームフォルダやデスクトップ直下で起動すると、関係ないファイルまで見渡すことになります。

AIとのやりとりを再現（注文→生成→確認→修正）

ここからは、Claude Codeで自己紹介サイトを作るときの典型的なやりとりを、時系列で再現します。プロンプト（AIへの指示文）はコピーして、あなたの内容に書き換えて使ってください。AIの出力は毎回少しずつ変わるので、ファイルの中身や言い回しが完全に同じになるとは限りません。

やりとり① 「こういうサイトを作りたい」と伝える

まずはShift＋Tabを押してPlan Mode（計画モード）に切り替えてから、次のように伝えます。Plan Modeでは、AIはいきなりファイルを作らず、先に計画を見せてくれます。

自分の自己紹介サイトを作りたいです。HTMLとCSSだけの1ページで作ってください。

■ 目的
仕事の相談をもらうための名刺代わりのサイト。見た人が「この人に相談してみよう」と思えること。

■ 載せる内容（上から順に）
1. 名前「山田 花子」、肩書き「Webデザイナー / バナー・LP制作」、キャッチコピー「伝わるデザインで、売れる導線を。」、お問い合わせボタン
2. 自己紹介：写真（images/profile.jpg）と経歴3行
3. 実績：カード形式で3件（タイトル・一言説明）
4. お問い合わせ：メールアドレスへのリンク（hello@example.com）

■ デザイン
白ベースで余白多め。落ち着いた青をアクセントに。スマホでも見やすく。

■ 制約
- JavaScriptやフレームワークは使わない
- 画像以外の外部ファイルは Google Fonts だけ使ってよい
- ファイルは index.html と style.css の2つにまとめる

まず計画を見せてください。

Claude Codeがしたこと：数十秒ほどで、次のような計画が表示されました（要約）。

• index.html を作成：header（ヒーロー）／section#about／section#works／section#contact の4ブロック構成
• style.css を作成：色をCSS変数で定義、見出しにNoto Sans JP、実績カードはCSS Gridで並べ、画面幅に応じて列数を自動調整
• images/profile.jpg が存在するか確認し、なければプレースホルダーの説明を入れる

計画に問題がなければ、承認して実行してもらいます。ここで「実績は6件分の枠を作って」など、計画の段階で注文を足すこともできます。

やりとり② ファイルが作られる → ブラウザで開く

承認すると、Claude Codeが index.html と style.css を書き出し、「作成しました。index.html をブラウザで開いて確認してください」と報告してきます。確認はとても簡単で、フォルダの中の index.html をダブルクリックするだけです。ターミナルから開きたい場合は、AIに頼めばコマンドも実行してくれます。

index.html をブラウザで開いてください。

Claude Codeがしたこと：Macなら open index.html、Windowsなら start index.html のようなコマンドを実行してよいか確認を求め、許可するとブラウザでページが開きました。

画面の結果：青いボタンのあるヒーロー、写真つきの自己紹介、3枚の実績カード、メールリンクが表示されました。1回目の出来としては十分ですが、実際に見ると直したい点が出てきます。

やりとり③ 「スマホで見やすく」

パソコンのブラウザで、ウィンドウの幅を狭くしてみるとスマホでの見え方を簡易的に確認できます（Chromeなら開発者ツールの端末表示も使えます）。今回は、スマホ幅でキャッチコピーが大きすぎて4行に折り返し、ボタンが画面端にくっついていました。

スマホ幅（375px程度）で見たときに次の問題があります。直してください。
- キャッチコピーの文字が大きすぎて4行に折り返している → 2行程度に収めたい
- お問い合わせボタンが画面の端にくっついている → 左右に余白がほしい
- 実績カードの間隔が狭い

パソコン表示は今のままで大丈夫です。

Claude Codeがしたこと：style.css の見出しサイズを clamp()（画面幅に応じて最小〜最大の間で文字サイズを変える書き方）に書き換え、コンテナに左右の余白を追加、カードの間隔（gap）を広げました。変更箇所を差分で示し、「パソコン表示には影響しない変更です」と説明がありました。

最後の一文「パソコン表示は今のままで大丈夫です」が地味に効きます。変えてほしくない部分を伝えると、AIが余計なところまで手を入れるのを防げます。

やりとり④ 「色を〇〇に」

アクセントカラーを、青からくすんだグリーン（#2f7d6d 前後）に変えてください。
ボタンにマウスを乗せたときは少し濃くなるようにしてください。
色の指定は1か所で管理して、あとで変えやすくしておいてください。

Claude Codeがしたこと：style.css の先頭で定義されていた色の変数（--accent）を書き換え、ホバー用の濃い色（--accent-dark）を追加しました。最初の計画で色を変数にまとめていたので、変更は数行で済みました。

色の名前が分からなくても大丈夫です。「落ち着いた緑」「もう少し明るく」のような言葉でも伝わりますし、「候補を3つ出して、それぞれの色見本をページの下に一時的に表示して」と頼んで比べることもできます。

やりとり⑤ 「スクリーンショットのこの感じに」

言葉で説明しにくいデザインは、画像を見せるのが一番早いです。参考にしたいサイトのスクリーンショットを撮り、Claude Codeの入力欄に画像ファイルをドラッグ＆ドロップするか、画像のファイルパスを伝えて指示します（画像の渡し方は環境によって異なるので、うまくいかない場合は公式ドキュメントを確認してください）。

添付したスクリーンショットの「実績」セクションの雰囲気に近づけたいです。
- カードに薄い影がついていて、角が丸い
- カードの上部に画像のエリアがある（今は画像がないので、グレーの枠で仮置き）
- タイトルの下に小さなタグ（例：「バナー」「LP」）がある

レイアウトや文章はコピーせず、雰囲気だけ参考にしてください。

Claude Codeがしたこと：画像を読み取って特徴を言葉で整理し直したうえで、カードに box-shadow と border-radius を追加、画像エリアとタグのHTMLを実績カードに足しました。

やりとり⑥ 仕上げのチェックを頼む

公開前のチェックをお願いします。
- 画像に alt（代替テキスト）が入っているか
- title と meta description が入っているか（内容は私の自己紹介に合わせて提案して）
- リンク切れがないか
- 外部リンクに target="_blank" を使う場合は rel="noopener" が付いているか
問題があれば直して、何を直したか一覧で教えてください。

Claude Codeがしたこと：index.html を読み直し、altが空だった実績カードの仮画像に説明を追加、meta description を追加、外部リンクに rel="noopener" を付けたうえで、修正一覧を報告してきました。

ここまでの作業は、素材がそろっていれば1〜2時間程度が目安です（確認や修正の回数で大きく前後します）。

助手アイ私、ずっと「見て、気になったところを言葉にする」しかしていません…！ それでもちゃんとサイトができていくのが不思議です。

生成されたコードの要点（HTML/CSS）

AIが書いたコードを全部理解する必要はありませんが、要点だけ読めるようになると、修正の頼み方が格段にうまくなります。実際に生成されたものを、説明しやすいように短く整えて抜粋します。

index.html（ページの中身）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- スマホで正しい幅で表示するための1行（これがないとスマホで縮小表示になる） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>山田 花子 | Webデザイナー（バナー・LP制作）</title>
  <meta name="description" content="バナー・LP制作を中心に活動するWebデザイナー山田花子のポートフォリオです。">
  <!-- 日本語Webフォント（Google Fonts）。display=swap で読み込み中も文字を表示 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <p class="hero-role">Webデザイナー / バナー・LP制作</p>
    <h1>伝わるデザインで、<br>売れる導線を。</h1>
    <p class="hero-name">山田 花子</p>
    <a class="btn" href="#contact">お問い合わせ</a>
  </header>

  <main class="container">
    <section id="about">
      <h2>自己紹介</h2>
      <img src="images/profile.jpg" alt="山田花子のプロフィール写真" width="160" height="160">
      <p>広告代理店で5年間バナー制作を担当したのち独立。…</p>
    </section>

    <section id="works">
      <h2>実績</h2>
      <div class="cards">
        <article class="card">
          <h3>美容サロンの予約LP</h3>
          <span class="tag">LP</span>
          <p>初めての方向けに、料金と流れを1ページで伝える構成に。</p>
        </article>
        <!-- 同じ形のカードが続く -->
      </div>
    </section>

    <section id="contact">
      <h2>お問い合わせ</h2>
      <p>お仕事のご相談はメールでお気軽にどうぞ。</p>
      <a class="btn" href="mailto:hello@example.com">メールで相談する</a>
    </section>
  </main>
</body>
</html>

読み方のポイントは3つだけです。

• <head>は「ページの設定」、<body>は「見える中身」。titleやdescriptionは検索結果に表示される文章なので、自分の言葉で見直しましょう
• <meta name="viewport" ...>はスマホ対応の必須1行。これが抜けると、スマホでパソコン用の画面が縮小表示されます
• href="#contact"は「同じページの id="contact" の場所へ飛ぶ」リンク。ヒーローのボタンを押すと、お問い合わせ欄までスクロールします

style.css（見た目）

/* 色はここで一元管理。変えたいときはこの数行だけ直す */
:root {
  --accent: #2f7d6d;
  --accent-dark: #22594e;
  --ink: #222;
  --bg-soft: #f5f7f6;
}

/* 幅や余白の計算を直感的にする定番の設定 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  line-height: 1.8;
  /* 日本語フォント：Webフォント → Mac → Windows → その他 の順に試す */
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* 中身の最大幅を決めて中央寄せ。左右に最低限の余白 */
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* 画面幅に応じて 1.6rem〜2.6rem の間で文字サイズが変わる */
.hero h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.4; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
}
.btn:hover { background: var(--accent-dark); }

/* 実績カード：1枚240px以上を目安に、入るだけ横に並べる（スマホでは自然に1列） */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  padding: 20px;
}

/* 画像が親要素からはみ出さないようにする */
img { max-width: 100%; height: auto; }

ここでの読みどころは、repeat(auto-fit, minmax(240px, 1fr))の1行です。「1枚240px以上を確保しつつ、入るだけ横に並べる」という意味で、メディアクエリ（画面幅ごとの条件分岐）を書かなくてもパソコンでは3列、スマホでは1列に自動で切り替わります。AIがこの書き方を選んだ理由を「なぜこの書き方にしたの？」と聞いてみるのも良い勉強になります。

HTMLとCSSの役割分担をもう少し詳しく知りたい方は、IT基礎 第2章 フロントエンド入門を読んでみてください。

Gitで保存する

見た目が整ったら、公開の前にGitで今の状態を保存（コミット）しておきます。Gitは「ファイルの変更履歴をセーブポイントとして残す」仕組みで、この先AIに修正を頼んで表示が崩れても、すぐにこの状態へ戻れます。AIに頼めばコマンドも実行してくれます。

このフォルダをGitで管理したいです。
初期化して、今の状態を「自己紹介サイトの初版」というメッセージでコミットしてください。
.DS_Store など、OSが勝手に作るファイルはコミットしないように .gitignore も作ってください。

Claude Codeがしたこと：次のようなコマンドを順番に、確認を取りながら実行しました。

# このフォルダをGitの管理下に置く（最初の1回だけ）
git init

# .gitignore を作成（OSが作る不要ファイルを除外）
# 中身の例： .DS_Store / Thumbs.db

# 保存したいファイルを「コミット候補」に入れる（. は全部の意味）
git add .

# セーブポイントを作る
git commit -m "自己紹介サイトの初版"

以後は、修正を頼むたびに「動作確認できたらコミットして」と一言添えるのがおすすめです。うまくいかない修正が入ったら、「さっきのコミットの状態に戻して」と頼めば元に戻せます。

GitHub → Cloudflare Pagesで公開する

いよいよ公開です。流れは「GitHubにファイルを置く」→「Cloudflare PagesとGitHubをつなぐ」の2段階。一度つないでしまえば、以後はGitHubに変更を送る（push）だけで自動的にサイトが更新されます。

ステップ1：GitHubにリポジトリを作ってpushする

GitHubのWeb画面で新しいリポジトリ（ファイルの置き場所）を作ってもよいですが、GitHub公式のコマンドラインツール gh が入っていれば、AIに任せるのが楽です。

このサイトをGitHubに置きたいです。
gh コマンドで my-site という名前のリポジトリを作って、今のコミットをpushしてください。
gh がインストールされていない、またはログインしていない場合は、
私がやるべき手順を1つずつ教えてください（ログインは自分でやります）。

Claude Codeがしたこと：gh auth status でログイン状態を確認し、ログイン済みだったので次のコマンドを提案・実行しました。

# GitHubへのログイン状態を確認
gh auth status

# リポジトリを作成し、このフォルダと紐づけて、そのままpush
gh repo create my-site --public --source=. --remote=origin --push

ログイン（gh auth login）は自分で行うのがおすすめです。パスワードや認証コードの入力をAIとの会話に貼り付ける必要はありません。

--public は「誰でも見られるリポジトリ」の意味です。Cloudflare Pagesは非公開（--private）のリポジトリでも公開できますが、次に紹介するGitHub Pagesを無料プランで使う場合は公開リポジトリが必要です（執筆時点）。いずれにしても、公開したくない情報（住所・電話番号・メモ書きなど）をフォルダに入れないようにしましょう。

ステップ2：Cloudflare PagesとGitHubをつなぐ

ここはブラウザでの操作です。Cloudflareの管理画面は更新されることがあるため、ボタン名は執筆時点（2026年9月）のおおまかな流れとして読んでください。迷ったら画面のスクリーンショットをClaude Codeに見せて「次に何を押せばいい？」と聞くのも有効です。

1. Cloudflareにログインし、Workers & Pages の作成画面から Pages を選び、Gitに接続する
2. GitHubとの連携を許可し、my-site リポジトリを選ぶ
3. ビルドの設定は、フレームワーク「なし（None）」、ビルドコマンドは空欄、出力ディレクトリも空欄（またはルートを指定）。HTMLとCSSをそのまま配るので、ビルドは不要です
4. 保存してデプロイ。1〜2分ほどで https://my-site-xxx.pages.dev のようなURLが発行される

発行されたURLをスマホで開いて、表示を確認しましょう。これで公開完了です。

エージェント博士ここから先の更新は、「AIに修正を頼む → 確認 → コミット → push」で終わりじゃ。pushした数分後にはサイトに反映される。サーバーにファイルをアップロードする作業は、もう要らんのじゃぞ

もう1つの選択肢：GitHub Pages

Cloudflareのアカウントを増やしたくない場合は、GitHub Pagesでも公開できます。リポジトリの Settings → Pages で、公開元を「Deploy from a branch」、ブランチを main、フォルダを / (root) に設定すると、https://ユーザー名.github.io/my-site/ で公開されます。

※ 料金・無料枠・機能は執筆時点（2026年9月）のものです。最新情報は各サービスの公式ドキュメントで確認してください。

独自ドメインについて一言

yamada-design.jp のような独自ドメインを使いたい場合は、ドメインを取得（年間費用がかかります）したうえで、Cloudflare Pagesの「カスタムドメイン」設定からつなぎます。DNS（ドメイン名とサーバーを結びつける仕組み）の設定が絡むので、画面の指示と一緒にAIに手順を聞きながら進めると安心です。DNSの仕組みはIT基礎 第1章 Webの仕組み入門で解説しています。

つまずきポイントとAIへの直し方の頼み方

初めてのサイト公開でよく起きる3大トラブルと、そのときのAIへの頼み方です。エラーや症状は「何をしたら・どうなったか・本当はどうなってほしいか」の3点セットで伝えると、原因にたどり着くのが早くなります。

1. 手元では見えていた画像が、公開後に表示されない

一番多いのがこれです。原因はだいたい次のどれかです。

• 大文字・小文字の違い：ファイル名が Profile.JPG なのにHTMLでは profile.jpg と書いている。MacやWindowsは多くの場合この違いを気にしませんが、公開サーバー側は大文字・小文字を区別するため、公開後だけ表示されなくなります
• パソコン内の住所で書いている：C:\Users\...\profile.jpg や /Users/.../profile.jpg のように自分のPCの場所を書くと、他の人の環境には存在しないため表示されません。images/profile.jpg のような相対パス（index.htmlから見た場所）で書きます
• 画像をコミットし忘れている：imagesフォルダがGitHubに上がっていない

公開したサイトで、自己紹介の写真だけ表示されません（手元でindex.htmlを開くと表示されます）。
画像のパスの書き方、ファイル名の大文字・小文字、Gitに画像がコミットされているかを確認して、
原因と直し方を教えてください。直すならファイル名は小文字の半角英数字に統一してください。

2. 修正してpushしたのに、サイトが変わらない

多くの場合、ブラウザのキャッシュ（一度読み込んだファイルを使い回して表示を速くする仕組み）が原因です。まずは強制再読み込み（Windowsは Ctrl＋Shift＋R、Macは Cmd＋Shift＋R）を試しましょう。それでも変わらなければ、Cloudflare Pagesの管理画面でデプロイが成功しているかを確認します。

CSSの変更が反映されにくい場合の定番対策は、読み込むファイル名の後ろにバージョンを付ける方法です。

<!-- ?v= の後ろを更新のたびに変えると、ブラウザが「新しいファイル」とみなして読み直す -->
<link rel="stylesheet" href="style.css?v=20260926">

このサイトでも、CSSを更新するときはこの方法を使っています。「CSSを変えたら ?v= の日付も更新して」とCLAUDE.mdに書いておけば、AIが毎回やってくれます。

3. 日本語フォントが環境によって違って見える・表示が遅い

パソコン（Mac/Windows）やスマホによって入っている日本語フォントが違うため、何も指定しないと見た目が端末ごとに変わります。前述のように font-family で候補を順番に並べるのが基本です。

Google FontsのNoto Sans JPのような日本語Webフォントは、漢字を含むためファイルが大きくなりがちです。表示が遅いと感じたら、使う太さを2種類程度に絞る、display=swap（読み込み中は端末のフォントで先に表示）を付ける、といった対策をAIに頼みましょう。

スマホで開いたとき、文字が表示されるまで一瞬白くなります。
Webフォントの読み込みが原因か確認して、表示を速くする方法を提案してください。
デザインの印象はなるべく変えたくないです。

助手アイ「直して」だけじゃなくて、「どこで・何が起きて・どうしたいか」を伝えるのがコツなんですね。人に頼むときと同じだ…！

発展：ブログ化・問い合わせフォーム

問い合わせフォームは「Googleフォーム埋め込み」でAPI不要

メールリンクより気軽に連絡してもらいたいなら、Googleフォームで問い合わせフォームを作り、サイトに埋め込むのが簡単です。送信内容はGoogleフォーム側に保存され、回答があったときの通知メールも設定できます。自前のサーバーもAPIキーも不要なので、静的サイトと相性抜群です。

<!-- Googleフォームの「送信」→「<>（埋め込み）」でコピーしたコードを貼る -->
<div class="form-wrap">
  <iframe src="https://docs.google.com/forms/d/e/あなたのフォームID/viewform?embedded=true"
          width="100%" height="900" loading="lazy"
          title="お問い合わせフォーム">読み込んでいます…</iframe>
</div>

AIには「Googleフォームの埋め込みコードを貼るので、お問い合わせ欄に入れて、スマホでも横にはみ出さないようにして」と頼めばOKです。フォーム側で必要以上の個人情報を聞かないようにするのも忘れずに。

ブログ化する

記事を増やしたくなったら、次のように段階を踏むのがおすすめです。

• まずは手作業の複数ページ：「blog/ フォルダを作って、記事ページのテンプレートと記事一覧ページを作って」と頼む。記事が数本のうちはこれで十分
• 共通部分をまとめる：ヘッダーやフッターを全ページで揃えたくなったら、このサイトの build.js のように、共通部分を流し込む小さなスクリプトをAIに作ってもらう手もある
• 静的サイトジェネレーター：記事が数十本になりそうなら、Markdownで書いた記事からHTMLを生成するツール（Astro、Eleventyなど）への移行をAIに相談する。そのときはCloudflare Pagesのビルド設定も変わります

「作ったものをもっと効率化したい」と思ったら、次の記事🌱 初級②「Excel・CSVの集計をPythonで自動化」で、手元の作業を自動化する体験もしてみてください。

事例：このサイトも同じ構成で作っている

他社の公開事例

AIエージェントでの開発は、企業の現場でも広がっています。Anthropicは社内でClaude Codeを広く使い、Claude Code自体のコードの多くをClaude Codeで書いていると公表しています。また、エンジニアではない職種の人が、AIを使って自分の業務用のページや小さなツールを作る動きも広がっています。自己紹介サイトは、その第一歩として最も取り組みやすい題材の一つです。

まとめ｜「伝える・確かめる・保存する」で、サイトは作れる

Claude Codeを使えば、HTMLやCSSを書けなくても、作りたいサイトを文章で伝え、ブラウザで確かめ、直してほしい点を伝えるだけで自分のサイトが完成します。完成したらGitで保存し、GitHubとCloudflare Pagesをつなげば無料で公開。以後の更新も、AIに頼んでpushするだけです。

大切なのは、AIに任せきりにせず、計画を見る・自分の目で確認する・動いた状態をこまめに保存すること。この進め方は、次の題材でもそのまま通用します。ほかにどんなものが作れるかはAIエージェントで開発してみよう（シリーズ全体ガイド）で、Webの仕組みから基礎を固めたい方はIT基礎ロードマップでどうぞ。

作れるようになったら、スキルを収入につなげる

AIエージェントで「作れる」ことは、それ自体が仕事になります。案件獲得や転職、作業環境づくりに役立つ記事をまとめました。

• AIが快適に動くノートパソコンの選び方＆おすすめ3選【2026】：開発・AIエージェントを動かすならメモリ16GB以上が目安
• AIスキル・プログラミングが学べるオンラインスクール比較8選【2026】：独学で詰まる前に。給付金の対象コースで費用を抑える方法も

関連記事

• AIエージェントで開発してみよう【2026】シリーズ全体ガイド
• Excel・CSVの集計をPythonで自動化する（AIエージェントで開発してみよう 初級②）
• AIエージェント時代のIT基礎ロードマップ【2026】
• AIエージェントで開発してみよう｜API連携編
• 【自社事例】AIエージェントでメディアサイトを運用する仕組み