三味線弾きが、AI と二人で公式サイトを作ってみた｜コードを1文字も書かずにホームページを自作した方法

邦楽の世界では、パソコンや Web に苦手意識を持つ人も少なくありません。ホームページは持たない、あるいは人に頼んで作ってもらう、という演奏家も多いと思います。

けれど今は AI に相談しながら自分のサイトを形にできる時代で、このサイトも AI を活用しながら私自身で設計・制作しました。

演奏家の公式サイトはホームページ作成サービスでも作れますが、それでも自作を選んだのは、次の2つを細かく作り込みたかったからです。

この記事では、その仕組みを紹介します。

目指したこと

サイトづくりで大切にしたのは、次の2つです。

プロフィールと公演情報をしっかり届けること。演奏家のサイトとして、この2つがすぐに分かることを一番に考えました
「伝統」と「IT」という両極端な面を、自分の強みとして伝えること。長唄の伝統を受け継ぎながら、ITエンジニアとして現代の技術にも携わっています。その両方を持っていることを、サイトそのもので表現したいと考えました

サーバーを持たない静的サイトなので、表示が速く、サーバーの保守やセキュリティ更新の手間もかかりません。運用にかかる費用は、独自ドメインの年間約10ドルだけです。

演奏家のサイトで一番更新が多いのは公演情報で、更新のたびにコードを書き換えるのでは続きません。そこで、公演情報は Google スプレッドシートで管理し、サイトはそれを読み込んで自動で作られるようにしました。

自動で作り直す設定は、次の数行だけです。

on:
  push:
    branches: [main]
  schedule:
    - cron: '0 21 * * *' # 毎日 06:00 JST

公演ごとのページや、SNS で共有したときに表示される画像（OGP画像）も、シートの内容から自動で作られます。スマホからシートを編集するだけで、翌朝にはサイトが更新されている状態です。

「長唄三味線」「藝大邦楽科」のような言葉で探した人に、正しい情報を届けたい。最近は Google 検索だけでなく、ChatGPT などの AI に質問して調べる人も増えているので、次のような対策をしています。

構造化データ（JSON-LD）：人物（Person）、公演（MusicEvent）、よくある質問（FAQPage）などを、検索エンジンが読み取れる形式で埋め込んでいます。本名・雅号・読みを同じ人物として結び付けています
llms.txt：AI 向けに、人物の概要や主なページ、今後の公演をまとめたテキストを用意しています
robots.txt で AI クローラーを許可：AI 検索に、公開情報を引用してもらえるようにしています
IndexNow：サイトを更新するたびに、Bing などの検索エンジンへ自動で通知しています
日本語・英語の2言語対応：海外からの出演依頼にも対応できるよう、hreflang で言語ごとのページを正しく伝えています

「目指したこと」の2つ目は、デザインで形にしました。夜の舞台を思わせる藍の暗がりと、和紙のような昼の地色を切り替える構成です。

三味線の3本の糸をモチーフにした光の線や、筆で書いたように現れる見出しなど、伝統を感じる要素を Web の技術で表現しています。動きを減らす設定（視差効果を減らす）にしている端末では、演出を控えめにしています。

実装には AI のコーディングアシスタント（Claude Code）も活用しました。AI は、思考の整理やアイデアの実現を一緒に進める相棒です。

仕事と同じく、次の進め方で作りました。

この進め方のおかげで、制作で大きくつまずくことはほとんどありませんでした。

「やりたいこと」を言葉にできれば、AI はそれを形にする手伝いをしてくれます。公演情報をどう見せたいか、どんな雰囲気のサイトにしたいかといった中身を一番よく知っているのは、演奏家自身です。

IT が得意でなくても、AI と相談しながらなら、自分の言葉で自分のサイトは十分につくれます。

三味線の稽古とプログラミングは、どちらも「毎日少しずつ積み重ねる」もの。これからも、技術を使って邦楽に気軽にふれられるきっかけをつくっていきます。

演奏家・団体のサイト制作や、IT・Web に関するご相談もお問い合わせフォームから承っています。