ChatGPTで「動くモック」を作って育てた。Intelligent UIがきっかけのnote分析ラボ【実データ・プロンプト公開】

ChatGPTに「こんな画面が欲しい」と伝えたら、実際にクリックできる試作品を作ってくれた。

しかも、見た目だけのモックではありません。私が運営するnoteの実データが入っていて、そのまま記事の成長を比較できました。

画面を触ってみて、「記事をもっと選びやすくしたい」「色が分かりづらい」「期間を指定したい」とChatGPTに相談する。修正版ができたら、また使ってみる。

この繰り返しで生まれたのが、今回の**「記事成長比較ラボ」**です。

今回は、完成画面だけでなく、作り方と改善のプロセスを公開します。読者の方も試せるように、Kira AI Labの実データ・動くHTML・プロンプトをセットにした再現キットも用意しました。

まず完成したラボを見せます

今回作った「Kira Article Compare Lab」は、noteの記事を選び、公開後の伸び方を比べられる小さな分析ツールです。

記事は1〜4本を選択可能。タイトル検索で記事を入れ替え、IMP（表示回数）・PV・スキ・コメント・PV率を切り替えられます。棒グラフと折れ線グラフ、累積値と日別増分の表示にも対応しました。

特に欲しかったのは、公開日が違う記事を、同じ経過日数で比較すること。

たとえば9月25日公開の記事と9月28日公開の記事は、同じ日に累積値を見ると公開からの日数が違います。そこで「公開後0〜7日」「公開後0〜14日」といった期間を選べるようにしました。暦日の指定もできます。

最初の試作には、Kira AI Labの8記事・184レコードの実測データを収録。実在する記事を選んでグラフを操作できたので、「この機能は本当に必要か？」を最初から試せたのがよかったところです。

きっかけはChatGPTの「Intelligent UI」

2026年10月7日、OpenAIがChatGPTの「Intelligent UI」を発表しました。質問に合わせて、文章に加えてグラフや比較表示、操作できる要素などを組み合わせて回答する仕組みです。

公式情報：OpenAI「GPT-6 and Intelligent UI for everyone」

それを知って、「AIと数字を考えるときも、文章だけではなく、グラフを触りながら話せたら便利そうだな」と思いました。

ただし、今回のラボはIntelligent UIそのものを埋め込んだものではありません。その発想をきっかけに、ChatGPTと対話しながら独立したHTMLのツールを作ったものです。

私がやりたかったのは、単にグラフを出すことではありません。

「この記事、どうして伸びたんだろう？」

「似たテーマなのに、いつから差が開いたんだろう？」

そんな疑問を、実際の推移を見ながら考えられる画面が欲しかったのです。

GPTを埋め込むより、比較できる画面を先に作った

当初考えていたのは、左にグラフ、右にGPTとのチャットがある画面でした。

でも、それを自作ダッシュボードの中で動かすとなると、API連携や会話の管理が必要になります。OpenAI APIを使う場合は、普段のChatGPT利用とは別にAPIの利用料金も考える必要があります。

そこで、一度やりたいことを整理しました。

今、本当に足りないのはチャット欄だろうか。それとも、記事を比較するための画面だろうか。

選んだのは後者です。

数字を選んで比較するのはHTML。気になったことを深掘りするのは別画面のChatGPT。

ラボには「GPT用テキストをコピー」する機能を追加しました。比較中の記事名、期間、指標、実測値などを文章として取り出し、ChatGPTに貼り付けられます。

最初から全部を一体化しない。この判断のおかげで、まず「比較する」という目的に集中できました。

※図は開発プロセスの概念図です。UIの細部は実画面を簡略化しています。

一番よかったのは、実データ入りの「動くモック」だったこと

ここが今回、いちばん伝えたい部分です。

ChatGPTが作ってくれたのは、完成画面のイメージ画像ではなく、実際に操作できるHTMLファイルでした。

しかも私のnoteデータが最初から入っていたので、記事を選び、指標を切り替え、成長曲線を確認できた。

だから、デザインを眺めて「たぶん使いやすい」と想像する必要がありませんでした。実際に触れば、気になるところが見えてきます。

最初は2記事を比較する形でしたが、操作しているうちに「1記事だけの推移も確認したい」「4記事くらい並べてみたい」と思いました。

記事選択の操作には、タイトルで絞り込める検索を追加。

グラフにも「棒で見たい」という希望が出て、折れ線との切替を追加しました。

さらに、IMPとPVを同時に表示すると色が似ていて見分けづらい。そこで、スクリーンショットを見せながら配色と表示方法の変更を依頼。

表示期間についても、全期間だけでなく、公開後の日数や開始日・終了日で絞れるようにしました。

触る → 違和感を見つける → AIに伝える → 修正版をまた触る。

こうしてv0.1、v0.2、v0.3と改善していきました。

プログラムが動いているかだけでなく、「自分が比較したいものを、迷わず比較できるか」を確認できたことが大きかったと思います。

読者向けに、Kiraの実データを公開します

このやり方は、完成したラボを眺めるだけでは伝わりにくいと思いました。

そこで、読者の方も同じように触れる**「記事成長比較ラボ 読者再現キット」**を用意しました。

中身は、Kira AI Labの8記事・184レコードのCSV、操作できるHTML、ChatGPTへの指示プロンプト、自分のデータ用CSVテンプレート、UX改善チェックリストなどです。

データは2026年9月24日から10月10日10時取得分までの固定スナップショット。架空のサンプルではありません。記事タイトル・公開日・記事URL・取得日時・IMP・PV・スキ・コメントなど、比較に必要な項目だけを含めています。売上や管理システムの設定情報は公開していません。

