AI で LP を 5 営業日から 1 日に
ヒアリングのメモを渡すと、Claude Code が構成案と文章と HTML をまとめて書きます。できたものを HubSpot CMS（顧客管理ツール HubSpot 上でウェブページを作る機能）のテンプレートに流し込み、問い合わせフォームまでつなぎました。5 営業日かけていた LP が、いまはヒアリングした日のうちに公開できます。
使用 AI 環境
- Claude Code
- HubSpot CMS
成果物
// Time Capsule — Channel /02
いつ、どの AI で、
何が作れたか
NODE6174// Lab は、AI で実際に作ったものと、その過程の記録を置いている場所です。5 チャンネルのうち、ここは記録係にあたります。上下 2 段の構成で、上の Latest Workflows に並ぶのは、いま手を動かして回している作り方です。どの AI をどう使うか、前は何日かかった仕事が今は何日で終わるか、出来上がったものはどこで見られるか。そこまで書きました。下の Timeline Archive は年表で、作ったものと AI 側の更新が同じ線の上に乗っています。どの機能が出た直後に何ができるようになったのか、順番のまま追えるはずです。手順そのものは Recipes に、環境の設計は Blueprint に置いてあります。
Latest Workflows
いまも回っている作り方
カード 1 枚が作り方 1 つ分です。使っている AI とその版、前後で何日から何日になったか、出来上がったものへのリンクをそろえました。まだ固めきれていないものは Coming Soon の枠だけ先に出してあります。お客さんの仕事は社名を伏せ、架空の会社に置き換えています。
AI で 30 ページ資料を 2 週間で
ホワイトペーパー（メールアドレスと引き換えに配る資料）の作り方です。先に信頼できる既存資料を集めて参照リストを作り、そこから章立てと各章の下書きを Claude Code に書かせます。できた原稿は Puppeteer（ブラウザを自動で動かす道具）で PDF にしました。自分の仕事は事実確認と、全章に通す「AI をどう使うか」という視点を詰めることです。30 ページの資料に 1 ヶ月かけていたのが、いまは 2 週間で出せます。
使用 AI 環境
- Claude Code
- Puppeteer (PDF 出力)
成果物 (制作中)
AI で 30 枚の提案書を 1 日で
用途別に決めてあるスライド型 10 種を土台に、現状分析と構成と各ページの文章を Claude Code に組み立てさせます。1 週間かけていた 30 枚の BtoB 提案が、いまは 1 日で出せます。ただし仕上げに使っていた Figma は 2026 年 6 月に契約をやめたので、この手順のままでは再現できません。PDF の出し方は組み直しが必要です。
使用 AI 環境
- Claude Code
- Figma MCP
成果物 (架空案件版)
AI で 25 ページのサイトを 2 週間で公開
HTML と CSS と HubL（HubSpot のテンプレートで使う書き方）を Claude Code に書かせ、HubSpot CMS のテンプレートとして登録しました。使い回す部分を先に部品にしておくと、あとは文章を差し替えるだけでページが増やせます。3 ヶ月かかると見ていた 25 ページを 2 週間で公開できて、その実物が humbulls.com です。
使用 AI 環境
- Claude Code
- HubSpot CMS Starter
成果物
AI でブランド一式を 2 週間で揃える
色と文字と余白の決まりごとを、まず 1 枚の HTML にまとめます。この 1 枚だけを正本（迷ったら必ずここを見ると決めた、たった 1 つの元ファイル）にしておくと、あとがぶれません。そこから色の変数、見出しの大きさ、ロゴの使い方、スライド型 10 種を Claude Code に展開させました。ロゴを最後に決めるのは自分の仕事です。1 ヶ月かかっていたブランド一式が、2 週間で揃いました。
使用 AI 環境
- Claude Code
成果物 (社内資料)
AI 動画制作ワークフロー
Claude Code と動画生成 AI を組み合わせて、制作を半分自動にする手順をいま作っています。ただ 2026 年 4 月に枠を置いたまま手が止まっていて、その後は更新できていません。まず humbulls 自社の解説動画で試して、実際に回った手順だけをここに載せます。どれくらい短くなるかは、回してから測ります。
Timeline Archive
AI の更新と、作ったものを同じ線に並べています
線の上に並ぶ点は 3 系統です。humbulls は自社のために作ったもの、Client Work はお客さんに納めたもの、Personal R&D は仕事と切り離して個人で試したものです。そこへ AI 側の更新を破線の行で差し込みました。破線のすぐ下に何が並んでいるかを見れば、その更新で何が変わったのか分かります。帯になっている行は連載中の制作日誌で、書き始めた月の位置に置いてあります。押すとその日誌に飛びます。
この年表の読み方
- 緑の「humbulls / …」が付いた行は、自社のために作ったものです。ブランド周りのものだけオレンジで出ます。
- 青緑の「Client Work」はお客さんに納めた仕事で、社名は伏せて架空の会社に置き換えてあります。
- 青灰の「Personal R&D」には、仕事と切り離して個人で試したものを並べています。
- 破線で囲んで「AI 側の更新」と書いてある行だけは humbulls の制作物ではありません。新しいモデルが出たといった AI 側の出来事を記録しています。
- 左にひし形が付いた帯は、制作日誌 (Making) です。書き始めた月の位置に置いてあり、押すと本文が読めます。
上のボタンで種類を絞り込めます。AI 側の更新と制作日誌の帯は、どれを押しても残ります。
2026 / 02
Claude Opus 4.6
AI が一度に覚えていられる文章の量（コンテキスト）が 100 万トークンまで広がりました。トークンは、文章を細かく区切って数えるときの単位です。質問の難しさに応じて考える量を変える adaptive reasoning も入っています。複数の Claude が Mailbox Protocol という仕組みでやりとりしながら作業を分担する agent teams も、この回からです。大きなコードのかたまりを読ませたまま話を続けられる。ここがいちばん変わったところだと思っています。
2026 / 03
humbulls Tone & Manner v2.2 とブランド一式の構築
サイトを作り始める前に、ブランドの見た目のルールを固めました。Tone & Manner v2.2 は、色と文字とパーツの決まりを 1 枚の HTML にまとめた正本です。色はトークン（値に名前をつけて、どの制作物からも同じ名前で呼べるようにしたもの）として定義しました。文字組みもロゴの展開も、スライドテンプレート 10 タイプも、Claude Code の Opus 4.6 に書かせています。当時は Default（ゴールド）と Bulls（オレンジから赤へ）という 2 つの配色モードを切り替えられる作りでした。ここを先に決めたおかげで、あとから作る LP もホワイトペーパーも提案書も Time Capsule も、配色と文字で迷ったらこの 1 ファイルを開けば済みます。
T&M v2.2（正本）
採用
色も文字もパーツの形も、ばらばらに決めずに 1 ファイルへ集めました。当時は配色を 2 モード持たせていたので、その切り替えの定義もここに入っています。探す場所が 1 つで済む。だからこれを正本にしました。
プレビューを開く →2026 / 04
Training Log App（競技力と体づくりを 1 本にまとめる iOS アプリ）
競技の記録と体づくりを 1 つの日誌で追いたい競技者向けの iOS アプリです。土台は Apple 純正の開発ツール一式（言語の Swift、画面をつくる SwiftUI、データを保存する SwiftData、グラフを描く Swift Charts）と、Apple の健康データを読み書きする HealthKit です。対応は iOS 17 以降で、Apple Watch 対応は Phase 3（自分で区切った開発段階の 3 番目）に回しました。お手本にしたのは WorkoutWise（workoutwise.app）です。いまは Phase 7 から 8 のあたり。初回起動時に設定を済ませてもらう画面を作り、機能を後から足すプラグインの扱い方も決めました。開発は Claude Code（Opus 4.7）に任せています。大会データは SwimHub の公開窓口から取り込むつもりです。
Swim Tempo Trainer（泳ぐテンポを刻む Apple Watch アプリ）
水泳のテンポ（一定のリズムで泳ぐための拍）を手首で刻む Apple Watch 向けのアプリです。趣味で作っています。はじめは Apple の開発ツール Xcode と Codex（OpenAI のコーディング用 AI）を組み合わせて書いていましたが、2026-04-02 に Claude Code へ移しました。アプリそのものを作り直したわけではなく、入れ替えたのはコードを書く側の AI だけ。同じコードを別の AI に引き継がせたらどうなるかを、そのまま試している最中です。
Hero Exploration v1（humbulls.com トップのキービジュアル 4 案）
humbulls.com のトップに置くキービジュアルを決めるため、Claude Code（Opus 4.6）に方向性の違う 4 案を作らせて並べ、そこから採用版を選びました。この時点では Claude Opus 4.7 も Claude Design も GPT Image 2 も GPT-5.5 もまだ出ていません。絵を生成させることも、WebGL（ブラウザの中で 3D や動きを描く仕組み）を自動で書かせることもできませんでした。だから 4 案とも、HTML と CSS と SVG を手で書いて組み立てています。画像生成にも動きにも頼れない時期に、コードだけでどこまで見せられるかを試しました。
採用版（2026-04 当時の Hero）
採用
D 案を土台に、当時のブランド要素を足した最終版です。配色を切り替える Bulls Mode を入れ、アイコンは Lucide というアイコン集から選び、見出しは Outfit、本文は Noto Sans JP という書体を組み合わせました。ここまで足して初めて humbulls らしく見えた、というのが当時の結論です。なおこの構成はもう残っていません。Outfit は数字のゼロの中にドットが入るため 2026-05 に使うのをやめ、Bulls Mode も 2026-07 に廃止しました。
今の humbulls.com を見る →A 案 Centered
没
コピーを中央に置く、昔からある形にしました。作りが単純なぶん読みやすさはあります。ただ humbulls が売りにしている「実行する」感じがどうしても出ません。整いすぎだと感じて外しました。
プレビュー →B 案 Split
没
左にコピー、右にビジュアルを置く 2 段組みにしました。ところが当時の AI では右側に説得力のある画像を作れず、置いた絵が飾りで終わってしまいます。右半分が埋まらないなら構成として成立しないので、これも落としました。
プレビュー →C 案 Magazine
没
雑誌の誌面に寄せたレイアウトです。文字の組み方は強く出ました。それでも読んだ人はどこを押せばいいのか分からず、次の行動につながりません。見た目を取って導線を失うのは違うと思い、これは見送りました。
プレビュー →D 案 Integrated
採用版の土台
上から下へ流れる構成に、ブランドの要素をまとめて入れました。この時点では粗さが残っていましたが、詰めれば形になると思いました。ここから細部を仕上げて採用版にしています。
プレビュー →DNA FACTOR「RESUme」の法人向けランディングページ 2 ページ
遺伝子検査ブランド「RESUme」のランディングページ（広告や動画から来た人がそのまま申し込みまで進む 1 枚もののページ）を 2 ページ作りました。1 枚目はブランドそのものを伝える面、2 枚目は法人向けの提案に振り切った面という分け方です。GACKT の動画と連動するキャンペーンに合わせて動きました。構成案も本文の文章も実装も、Claude Code（Opus 4.6 と 4.7）に書かせています。どうやって作ったかまで公開してよい、と許可をもらっています。ページ自体は 2026-04-20 に出す前提で進めました。
Claude Opus 4.7 + Claude Design
画像を見て中身を読み取る力（vision）が強くなりました。UI（画面の見た目や操作する部分）もスライドも文書も、高い品質で出てきます。コードを書く力も上がっています。文章で指示するだけでなく、できあがった画面を見せて直させる。この頼み方が通るようになったのが、4.7 でいちばん助かった点です。
SwimHub（水泳の情報を 1 か所に集めるポータルメディア）
海外の水泳ニュースと、国内の大会・記録・用品店・プールの情報をまとめたサイトです。どこの団体にも寄らず、運営者の名前も出していません。土台は Astro（表示の速い静的サイトを作る仕組み）と Cloudflare Pages で、日々の更新は AI で半分自動化しています。04-18 に開設して、04-19 はデザインを何度も作り直しました。04-24 には、大会データを他のアプリから読み込める窓口の初版を出しています。events.json と events.ics の 2 ファイルで、出典さえ書けば自由に使える CC BY 4.0 で配っています。この窓口は Training Log App から呼ぶつもりです。
GPT Image 2 (ChatGPT Images 2.0)
4K の解像度で出力できるようになり、画像の中の文字が 1 ドット単位で崩れずに描かれます。指示を読み解いてから描く reasoning model（考える手順を持つモデル）も入りました。
GPT-5.5 (codename: Spud)
コードを書く、調べる、データを扱う、文書や表を作る、ソフトを操作する。この 5 つをまたいで動くエージェント（人が一手ずつ指示しなくても自分で手順を進める AI）としての力が上がりました。これまで作業の種類ごとに道具を持ち替えていたところを、最初から最後までひと続きで頼めます。
集客ページとお礼ページを 4 ページ公開して、Time Capsule も開きました
BtoB ガイドの配布ページ、会社紹介ページ、イベント告知ページと、それぞれの TX（フォーム送信後に出るお礼ページ）を HubSpot CMS に公開しました。あわせて 4 ページです。テンプレートの作り方も全面的に書き直しています。手元で確認用に作った HTML を丸ごと持ち込み、フォームのところだけを管理画面から差し替えられる部品（モジュール）にしました。これで見た目は作ったまま保てて、フォームだけは後から自分で直せます。同じ日に Time Capsule の枠も立ち上げました。
Time Capsule v2 で「いまの実力」と「積み上げた年表」を分けました
制作実績ページを二層に組み直しました。上には Latest Workflows という枠を新しく置いて、集客ページ、ホワイトペーパー、提案書、サイト、ブランド、動画（準備中）の 6 枚のカードでいまの実力を見せます。下の Timeline Archive は、年月を縦軸にして、その月に起きたことを点で並べる形に変えました。カードには humbulls、Client Work、Personal R&D、Brand の 4 区分を付けて、色で見分けられます。増えていくのは下の年表のほうで、上の 6 枚は古いものと入れ替えていきます。
NODE6174// ができるまで。humbulls Lab を独立したメディアに作り替えた記録
humbulls の中の一区画だった Lab を、NODE6174// という独立したメディアに作り替えました。名前を決め、ブランドの決まりごとを書き、ドメインをつなぎ、Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で組んで Cloudflare Pages（そのまま公開できる置き場）に公開し、区画を 5 本から 6 本へ増やすまでを順に書いています。判断を間違えたところや途中で止まったところも、そのまま残しました。進行中なので今も書き足しています。
制作日誌を読む →
2026 / 05
Exocortex v4。半年動かしてきた自分の「第二の脳」を解体して、Claude と Codex が同居できる形に組み直した記録
Exocortex（自分用に作った第二の脳。Markdown のメモを集めたフォルダと、そこを読み書きする AI エージェントを合わせたもの）を半年動かしたら、「動いてはいるのに効いていない」ところで止まりました。ルールを書いた CLAUDE.md は 173 行まで膨らみ、iCloud のせいで mv は固まる。そこへ Codex（OpenAI 側のコーディング AI。Claude Code と同じ役割の別ブランド）を使い始めたら、Claude だけを前提にした設計が片輪になり、組み直すしかなくなりました。土台は共有したまま入口だけを分け、必要なときだけ役割を交代する形に落ち着くまで、まだ書いている途中です。
制作日誌を読む →
ブログ SEO シリーズ #1（HubSpot Starter）の 6 記事と単発 1 記事を、同時に書き始めました
HubSpot の Starter プランを Claude Code でどこまで使い倒せるかを書いた連載です。1 本の柱記事に関連記事をぶら下げる構成で、次の 6 本を組みました。ダッシュボード設計、Apps Script での同期、Looker Studio でのレポート、商談ステージの動きを記録するやり方、同じ時期に入った顧客をまとめて追うコホート分析、kintone との連携。ここに単発でもう 1 本、画像を線データに変換する作業を Claude Code と Adobe MCP で比べる記事を足しました。05-07 に 7 本ぶんの骨子と参考資料を一気に流し込み、下書きも並行で進めて、05-21 に全部そろっています。章末には、そのまま貼って使える AI 実行プロンプトを置きました。
ホワイトペーパー #01「BtoB ガイド」の PDF が完成しました（2026-05 版）
ホワイトペーパーの 1 本目です。集客ページから配る「AI を活用した BtoB マーケティング完全ガイド」を PDF にしました。作り方は 3 段構え。章ごとの原稿を書いて、決まった体裁に流し込み、最後に PDF として書き出します。1 ページずつ手で組んでいないので、原稿を直したら同じ手順をもう一度回すだけで刷り直せます。仕上がりは 84 ページ、容量は約 33MB になりました。次に作るフレームワーク集でも、この手順をそのまま雛形にします。
Claude Opus 4.8
Opus 4.7 の後継です。ベンチマーク（性能をはかる共通テスト）の数字も全体的に上がりましたが、実務で効いたのは別のところでした。長めの手順をまとめて任せたときの判断と、ツール呼び出し（ファイルを読む、検索するなど AI が外部の機能を使う動作）の確実さです。言ったとおりに手を動かしてくれる、その率が上がりました。
2026 / 06
Claude Fable 5 / Mythos 5
これまでの Opus の上に置かれた、Mythos クラス（最上位の位置づけ）の新世代です。Fable 5 のほうは、一般に配るために安全側へ寄せてあります。6 月 12 日にいったん提供が止まり、7 月 1 日に世界中で再開しました。humbulls の制作環境も、それ以降は Claude Code の Fable 5 で回しています。
Claude Sonnet 5
Claude 5 世代のうち、効率を優先したモデルです。毎日の細かい実務を速く、安く回すのに向いています。頭を使う設計や調べものは上位のモデルに任せて、手順の決まった仕事はこちらへ投げる。この分け方でだいたい足ります。
2026 / 07
ブログ立ち上げ用の SEO 50 記事計画をまとめ、7 月分の 8 本を同時に書きました
ブログを立ち上げるにあたって、50 記事ぶんの計画を先に固めました。競合サイトの記事調べ、狙う検索キーワードの全体像づくり、切り口の違う 3 つの設計案、その統合までを、9 体のエージェントに同時にやらせています。半日で終わりました。前は 2〜3 週間かかっていた工程です。記事は 6 つのかたまりに分け、それぞれ 1 本の柱記事に関連記事をぶら下げる形にしました。月 8 本のペースで 6 ヶ月続けて、2027-01 に走りきる予定です。書くほうも、原稿を書く担当、読み直す担当、検索対策を点検する担当、図をつくる担当の 4 段にエージェントを並べ、1 記事ずつ通しています。
ここから先はまだ空白です。AI に大きな更新があれば破線の行を、何か作ったらその点を、下へ足していきます。半年後に読み返して上の方が古びて見えたら、それでいいと思っています。