ランディネットワーク
宮部 敏史
私は相川七瀬のトリビュート / コピーバンド「ななこぴ⚡️」で、ベースとコーラスを担当しています。
その「ななこぴ⚡️」のオフィシャルサイトを、2026 年 4 月に公開しました。
これは、自分自身が参加しているバンドのために「こういうサイトがあると便利だろう」と考え、企画・情報設計・実装・運用設計までを自分で進めたプロジェクトです。
制作には Claude Code を本格的に使いました。単にコードを書かせたというより、新しい技術を調べ、実装方針を相談し、動く形まで持っていくための開発パートナーとして使った感覚に近いです。
この記事では、公式サイトが完成するまでの軌跡を公開したいと思います。
なぜバンドサイトを作ったのか
アマチュアバンドの情報発信は、SNS だけでもある程度は成り立ちます。ライブ告知、写真、短いお知らせであれば、X や Instagram のほうが手軽です。
ただ、SNS だけでは情報が流れていきます。ライブ日程、会場、出演者、セットリスト、問い合わせ先、バンド紹介などを、後から見返しやすい形で残すには、やはり公式サイトがあったほうがよいと考えました。
特に今回作ったサイトでは、以下のような点を意識しました。
- 初めて見る人に、どんなバンドかすぐ伝わること
- ライブ情報をスマートフォンで見やすくすること
- 公式 LINE から閲覧する際も読みやすいこと
- 日本語だけでなく、英語でも全てのコンテンツを提供できること
- 小さなサイトでも、検索エンジンに正しく内容を伝えられること
大規模な商用サイトではありませんが、実際に人に見てもらい、ライブ情報を確認してもらうためのサイトです。だからこそ、見た目だけでなく、更新しやすさや運用のしやすさも含めて設計する必要がありました。
今回の技術構成
サイトの主な技術スタックは次のとおりです。
- Hugo (extended, multilingual mode) — 静的サイトジェネレーター
- Tailwind CSS v4 — Hugo Pipes + PostCSS で統合
- Cloudflare Pages — ホスティング
- Cloudflare Pages Functions — 問い合わせフォーム & ライブコメント API
- Resend — トランザクショナルメール送信
- Cloudflare Turnstile — Bot 対策
- OpenAI / Anthropic API — 日本語から英語への翻訳ワークフロー
Hugo は、このサイト（randynetwork.com）でも使っているので慣れている技術です。一方で、今回は multilingual mode、Tailwind CSS v4、Pages Functions、LLM を使った翻訳スクリプトなど、普段よりも踏み込んだ実装が多くなりました。
そこで Claude Code を使い、調査・設計・実装・修正を短いサイクルで回しながら作りました。
Claude Code をどう使ったか
Claude Code は、ターミナル上で動くコーディング支援ツールです。リポジトリのファイルを読みながら、実装方針の相談、コードの追加、既存コードの修正、エラーの確認までを一連の流れで進められます。
今回の制作では、特に次のような場面で役に立ちました。
- Tailwind CSS v4 と Hugo Pipes の組み合わせ方を確認する
- Hugo の multilingual mode の設定を整理する
- Cloudflare Pages Functions の実装を進める
- LLM 翻訳スクリプトの仕様をコードに落とし込む
- JSON-LD の出力ロジックを Hugo テンプレートに組み込む
- LINE 用の専用出力フォーマットを検討する
新しい技術を使うときは、最初の「どの設定をどこに書けばよいか」で時間を取られがちです。Claude Code を使うと、公式ドキュメントや既存コードを前提にしながら、実際のリポジトリに合う形で相談できます。
もちろん、出てきたコードをそのまま信用するのではなく、最終的な判断とレビューは人間が行います。それでも、最初の動く形まで到達する速度はかなり上がりました。
サイトで工夫したこと
日本語と英語の多言語対応
サイトは日本語を主言語とし、英語版も用意しました。
Hugo の multilingual mode を使い、日本語は通常の URL、英語は /en/ 配下で出力しています。各ページには hreflang と x-default も出力し、検索エンジンにも言語違いのページとして伝わるようにしています。
英語版については、すべてを手作業で翻訳すると更新が重くなります。そこで、日本語を source of truth とし、LLM を使って英語版 Markdown を生成するスクリプトを作りました。
このスクリプトでは、元ファイルのハッシュを保存し、変更があったファイルだけを翻訳対象にします。また、Hugo の shortcode、Markdown 構造、バンド名や楽曲名などの固有名詞を壊さないように、プロンプトと処理を調整しています。
手書きで調整したいページには translation.locked: true を付け、以後の自動翻訳で上書きしないようにしました。小さなサイトでも、こうした運用ルールを最初に作っておくと、後から更新しやすくなります。
問い合わせフォームとライブコメント
問い合わせフォームとライブコメント機能は、Cloudflare Pages Functions で実装しました。
どちらも Cloudflare Turnstile で Bot 対策を行い、送信内容は Resend を使ってメール送信します。フォーム送信後は 303 redirect で完了ページへ移動する、シンプルな構成です。
ライブコメントは、完全な掲示板のように即時公開するのではなく、管理者が確認してから公開する形にしました。バンドサイトとしては、誰でも自由に書き込めることよりも、安心して掲載できる運用にしておくことのほうが大事だと判断したためです。
LINE で見やすい専用出力
ななこぴ⚡️では、公式 LINE アカウントも運営しており、ライブ情報を頻繁に共有しています。Web ブラウザ(Safari, Chrome等)での公式 Web サイトの閲覧と、LINE の in-app browser での閲覧を UI 的に分ける必要があります。
そこで Hugo の outputFormats を使い、同じコンテンツから LINE 向けの簡易版 HTML も出力するようにしました。ヘッダーやフッターを省略し、画像は画面幅に合わせ、アクセントカラーも LINE 内で見やすいように調整しています。
これは今回の中でも特に面白い実装でした。CMS を大きく改造するのではなく、Hugo の出力フォーマットを使って、通常版と LINE 版を同じコンテンツから作れるようにしています。
検索エンジン向けの構造化データ
小さなバンドサイトでも、検索エンジンに内容を正しく伝えることは大切です。
今回は JSON-LD で、ページ種別に応じた構造化データを出力しています。
MusicGroup— バンド情報（全ページ）MusicEvent— ライブ詳細ページFAQPage— ホームページ
ライブ詳細ページでは、日付、会場、出演者などの情報を front matter から取り出し、MusicEvent として出力します。こうしたテンプレート処理は細かい条件分岐が多くなりますが、Claude Code と相談しながら実装すると、全体像を保ったまま進めやすく感じました。
Claude Code が役立った場面
一番大きかったのは、初めて触る技術の立ち上がりが速くなったことです。
Tailwind CSS v4 は、以前の v3 とは設定方法が変わっています。tailwind.config.js を前提に考えていると、CSS-first な設計に少し戸惑います。Hugo Pipes と組み合わせる方法も、最初は確認が必要でした。
Claude Code に構成を相談しながら進めることで、試行錯誤の回数を減らせました。特に、Hugo のテンプレート、Cloudflare Pages Functions、LLM 翻訳スクリプトのように、複数の技術が絡む部分では効果を感じました。
また、こちらが「こういう運用にしたい」と説明すると、それに合わせてコードや設定案を出してくれます。たとえば翻訳スクリプトでは、変更があったファイルだけを翻訳する仕組み、手書き翻訳を保護する仕組み、Claude と OpenAI を切り替えられる設計などを、一緒に整理しながら作ることができました。
人間が判断すべきだったこと
一方で、Claude Code に任せればよい部分と、人間が決めるべき部分ははっきり分かれます。
今回でいえば、次のような判断は自分で行いました。
- バンドサイトとして、どの情報を優先して見せるか
- LINE 専用出力を作る価値があるか
- ライブコメントを即時公開ではなく承認制にするか
- 英語版をどこまで自動化するか
- 技術的に凝りすぎず、長く運用できる構成にするにはどうするか
Claude Code は実装を速くしてくれますが、「何を作るべきか」までは決めてくれません。目的、運用、利用者の見方を考えたうえで、必要な機能に絞り込むのは人間の仕事です。
そのうえで、決めた方針をコードに落とし込む段階では、とても強力な道具になります。
まとめ
今回の「ななこぴ⚡️」オフィシャルサイト制作は、アマチュアバンドのための小さなサイトではありますが、内容としては多言語対応、サーバレスフォーム、Bot 対策、構造化データ、LINE 専用出力、LLM 翻訳ワークフローまで含む、かなり実践的なプロジェクトになりました。
Claude Code を使うことで、調査から実装までの速度は確実に上がりました。特に、初めて使う技術や複数のサービスを組み合わせる場面では、相談しながら進められることの価値を感じました。
ただし、AI は目的や優先順位を自動的に決めてくれるものではありません。何のために作るのか、誰が使うのか、どこまで機能を入れるのかを考えたうえで、実装を加速するために使うのがよいと感じています。
当事務所でも、Hugo や Cloudflare を使ったサイト制作、既存サイトの改善、AI を活用した開発支援に取り組んでいます。小規模なサイトでも、目的に合わせて設計し、運用しやすい形に整えることは大切です。
また、サイト公開後の記事更新や運用面での AI 活用については「AI を活用してブログ記事の作成とサイト運用を続けやすくする」にまとめました。
ご相談はお問い合わせからお願いします。