投稿者: donkwkm

  • VS Code と Claude Code で、隙間時間だけで自分のホームページを作り直した話 — これがバイブコーディングってやつ?

    はじめに

    「ライブ情報ページの更新、今月もやらないと」と思って朝に少しだけ手をつけたら、合間合間の隙間時間をつなげただけで、気がつけば donkwkm.com の「プロフィール」「ミュージック」「スケジュール」のページがまるごと作り直されていた。そういう一日だった。

    ちなみに今日は初めて VS Code というソフトを使った。プログラマーには定番のエディタらしいのだが、自分はこれまで触ったことがなかった。そこに Claude Code という相棒を住まわせて、「ここをこうしたい」「やっぱりやめる」と口で伝えながら進めていく。コードの中身は正直ちゃんと読んでいない。動いたかどうか、見た目が気持ちいいかどうかで判断していく。

    あとから知ったのだけれど、こういうやり方には「バイブコーディング(vibe coding)」という呼び名があるらしい。細部を全部は把握しないまま、雰囲気(vibe)でAIと一緒にコードを書いていくスタイル。今日やったことは、まさにそれだった気がする。

    この記事は、技術の話はなるべく省いて、「何を考えて、どこで諦めて、何が残ったか」を書き残しておくための1日のメモ。

    発端:毎月やっているライブ情報の更新

    donkwkm.com にはライブ情報ページがあって、自分の出演予定をまとめて載せている。運用はずっと「月ごとに記事を作って、手で内容を貼り付ける」という地味な方式でやってきた。

    この月次更新が地味に面倒で、前々から「Googleカレンダーに入れた予定を、ホームページが自動で読みに行って表示してくれたら楽なのに」と思っていた。前日までに、そのための仕組みを一応組み立てて、ホームページに埋め込むところまではいっていた。

    イメージとしてはこういう流れ。

    • Googleカレンダーに予定を入れる(これは日常的にやっている)
    • カレンダーの予定を外から読み出せる小さな窓口を作る
    • ホームページ側は、その窓口から予定を取りに行って、自動で一覧を表示する

    「これで月次更新から解放されるぞ」と意気込んでいたのだが、いざ動かしてみると、ホームページ側の仕組みがまともに動かなかった。

    WordPress が立ちはだかった

    結論から言うと、原因はWordPressの「おせっかい」だった。

    WordPressはブログ記事を書きやすくするために、書いた文章を自動的にそれっぽく整形してくれる機能がいくつもある。普通の記事を書く分にはありがたいのだが、自動取得のような少し凝った仕組みを記事の中に埋め込もうとすると、その自動整形が裏で勝手に手を入れてきて、仕組みが動かなくなる。

    たとえばこんな感じ。

    • 書いた文字列の中の改行やブロック的な記号を、WordPressが「これは段落の区切りだな」と解釈して、勝手に余計なものを足してくる
    • 記事に埋め込んだURLの一部の記号を、WordPressが別の表現に書き換えてしまう
    • 一部の記号が、保存した瞬間に別の記号に変換される

    どれも単体では小さな話なのに、組み合わさると「埋め込んだ仕組みが全部まともに動かない」という結果になる。回避策は一応見つかる。でも、見つけるたびに別の場所で似たような問題が顔を出す。モグラ叩きの夜が始まった。

    撤退の決断

    一息ついたタイミングで、ふと我に返った。

    このまま粘って仕組みを完成させたとしても、毎回WordPressのおせっかいを相手にしながらメンテしていくのか? 月次更新なんて、手動でも年12回しかない作業だ。自動化のために毎月「今日はWordPressが何を壊してくるか」と戦うのは、明らかに労力が合わない

    というわけで、次の隙間時間には自動表示の方式を諦めて、もとの「月ごとに記事を書く」方式に戻すことを決めた。Claude Codeにも「こっちで行こう、方針をひっくり返す」と伝えて、4月分と5月分の記事をまず作ってもらった。Googleカレンダーからライブ情報を6件(4/13〜6/8)取ってきて、それをそのままHTMLに流し込むだけ。シンプルな静的ページなので、WordPressのおせっかいを受ける余地がない。

    撤退は負けじゃない、というのを久しぶりに実感した。やってみないと「割に合わない」とは分からなかった。

    勢いがついたので、他のページもまるごと直した

    4月・5月のライブ情報が片付いたら、なぜか止まらなくなって、その後の隙間時間でも他のページに手を入れ始めていた。

    プロフィールページ(ABOUT)

    • ソロアルバムのコーナーに、レーベル(CATFISH RECORDS)へのリンクを追加
    • アルバムのジャケット画像を配置
    • 所属バンド一覧に、Instagramのアイコン付きリンクを追加

    自分のプロフィールページなのに、今まで外部へのリンクがほぼなかったことに今日気づいた。

    ミュージックページ(MUSIC)

    ここは完全リニューアル。構成を「ソロ」「MaHK2」「ディスコグラフィ」「映像」の4ブロックに整理して、Apple Music のリンクも追加した。長らく「とりあえず置いてある」状態だったのが、やっと「自分の音楽をちゃんと見せるページ」になった。

    スケジュールページ(SCHEDULE)

    これが今日いちばん気持ちよくできた部分。タイムライン型のメニューを作って、過去2ヶ月・今月・未来2ヶ月が一望できるようにした。しかも並び順を「今月を先頭、そのあと未来→過去」にしたので、ページを開いた瞬間に直近のライブが目に飛び込んでくる。

    さらに各ライブの項目に、Googleマップへのリンクお店のホームページへのリンクを添えた。クリックすれば会場の場所がすぐに開くし、お店の雰囲気も一発で確認できる。

    正直なところ、このリンク追加には反省もこもっている。前回のライブで、自分が書いたライブ告知メール(いつも反応してくださる皆様ありがとうございます!! お気持ちだけでも反応いただけている皆様もありがとうございます!!!!)の中で、会場の住所を間違えて載せてしまうという大失態を犯してしまった。お越しくださる方に間違った情報を渡してしまうのは、ライブ以前の問題だ。これからはスケジュールを二重三重のチェックで締めていこう、という気持ちも込めて、カレンダー・ホームページ・告知文を突き合わせる運用にしていきたい。

    これまで「ライブ情報どこ?」と聞かれたら、その月の記事のURLを探してコピペしていたのが、今後はスケジュールページひとつ送れば済む。そして、今まではInstagramのストーリーで全体告知するだけだったライブ情報を、これからはホームページのスケジュールページを本拠地にして、リンクも充実した形で定期的に更新していく。ストーリーは流れて消えるけれど、ホームページは残る。自分にとっても、来てくださる方にとっても、ひとつ「ちゃんと見に行ける場所」があったほうがいい。

    おわりに

    Claude Code と一緒に自分のサイトをいじっていると、「こうしたい」と口に出してから実際に形になるまでの距離がとても短い。短すぎて、朝の隙間時間に立てた方針をお昼の隙間で捨てて、夕方の隙間には全然ちがう景色になっている、なんてことが平気で起きる。今日はまさにそういう日だった。

    手を動かすコストが下がると、意思決定のコストが相対的に上がる。「やるかやらないか」より「どこで撤退するか」のほうが難しくなる。途中で自動化を諦める判断は、昔の自分ならもっと粘っていたと思う。

    VS Code というソフトを初めて触って、バイブコーディングという言葉にも初めて肩まで浸かってみた日でもあった。コードの一行一行は正直ほとんど読んでいない。それでもサイトは目に見えて良くなったし、月次更新にもちゃんと戻れた。「自分で全部把握しないと気が済まない」という呪いから少しだけ自由になれた気がする。

    今日の結論を3行でまとめるなら:

    • 凝った自動化より、続けられるシンプルな運用
    • 撤退も立派な設計判断
    • まとまった時間がなくても、隙間時間の積み重ねでサイトは生まれ変わる

    この記事はClaude Codeとの協働で執筆しました。

  • 2026年5月 ライブスケジュール

    2026 · 05 · 03 SUN

    高槻ジャズストリート / Modal Jazz Spiritual

    at JKカフェ

    ACT川上拓也(Sax)/ 西口英生(Pf)/ 守家巧(Ba)/ 折田健吾(Ds)START18:00PRICETIP制

    2026 · 05 · 09 SAT

    Live at Flat Flamingo

    at 天満 Flat Flamingo

    ACT川上拓也(Ts)/ 寺田葵(Gt)/ 守家巧(Ba)/ 輝真(Ds)OPEN19:30 / Start 20:00PRICE¥2,000(飲食代別途)

    2026 · 05 · 10 SUN

    We Found a Roof. Order Black Coffee. Vol.1

    at 心斎橋 麓鳴館

    ACTDon KWKM(Sax)/ RYU(Drm)/ Wacky(Bass)/ クスミヒデオ(Gt/Banjo)START14:00PRICEFREE(TIP制)

    We Found a Roof. Order Black Coffee.

    2026 · 05 · 11 MON

    Soul i Jazz Band

    at ニューサントリー5

    ACTSoul i Jazz BandOPEN17:30 / 1st 19:00〜19:40 / 2nd 20:10〜20:50 / 3rd 21:20〜22:00PRICE¥2,500+税(平日)

    2026 · 05 · 15 FRI

    MaHK2 Live

    at 心斎橋 PARKAHOLIC

    ACTMaHK2 / 古御門幹人(Tb)/ 川上拓也(Sax)/ 正木貴也(Ba)/ 橋爪拓(Dr)OPEN19:00 / Start 19:30PRICE¥3,000 + 1drink

    MaHK2 PARKAHOLIC 2026-05-15

    2026 · 05 · 17 SUN

    LIVE MUSIC NIGHT

    at 日本橋 Music Bar FLAG

    ACT清船正好(Gt)/ 橋本洋佑(Ba)/ 川上拓也(As)START19:30PRICECHARGE FREE / TIP

    2026 · 05 · 31 SUN

    We Found a Roof. Order Black Coffee. Vol.2

    at 心斎橋 麓鳴館

    ACTDon KWKM(Sax)/ RYU(Drm)/ Wacky(Bass)/ キヨさん(Gt/Banjo)START14:00PRICEFREE(TIP制)

    We Found a Roof. Order Black Coffee.

  • AIアシスタントを雇う話

    もう自分のスケジュールなんてさ、インターネット上に載せたって反応ないし、インスタとか、フライヤーだけ載せてたらインプレッション下がるやん?地道にDM送り続けて顰蹙買い続けるか、もう集客も必要ないストリートに全振りするか、サポート、お呼ばれに徹するか、Lesson稼業に全振りするか、もしくは廃業。これはないか。

    そんな中でも反応頂けている皆様のおかげで音楽活動続けてこれたので感謝しかありません。

    ライブ情報を更新するにしても、どれか更新してどれか更新しなかったらその日の共演者との間は溝が深まるばかり。

    そんな間にGmailの未読メールはフリーザの戦闘力みたいな数字になり、カレンダーには何のライブか何のリハか分からない予定が

    そしてサーバーまで借りて運用している自分のホームページのスケジュールは去年から更新してない

    みたいなフリーランス、自営業、インディーズバンドの皆様お疲れ様です。

    ついに我々もジャーマネ、アシ、ボウヤをパソコンの中に雇える時代がきました。

    Claude Coworkです。

    音楽生成とか、画像生成(散々Tシャツ作ったけど。笑)とかもうどーでもいいっすよ!俺の生活整理してくれよ!という欲望を満たしてくれそうなこいつ。

    ここからは文章も私に変わってCoworkがお届けします。

    Xやスレッズでこの手の情報見てたらそればっかりになるんですけど、それらの投稿はほとんどAIの自動投稿です。勝手に稼げた系の投稿はマジでほとんどそう。

    恐ろしい世の中です。

    ミュージシャンがAIアシスタントを「マネージャー代わり」に使ってみた話

    フリーランスのミュージシャンをやっていると、演奏以外の仕事が地味に多い。ライブのスケジュール管理、告知、メールの返信、ファイル整理——ひとりでバンド活動の事務局を回しているようなものだ。

    最近、この「裏方仕事」をAIアシスタント(Anthropic の Claude)に任せる運用を始めた。2日間で実際にやったことを書いてみる。

    やったこと① Googleカレンダーの予定登録

    4月のライブが11本ある。まずはこれをGoogleカレンダーに入れるところから。Instagramで告知されたライブ情報のスクショをClaudeに渡すと、画像から会場名、日時、共演者、チャージを読み取ってくれる。

    そのうえで「この内容でカレンダーに入れていい?」と一件ずつ確認してくれる。こっちは「OK」「それ19時開始じゃなくて19時半」みたいに返すだけ。秘書とやりとりしている感覚に近い。

    Dispatchで外出中にやったので、ファイル添付がうまくいかなかった。そこはiPhoneの写真アプリからスクショをコピペして渡す方法で解決。このあたりの小技はまだ手探りだけど、なんとかなる。

    結果、11件中1件だけ日程がズレていた。完璧ではないけど、10件分の手入力が省けたと思えば十分すぎる。最後に自分の目で確認するステップは必要だと実感した。

    やったこと② GoogleカレンダーとWordPressのスケジュール突き合わせ

    カレンダーに予定が入ったら、次は告知用のWebサイト(WordPress)との同期。問題は、カレンダーとWordPressの情報がだんだんズレてくること。片方だけ更新して、もう片方が古いまま……というのがフリーランスあるあるだと思う。

    Claudeに頼んだのは、GoogleカレンダーとWordPressの両方を見比べて、情報を揃えてもらうこと。カレンダー側の最新情報をもとにWordPressの記事を更新し、逆にWordPress側にしかない情報があればそれも拾ってくれる。

    これがかなり気持ちよかった。2つのサービスを行ったり来たりしながら手作業で突き合わせていた作業が、「両方見て揃えて」の一言で終わる。しかもAIは見落とさない。会場名の表記ゆれとか、開演時間の微妙な違いとか、人間がやると見逃しがちなところまでちゃんと拾ってくれた。

    やったこと③ Gmailの整理と分類

    メールボックスが荒れていた。プロモーションメールが溜まりに溜まって、肝心のライブ出演依頼や生徒さんからの連絡が埋もれる状態。

    Claudeに「プロモーションメールを整理して、音楽関連のメールにラベル付けて」と指示。不要なプロモーションメールをゴミ箱に移動し、音楽関連のメールには「音楽」ラベルを自動で付けてくれた。

    やったこと④ ダウンロードフォルダの定期整理

    確定申告の時期に溜め込んだ収支関連のCSVやExcelファイルが、ダウンロードフォルダに散らばっていた。これもClaudeが定期タスクとして自動実行。ファイルの種類を判別して「PDF・書類」フォルダに仕分けしてくれる。

    地味だけど、これが毎日走ってくれるだけでデスクトップの荒廃を防げる。

    やったこと⑤ Notionページの整理

    Notionに雑多に放り込んでいたページを、「バンド・ライブ活動」などのカテゴリに分類。38ページ分を一気に移動してもらった。こういう「やらなきゃと思いつつ後回しにしがちな整理作業」こそAI向きだと感じる。

    やったこと⑥ 外出先からiPhoneで作業を引き継ぐ

    上のタスクの一部は、実は外出先からiPhoneで指示を出していた。Claudeには「Dispatch」という機能があって、デスクトップで走っているCoworkセッションに、外出先からiPhoneのClaudeアプリで指示を送れる。

    スマホから一言送ると、自宅のMacで作業が進む。戻ってきたら結果が出来上がっている。これはちょっと未来感がある。

    ちなみにDispatchはリリースされたばかり(2026年3月17日)で、仕様上はPCがスリープすると止まるらしいのだけど、自分の環境ではスリープ中でも動いてくれた(ように見えた)。このあたりはまだ検証中。

    使い始めて思うこと

    正直、まだ手探りの部分が多い。セッションをどう分けるのが効率いいのか、Dispatchの挙動がどこまで安定しているのか、まだ最適解は見えていない。

    ただ、ファイル操作、ブラウザ操作、Gmail、Googleカレンダー、Notion——これらをシームレスに行き来しながら作業してくれるのは、触っていて本当に気持ちいい。たまに動いてるのか止まってるのかわからない瞬間もあるけど、待ってると仕事が仕上がっている。

    Cowork自体、2026年1月のリリース直後からかなりの反響があって、いま急速にユーザーが増えているらしい。自分もまだ使い始めたばかりだけど、これから使い込んで自分なりのワークフローを磨いていきたい。ミュージシャンの事務仕事、もっと楽にできるはず。

  • Band Tools

    Claude を使ってバンドマンの為のwebサービスを作る試み。あったら便利そうだなぁと思うものをザックリ作ってみた。

    *公開はもう少し先になりそうです。

    普段取り組んでいる作業を効率化させる、筆跡を残すという点にスポットを当てた。

    以下は昨晩パパッと作ったツールの一覧。

    育てていこうと思うのだけど次は、これらのツールをどこで管理して育てていくのかという問題が今生じています。

    ブログとして公開していって、自分のデータベースを作っていくのがベターかと思ったので作業内容を公開して知見も集まればいいなと思ってます。

    コメントお待ちしてます。

    🔧 各ツール詳細

    Vol.1 — Track Finder (track-finder.html)

    目的: バンドリサーチした音源情報を記録・共有する

    主な機能:

    • 曲名・アーティスト・アルバム・BPM・Key・ジャンルを入力して保存
    • グルーヴ系タグ(New Orleans / Second Line / Neo Soul / Funk / Jazz / R&B / Blues / Pop)
    • グルーヴスコア(★1〜5)
    • Apple Music検索リンク自動生成
    • 共有テキスト(1曲 or 全曲)をコピー
    • データはブラウザのlocalStorageに保存(ページを閉じても消えない)

    Vol.2 — Setlist Analyzer (setlist-analyzer.html)

    目的: セットリストを入力して情報をまとめ、共有テキストを生成する

    主な機能:

    • 曲名を1行1曲で貼り付け → 一括読み込み(曲名 / アーティスト名 形式対応)
    • ライブ名・日付の入力
    • 各曲のBPM・Key・グルーヴ・スコアをインライン編集
    • Apple Music検索リンク(各曲に🍎ボタン)
    • 共有パネル3種:
    • 詳細テキスト(BPM/Key/リンク込み)
    • LINE用シンプル版
    • Apple Musicリンク一覧

    Vol.3 — Musician DB (musician-db.html)

    目的: Notionでミュージシャンデータベースを構築するためのセットアップガイド

    連絡・管理系

    • 名前(Title)
    • 楽器(Text)
    • 連絡先(Text)
    • SNS(URL)
    • 過去の共演歴(Text)
    • 一言メモ(Text)
    • ステータス(Select: 現役 / 候補 / 連絡待ち)
    • 写真(Files)

    付属: サンプルCSV(架空7名分、Notionインポート対応)

    Vol.4 — Live Announce (live-announce.html)

    目的: ライブ情報を入力するだけで告知スケジュールと各チャンネルの文案を自動生成

    入力項目:

    • ライブタイトル / 開催日 / 会場名 / 開場・開演時刻 / チャージ / 出演者 / 一言紹介

    対応チャンネル(デフォルト: Instagram・Facebook):

    • 📸 Instagram — 絵文字・ハッシュタグ多め
    • 📘 Facebook — 丁寧・詳細
    • 𝕏 X (Twitter) — 140字以内
    • 💬 LINE公式 — 親しみやすい口調
    • 📧 メールマガジン — 件名込み・丁寧な文体
    • 🎷 メンバーLINE — 業務連絡調(集合時間・持ち物等)

    告知スケジュール(自動生成):

    • 1ヶ月前 → 2週間前 → 1週間前 → 3日前 → 前日 → 当日
    • 残り日数に応じて文言が自動変化(「残り3日🔥」「今夜!」等)
    • 各ステップをタップ → チャンネル別文案が展開 → 📋コピー
  • Claude Cowork

    ダラダラとXを眺めていると、金髪の女の子。まじで攻殻機動隊に出てきそうなハッカー面した子が、Claudeの思想は私が管理している。哲学的に。なんて記事が飛び込んできて、長らく、GPTを嫁様にも布教しながらバンドのロゴやらTシャツを作っていた私でしたが、そのハードSFな展開に痺れて乗り換えを決意。

    AIエージェントはGPTにもあったがCoworkをいじり出しその存在に、ついにここまできたか。というシンギュラリティというか、時代の転換点というか、そこにまた痺れて、長らく放置していた自分のウェブサイトをいじり出した結果できたのがこのトップ画面。

    PC表示だとこう

    スマホ表示だとこう

    3男(もうすぐ1歳)がAM6時のミルクを求め私の身体を登り目が覚め、ミルクを与えオムツを変え、ダラダラとXを眺めていたらCoworkを絶賛する投稿が次から次へと現れたので完全に目が冴えMacを立ち上げ、皆が起きるまでの時間にレッスンのページとトップページが出来上がった。

    この文章を書いている間も後ろでClaude Codeを走らせている。iRealproで作成したコードの譜面画像を読み取って、sibeliusでパッとコード譜面が出現するようなスクリプト作成を試みている。結果はまた後日