まずはHTMLをブラウザで開いて、実データを触ってみてください。プログラミングもGASのデプロイも必要ありません。

なお、実測CSVとグラフ表示用の集計は別物です。付属の教材版HTMLは、同じ日の最後の「成功」取得を使う方式で、一部成功の行や欠測をどう扱うかに制約があります。Kira AI Labが後から整備した「19時基準にそろえる標準分析データ」の方式とは異なるため、数値を厳密に評価する場合は同梱のデータ定義も確認してください。

6ステップで、自分のラボを作ってみる

ここからは、今回の体験を読者向けの手順に整理します。同じ成果物を一発で生成する魔法のプロンプトではなく、「作って、使って、直す」プロセスを再現するための方法です。

STEP 1｜最初に「何を比べたいか」だけ決める

私の場合は「noteの記事を複数選び、公開後の成長曲線を比べたい」でした。

いきなり全機能を決めるより、まず何が分かればうれしいかを一文にします。売上でもSNS投稿でも、自分が比較したいものに置き換えて構いません。

STEP 2｜ChatGPTに、クリックできるHTMLを頼む

最初の依頼で大切なのは、「完成イメージを描いて」ではなく、**「ブラウザで動くHTMLを作って」**と伝えることです。

読者用に整理し直した、最初のプロンプトはこんな形です。

実際の開発時の指示をそのまま再録した文章ではありません。今回の経験を基に、読者が試しやすい形へ整理したものです。詳細版はキットに入れています。

STEP 3｜実データを入れて、操作してみる

付属の完成HTMLには、8記事分のデータが最初から入っています。まずはそれを開いて、記事を選び、グラフを切り替えてみてください。

ゼロからモックを作る場合は、キットのCSVをChatGPTへ渡し、生成されたHTMLで読み込めるか確認します。自分のデータがあるなら、CSVテンプレートを参考に差し替えてもOKです。

ここで大切なのは、見た目だけの架空グラフで終わらせないこと。現実のデータで操作すると、比較対象の偏りや表示期間の不足など、改善点が見つかりやすくなります。

STEP 4｜「使いづらい」を具体的な言葉にする

難しいUXの知識がなくても大丈夫です。

「記事を探すのに時間がかかる」

「IMPとPVの色が似ている」

「この期間だけ見たい」

そう感じたことを、そのままメモします。キットのUXチェックリストも使えます。

STEP 5｜スクリーンショットと一緒に修正を依頼する

例えば今回なら、こんな依頼でした。

「何を直したいか」と「何を壊してほしくないか」を一緒に伝えるのがポイントです。

修正版を受け取ったら、必ずまた触ってみます。新しい機能を足したときに、前からできていた操作が壊れていないかも確認します。

STEP 6｜使える形になったら保存・統合する

HTMLを単独で使うだけなら、ここで完成でも十分です。

私の場合は、v0.3まで育てたあと、もともと使っていたGASの「Kira AI Lab Analytics Dashboard」に**「記事比較」タブ**を追加することにしました。

変更はGitHubのPR #4で管理し、10月10日にmainへマージ。GASへのテストデプロイも行いました。

ただし、これは私の運用環境に合わせた応用編。読者が最初からGASやGitHubを準備する必要はありません。

AIに任せたことと、人間が決めたこと

今回の開発を振り返ると、役割分担もはっきりしていました。

ChatGPTに任せたことは、HTMLの試作、記事検索やグラフ切替の実装、色や期間指定の修正、確認用データの整理、既存ダッシュボードへの統合コードの作成です。

一方、自分が判断したことは、何を比較したいか、どの表示が分かりづらいか、必要な機能は何か、API連携を後回しにするか、いつ既存環境へ統合するか、という部分でした。

AIに「いい感じの画面にして」と丸投げするより、動くものを見て、自分が必要な変更を言葉にする。

少なくとも今回の私には、この進め方が合っていました。

作れたことと、まだ検証していないこと

今回、比較ラボのモックを作り、実データで操作しながら改善し、既存ダッシュボードのコードに統合するところまで進められました。

一方で、このラボを使った結果、noteのPVが増えたわけではありません。改善施策の精度がどの程度上がるかも、まだ確認していません。また、読者用プロンプトをまったく新しいチャットに渡し、同じ手順でゼロから再生成できるかの独立した検証も今後の課題です。

今回確認できたのは、実データ入りの操作可能なモックがあると、画面の分かりやすさや使い勝手を判断しやすく、AIとの改善のやり取りを具体的に進められたことです。

AIに一発で完成品を作ってもらうより、AIが作ったものを自分で触って、直しながら育てる。

Intelligent UIをきっかけに始めた今回の寄り道で、一番面白かったのはそのプロセスでした。

もし興味があれば、まずは再現キットのHTMLを開いてみてください。そして「ここを変えたい」と思ったら、その画面をChatGPTに見せてみる。それが自分用のラボを作る第一歩になると思います。

このnoteでは「AI副業で月1万円」を目標に、AIを仕事や副業にどう使えるか、実際に試したこと・結果・失敗・改善を記録しています。

次回：作った記事成長比較ラボで、実際に伸びた記事と伸び悩んだ記事を比べてみる（検証予定）

関連記事

https://note.com/kira_ai_lab/n/n1fe2e4930710

https://note.com/kira_ai_lab/n/n5efb4d4b7cb2

📚 note分析ダッシュボードの制作から記事改善まで、10本まとめて読む

「note分析ダッシュボード｜制作・改善」マガジンはこちら