Claude Code で最初の1本。
1月24日23時41分、このサイトが生まれた夜
このサイトは、2026年1月24日の夜に Claude Code と作った4つのファイルから始まりました。その夜からの記録をたどりながら、入れ方と、最初の1本の頼み方をまとめます。
この記事は 2026年10月22日時点の情報です2026年1月24日、土曜日の夜11時41分。このサイト usuilab.com の、最初のセーブ（コミット）が記録されています。
Initial commit - USUI LAB portfolio site - Steins;Gate inspired laboratory theme - Responsive design with animations - Project showcase (YouTube Shooting, Brainrot Collection) - Konami code easter egg Co-Authored-By: Claude Opus 4.5
ファイルは4つ。トップページの HTML、見た目を決める CSS、動きをつける JavaScript、それに独自ドメインを使うための小さな設定ファイルです。合わせて1,908行。最後の行の「Co-Authored-By」は、Claude Code がコミットするときに書き添える署名です。つまりこのサイトは、Claude Code と作った最初の1本でした。
テーマは「シュタインズ・ゲート風の研究所」。トップには「ようこそ、我が研究所へ」という見出しがあり、黒い端末の窓に > SYSTEM ONLINE... > ACCESS GRANTED ✓ と文字が打ち込まれていく仕掛けがありました。キーボードで「上上下下左右左右BA」と打つと、画面に「エル・プサイ・コングルゥ」と出ます。
いま読み返すと、作品の紹介より先に、隠しコマンドが入っています。最初の1本なんて、そんなものでいいと思います。
このノートは「はじめての開発」の3本目です。Claude Code を入れて、最初の1本を作るまでを、この夜からの記録をたどりながら書きます。
- Claude Code は、自分の PC の中でファイルを書いて、コマンドを動かしてくれる AI。使うには Claude の有料プラン（Pro 以上）が要る
- 最初の1本は「何を・どんな雰囲気で・何が載っているか」を伝えて、1ページだけ作らせる。あとは見て、直して、セーブの繰り返し
- AI は自信満々にまちがえることもある。このサイトでは、広告用の1行が3回書き換わった。決まりごとは公式で確かめる
- 1,908行最初のコミットの4つのファイル
- 85回このサイトのコミットのうち、Claude の署名があるもの（全152回）
- 5種類署名に出てくる Claude のモデル
- 3回広告用ファイルの1行が書き換わった回数
Claude Code って、チャットと何が違う？
Claude には、ブラウザやアプリで話すチャットのほかに、Claude Code という使い方があります。違いをひとことで言うと、チャットは答えを文章で返し、Claude Code は自分で手を動かすことです。
- チャット：「こういうページの HTML を書いて」と頼むと、コードが文章で返ってくる。それを自分でファイルに貼って、保存して、ブラウザで開く
- Claude Code：同じことを頼むと、自分の PC のフォルダにファイルを作り、必要ならコマンドを動かし、Git でセーブまでしてくれる
Claude そのものの説明や料金の全体は「Claude って何？」に書いたので、ここでは「最初の1本を作る」ことに絞ります。
最初の1本の、前の4日間
実は、このサイトより先に作っていたものがあります。YouTube のコメントを弾幕にして飛ばす Chrome 拡張「YouTube Shooting」です。GitHub と Git の記録を並べると、1月の後半はこう動いていました。
- YouTube Shooting のプライバシーポリシーのページを、公開リポジトリに置く
- YouTube Shooting の v1.0.0 をセーブ
- YouTube Shooting のリポジトリに、実績の画像を足す
- このサイト USUI LAB の最初のコミット
- このサイトに、YouTube Shooting の紹介ページを足す
作ったものを置く場所として、このサイトが生まれた順番です。紹介する作品が先にあって、そのあと入れ物を作っています。最初のコミットの作品一覧にも、YouTube Shooting、Brainrot Collection（iPhone ゲーム）、そして「Next Experiment / To Be Announced（次の実験・近日公開）」の3枠が並んでいます。
正直に書いておくと、この夜に Claude Code に何と頼んだのか、その文章は残っていません。残っているのは、コミットの説明文とファイルの中身だけです。ただ、説明文の4行を見ると、少なくとも「シュタゲ風の研究所」「スマホでも崩れない」「作品を並べる」「隠しコマンド」の4つは、最初の1本にもう入っていたことが分かります。
最初の2週間：見て、直して、セーブ
最初のコミットのあと、このサイトは2週間でまったく別物になっていきます。主な出来事だけ抜き出すと、こうです。
- 研究所から、ペルソナ4風のブラウン管テレビのデザインへ大きく変える
- テレビを本物っぽくする。35分で8回セーブして、最後に V 字のアンテナが生える
- サイト全体を日本語と英語で切り替えられるようにする
- CSS で描いていたテレビの枠を、本物のテレビの写真に差し替える
- チャンネル4にニュース番組を作る。キャスターの画面と写真のスライドショー
- チャンネルごとに BGM を流す
- ペルソナ5風のプロフィールを作る
シュタゲの研究所から始まって、2日目の夜中にはペルソナ4のテレビになっています。最初の1本は、最初の形のまま完成させる必要はまったくありません。一度形にしたあとで、まったく違う方向へ大きく振れています。形がないうちは、振れる先もありません。
数字は、言ってみて、見て、戻す
この2週間の履歴で、いちばん Claude Code らしいと思うのは、数字の往復です。
2月7日 00:36 Add voice system for channels (BGM 8 : Voice 2 ratio) 2月7日 00:39 Adjust BGM/Voice ratio to 7:3 (35%/15%) 2月7日 01:23 Scale up YouTube Shooting layout 1.8x 2月7日 01:26 Scale down YouTube Shooting layout to 1.3x
BGM と声の比を8対2で入れて、3分後に7対3へ。YouTube Shooting の紹介を1.8倍に大きくして、3分後に1.3倍へ戻す。どちらも、入れて、見て、すぐ直しています。
自分で CSS を書いていたら、1.8倍を試すのも面倒で、たぶん最初から「1.3倍くらい」で妥協していたはずです。Claude Code なら「1.8倍にして」と言えば数十秒で見られます。大げさに振ってから戻すほうが、ちょうどいいところが早く見つかります。
AI と作るときは、迷ったら大きく振って、見てから戻す。
そして、振っても戻せるのは、毎回セーブしているからです。最初のコミットから2月7日までのコミットは43回。セーブと戻し方の話は「Git って何？」に詳しく書きました。
署名でたどる9か月
コミットの署名には、そのとき使っていた Claude のモデルの名前が入っています。このサイトの152回を古い順に読むと、モデルが入れ替わっていく様子が見えます。
| 最初に出てくる日 | 署名のモデル | その時期にやったこと（例） |
|---|---|---|
| 2026年1月24日 | Claude Opus 4.5 | 最初の1本、テレビのデザイン、BGM |
| 2026年2月8日 | Claude Opus 4.6 | 共有画像の設定、サイトの小さなアイコン、sitemap |
| 2026年3月19日 | Claude Sonnet 4.6 | Brainrot Collectors のページ、スマホ向けの表示、ブログ |
| 2026年4月20日 | Claude Opus 4.6（再び） | jidori（iPhone アプリ）の紹介ページ |
| 2026年10月22日 | Claude Opus 5.5 | 紙のノート風への作り直し、記事の書き直し |
月ごとのコミットの数も、正直に出しておきます。1月30回、2月18回、3月13回、4月67回、5月1回、そして6月から9月はゼロで、10月に23回。4月は、ブログの記事と iPhone アプリの紹介ページをまとめて足した月です。6月から9月はこのサイトのコミットがなく、その間 GitHub には、ゲームのリポジトリが3つ増えています。
152回のうち、署名がないコミットも67回あります。誰がどう作ったのかは、署名だけでは分かりません。少なくとも、署名の数だけで「全部 AI」とは言えない、ということです。
3回書き換わった、広告用の1行
AI と作るときに、一番気をつけたいことがよく分かる記録もあります。Google AdSense の広告を載せるために置く、ads.txt というファイルの話です。中身はたった1行で、自分の広告アカウントの番号を書きます。その番号の頭につく文字が、何度も書き換わっていました（番号そのものは伏せます）。
ca-pub-で始まる形で作る- 「番号を直す」として、
pub-の形に変える - 6分後、「正しくは
ca-pub-」として、また戻す - 「AdSense のアカウントの番号に合わせる」として、
pub-に戻す。この修正にだけ、Claude の署名がない
3回目の説明文は「prefix corrected to ca-pub-（頭の文字を ca-pub- に訂正）」。訂正、と言い切っています。でも、Google の AdSense ヘルプにある ads.txt の例は、こうです。
google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0
頭は pub- です。最後に正しい形に戻したのは、署名のない4月24日の修正でした。
AI は「正しくは〜です」と自信のある書き方で、まちがえることがあります。しかも6分前の自分の変更を、反対向きに「訂正」することもある。広告の設定や、お金や、外のサービスの決まりごとが関わるところは、AI の説明文ではなく、そのサービスの公式の説明を一度だけ自分で開いて確かめる。これがいちばん安く済む保険です。
公開してから直した、小さな3つ
ads.txt ほど派手ではありませんが、公開してから直した小さなまちがいも、履歴に残っています。どれも「見た目では分からない」ところです。
| 日時 | 直したもの | 何がまちがっていたか |
|---|---|---|
| 2月8日 14:24 | SNS で共有したときの画像の指定 | 画像の場所が assets/ogp.png のような書き方で、サイトの住所から始まる完全な形（https://usuilab.com/…）になっていなかった |
| 2月15日 17:41 | 検索エンジン向けのページ一覧（sitemap.xml） | 7分前に作った一覧の冒頭にある決まりの住所が、sitemapschemas.org という、正しい sitemaps.org とは違う綴りになっていた |
| 4月20日 20:57 | トップの作品の枠 | 表示する作品の数の上限が3のままで、4つ目の作品が出てこなかった |
2つ目は、AI が作って、同じ AI が7分後に直したものです。sitemap の決まりを定めている sitemaps.org の見本では、冒頭の住所は http://www.sitemaps.org/schemas/sitemap/0.9 です。それっぽいけれど一文字ずつ見ると違う、という種類のまちがいは、ブラウザで開いても見た目は何も変わらないので気づきにくい。困るのは、それを読む検索エンジンのほうです。
こういうものは、作らせたあとに「この部分は、公式の見本とそのまま一致していますか？ 見本の URL も教えて」と一言聞くだけで、かなり防げます。AI に自分で見直させるのは、無料でできる点検です。
入れ方と、必要なプラン
ここからは実際の入れ方です。2026年10月22日に公式のドキュメントで確かめた内容で書きます。
必要なもの
- Claude の有料プランか、開発者向けの Console のアカウント：公式の説明では、Pro、Max、Team、Enterprise、Console のいずれかが必要で、無料のプランでは使えません。個人なら Pro が入り口で、月払いで月20ドル、年払いなら月17ドル相当（年200ドル）です。Max は月100ドルから
- PC：Windows なら Windows 10 の 1809 以降。メモリは4GB 以上
- インターネットの接続
Windows に入れる
スタートメニューで「PowerShell」を開いて、次の1行を貼り付けて Enter を押します。管理者として開く必要はありません。
irm https://claude.ai/install.ps1 | iex
ダウンロード中は何も表示されないので、少し待ちます。終わったら PowerShell をいったん閉じて開き直し、次を打ちます。
claude --version
バージョンの番号が出れば入っています。「claude が見つからない」と出たら、公式のトラブルシューティングにある「PATH の直し方」を見てください。
Windows のパッケージ管理（winget）を使う方法もあります。
winget install Anthropic.ClaudeCode
こちらは自動で新しい版に更新されないので、ときどき winget upgrade Anthropic.ClaudeCode を打つ必要があります。最初の1行の方法なら、裏で自動的に更新されます。
あわせて、Git for Windows を入れておくのがおすすめです。公式の説明でも、Windows では入れておくと Claude Code が Git Bash を使えるようになる、とあります。入れ方は「Git って何？」に書きました。
黒い画面がこわい人には、デスクトップアプリという選択肢もあります。公式のドキュメントでも、ターミナルを使わずに Claude Code を使える方法として案内されています。
最初に起動する
- 最初の1本のための、空のフォルダを作る（例：デスクトップに
my-first-site） - PowerShell で、そのフォルダに移る（
cdのあとにフォルダの場所） claudeと打つ- 初回はブラウザが開くので、Claude のアカウントでログインする
あとは、そこに日本語で頼むだけです。
最初の1本の頼み方
あの夜の最初のコミットの説明文から逆算すると、最初の頼み方に入っていればいいことは、だいたい4つです。
| 入れること | このサイトの最初のコミットでは |
|---|---|
| 何を作るか | 自分の作品を並べる、個人のサイト |
| どんな雰囲気か（好きな作品の名前でいい） | シュタインズ・ゲート風の研究所 |
| 何が載っているか | 作品2つと「次の実験」、自己紹介、連絡先 |
| 遊び心を1つ | 隠しコマンド |
これに、初心者ならではの条件を3つ足しておくと安心です。「1ページだけ」「ダブルクリックでブラウザで見られる形」「区切りごとに Git でセーブ」。最初のコミットも、特別な道具を使わない HTML・CSS・JavaScript の3つのファイルでした。手元でそのまま開けるので、何ができたかをすぐ自分の目で確かめられます。
型にすると、こうなります。
このフォルダに、<何を作るか> を作ってください。 ・雰囲気：<好きな作品や、見た目のイメージ> ・載せるもの：<並べたいものを箇条書きで> ・遊び心：<隠しコマンドなど、1つだけ> 条件： ・まずはトップの1ページだけ ・HTML・CSS・JavaScript だけで、ダブルクリックでブラウザで開ける形に ・最初に git init して、区切りのいいところでコミットしてください ・できたら、どのファイルをブラウザで開けばいいか教えてください
できたら、開いて、見て、気になったところを一つずつ言います。「ボタンが小さい」「もっとテレビっぽく」。それで十分です。あの夜の私も、やっていたのはそれだけでした。
公開したくなったら、そこで初めて GitHub と公開の場所を考えます。最初の1本は、手元で動けば100点です。
9か月後の作り方
2026年10月22日、このサイトは研究所でもテレビでもなく、紙の実験ノートの見た目に作り直されました。いま読んでいるこのページです。
作り方も、1月とは少し変わっています。
- 本番を直接触らない：作業用のブランチで書いて、確認用の URL で見てから本番に出す
- 引き継ぎのメモを残す：書き方の決まり、出さない情報、公開の手順を1つのファイルにまとめて、新しい会話の Claude Code が最初にそれを読む
- 1回に頼む量を決めておく：たとえば記事は、1回の会話で3本まで
どれも、1月の夜にはなかった決まりです。最初の1本を作って、それを9か月いじり続けるうちに、少しずつ増えてきました。最初から全部そろえる必要はありません。まずは隠しコマンド入りの1ページからで、十分です。
このノートから持ち帰れること
Claude Code に限らず、AI と何かを作り始めるときに使える考え方です。
- 最初の1本は、作りたいものの「入れ物」からこのサイトは、紹介したい作品が先にあって、その置き場所として生まれた。作るものに迷ったら、すでにある何かを並べる場所を作る。ポートフォリオ、作品の紹介ページ、自分用のリンク集
- 頼むときは「何を・雰囲気・載せるもの・遊び心」好きな作品の名前は、見た目を伝える一番短い言葉になる。サイト、資料、スライド、ゲームの試作を AI に頼むとき
- 迷ったら大きく振って、見てから戻す1.8倍を見てから1.3倍に戻すほうが、最初から1.3倍で妥協するより早く決まる。デザインの大きさや色、音量、文章の長さ
- 決まりごとは、AI の「正しくは」ではなく公式で確かめるads.txt の1行は、AI が6分で反対向きに「訂正」した。広告・決済・ストアの審査・法律や規約が関わる設定
- 決まりは、使いながら増やせばいい作業ブランチも引き継ぎのメモも、9か月かけて増えた。最初は1ページと Git だけで足りる。新しい道具を使い始めるとき全般
- Claude の有料プラン（Pro 以上）か Console のアカウントがあるか
claude --versionでバージョンが出るか- 最初の1本のための、空のフォルダを用意したか
- 頼む文章に「1ページだけ」「ブラウザで開ける形」「Git でセーブ」が入っているか
やってみよう
記事と同じことを、手元の AI で試せる指示文です。ChatGPT・Gemini・Claude のどれでも使えます（練習3は Claude Code があるとそのまま試せます）。AI は毎回ちがう答えを返すので、記事とまったく同じ条件にはなりませんが、考え方の練習にはしっかり使えます。実際にやってみてください。
練習1最初の1本の「頼み方」を一緒に作る
私は AI のコーディング道具（Claude Code）で、最初の1本を作ろうとしています。 作りたいものは次のとおりです。 （例：自分が描いたイラストを並べる、個人のサイト。雰囲気は昔のゲーム機の画面みたいな感じ） この内容を、AI に渡す頼み方の文章に整えてください。 「何を作るか」「雰囲気」「載せるもの」「遊び心を1つ」を必ず入れて、 「まずは1ページだけ」「ブラウザでそのまま開ける形」「Git でこまめにセーブ」という条件もつけてください。
記事の型の4つと3つの条件が、全部入っているか。足りないところを、自分の言葉で埋められそうか。
練習2AI の「正しくは」を確かめる練習
Google AdSense の ads.txt に書く1行の正しい形を教えてください。 サイト運営者 ID の頭は「pub-」と「ca-pub-」のどちらですか？ 答えのあとに、それを確かめられる Google 公式のページの名前も教えてください。
答えを鵜呑みにせず、挙げられた公式のページを実際に開いて、例の行と見比べる。記事の4月の3回の書き換えと比べてみる。
練習3大きく振って、見てから戻す
いま作っているページの見出しの大きさを、まず今の2倍にしてください。 私が見て感想を言うので、そのあとで、ちょうどいい大きさに戻すのを手伝ってください。 変えるたびに Git でコミットして、説明文に倍率を書いてください。
2倍を見てから決めた大きさは、最初に思っていた大きさと同じだったか。コミットの説明文に数字が残っているか。
出典・参考にした情報
- Claude Code Docs「Advanced setup」（動く環境、Windows での入れ方、必要なアカウント、英語）
- Claude の料金プラン（Pro・Max の料金と、Claude Code が含まれるプラン、英語）
- Google AdSense ヘルプ「ads.txt に関するガイド」
- sitemaps.org「Sitemaps XML format」（sitemap の見本、英語）
- コミットの時刻・説明文・署名・ファイルの中身は、このサイト（usuilab）と YouTube Shooting の Git の履歴、GitHub のリポジトリの記録から
いずれも 2026年10月22日に確認しました。下書きや図づくりには AI を使っていますが、事実関係は自分で確かめてから公開しています。
ウスイ福岡で個人開発をしています。アプリやゲームを作りながら、分かったことをこのノートに書いています。運営者・編集方針