プログラミング知識ゼロでも、AIと対話するだけでツールが作れる

この記事では私が作成したアプリを無償で配布しません。作成までの過程を、私のように関心はあったがどう作ればいいかわからずまだ実行に移せていない方、ITの知識に詳しくない方でも作成できますよ、という内容で書きました。アプリを配布しない理由は私個人の設定が含まれているためです。もし使ってみたいと思われた方は、この記事を参考に作成してみてください。なお、本文中の吹き出し部分は私が実際に入力したプロンプトとClaudeの回答なので、誤字や脱字等が含まれていますが、修正しないでそのまま掲載しています。

テレビCMで、ノーコードでアプリが作れるサービスの宣伝を見た。「エンジニアじゃなくてもアプリが作れる時代なんだな」と、前から興味はあった。ただ、いつか作ってみたいなと思ってはいたが、なかなか実行に移せていなかった。今回、ふと思ったのでアプリ作成に挑んでみた。

【はじめに、Claudeに相談した】

プログラミングの知識があるわけではない。だから相談の内容は、かなり漠然としたものだった。

私：「記事作成用のアプリを作りたいのですが、どのように作ればいいのかご教授ください」

Claude：「記事作成用のアプリとは、どのような用途を想定していますか？」

私はいくつかの選択肢の中から「自分の執筆作業を効率化する個人用ツール」を選択。

記事執筆の効率化は決まっていたが、中身の機能も作り方も、まだ何も決めていなかった。

【実装方法はAIに任せた】

Claude：「実装方法はどれを想定していますか？」

私はいくつかの選択肢の中から「まだ決めていない、提案してほしい」を選択。

Claude：「結論：Claudeの「Artifact」機能でWebアプリとして作るのが最適です。
理由：
・ノーコードツール（Notion等）では「プラットフォーム別コピー変換」や「SEO文言の自動生成」のようなロジックを組みにくい
・自分でコード開発は学習・時間コストが高く、個人用ツールには過剰投資
・Claudeなら、これまでの執筆ルールをそのまま組み込んだツールをその場で作れる
搭載機能案（あなたの実際の運用に基づく）：
・構成メーカー：章立て・見出し構成をテンプレート入力→整形出力
・SEOメタ生成補助：タイトル案・メタディスクリション・ハッシュタグの叩き台を入力
・プラットフォーム変換チェッカー：「スキ」「拍手」等の媒体固有語をNGワードとして検出
・フリーミアム判定メモ：無料/有料の振り分け理由を記録
・サムネイル生成：紺＋琥珀のブランドカラーでSVGサムネイルをその場生成
・公開前チェックリスト：財務数値の記載禁止、未検証の手法・フレームワークの断定禁止など、あなたのルールを自動チェック項目化」

このように理由や機能の提案もされた。ノーコードアプリ作成のツールを別途ダウンロードしなくてはいけないと思い込んでいたので、その手間がいらないと知ったのは収穫だった。意味もあまりわからず、とりあえず作ってみようという感じで作業を進めていった。

Artifactsとは、Claudeがその場でプログラムを書いて、右側の画面で実際に動かしてくれる機能のことです。チャットには「Article desk　コード・HTML」というカードが表示され、クリックしたらプレビュー画面が出てきますが、自分の場合、入力エリアが狭かったのでダウンロードボタンから直接ファイルを取得して、アプリがどのように動作するか確認していました。

Claude：「この構成でアプリ作成を進めますか？」

私はいくつかの選択肢の中から「この内容でそのまま作成開始」を選択。

作成作業が開始された。時間がかかると思っていたが、実際にはあっという間に、6つのモジュールを切り替えながら使えるツールが出来上がった。使用は以下の通りです。

Claude：「6モジュール構成のツールを作成されました。左のメニューから各機能に切り替えられます。
・構成メーカー：見出し案を章立てに整形
・SEOメタ生成：サイト別のタイトル候補・メタ・タグ案（「作り方」型を避けた一人称の体験ベース）
・表記チェッカー：媒体固有語（スキ・拍手等）や金額・PV数などの数値表現を検出
・フリーミアム判定メモ：無料/有料の判断と理由を記録
・サムネイル生成：紺×琥珀のブランドカラーでSVGサムネイルを作成・ダウンロード
・公開前チェック：これまでのルールに沿っているかのチェックリスト
ブラウザ内で完結する単体HTMLファイルなので、そのまま開いて使えます。データはページを閉じると消える仕様（ブラウザの永続保存は使っていません）なので、記録を残したい場合はフリーミアム判定メモなどをその都度スクショ等で控えておいてください。不要な機能を削る、逆に追加したい機能があれば教えてください。」

