元サービス業界出身のわたしが
AIで生成したコードを、読んで、直して、納得して世に出すために何をやったのか？
Chrome拡張機能「Page Clipper」の開発過程を丸ごと公開します。

はじめに

AIでいろいろ作れる時代になった。

でもその一方で、
こんな気持ちを抱えていないでしょうか？

「AIが出してきたものの中身が読めない・・・」
「作りたいものはあるけど、AIにどう伝えればいいかわからない・・・」
「エラーが出たら最後、何が間違っているのか見当もつかない・・・」

あなたも
そんな苦しい気持ちを
抱えていないでしょうか？

でも、
本当に苦しいのは
「難しいから」ではないと思うんです。

作りたいものがあるのに、
それをどう言葉にすればいいかわからない。
興味はあるのに、自分に何が作れるのかすら見えない。

この「形にできない」という苦しさが、
いちばん堪えます。

その気持ちが、
わたしには痛いほどわかります。

わたしは、
もともとサービス業界の人間でした。

人と接することが好きで、
相手が少しでも気持ちよく過ごせるよう、
先回りして整えることにやりがいを感じていました。

今振り返ると、
その感覚は今の仕事にそのままつながっています。

相手が困る前に準備しておく。
流れが止まらないよう裏で段取りする。
わかりにくいものを、わかりやすく整える。

接客でやっていたことと仕組みをつくることは、
驚くほど似ています。

ただ当時のわたしには、
「仕組み」なんて発想はありませんでした。

毎日の仕事を必死にこなすだけで
精一杯だったからです。

サービス業からIT業界への転身のきっかけ

アパレルの現場で働いていたとき、
先輩がExcelの関数を見せてくれたことがありました。

見た瞬間、
本気で魔法だと思ったんです。

わたしが何時間もかけて手計算していたデータが、
たった一行の式で一瞬にして処理されるのです。

文句も言わず、正確に、何度でも。

計算が遅すぎて怒鳴られていた日々は
何だったんだろうと思いました。

ハリー・ポッターの愛読者だったわたしは
「この魔法が使いたい」
と心の底から思いました。

そこから、
覚めることのないExcelへの憧れが始まったんです。

しかし、

そのあと、
人生が止まったような時期がありました。

「病気」です。

緊急手術を受けたのをきっかけに
「このままの人生でいいのか？」
と強く考えるようになりました。

先のことは、
いつでも思い通りになるわけじゃない。

けど、

やりたいことを先延ばしにしていたら、
そのまま時間だけ過ぎていくだけ。

「人はいつ死ぬかわからないんだから、
本当にやりたい仕事をやろう」

そう決めて、
ITの世界に足を踏み入れました。

ITの世界で味わった絶望

希望を持ってIT業界に転職しました。

でも、
入ってみたら全然わからなかった・・・。

パソコン操作がわからない。
上司の指示が理解できない。
何がどこでどうつながっているのか、全体像がまったく掴めない。

何度も思いました。

場違いだったかもしれない、
自分には向いていないかもしれないって・・・。

しかも、
いちばんつらいのは
「できないこと」じゃなかったんです。

「何がわからない」のかがわからない、
その状態がいちばん堪えました。

周りの人は優秀に見える。
自分だけ雑用しかできない。
質問したくても、何を聞けばいいか言葉にできない。

非エンジニアの人が
技術の話に苦しくなるのは、
たぶんこの状態です。

プログラミングと出会い習得するまでに起きたこと

パソコン操作がようやくわかってきた頃、
プログラミングに出会い、
瞬く間に魅了されました。

そして、
コードに触れる現場に入ることができました。

ウキウキして、
実際にプロジェクト内の人が作ったコードをのぞいてみたら、

画面に並んでいたのは
意味不明な英語と数字の羅列。

説明を聞いてもわからない。
本を読んでもわからない。

はっきりいって、
その時点では才能なんて、
かけらもありませんでした。

でも、
私には諦められなかったのです。

そこでわたしがやったのは、
その羅列を、
一行ずつ無理やり日本語に直すことでした。

「この単語は、テキストを入れる箱のこと」
「もしこれがこの状態なら、こっちを動かす」
「このキーを押すと、最後の行まで選択される」

そんなふうに、
一単語ずつ直訳していたんです。

今思えば、
ものすごい遠回りです。

でも、
この時期があったからこそ、
ツールの癖や構造を肌で理解できるようになりました。

一年ほど、
それを続けたある朝、
通勤中にふと

「わたし、コードが書ける」

という言葉が頭に浮かびました。

実際に職場で画面を開いたら、
コードの意味がはっきりわかる。

手が止まらず書ける。

そして同時に、
コードというものの正体がはっきり見えたんです。

コードは、ただの「手順書」だった。

コードの正体

料理も、掃除も、仕事も
「何をどの順番でやるか」
で成り立っている。

コードも同じで、

