AIに相談するだけの開発——コーディングできないデザイナーのツール作りが止まらなくなった話

こんにちは、デザイナーのモリンガです。
突然ですが、私はコーディングができません。

ですが最近、AIでツールを作って遊んでいたら、気づけばけっこうな数になっていました。
今回はコーディングできないデザイナーが、AIと一緒にどんなものを作ったのかをまとめてみようと思います。

AIで作ったもの一覧

まずはざっくり、これまでに作ったものの一覧です。

Chrome拡張機能

• 作業ログ
• 日付を検知して曜日入り日付に変換（Slack用）
• ポモドーロタイマー
• 時間割

HTMLファイル

• 要件定義シート
• 日報用の時間計算ツール
• （プライベート）行きたいお店・旅行先まとめ
• （プライベート）年間撮影カレンダー

こうして並べると我ながらけっこう作ったな…という気持ちです。
今回はこの中から3つピックアップして紹介します！

Slack曜日変換Chrome拡張

• これが地味に便利なんです…いちいちカレンダーを開かなくていいというだけで捗ります！

1つ目は、Slackで日付を入力したときに曜日をチェック・補完してくれるChrome拡張です。一番最初にAIで作ったツールがこれでした。

Slackでメッセージを書くとき、「5/28（水）」のように日付と曜日をセットで書くことってよくありますよね。
でも日付と曜日が一致していない、というミスは誰でもやったことがあると思います。
私もめっちゃあります。ありすぎて「落ち着いて」と言われたこともしばしば…というわけで、それを防ぎたくて作りました。

• 入力中の日付と曜日が合っていないときにポップアップで教えてくれて、そのまま正しい曜日に置換もできます。
• 曜日なしで日付だけ打った場合は、曜日を自動で足してくれる機能もあります。

最初は不具合だらけだった

最初のうちはうまく動かないことが多くて、なかなか苦戦しました。
改行が入ると壊れたり、Slackのメンションに含まれる日付にまで反応してしまったり…。

でもClaudeと何度もやりとりを重ねて、最近ようやく動作が安定しました。「動かない→原因を伝える→修正案をもらう→試す」の繰り返しで、少しずつ育てていった感じです。
やりとり自体は軽いんですが、事故がないかのデバッグ作業で、気が狂うほど日付をSlackに打ち込みました。

作業ログChrome拡張機能 ＆ 日報計算ツール

• カラーバリエーションがたくさんあるというだけで、モチベーションが上がりますよね…！

2つ目は、1日の作業を記録してくれるChrome拡張です。
目的は自分の業務の見える化で、日々の行動を振り返って改善点を見つけたり、AI活用できそうなタスクを洗い出したりすることです。

私は不便に慣れやすいタイプなので、AI活用のチャンスを逃しがちです。さらに、自分にどのくらいの作業工数が必要なのかも曖昧です。理由は簡単、「終わるまでやり続ければ終わるでしょ」で働いているパワープレイタイプだから。でもこれは大変よろしくない働き方なので、今更ですが自分のためにもログを取ろうと決意しました…。

• 内容を記入してボタンを押すだけで「作業内容」と「作業時間」をログに残せて、CSVで書き出せます。
• 設定した時間で通知も来るので記入忘れも防げます。
• 使っていくうちに「記入漏れのアラートを入れよう」や、「UIのカラーバリエーションを増やそう」など、とにかく自分好みに作り込みました。

ログを取り始めると自分の時間の使い方がはっきり見えるようになって、「ここ、AIに任せられるのでは？」という気づきが増えました。

より便利にするために日報機能も追加

毎日ログを取っているうちに、「このデータ、日報にそのまま使えたら楽なのに」と思うようになりました。AIのおかげでどんどん怠惰になってきてます。でもそれが大事（なはず）。
そこで、ログを元に日報を作るHTMLの時間計算ツールも作成。1日の作業内容を入力しておくと、時間配分を自動で計算してくれます。

このツールは1か月ほど使っています。手動入力にはなりますが、「今日何やったっけ…」と悩む時間がなくなり、自分の時間の使い方を振り返ることもできるので便利です。

要件定義シート

• 質問もAIプロンプトもカスタム可能。自分好みに育てた後に、HTMLファイルとして再出力できます。

3つ目は、一番最近作った要件定義シートです。

クリエイターたるもの依頼者との打ち合わせがつきものです。
たまにですが1日の8割がミーティングだったなんてことすらあります。そうなると議事録やメモが溜まり続けて厄介です。

Notionの整理は好きなんですが、だんだんと打ち合わせ中に装飾しながらメモを取るのが手間だなと思い始めました。怠惰はAI開発の要。
そこで、プロジェクトの基本情報や確認事項をフォームに沿って埋めていくだけで、きれいに整理された要件定義シートができあがるというものを作りました。

• マークダウンで出力できるので、Notionにコピペするだけで整った見た目になる
• mdファイルとしてダウンロードもできるので、Chrome拡張機能を入れておけばブラウザでオフライン表示も可能
• AIに渡す用のプロンプトも一緒にコピペできるので、打ち合わせメモをAIにまとめてもらうのもワンクリック。プロンプトは差し替え可能。

特に3つ目がお気に入りです。打ち合わせ後に「さっきの内容まとめて」とAIにお願いするとき、ゼロからプロンプトを書かなくていいのでとてもスムーズ！私は簡単な案件に加え、自分用の制作前の思考整理にも使っています。

AIでツールを作ってみて学んだこと

いろいろ作ってきた中で、実感したことが3つあります。

動作確認、大事

AIが書いてくれたコードをそのまま使ったら、思わぬ挙動をすることが多々ありました。
一連の流れを何回かテストしないと普通に事故ります。実際、人にシェアした後に不具合が見つかったこともあって、そのときはさすがに焦りました。届いているかわからないですが、この場を借りて…あの時はごめんなさい！

使っているうちに「もっとこうしたい」が出てくる

完成したと思っても、実際に使い続けていると改善したいポイントが次々と見つかります。
シェアした後もずっと改良し続けているのが今の状態です。多分この「育てる感覚」が、ものづくりとして一番大事なところなんだと思います。

開発はClaudeが一番楽だった

いくつかのAIを試してみましたが、個人的にはClaudeが一番やりとりしやすかったです。
こちらの意図を汲んでくれる精度が高くて、「こうしたい」を伝えるだけでかなり的確に返してくれました。

おわりに

コーディングができなくても、AIに相談すれば自分の「ちょっとめんどくさいことを解決するツール」が作れる時代になりました。

コツをお伝えするとしたら、最初から完璧なものを目指そうとせず、まずは身近な小さな不便をAIに相談してみるところから始めてみてください。
「あ、これ意外とできるんだ」と思うことがけっこうあります。HTMLファイルやChrome拡張機能など、それぞれの手段の得意・不得意を聞くだけでもアイデアが浮かぶかもしれません。

定期的に行う単純な作業はツール化しておくと、AIのトークン節約にもつながるのでおすすめです！

• ※トークンとは、AIを使うたびに消費される”燃料”のようなもの。繰り返す作業はツールにしておけば、AIを使わずに済む＝トークンの節約になります。