私はダウンロードしてアプリを開いてみた（保存場所は自分の場合デスクトップにした）。背景の色が今一つで、なぜか私が指示をしていないのにツール名とサブタイトルのようなものが入っていた。ツール名とサブタイトルのようなものは完成してからでも修正できると思い、まずはデザインの方を先に片付けることにした。

私：「こんなに早くできるとは思ってもいませんでした。デザインを見やすいものにしてください」

Claude：「全体的に文字サイズ・余白・コントラストを見直しました。
・本文の文字サイズを拡大し、行間を広めに
・サイドナビ・見出し・ボタンを大きめにして視認性アップ
・結果表示エリアの余白を広げ、項目間の区切りを明確化
・チェックリストのチェックボックスを大きくし、タップしやすく
・ハイライト（表記チェッカーの検出箇所）の色をより目立つように調整。
まだ見づらい箇所があれば、具体的にどこが気になるか教えてください。」

またダウンロードして開いてみたが、やはり納得がいくものではなかった。

私：「背景を少し明るめの色にできませんか」

Claude：「背景色を少し明るめの紺に変更しました。パネルや区切り線も合わせて明るくし、文字とのコントラストは保っています。サムネイル生成機能のブランドカラー（紺×琥珀）は、実際の記事用なので元のままにしています。」

再度ダウンロードしてアプリを見てみたが、Claudeでは普段使っている印象からこれ以上直しても納得のいくものはできないと思い、背景の色の変更はここでやめた。

【6機能→4機能。使いながら削った】

私：「構成メーカーは削除してください。タイトルと記事の本文を貼り付けたら、記事概要、ハッシュタグ、SEOメタ、ｓｎｓメタが作成できる仕様に変更してください。ただし、ハッシュタグは、５個、１０個、それ以上選べるようにしてください」

Claude：「変更内容：
・構成メーカーを削除
・SEO・SNSメタ生成をタイトル＋本文貼り付け方式に変更し、以下を出力：
・記事概要
・SEOメタディスクリプション（目安120文字）
・SNSメタ（シェア用・目安90文字）
・ハッシュタグ（5個／10個／それ以上（数を自由入力）から選択）。
ハッシュタグは、タイトル・本文に含まれるキーワード（睡眠・副業・習慣・人間関係・AI・キャリア等）を検出して関連タグを優先的に選び、足りない分は汎用タグで埋める仕様です。」

アプリを見て、

私：「表記チェッカー、フリーミアム判定メモ、サムネイル生成、公開前チェックを削除し、各項目ごとにメニューを作ってください。ただし、タイトルと記事を書きこむスペースは1っか所でお願いします」

Claude：「4つのメニュー（記事概要／ハッシュタグ／SEOメタ／SNSメタ）に分割し、タイトルと本文の入力エリアは共通の1か所にまとめました。どのメニューに切り替えても入力した内容は保持されるので、1回入力すれば各項目をそれぞれ生成できます。」

またアプリを使ってみる。

私：「記事概要、ｓｅｏメタ、ｓｎｓメタの文字数も上限を入力できるようにできませんか」

Claude：「記事概要・SEOメタ・SNSメタの各メニューに「文字数の上限」入力欄を追加しました（初期値はそれぞれ160／120／90文字）。数値を変更して生成すれば、その上限に収まるように出力されます。」

アプリを使ってみて、時間もそんなにかからずそこそこのアプリが出来るんだと思った。

【一番てこずったのは、ボタンテキストだった】

ふと思って、

私：「ｙｏｕはガムロードを知ってますか」

Claude：「はい、知っています。
Gumroadは、デジタルコンテンツ（電子書籍、動画、音楽、ソフトウェア、テンプレートなど）を手軽に販売できるプラットフォームです。特徴は以下の通りです。
・個人クリエイターでも簡単に商品ページを作成し、決済まで完結できる
・手数料はプラン・売上額に応じた体系（無料プランは販売ごとの手数料が高め、有料プランは月額＋低手数料）
・海外のクリエイターエコノミーでよく使われており、英語圏の読者への販売と相性が良い
・Ko-fiと同様、投げ銭・サブスクリプション的な使い方もできる。
何か具体的に確認したいこと（手数料の詳細、商品登録の手順など）があれば教えてください。」

