HOW THIS SITE WAS MADE
このサイトの作り方
プログラミングの経験がない会社員が、Claude と5日で作った記録です。何を決めて、何を任せて、どこで詰まったか。うまくいかなかったところも、そのまま書きます。
Timeline5日間の記録
時刻は日本時間。「つまずき」は、その版で実際に起きたことです。
リンクを1画面に並べただけの1枚
「公開できるサイトを、独自ドメインで持ってみたい」から始めました。Claude の質問に答えて作るものを1つに絞り、ドメインを買って、HTTPS で開くところまで約1時間。中身は SNS 4つへのリンクだけです。
つまずきClaude アプリ内のブラウザでは支払い画面が表示されず、いつもの Chrome で支払いました。最初に考えたドメインは、すでに取られていました。2回目からの更新は Claude が行う仕組みに
初回の公開は画面を見ながら自分で操作しました。2回目以降は Claude がブラウザの拡張機能を通じて公開まで行う形にし、わたしの作業は「公開してよいか」を決めるだけになりました。
つまずき最初は Claude の作業環境から Cloudflare に直接つながらず、用意した鍵（APIトークン）が1本無駄になりました。リンク集から「見せるページ」へ
海外のブランドサイトの構成だけを借りて、映像・ショート動画の横スクロール・note 記事の一覧を並べました。色はダークと琥珀の1色に絞っています。
つまずき部品の名前が重なり、見出しが縦に積み上がる崩れ方をしました。全画面の映像と、ノイズから組み上がる英字
ヒーロー（最初の1画面）の配置を3案作って見比べ、中央に置く案を選びました。英字の見出しは、ノイズの中から文字が確定していく演出にしています。検索や AI に正しく読まれるための整備（共有用の画像・構造化データ・サイトマップ）も、この版で入れました。
ヒーロー配置の3案（中央・左下・崩壊）を並べた比較 つまずき作り直しの途中で、v1 にあった「SNS で共有したときの画像」とアイコンが消えていました。実際に確認するまで気づきませんでした。プライバシーポリシー、解析、自己紹介
プライバシーポリシー、Cookie を使わないアクセス解析、「ウラカタについて」のページを足しました。解析を入れるときに文面を書き直さなくて済むよう、設定を1か所切り替えるだけでポリシーの記載も変わる作りにしています。
つまずき文字色が暗すぎて、アクセシビリティの基準（明るさの差）を満たしていませんでした。色を1段明るくして違反0件に。解析タグを自動で入れる機能も、この構成では効かず、直接埋め込みました。背景が切り替わる TOP と、問い合わせフォーム
背景の映像が切り替わる方式を3種類作り、録画して見比べてから、グリッチで裂けるように切り替わる案を選びました。問い合わせフォームは外部のサービスを使わず、ロボット対策も含めて Cloudflare の中だけで完結させています。送信内容はメールで届くだけで、サイト側には保存しません。
見比べに使った録画（横スライド／フェード／グリッチ・音なし・30秒） つまずき見比べ用の録画に使ったブラウザが、サイトの動画形式を再生できませんでした。録画のときだけ別の形式に変換しています。このページと、曲に反応するヒーロー
TOP の「SOUND ON」を押すと、曲の低音に合わせて下からの光と見出しが脈打ち、強い拍では見出しが一瞬崩れます。背景の切り替わりも拍に合わせています。
2曲目と、ページの中で聴ける曲の一覧
新しい曲「The Mountain Wakes」を足し、SOUND に「ここで聴ける曲」の一覧を作りました。TOP の SOUND ON でも曲を切り替えられ、光の演出はどちらの曲にも反応します。曲はデータに1件足すだけで増やせる作りです。あわせて、背景の映像とカードの画像を少し明るくして見やすくしました。
つまずき曲に付いていた歌詞の字幕を、歌に合わせて1行ずつ流すつもりでした。ところが声の位置を解析すると、字幕の時刻は等間隔に振られただけで、実際の歌とずれていました。流すのはやめて、開いて読む形にしています。ページのつながりと、全画面で聴くモード
ページを移るとき、琥珀色の線が走って次のページが現れ、ロゴや見出しは形を変えながら次のページへつながります（Chrome・Safari）。Chrome では、リンクにカーソルを合わせた時点で次のページを裏で用意しておきます。曲は「LISTENING MODE」で全画面にでき、ジャケットの周りを周波数の輪が囲んで、低音と拍に合わせて動きます。
つまずき全画面モードを初めて開いたとき、画面が真っ黒のままでした。WebGL が使えることを示す目印に付けたクラス名が、TOP のグリッチ演出の層（ふだんは透明）と同じ名前だったため、モード全体が透明になっていました。名前を分けて直しています。裏側を見せるモードと、小窓で聴くプレイヤー
右下の「X-RAY」を押すと、ページが設計図のような見た目に変わります。各ブロックがどの版で入ったか、どれくらいの重さか、画像や映像が生成AIで作ったものかを重ねて表示し、表示の速さや外に送っている情報も、その場で測った値で出します。曲は「小窓で聴く」で常に最前面の小さな窓に出せるようにしました（PC の Chrome・Edge・Firefox）。別の作業をしている間も、曲に合わせて動き続けます。
つまずき裏側モードで素材の数を数えたら、同じジャケット画像を曲の一覧と MUSIC VIDEO の2か所で使っているぶんを二重に数えていました。画像1枚ずつではなく、ファイル単位で数える形に直しています。
Who did what人と Claude の分担
わたし（人）書いたコード 0行
- 何を作るか決める（Claude の質問に答える）
- ドメインの支払いと、Cloudflare の最初の設定
- 見比べて選ぶ（配置3案・切り替え方3案）
- 公開してよいか決める
Claude書いたコード 3,046行
- 設計と、HTML・CSS・JavaScript・Python
- 映像と画像の軽量化
- 表示・アクセシビリティ・フォームの検査
- 公開作業と、公開前の法務の確認
Claude の行数は、このサイトを組み立てる元のファイル 8 個（ページの型5つ・裏側モードの部品・組み立て用の Python・フォームの受付）を 2026-09-23 時点で数えたものです。文章や設定の一部は、わたしが指定しています。
Stack使ったもの
同じようなことで詰まっている人の役に立てばうれしいです。感想や、「ここはどうやったの？」という質問は、フォームからどうぞ。作る過程の細かい話は note に書いています。