AIまかせのツール開発と新UI誕生秘話
【記憶改竄】「テキスト読上げツール」を作ってみたという物語（無能・再び）
※注意：この記事は、非常にわかりくい構造になっています。しかも、読んでも１文の得にもならず、またなんの教訓も得られません。
あれは2024年4月の中頃だっただろうか、新年度に入ってすでに桜も散ってしまったというのに自分のサイトが変わり映えしないという事実にうっかり気づいてしまった私は、そろそろ何か新しいツールを作らねば・・・と考え始めた。しかし、何となく仕事をして酒を飲んでを繰り返しているうち、あっという間にGWに突入してしまった。しかもGW中に仕上げなければならない急ぎの案件が舞い込み、全く休みをとれないままGWを費やしてしまい、そしてGW明けには心身ともに疲弊しつくしてしまったのだった。
あーもーやーだー
数日後、ベランダでタバコを吸いながらぼーっと空を見上げて呟いた私は、久々に見た青空とそこにゆっくりと形を変えていく雲を眺めながら、とりあえず暇だということに気づいた。急ぎの仕事は終わったし、ルーティーンワークも終わった。急ぎじゃないが問合せがあって・・・みたいな微妙な状況もない。
ああ、暇っていいなぁ～
なんて思っていたのは若かりし頃の話だ。
高校卒業後、大学時代でさえも誰からも急かされない人生を目指し、さらにその後、社会人？となって以降も、その目標をもある程度達成できている今、結構暇な時間を作り出すことは出来てきている。GW中の忙しさも自ら選んだ道でもあった。
なので、暇な時間がある日常というものは、ほどんど【常態】と化してしまい、いつの間にか憧れは全くなくなっていた。忙しくしたいという気持ちは全く無いのだが、同時に「暇」でいたいという気持ちも無い。
さて、こんな微妙な気持ちに整理を付けられずにいたその時の私は、こんな風に考えていた。
「なんか仕事じゃないことやりたいけど、とりあえず何もかも面倒なんだよなぁ。」
面倒じゃない何かを求めて、ぼや～っと考えてみたのだが、なにも思いつかない。圧倒的に暇だ。まだ昼になったばかりだったが、もう酒でも飲んじまうかなと徒歩30秒のコンビニに行こうとしたその時、ふとひらめいたのだ。
そうだ、AIがいるじゃないか！
序文 (記憶の捏造)
あれは2024年4月の中頃だっただろうか、新年度に入ってすでに桜も散ってしまったというのに自分のサイトが変わり映えしないという事実にうっかり気づいてしまった私は、そろそろ何か新しいツールを作らねば・・・と考え始めた。しかし、何となく仕事をして酒を飲んでを繰り返しているうち、あっという間にGWに突入してしまった。しかもGW中に仕上げなければならない急ぎの案件が舞い込み、全く休みをとれないままGWを費やしてしまい、そしてGW明けには心身ともに疲弊しつくしてしまったのだった。
あーもーやーだー
数日後、ベランダでタバコを吸いながらぼーっと空を見上げて呟いた私は、久々に見た青空とそこにゆっくりと形を変えていく雲を眺めながら、とりあえず暇だということに気づいた。急ぎの仕事は終わったし、ルーティーンワークも終わった。急ぎじゃないが問合せがあって・・・みたいな微妙な状況もない。
ああ、暇っていいなぁ～
なんて思っていたのは若かりし頃の話だ。
高校卒業後、大学時代でさえも誰からも急かされない人生を目指し、さらにその後、社会人？となって以降も、その目標をもある程度達成できている今、結構暇な時間を作り出すことは出来てきている。GW中の忙しさも自ら選んだ道でもあった。
なので、暇な時間がある日常というものは、ほどんど【常態】と化してしまい、いつの間にか憧れは全くなくなっていた。忙しくしたいという気持ちは全く無いのだが、同時に「暇」でいたいという気持ちも無い。
さて、こんな微妙な気持ちに整理を付けられずにいたその時の私は、こんな風に考えていた。
「なんか仕事じゃないことやりたいけど、とりあえず何もかも面倒なんだよなぁ。」
面倒じゃない何かを求めて、ぼや～っと考えてみたのだが、なにも思いつかない。圧倒的に暇だ。まだ昼になったばかりだったが、もう酒でも飲んじまうかなと徒歩30秒のコンビニに行こうとしたその時、ふとひらめいたのだ。
そうだ、AIがいるじゃないか！
１．AIって何の役に立つの？（捏造も誤認も無いはずだ）
２．AIにツール開発お願いしたら、新しいUIが出来た。（誤認）
過去に様々なツールを開発してきたが、いつもは出来る限りシンプルで初見でもわかりやすいUI（ユーザーインターフェイス）を心掛けてきた。機能面でも同様に初心者でも使いやすいように、複雑な調整機能などは排除し、基本的な機能のみを実装するように気を付けている。また、サイト開発も含めて、Windows、Mac、スマホ、タブレットなど、どんな環境でも使えてデザインが崩れることの無いように、何度も検証を重ねてからリリースしている。これは開発と違って楽しくもなく、ただただ時間がかかる作業だ。
だが、今回のツール開発では、このようなルールをすべて無視しようと決めた。何故ならほとんどやる気がなかったからだ。その結果、わずか10分足らずでツールが出来上がってしまった。
Claude Sonnet 3.5（当時） にお願いしたのは、以下のような内容だ。
あいまいな記憶だが、スピード調整と言語、声の選択機能は、後から追加したと思う。ちなみに、2025年12月現在 Claude Sonnet 4.5 に、同じようにお願いしたら、3分ぐらいで出来てしまった。
➔ Claude Sonnet 4.5作成：テキスト読み上げツール
なお、AIを使ったツール開発方法は「AIを使ってオリジナルWEBアプリを作る方法」で解説しているが、読んでも得るものは無いので暇な方だけどうぞ。
さて。
あっという間に開発が終わった私は、当初から、ちょっとだけUI整えてすぐにリリースしようと思っていたのだが、いざ機能が一瞬で出来上がったのをみると、UIデザインぐらいちょっと目新しくしてやろうかと思った。これはまぁ、エゴでしかない。
こんな感じでちょっとだけやる気が出てきた私は、ユーザーフレンドリーとか気にしない、自分が使いやすいだけ、という完全に自分本位な自己満UIを作ることにした。
あれいらない、これいらない、ボタンなんか小さくていい、スマホは知らん等々。作業エリアが広くてメインボタンが大きいだけのUIデザイン。日本ではあまり好まれないダークモード仕様。
※後から通常モードも作ろうと思っていたが、面倒なのでそのままにしている。
だが、今回のツール開発では、このようなルールをすべて無視しようと決めた。何故ならほとんどやる気がなかったからだ。その結果、わずか10分足らずでツールが出来上がってしまった。
Claude Sonnet 3.5（当時） にお願いしたのは、以下のような内容だ。
テキストエリアのテキストを読み上げるツールを作ってください。
・形式：HTMLファイル1つ
・デザイン：できるだけシンプル。CSSは、必要最低限
・ボタンと機能：再生、ストップ、リスタート、スピード調整、言語選択、声の選択
あいまいな記憶だが、スピード調整と言語、声の選択機能は、後から追加したと思う。ちなみに、2025年12月現在 Claude Sonnet 4.5 に、同じようにお願いしたら、3分ぐらいで出来てしまった。
➔ Claude Sonnet 4.5作成：テキスト読み上げツール
なお、AIを使ったツール開発方法は「AIを使ってオリジナルWEBアプリを作る方法」で解説しているが、読んでも得るものは無いので暇な方だけどうぞ。
さて。
あっという間に開発が終わった私は、当初から、ちょっとだけUI整えてすぐにリリースしようと思っていたのだが、いざ機能が一瞬で出来上がったのをみると、UIデザインぐらいちょっと目新しくしてやろうかと思った。これはまぁ、エゴでしかない。
こんな感じでちょっとだけやる気が出てきた私は、ユーザーフレンドリーとか気にしない、自分が使いやすいだけ、という完全に自分本位な自己満UIを作ることにした。
あれいらない、これいらない、ボタンなんか小さくていい、スマホは知らん等々。作業エリアが広くてメインボタンが大きいだけのUIデザイン。日本ではあまり好まれないダークモード仕様。
※後から通常モードも作ろうと思っていたが、面倒なのでそのままにしている。
３．新しいUIが出来たら、ちょっとやる気が出てきた。（誤認）
４．やる気が出てきたら、仕事しなくなった。（誤認）
５．冷静に事実を確認しよう（一人称崩壊現象の香り）
この話を書こうと考えたとき、私はまずこのツールのテスト段階のファイルの日付を確認した。これはローカルファイルに残っていて、2024年5月8日という日付けだった。なるほど、大体GW中は、GW明けにリリースすべき仕事が詰まっている。GW明けに開発しているということは、きっとGW中に力尽きて通常業務のやる気を失ってしまったのだろう、と考えた。また実際に、GWが終わった後、仕事が嫌になって何か開発していたような記憶もあるし、調べてみると確かにGW明けにリリースした案件もあった。
そこでココまで確認したところで書き始めたのだが、私は何故か2024年5月にリリースした2つのツール「テキスト読み上げツール」と「コードエディター」の開発順を勘違いしてしまったのだ。「読上げツール」が先で、「エディター」が後だと。
＜想定していた話の流れ＞
０．サイト更新しなきゃなぁ～。
１．GW中のブラック労働。
２．やる気無くなりサイト更新に逃げる
➔ AI任せで「テキスト読み上げツール」を開発。
３．ちょっとだけUIデザインにやる気をだす。
４．新UIでモチベあがって「コードエディター」を一心不乱に開発。
でも仕事しない。
５．「コードエディター」リリースで満足し、通常業務に戻る。
読み上げツールの話を書き終えて、次のエディター開発の話に取り掛かった私は、エディターのリリース日を見て驚愕した。
2024年5月2日！ GW中だと？！
事実は以下のとおり。
何ということは無い、GW中は開発のあとも仕事で忙しかったのですっかり燃え尽きてしまい、GW明けから自分で作ったツールとAIとずっと遊んでいたというワケだった。
だめじゃん・・・
そんないつものよくある話を、よくある被害妄想テンプレートに落とし込んで「ブラック労働で搾取されたから心が折れたんだ！AIちゃんと遊んでしまって仕事をサボったのはお前が悪いんだ世界が悪いんだ政治が悪いんだぁあああ！！！」なんてていう、限界左翼集落からの心の叫びみたいな物語を書いてみたかったという私の爛れた魂の深淵にちょっとだけあったらしい貪欲な願望が漏れ出ただけのことだったのかもしれない。スミマセンごめんなさい。
前回「無能シリーズ」を完結させたとき、私は決心したはずだった。
もう二度と無駄なテキストデータをネットの海にたれ流したりはしないと。
だが、ちょっと待って欲しい。
たかが5000文字、10キロバイト程度のデータが何か問題があるとは思えない。誰の目にも入らんだろうし、また入ったとしても蝶々が羽ばたくほどの影響もない。
大体、いつも役に立たない話ばかりか言え散るので、今度こそは真面目な話をしよう、Web Speech APIとか、W3Cとかちょっと専門的な話もしてみよう、なんて気合をいれていたのに、そんな話をねじ込む隙が全く無いほどの完全なる馬鹿話になってしまった。
ああ 無情 ― 社会の底辺に生きるワタシ。
・・・これ以上続けると無能がバレるぞという心の声がボチボチ大きくなってきたからか、なんだかとっても楽しくなってきた。さぁ虐げられてすらいない俺達はこのまま無能シリーズを続けて駄文を垂れ流し続けていくしかない、と心に強く誓った・・・というあたりで幕引きとしよう。
ではまた次の無能まで（希望）
＜歴代無能記事＞
１．【マルチタスク】仕事が出来るフリをしてみた（無能）
２．【仕事してる感】プログラムって何？な人達にマウントできるツールができた（続・無能）
３．【3ステップもいらんし】AIを使ってオリジナルWEBアプリを作る方法（無能・END）
そこでココまで確認したところで書き始めたのだが、私は何故か2024年5月にリリースした2つのツール「テキスト読み上げツール」と「コードエディター」の開発順を勘違いしてしまったのだ。「読上げツール」が先で、「エディター」が後だと。
＜想定していた話の流れ＞
０．サイト更新しなきゃなぁ～。
１．GW中のブラック労働。
２．やる気無くなりサイト更新に逃げる
➔ AI任せで「テキスト読み上げツール」を開発。
３．ちょっとだけUIデザインにやる気をだす。
４．新UIでモチベあがって「コードエディター」を一心不乱に開発。
でも仕事しない。
５．「コードエディター」リリースで満足し、通常業務に戻る。
読み上げツールの話を書き終えて、次のエディター開発の話に取り掛かった私は、エディターのリリース日を見て驚愕した。
2024年5月2日！ GW中だと？！
事実は以下のとおり。
4月中にサイト更新しなければと思い、何かツールを作ろうと考える。すでにAIを使い始めていたので、生成したコードを簡単に動作確認したいと考えた。
5月 2日：「コードエディター」をリリース。
5月 3日：案件で多忙を極める。～7日まで
5月 8日：仕事をしなくなり、「コードエディター」とAIを使って遊ぶ。
5月11日：「テキスト読み上げツール」をリリース。↑遊びの残骸の1つ。
何ということは無い、GW中は開発のあとも仕事で忙しかったのですっかり燃え尽きてしまい、GW明けから自分で作ったツールとAIとずっと遊んでいたというワケだった。
だめじゃん・・・
そんないつものよくある話を、よくある被害妄想テンプレートに落とし込んで「ブラック労働で搾取されたから心が折れたんだ！AIちゃんと遊んでしまって仕事をサボったのはお前が悪いんだ世界が悪いんだ政治が悪いんだぁあああ！！！」なんてていう、限界左翼集落からの心の叫びみたいな物語を書いてみたかったという私の爛れた魂の深淵にちょっとだけあったらしい貪欲な願望が漏れ出ただけのことだったのかもしれない。スミマセンごめんなさい。
６．もはやあとにはひきかえせない（無能再び）
前回「無能シリーズ」を完結させたとき、私は決心したはずだった。
もう二度と無駄なテキストデータをネットの海にたれ流したりはしないと。
だが、ちょっと待って欲しい。
たかが5000文字、10キロバイト程度のデータが何か問題があるとは思えない。誰の目にも入らんだろうし、また入ったとしても蝶々が羽ばたくほどの影響もない。
大体、いつも役に立たない話ばかりか言え散るので、今度こそは真面目な話をしよう、Web Speech APIとか、W3Cとかちょっと専門的な話もしてみよう、なんて気合をいれていたのに、そんな話をねじ込む隙が全く無いほどの完全なる馬鹿話になってしまった。
ああ 無情 ― 社会の底辺に生きるワタシ。
・・・これ以上続けると無能がバレるぞという心の声がボチボチ大きくなってきたからか、なんだかとっても楽しくなってきた。さぁ虐げられてすらいない俺達はこのまま無能シリーズを続けて駄文を垂れ流し続けていくしかない、と心に強く誓った・・・というあたりで幕引きとしよう。
ではまた次の無能まで（希望）
＜歴代無能記事＞
１．【マルチタスク】仕事が出来るフリをしてみた（無能）
２．【仕事してる感】プログラムって何？な人達にマウントできるツールができた（続・無能）
３．【3ステップもいらんし】AIを使ってオリジナルWEBアプリを作る方法（無能・END）
せつめい
Popular Tool
せつめい
Popular Script
[ PR ]
せつめい
Popular Practice
せつめい
Popular Posts
[PR]
[PR]
[PR]