私：「ボタンテキスト（領収書や商品ページに表示されるダウンロードボタンのテキストをカスタマイズします（26文字中22文字使用）。）を知っていますか」

Claude：「はい、知っています。
Gumroadの「Button Text（ボタンテキスト）」は、購入者が商品ページや領収書メールから実際にダウンロードする際に表示されるボタンの文言をカスタマイズできる設定です。「プロンプトをダウンロードする」のような文言が例として使われています。
デフォルトのままだと「Download」のような汎用的な表示になりますが、ここを商品内容に合わせた具体的な文言に変えることで、購入者が迷わず操作できるようにする役割があります。26文字という上限は、ボタンとして表示したときにレイアウトが崩れないための制限だと考えられます。
具体的にどんな文言にするか迷っている、という段階でしょうか？」

私：「05にボタンテキストを追加して、ガムロード用に購入者がどのようなものを購入したかわかるようにどのようなキーワードをいれるか考えられるようにしたいのですが」

Claude：「「05 ボタンテキスト」を追加しました。
・タイトル・本文をもとに、Gumroadのボタンテキスト欄向けの候補を最大5件生成
・候補には「〇〇をダウンロードする」「〇〇を受け取る」など複数パターンを用意し、本文の内容から購入物のジャンルが伝わる語も加味
・文字数の上限を入力欄で指定可能（初期値26文字）、各候補に文字数を表示
・候補ごとにコピーボタン付き」

【英語の壁と26文字の制約】

アプリを開いてみた。しかし、ここから満足するような仕様になるまでの過程が長かった。

ここでひとつ、重大な過ちがあった。Claudeを含むAIを過信してはいけない、ということだ。Gumroadはアメリカのサイトで英語で入力しなければならないのに、アプリは日本語で回答していた。翻訳してGumroadに入力してもいいのだが、翻訳した時点で26文字を超えると事実上やり直さなければならない。

しかも26文字という上限はGumroad側の仕様で、自分で決めたものではない。この「英語・26文字」という組み合わせが、他の4項目にはなかった難しさを生んでいた。

私：「ボタンテキストの部分は全て英文でお願いします」

Claude：「ボタンテキストの出力を全て英文に変更しました。
タイトル・本文から「睡眠」「副業」「習慣」「人間関係」「AI」「キャリア」などのジャンルを検出し、英語ラベル（例：sleep guide、side income guide）に変換した上で、"Download the ~" "Get the ~" "Unlock the ~" などのテンプレートで候補を生成します。文字数上限を超える候補は除外されます。」

何度かアプリを試した。

私：「05 ボタンテキストはタイトルを重視してください。これならどのような作品を購入したかわからないのでは」

今回、この機能を追加しようと思ったのも、普段はGeminiを使っていたが2回目以降は一発でしっくりくる回答が出てこなくなっていたからだった。そのため組み込んだのだが、これではGeminiと殆ど変わらないではと思い、この指示に至った。

Claude：「ジャンルの一般化ではなく、タイトルの具体的な内容を英訳する形式に変更しました。裏側ではClaudeのAPIを呼び出してタイトルの意味を汲み取り、"Download the ~" のような動詞始まりで、文字数上限内に収まる候補を5件生成します。
一点だけご注意いただきたいのですが、この機能はClaudeの画面内でこのファイルを開いている間だけ動作します。ファイルをダウンロードしてご自身のPC上で直接開いた場合、この05番の機能だけは動きません（他の01〜04番は普通に動きます）。もしダウンロード後も使いたい場合は、簡易的な変換ロジック（APIを使わない方式）に戻すこともできますので、必要であれば教えてください。」

しかし、エラーが発生。

私：「生成中にエラーが発生しました。」

Claude：「API呼び出し方式は、このファイルを開く環境によっては動作しないことが分かりました（ダウンロードして単体で開いた場合、外部APIへの通信がブロックされます）。オフラインでも確実に動く方式に戻しつつ、タイトルの内容がきちんと伝わるよう改善します。
自動翻訳は精度に限界があるため、「英語表記を直接入力できる欄」を追加し、入力があればそれを優先的に使う仕様にします。空欄の場合は本文中の英単語とジャンルから自動推定します。
修正しました。API方式は廃止し、オフラインで確実に動く方式にしています。
・「商品名（英語表記・任意）」欄を追加：ここに英語の商品名を入力すれば、その表記をそのまま使って候補を作成します
・空欄の場合は、タイトル中の英単語とジャンル判定を組み合わせて自動推定します
正確な文言にしたい場合は、この欄にご自身で英語表記を入力していただく形が一番確実です。動作確認をお願いします。」