わたしたちがパソコン上で、
手作業でやっていることを

抜け漏れなく、
順番通りに、
機械にもわかるように

並べたものなんです。

そう思えた瞬間、

それまで
「読めないもの」だったコードが
「観察できるもの」に変わりました。

でも
「手順書だ」とわかっただけでは、
まだ自分では作れませんでした。

足りなかったのは
技術的なやり方ではなく、

ゼロからコードを組み立てられる人が
作るときにどう考えているか？

という見方やルールのほうでした。

何を最初に確認するのか？
どこから整えるのか？
大きな仕事をどう分けるのか？
うまくいかなかったとき、どこから見直すのか？

これは
プログラミングの文法の話ではありません。

仕事を組み立てるときの
考え方の話です。

そして、
この考え方は一度身につけてしまえば、

AIに何を頼むか考えるときにも、
エラーが出たときに
どこを見ればいいか判断するときにも、

そのまま使えるものでした。

AI時代に中身が分からないまま使うとどうなるか？

ここで少し、
怖い話をさせてください。

もしAI時代に
「中身はよくわからないけど、とりあえず使う」
をこのまま続けていくと、どうなるか？

うまくいっても、
なぜうまくいったかわからない。

失敗しても、
原因がわからない。

動かなくなったら、
どこから手をつければいいか見当もつかない。

毎回ゼロから
AIに説明し直すことになり、

外注やAIに頼んでも
自分の中にノウハウが残らず、

結局
「使っているだけ」で終わって、

いつまでも

自信が持てないままになります。

AIがあるからこそ、
全部を自力で書けなくても
前に進める時代になりました。

でも同時に、

何も理解しないままだと、
自分が本当に作りたいものに、
いつまでも手が届かないままになります。

この記事は、
その状態から一歩踏み出すためのものです。

だからこそ、
このBrainは「できる人の目線」では書いていません。

「プログラミングをやったことがない人が、どうやったら理解できるようになるのか？」

その目線だけで書いています。

難しいことを
難しいまま語る記事ではなく、

難しく見えるものを、
日常の仕事に置き換えて
理解するためが目的です。

ここで一つ、
実物を見てもらいたいと思います。

今回の題材について

今回の題材は、
私がAIで開発した、

Chrome拡張機能「Page Clipper」
です。

拡張機能「Page Clipper」とは？

撮影したいページで

拡張機能のボタンをクリックすると、

すぐに

ページ全体の撮影が始まります。

撮影の進捗が画面の右上に表示されます。

撮影が完了すると、

ダウンロードフォルダに

自動的にPNG画像としてダウンロードされます。

▼実際に撮影した画像

トライズアルカリンク合同会社_2026-04-20T01-10-06.png

Webページ全体を
１枚の長い画像として保存するツールで、

一見すると
「ボタンを押したら保存される」

それだけのシンプルな道具に見えます。

でも実際にはその裏で、
たくさんの小さな仕事が動いています。

①すぐ始めず少し待つ
②うまくいかなければもう一度試す
③ボタンが押されたことを受け取る
④ページの状態を確認する
⑤邪魔になるものを一時的によける
⑥今どこまで進んだかを画面に伝える
⑦少しずつスクロールしながら撮影する
⑧撮ったものを１枚に合成する
⑨わかりやすい名前で保存する
⑩よけたものを元に戻す
⑪最後に元の位置へ戻り、失敗しても後片付けをする

数えてみると
「11個」の仕事が
組み合わさって動いています。

つまりこの拡張機能は

「ただ保存する道具」ではなく、
小さな気配りが積み重なった仕事の集合体なんです。

11個と聞くと多く感じるかもしれません。

でも裏を返せば、
一つの機能というのは

そのくらい
小さな役割の積み重ねで
できているということなんです。

ここが見えるようになると、
AIに何を頼めばいいかも
考えやすくなります。

ここで「まだ自分には早いかも」と感じた方へ

「まだこの内容は自分には早いかも」
と感じた方へ。

その気持ちは自然です。

でも、むしろ

AIを使い始める前や
使い始めたばかりの時期こそ

「何を見ればいいか」

を先に知っておく意味があります。

大事なのは、
最初から全部理解することではありません。

つまずいたときに、
どこから見ればいいかがわかっていること。

それだけで、
前に進めるかどうかが大きく変わります。

では、このBrainを読むと何が変わるのか？

このBrainを読むと何が変わるのか？

読む前の状態を想像してみてください。

「作りたいものはあるのにAIにどう伝えればいいかわからない」

「エラーが出ると途方に暮れる」

「コードや仕組みを見ただけで画面を閉じたくなる」

「AIや外注が作ったものの中身がわからないまま使っていて、ずっと不安が消えない」

読んだあとは、こう変わります。

「コードが『順番つきの手順書』だとわかる」

「仕組みを仕事の流れとして眺められるようになる」

「AIに何をどう伝えればいいか、その型とテンプレートが手元に残る」

