Lliben Logo Lliben

Note: AIツールの進化はとても速いです。これは執筆時点でうまくいった方法の記録で、数か月後には一部が古くなる可能性があります。ワークフローが大きく変わったら更新します。

要点

  • 開発経験ゼロのデータアナリストが、AIだけでChrome拡張機能（スクリーンショット）＋Webサイトを作りました。
  • 実装は主にGemini、詰まったときのセカンドオピニオンや翻訳はChatGPTが多めでした。
  • 一番の学び：巨大プロンプトより、アーキテクチャ と 掃除（クリーンアップ）の節目 が重要。

データアナリスト、開発経験ゼロ — AIでChrome拡張機能を作った話（ざっくりハイライト）

私は職業がデータアナリストで、コーディングは何も分かりません。CSSの角丸やフォントサイズを上げ下げできて、HTMLの引用符を閉じるくらい。それ以外は、JavaScriptが何なのかも、なぜ動くのかも分からないレベルです。

正直、このプロセスはソフトウェア開発者から見るとすごく基本的に見えると思います。でも、まったく開発経験がない自分からすると、振り返ると面白い経験でした。ここまで来るのに約1年かかりました。

拡張機能やWebサイト、以下に書く内容は、すべてAIで開発またはレビューしました。文法ミスが残っているかもしれませんが、もしAIに頼らず自分だけで書いていたら、たぶんほぼ全段落にミスがあったと思います。

で、何を作ったの？

Chromeのスクリーンショット拡張機能を作りました。表示部分、ページ全体（スクロール/縦長）、範囲指定、要素キャプチャに対応し、余白（padding）と遅延（delay）もあります。さらに編集ページ（Lliben Capture）で切り抜き、注釈、書き出し（コピー、PDF、PNG、JPG）や印刷ができます。

構成は4つ：

  1. ポップアップ
  2. 設定
  3. ビューア/エディター（Lliben Capture：スクショ後に開く）
  4. Webサイト

プロジェクトのスクリーンショット（例）：

キャプチャモードとクイックアクションが表示されたLlibenのポップアップ

キャプチャと書き出し設定ができるLlibenの設定画面

注釈と書き出しツールがあるLliben Captureの編集画面

技術スタック

  1. Google AI Studio
  2. ChatGPT
  3. Visual Studio Code
  4. GitHub（Webサイトの編集はGitHub経由）
  5. Cloudflare Workers & Pages（GitHubの変更がWorkers/Pagesにデプロイされ、最終版がビルドされる）
  6. Resend（サイトの連絡/フィードバックフォーム）
  7. Apple Email（安価にメールを運用できるが、Appleエコシステム前提）
  8. Stripe（支払い）

メールや支払いは必須ではありませんでした。GmailやOutlookでも十分です。ただ、ちゃんとした会社っぽい構造（連絡と収益化の仕組みまで）を最初から置いてみたかったんです。

これで仕事を辞めて世界一周できるとは思っていません。でも、自分が見て「これは完璧」と言えるところまで、できるだけ良くしたいと思っています。

どう始まったか

年の初めに着手し、ゼロから少なくとも200回はやり直しました（本当に）。今思うと、コーディングツールに慣れていなかったのが大きかったです。VS Codeのテーマやフォントサイズの変え方を検索していたのを覚えています。

6月か7月頃に再スタートしました。すでにベースがあり、ファイルの保存場所やビルド方法など、ツール周りで迷わなくなったのが大きかったです。

Gemini

実装のだいたい90%はGemini、10%はChatGPTでした。Webサイトのコードと機能は全部Geminiで書いて、翻訳はChatGPTに頼ることが多かったです。

Geminiは本当に良いのですが、とにかく「コーディングを止めさせる」のが難しいです。ブレストだと明記して「次はコード変更しないで」と書いても、結局コードを書いてしまうことがよくありました。指示のバリエーションやルールを試しましたが、それでも止まらない。これが一番のストレスでした。

ChatGPT

Geminiで詰まったときは、ChatGPTに切り替えて原因を推測したり、解決策をブレストしたりしました。かなり良い提案が出ることが多いです。それでもダメなときは、該当コードを貼って「まず説明して、直すなら変数名は維持して」と頼み、何パターンか試しました。

時にはChatGPTのコードをGeminiに戻して「この戦略の良さは何？別のアプローチの方がいい？」と聞くこともありました。数週間詰まった問題もありましたが、この方法で全部解決できました。

今のところ、ChatGPTの最大の弱点はSVGだと思います。正しいSVGアイコンを生成する精度は、Geminiに全然及びません。

Claude

Claudeは深く検証するところまで行けませんでした。試したときにコード量が増えすぎて、必要以上に複雑になりやすかった印象です。とはいえ、他が詰まったときに、時々セカンドオピニオンとして使うことはあります。

自分目線で「重要だったこと」

  1. コンテキスト（巨大トークン）が最重要というわけではない： これはAIが一度に扱えるテキスト量（入力＋出力＋周辺コンテキスト）です。私の場合、Gemini 2.5 Pro（100万トークン超）で十分でした。むしろ小さな機能を1つずつ進めた方がうまく行きました。
  2. アーキテクチャが最重要： 自分がコア構造を理解できないと、バグの原因に辿りつけず、直しても再発します。
  3. 最低1つの言語は自分で書く： 拡張機能もサイトも、英語だけは自分で書いて、他言語はAI翻訳にしました。AI文章は “アメリカのマーケター” っぽく長くなりがちで、自分の文体には合わないことが多かったです。
  4. 最初は最大2言語で作る： 言語が増えるほど、AIの更新対象も増えて作業時間が伸びます。最初に構造を固めるのが重要でした。
  5. 複数モデルを使う。
  6. 節目ごとにクリーンアップする： 大きなマイルストーンの後は、コメントアウトや死んだコード、空ファイルを掃除しました。
  7. ユースケースと期待動作を詰める： 例えばページ全体キャプチャが遅い問題は、キャプチャ中に結合処理していたのが原因でした。結合をビューア側へ移し、速度が大幅に改善しました。
  8. 既存ライブラリの活用： PDF生成とA4印刷にはjsPDFを使い、かなり助かりました。

最後にひとつ

Cursorや他のAIツールも、結局は “VS Codeの見た目違い” に近いものが多いです。だったら最初からVS Codeでいいのでは？という考えになりました（特定エコシステムにロックインしたくない）。

まだテストしていないこと

唯一しっかり試していないのは支払いです。Stripeのサンドボックスでは動きますが、友人や家族に「寄付して」と言うのも微妙で…。

開発者の方へ

もしあなたが経験豊富な開発者なら、拡張機能の機能や設計、Webサイトのデザインについてフィードバックが欲しいです。これは私にとって初めて公開できた大きなプロジェクトです。どんな意見でも歓迎します。

拡張機能： Chrome Web Store – Lliben

Webサイト： https://lliben.com/

最後の感想

アイデアと実装の距離が、信じられないほど短くなりました。

データアナリストとして、AIがコーディングでどれだけ速く進化しているかを見ると驚きます。すでにここまで来ていて、これからどうなるのか。

一方で、アイデアがある人は誰でも作れるようになりました。もう一方で、経験豊富な開発者の “職” はどうなるのか。

良いのか悪いのか、まだ分かりません。

AIがなければ、このアイデアに触れる勇気すらありませんでした。

じゃあ…自分は「ソフトウェア開発者」って呼んでいいのかな？