動作確認をしたが、またエラー。

私：「上限文字数が短すぎるため候補を作成できませんでした。上限を増やしてください。とエラーがでましたが26文字が上限です」

Claude：「Confirmed the cause: labels like "side income guide"（18文字）や"relationship guide"（19文字）だと、"the"付きテンプレートが26文字を超えて全滅していました。ラベルを短縮し、テンプレートも簡潔にします。
原因は、自動推定される英語ラベルに「the」付きの動詞テンプレートを組み合わせると26文字を超えてしまい、候補が全滅していたことでした。
・ラベルを短縮（例：「income guide」「connection tips」など）
・テンプレートから「the」を削除して簡潔に
・案内文にも「商品名は15文字程度までがおすすめ」と明記
これで26文字上限でも候補が生成されるはずです。もし「商品名（英語表記）」欄に長い文言を入れた場合は、そちらを短くしていただく必要があります。」

アプリを試す。

私：「「商品名（英語表記）」をもう少し短くしてお試しください。と出ても、英文ならながくなるので、短縮はできません」

Claude：「指摘の通りです。英文は仕組み上短縮しにくいので、手動で短くしてもらう仕様ではなく、自動で単語区切りよく収まる長さに調整する仕様に変更します。
商品名（英語表記）が長い場合、手動で短くしてもらう仕様をやめ、単語の区切りで自動的に上限内へ調整する方式に変更しました。「Get」「Read」のように短い動詞のテンプレートほど余裕を持たせやすいので、長めの商品名でも複数の候補が出るはずです。動作を確認してみてください。」

アプリを試す。

【動詞をめぐる攻防】

私：「「Get」「Read」は本音を言うとあまり使ってほしくないのですが」

これではGeminiと大した違いがないなと思ったためである。

Claude：「「Get」「Read」を外した場合、代わりにどの動詞を使いますか？」

私はいくつかの選択肢の中から「使いたい動詞を自分で指定する」を選択。

Claude：「どの動詞を使いたいか教えてください（複数可）。」

私：「動詞はなるべく使わないで欲しい」

Claude：「動詞を使わない、名詞ベースの表記に変更しました。
・そのまま：「{商品名}」
・「Your {商品名}」
・「{商品名} PDF」
・「Full {商品名}」
・「{商品名} Access」
の5パターンで候補を作成します。動作確認をお願いします。」

動作を確認する。アプリでもやはりあの文字が出てくる。

私：「PDFも入れないでください」

Claude：「「PDF」表記のテンプレートを削除しました。残りは以下の4パターンです。
・そのまま：「{商品名}」
・「Your {商品名}」
・「Full {商品名}」
・「{商品名} Access」」

アプリを動かす。

私：「Access、Yourも入れないでください」

Claude：「「Your」「Full」「Access」も削除しました。商品名（英語表記）をそのままボタンテキストとして使う仕様になっています。文字数上限を超える場合のみ、単語区切りで自動的に短く調整されます。」

【文字数と候補数の微調整】

アプリを試す。

私：「タイトル：5 Steps to Stop Overthinking and Quiet Your Mind When You Can't Sleep→5 Steps to Stopと出てきましたが、まだ文字数の上限に達してないのでもう少し文字を増やせるようにいてください」

Claude：「修正しました。以前は単語の区切りまで手前で切り詰めていたため、文字数に余裕があっても短く出力されていました。今後は上限文字数をできるだけ使い切る形（単語の途中で切れる場合あり）に変更しています。動作を確認してみてください。」

アプリを試す。

私：「候補数を増やすことはできませんか」

Claude：「候補数を増やしました。上限文字数・75%・50%の3段階の長さでバリエーションを生成します（短くする場合は「…」を付けます）。動作を確認してみてください。」

アプリを試してみるが、上限文字数・75%・50%の3段階の長さでバリエーションを生成する仕組みが、変な結果を招いてしまった。

私：「パーセントで区切るのはやめて下さい。また、ボタンテキストのとこだけ本文を入れなくても使えるようにしてください」

テストするたびに本文を入れていたのが面倒になったためである。