「エラーが出ても『エラー文をそのまま拾ってAIに渡す』という対処の手順がわかる」

一つのツールの裏側を
11の仕事に分解して見る
体験を通じて

「裏側を観察する」という
見方そのものが身につきます。

そして、

接客や日常業務でやっていた
段取りや分解が、

開発の世界でも
そのまま使える力だったと気づくのです。

もちろん派手な変化ではありません。

でも実務では、
この差がとても大きいのです。

「作りたいのに何も言葉にできない」

と

「伝え方の型を持っている」

のあいだには、
想像以上の開きがあります。

では、
ここからは、
有料パートの内容を紹介します。

有料パートの内容

第１章では、
コードが読めない人が
最初に押さえるべき前提の話をしています。

第２章は、
わたし自身が
コードを理解できるようになるまでにやった
「一行ずつ直訳する」という泥くさい方法の話。

第３章で、
AI時代の開発において
本当に必要なのは
「分解する力」だという話に入ります。

第４章からが実践パートで、
Page Clipperを11の仕事に分解して
一つずつ読み解いていきます。

第５章では、
その11の仕事から浮かび上がる
開発の型を整理します。

第６章は
AIをまだ使ったことがない人に向けて、
最初の一歩をどう踏み出すかを書きました。

第７章では、
非エンジニアが
AIにコードを書かせるときの
具体的な伝え方を扱っています。

第８章は
「人は想像できるものしか作れない。
だから既存のツールの中身を見ることに意味がある」
という話。

第９章は
拡張機能を読み込むとき、
初心者がつまずきやすいポイントをまとめています。

第10章がまとめです。

本文に加えて、資料編と特典もつけています。

資料編には、

今回のツールの実際のコード
拡張機能のアップロード方法
よくあるエラーの一覧
AIに送る質問テンプレート
見本画像

をまとめました。

特典

特典は2つ。

1つ目は、

AIが出した複数のコードを
ダブルクリックだけで設置する方法。

拡張機能など、ツール開発時には

一気に10コ以上のコードをメモ帳に貼り付け
名前を入力し
フォルダをたくさん作って
それぞれ適切に格納しなければいけない

ということが良くあります。

その手作業をなくすための方法を、
１つずつ画像付きで解説しました。

2つ目は、
拡張機能の
プロンプトを組み立てるためのツール

「拡張機能のプロンプトつくるくん」
です。

拡張機能を作ったことがない。
アイディアが全く思い浮かばない。
どうやってAIに作りたいものの指示をしたらいいか分からない

という時に、
拡張機能を作るための
最初の一歩を助けてくれるツールです。

「こんにちは」や
「便利な拡張機能作りたい」
などと話しかけるだけで、

AIが作れる
拡張機能のアイディアを
色々出してくれる、
アイディア出しの優秀なアシスタントです。

無料で使えます。

スクリーンショット 2026-04-12 191725.png

本文で考え方をつかみ、
資料で確認し、
特典で実際に手を動かす。

読んで終わりではなく、
動けるところまで支える構成にしました。

このBrainをおすすめする方

このBrainは、
こういう方に向けて書きました。

AIに触れたことがないけれど、これから始めてみたい方
コードが読めないことにどこか引け目を感じている方
外注やAIが作ったものの中身を、少しでも自分の目で理解したい方
自分の仕事をもっと楽にしたいと思っている方
業務改善や自動化に興味がある方
「全部できる人」にならなくていいから、理解できる側には進みたいと思っている方

逆に

最初から専門用語をしっかり学びたい方
コードの書き方を体系的に身につけたい方
上級者向けの技術解説を探している方
Macユーザーの方（本文の考え方はOS問わず使えますが、資料編と特典の一部がWindows前提です））

には合わないかもしれません。

ここまで読んで、
もし少しでもこう感じたなら——

「全部はわからなくても、流れなら見えるかもしれない」

「魔法みたいに見えていたものも、仕事の集まりだと思えた」

「自分にも、理解する入口はあるのかもしれない」

——そう感じてもらえたなら、
この先の内容はきっと役に立ちます。

価格について

現在、
公開記念価格として980円で販売しています。

~~この価格は10部までの販売となります。~~

公開記念価格の10部は完売いたしました。

ご購入してくださった皆様、ありがとうございました。

10部を超えた時点で価格を段階的に改定し、
最終的に9,990円となります。

気になっている方は、
今のうちに手に取ってみてください。

AI時代は、
コードを全部書ける人だけが
前に進む時代ではありません。

やりたいことを一つずつ丁寧に伝えられる人
的確な質問ができる人
目の前の仕事を少しでもよくしようとする人

そういう人こそ、
AIを使いこなせるのです。

もし今の自分に必要なのが
「一気にプロになること」ではなく、

つまずいても止まらずに
前へ進むための力を得たいのだとしたら、

このBrainはその入口になります。