Claude：「2点変更しました。
・パーセント方式をやめ、カンマ・コロン・and等の区切りをもとに、文章の前半部分だけを使った短い候補も作るようにしました
・ボタンテキストは本文が空欄でも使えるようにしました（タイトルのみで作成可能）」

アプリを試す。

私：「Graduating from "Wasted Effort"がGraduating from "Wasted E…になるので、似たようなきーわーででも構いません。複数の候補がない時は一つでもいいです」

無理に何個も回答を作成している感じだったのでこの指示をした。

Claude：「単語の途中で切れて不自然になるのを避けるため、記号を整理して不要な語（前置詞・冠詞など）を削り、単語単位で収まる形に変更します。候補が1つしかできない場合はそれで問題ありません。
修正しました。引用符などの記号を取り除き、"from"のような前置詞・冠詞を削ることで、単語の途中で切れずに済むようにしています。例：Graduating from "Wasted Effort" → Graduating Wasted Effort（24文字、単語の途中で切れません）。
それでも上限に収まらない場合のみ、単語単位で積み上げて収まるところまで使う形にしています。試してみてください。」

アプリを試し、初めて作ったにしては、まずまずな物ができたかなと思った。

【勝手に決められていたアプリの名前をなおす】

最後にアプリ名変更の作業に取り掛かる。

私：「記事制作デスク大人のセルフマネジメント研究よりなにかいいネーミングはありませんか」

Claude：「「記事制作デスク」「大人のセルフマネジメント研究」の路線を活かしつつ、いくつか候補を考えました。
書斎・工房系
・大人の書斎
・ことば工房
・執筆基地
セルフマネジメント直結系
・セルフマネジメント編集室
・大人の文章道場
・マネジメント文庫
ブランド要素（北海道・侍）を活かす系
・北の書斎
・サムライ書斎
個人的には「大人の書斎」（シンプルで用途がわかりやすい）か「セルフマネジメント編集室」（ポジショニングと直結）あたりがしっくりくる印象です。
アプリの名前を変えるとしたら、どれにしますか？」

私はいくつかの選択肢の中から「この中にはない（他の案を考えてほしい）」を選択。

Claude：「では別の角度で考えました。
・一人編集部（個人運営であることを前面に出す）
・文章アトリエ（工芸的なニュアンス）
・執筆ラボ（試行錯誤しながら作る感じ）
・コンテンツ制作室（実務寄り・シンプル）
・大人の自習室（セルフマネジメント色を保ちつつ柔らかく）
・セルフマネジメント研究所（現在のポジショニングをそのまま名称化）」

私：「編集室でいいのでは」

Claude：「アプリ名を「セルフマネジメント編集室」に変更しました。サブタイトルは重複を避けて「記事制作ツール」にしています。」

自分は「編集室でいいのでは」としか言っていないのに、いつの間にか「セルフマネジメント」が勝手に付け加えられていた。これにははっきり伝えた。

私：「単に記事制作ツールでいいです。指示にしたがわず勝手にセルフマネジメントなんて付けないで下さい。サブタイトルも不要です」

Claude：「失礼しました。「記事制作ツール」に修正し、サブタイトルも削除しました。」

記事作成ツールと名付け、完成したのだ。

【まとめ】

出来上がったのは、記事概要・ハッシュタグ・SEOメタ・SNSメタ・ボタンテキストという5つの機能を持つ、自分専用の「記事制作ツール」だ。エンジニアでも、プログラミングを勉強したわけでもない自分が、対話しながら形にしていった。

やってみてわかったことは、次の3つです。

仕様を決めてから始める必要はない。「どのようなツールを作りたい」という大枠の方向性さえ言葉にできれば、細かい部分は相談しながら詰めていける
AIの提案通りに進める必要はない。「良かれと思って」加えられたものにも、違和感があればその都度修正していい
一度で完成させようとしなくていい。作っては試し、直しては試す、その繰り返しでよい
自分が欲しいと思っているツールがあるなら、一度、大枠の方向性だけ決めて相談してみてください。

（正直に書いておくと、完成してからまだ日が浅く、実際に使ったのはボタンテキスト機能を一度だけだ。他の機能はこれから実践投入していく段階になります。使っていく中で気になる点が出てきたら、その都度直していくつもりです。なお、実際の画面のスクリーンショットは、アプリのサイズの関係で一枚に収まらないので掲載しません。）

最後までお読みいただき、本当にありがとうございました。
あなたの『スキ』や購読が、執筆中の私にとって何よりのエネルギーになります。