コードが書けない私がClaude Codeで美容アプリを作った全記録【非エンジニア・個人開発 2026年版】

「アプリを作りたい」——そう思ったことはあっても、「でも私、プログラミングなんて無理だし」と諦めてしまった経験、ありませんか？

美容アフィリエイトブログを運営する私・みおも、ずっとそう思っていた一人です。ところが2026年春、AIコーディングツール「Claude Code」を使うことで、コードが1行も書けないまま本格的なスキンケア成分解析アプリを完成させることができました。

この記事では、非エンジニアの私がどんな課題を抱え、どんなツールを組み合わせ、どんな失敗を乗り越えてアプリを形にしたのか——その全記録をお届けします。「自分もClaude Codeで何か作れるかも」と思っている方に、特にリアルな体験談として読んでほしい内容です。

✅ この記事でわかること

• 非エンジニアがClaude Codeを使ってアプリを作る具体的なフロー
• Supabase・Vercel・Cloudflare R2など個人開発に役立つツールの役割
• APIコスト削減・RLS設定・薬機法対応など開発中の失敗談と解決策
• 「設計する人間 × 実装するAI」という新しい分業スタイルの実態

みお

「私みたいな美容ブロガーがアプリ作れるの？」って正直半信半疑でしたが、やってみたら本当にできました。これが一番の発見でした！

なぜ美容ブロガーがアプリを作ることになったのか

読者の「これって何の成分？」という疑問が出発点

スキンケアブログ「みおのミハダノート」を運営していると、読者さんからよく届く質問があります。「このコスメの成分表が難しくて意味がわからない」「ナイアシンアミドって実際どんな働きをするの？」——コスメ裏面のカタカナ成分表は、美容好きでも読み解くのが難しいですよね。

私自身が成分を調べれば調べるほど「これ、ゲーム感覚でコレクションできたら面白いのでは？」というアイデアが育っていきました。そこで考えたのが、パッケージを撮影するだけで成分を自動解析してくれるアプリです。

具体的なコンセプトはこうです。

• コスメのパッケージを撮影すると、AIが成分を読み取って解析
• 解析された成分が「成分図鑑」にコレクションとして登録される
• 朝・夜のスキンケアルーティンをデッキ形式で可視化できる
• 成分への理解が深まることで、ブログのアフィリエイトとも自然につながる

アイデアとしては完璧でした。ただ一点——コードが1行も書けないという問題を除いて（笑）。

Claude Codeとの出会い｜非エンジニアでも「実装するAI」を使えば作れる

「答えてくれるAI」と「やってくれるAI」は別物

2026年春ごろからSNSで「Claude Codeを使ったら非エンジニアでも本格的なアプリが作れた」という投稿を見かけるようになりました。Claude Codeは、Anthropicが開発したAIコーディングツールです。

一般的なAIチャット（ChatGPTやClaudeのチャット画面など）は「聞いたら答えてくれる」存在です。一方でClaude Codeは「代わりに実際にやってくれる」AIです。「この画面を作って」と指示するだけで、AIが自らファイルを開き、コードを書き、修正まで行ってくれます。

この違いを知ったとき、「これなら私にもできるかもしれない」と感じました。いわゆるvibe coding（ノリと感覚でAIに実装させていくスタイル）の入門として、Claude Codeは非常に入りやすいツールです。

こうして生まれたのが、スキンケア成分解析アプリ「HADAMI（ハダミ）」です。

みお

「vibe codingって聞こえはかっこいいけど、実際はひたすらClaude Codeに話しかけてる感じです（笑）。でもそれで本当に動くものができるのが2026年のすごいところ！

HADAMIの基本設計｜「撮る→集める→組む」のシンプルな体験

アプリのコアとなる体験の流れは次の3ステップです。

「ポケモン図鑑みたいに成分をコレクションする」感覚でスキンケアが楽しくなる——それがHADAMIのコンセプトです。

HADAMIのランディングページはこちら

実際のアプリのデザインや機能の詳細は、ランディングページで確認できます。ボタニカルグリーンのUI、成分図鑑のカードデザイン、スキャン画面の導線――実際に触れる形でまとめてあります。

👉 https://hadami.vercel.app

🌿 HADAMIを試してみたい方へ

現在、HADAMIはクローズドβとして15名限定で公開しています。（招待コードが機能しているか技術検証も確認したいのが本音です・・・）

美容・スキンケアに興味があって「成分、ちゃんと理解したい！」という方、ぜひ一緒に使ってみてください！

参加方法はとっても簡単です。

XでDMをいただければ、招待コードをお送りします。

アプリに入るときに招待コードを入力するだけでOK。入力は初回の1回だけで、あとは普通に使えます。

使ってみた感想や「この成分がわかりにくい」「こんな機能があれば」というフィードバックも大歓迎です！開発の参考にさせてください。※無料で運営したいので、スキャン回数や画像保存数に制限を掛けさせていただいております。

▶ Xアカウント：@miomio_beauty

DMのひと言は「HADAMI気になります」でも「招待コード欲しいです」でも、なんでも大丈夫です🌿

個人開発で使ったツール全体図｜ほぼ無料でスタートできる

HADAMIの開発に使ったサービスを一覧にまとめます。個人開発初心者の方が「何から揃えればいいか」の参考にしてください。

小さく始める分には、Claude Code以外はほぼ無料でスタートできます。個人開発を始めたいブログ運営者にとって、初期コストの低さは大きなメリットです。

専門用語を例え話でわかりやすく解説

「Next.jsって何？」「Vercelって？」という方のために、身近なたとえで整理しておきます。

• Next.js＝お店の内装と商品棚：ユーザーが目にするレイアウト・ボタン・デザイン全般を担当します。
• Supabase＝会員証システムと在庫管理バックヤード：ログイン管理とデータの保存・取り出しを担う裏方です。
• Vercel＝商品を棚に自動で並べ直してくれるスタッフ：コードを更新するたびに自動でアプリを最新版に公開してくれます。サーバー管理が不要なのでVercel個人開発との相性は抜群。
• Cloudflare R2＝送料無料の大型倉庫：画像を保存する場所で、後述する「エグレス（取り出しコスト）無料」が選んだ決め手です。

Claude Code 使い方の実際｜「設計は私、実装はAI」の分業スタイル

最初にやらかした大きな誤解

開発初期に盛大にやらかしたのが、「Claude.aiのチャット画面でコードを直せばアプリに反映されるはず」という思い込みでした。修正コードをコピーしてもアプリがまったく変わらず、しばらく原因がわかりませんでした（笑）。

真相はシンプルで、チャット画面はあくまで「提案をしてくれる場所」。実際にファイルを書き換えてGitHubに反映するには、Claude Codeのターミナルを使わないといけないのです。この違いに気づいてから開発がぐっとスムーズになりました。

実際の開発フロー

慣れてからは、次の分業スタイルに落ち着きました。

1. claude.ai（チャット）で設計・相談：「こういう画面にしたい、こういう機能が欲しい」を言語化する
2. Claude Code（ターミナル）で実装：設計内容をAIに伝えて、ファイルを直接書き換えてもらう
3. GitHubに自動反映→Vercelがアプリを更新：push するだけで公開環境に即反映される

「何を作りたいか考える力（設計力）」さえあれば、コードが書けなくても個人開発は進められます。これが非エンジニアとして開発して得た最大の気づきです。

デザインが途中で全面刷新された話｜テラコッタからボタニカルグリーンへ

HADAMIは最初、テラコッタ（赤みのあるオレンジ系）のカラーテーマで開発を進めていました。暖かみがあって可愛かったのですが、成分図鑑のUIを作り込んでいるうちに「なんか美容アプリっぽくないかも」という違和感が生まれてきて。

試しにボタニカルグリーンに切り替えてみたところ、一気にしっくりきました。「植物標本帳みたいに成分を集める」というコンセプトとも見事にマッチして、以降は全画面をボタニカルグリーンで統一しています。

フォントはShippori Mincho（見出し）とZen Kaku Gothic New（本文）の組み合わせで、和の雰囲気と読みやすさを両立させています。「最初から完璧なデザインを決めなくていい。作りながら気づいていくもの」——これが学びでした。

Supabase初心者が学んだRLSの罠｜「他人のデータが見える」事故を防ぐ

RLS（Row Level Security）をマンションで例えると

RLSとは「誰がどのデータにアクセスできるか」をデータベース側で制御する仕組みです。マンションにたとえると、各住人が自分の部屋の鍵しか持っていない状態——他の部屋には入れないことをデータベース自体が保証してくれます。

これによりアプリのコードにバグがあっても「他ユーザーのデータが漏れる」という事故リスクを大幅に下げられます。

開発中に学んだ落とし穴

セキュリティ設定（RLS）はテーブル設計と同時に考えること。後から整えようとすると手間が倍になります。Supabase初心者が最も陥りやすいポイントとして、最初から意識しておくことを強くおすすめします。

画像保存をSupabaseからCloudflare R2に移行した理由｜エグレス問題とAVIF圧縮

「使われるほど損する」構造に気づいた

当初はSupabaseに画像も保存していたのですが、「エグレス（データ転送コスト）」の存在を知ったとき、青ざめました。エグレスとは、保存したデータを取り出す際にかかる転送コストのこと。Supabase Storageの無料プランは月5GBまでで、画像を頻繁に表示するアプリではあっという間に上限に達します。

そこで移行先に選んだのがCloudflare R2。最大の決め手は「エグレスが永久無料」という点です。

AVIFフォーマット移行でファイルサイズが約10分の1に

R2移行と同時に画像フォーマットをWebPからAVIFに変更しました。AVIFはNetflixやAppleも採用する次世代フォーマットで、WebPよりさらに高い圧縮率を持ちながら画質の劣化が少ないのが特徴です。コスメのスキャン画像のように「文字が読めれば十分」な用途では、この圧縮率が特に効果的で、体感でファイルサイズが約10分の1になりました。

スキャン機能の裏側全公開｜写真を撮ってから成分が表示されるまで

撮影から成分表示までのフロー

1. 📷 コスメパッケージ正面を撮影
2. 🖼️ Next.js API Routeで画像をリサイズ・圧縮（APIコスト削減）
3. 🤖 Gemini APIへ画像を送信（OCR＋成分抽出を一括依頼）
4. 💾 解析結果をSupabaseにキャッシュ保存
5. 📖 成分図鑑に登録・画面に表示

OCRとは写真に写った文字をデジタルテキストに変換する技術のこと。HADAMIではOCR処理と成分解析をGemini API一回の呼び出しでまとめて実行しています。

最初は1スキャン1.5円かかっていた

開発初期、スキャン1回あたりのAPIコストが約1.5円でした。月1万回スキャンされると1万5千円——これは個人開発には痛すぎる。原因は主に2つでした。

• ① 高解像度画像をそのまま送信していた：スマートフォンの写真はそのまま送ると「画像トークン」という処理コストが爆増します。リサイズするだけでコストが大幅に下がりました。
• ② Gemini 2.5のThinking機能がONになっていた：デフォルトで「考えてから答える」モードが有効な設定になっています。成分OCRのような単純作業では不要なので、無効化するだけでコストが数分の一に。

コスト削減の決め手は「キャッシュ戦略」

一番効いたのは、一度解析した商品の結果をデータベースに保存しておき、同じ商品が再スキャンされた場合はAPIを呼ばずにDBから即返却する設計です。これにより「使われるほどAPIコストが下がる」という理想的な構造になりました。

スキャン部分の最終的な技術スタック

みお

コスト削減って最初は「気にしなくていいか」と思うんですが、ユーザーが増えてから気づくと手遅れになることも。小さいうちに設計しておくのが正解でした！

薬機法対応で「効果スコア」表示をやめた理由

当初は「保湿力：87点」のような数値スコアを表示しようとしていました。わかりやすくて魅力的に見えますよね。しかし根拠のない数値で効能を暗示することは、薬機法上のリスクがあることを調べて知り、設計を変更しました。

• やめたこと：「保湿力：87点」のような数値スコア表示
• 採用したこと：「保湿系成分：3種類配合」という事実ベースの表示

美容アプリ・ブログのアフィリエイト記事を作る方は、表現規制を最初から設計に組み込んでおくことを強くおすすめします。後から修正するのは予想以上に手間がかかります。

収益化はアフィリエイトを選んだ理由｜広告より「文脈に合う」提案を重視

ローディング中に広告を挟む案も検討しましたが、HADAMIで最も大切にしている「撮る→解析→図鑑登録」のスムーズな体験を阻害したくなかったため採用しませんでした。

かわりに、成分解析結果の画面に楽天アフィリエイトAPIを使って関連商品を自然に表示する設計を採用。「この成分、良さそう」と感じたタイミングで商品が目に入る導線にしています。ステマ規制（2023年10月施行）に対応し、PRラベルも適切に表示しています。

※ 本記事はアフィリエイト広告を含む場合があります。

API連携の考え方｜「このAPIで何をしたいか」さえわかればOK

開発前、「API連携」という言葉には身構えていました。でも実際にやってみた感覚は「市販のだしパックを使う感覚」に近い。自分でだしを取る（一からコードで全部書く）のではなく、Geminiの画像解析・楽天の商品データ・Google Search Groundingなどの機能を「パック」として呼び出すだけでいいのです。

Vercel個人開発で注意が必要なひと手間として、APIキーを環境変数に登録する作業があります。

1. Vercelダッシュボード → Settings → Environment Variables
2. 「GEMINI_API_KEY」などの名前でAPIキーを登録
3. コード側では process.env.GEMINI_API_KEY と書くだけで参照できる

「こういうAPIを組み込みたい」という意図をClaude Codeに言葉で伝えれば、必要なコードから環境変数の設定方法まで教えてくれます。「何がしたいかを考える人間」と「どう実装するかを考えるAI」という分業がここでも機能していました。

みお

エラーが出たらそのエラー文をそのままClaude Codeに貼り付ける。それだけで原因と対処法を返してくれます。「怖くない」って気づくのが大事！

まとめ｜非エンジニアがClaude Codeでアプリを作るときに最初から知っておきたいこと

開発を終えて振り返ると、失敗や詰まった瞬間が一番多くの学びをくれました。同じ道をたどる方のために、「最初から知っておけばよかった」ポイントを整理します。

• ✅ Claude Codeの使い方は「チャット＝設計相談」「ターミナル＝実装依頼」の分業が基本
• ✅ コスト設計はユーザーが増えた後まで想像して選ぶ（Supabase Storageのエグレス問題はその典型例）
• ✅ RLS（セキュリティ設定）はテーブル設計と同時に組み込む——後から整えようとすると大変
• ✅ 薬機法などの表現規制は開発の最初期から確認する——美容アプリ・ブログは特に注意
• ✅ デザインは完璧に決めてから始めなくてOK——作りながら「違う」に気づくのが正直なプロセス
• ✅ APIキーはVercelの環境変数に登録するひと手間を忘れずに

2026年は「アプリを作れる人」と「アイデアを持っている人」の垣根がほぼなくなった年だと、開発を通じて実感しました。

「自分もClaude Codeで何か作ってみたい」と思っている方へ——入口は思っているよりずっと低いです。ぜひ挑戦してみてください。

よくある質問（FAQ）

Q1. Claude Code初心者でも本当にアプリが作れますか？プログラミング経験ゼロでも大丈夫？

A. プログラミング経験ゼロでも、「何を作りたいか」を言語化できれば実装はClaude Codeに任せられます。ただし、ターミナル（黒い画面）の基本操作や、GitHubへのコード管理の概念など、開発環境の準備には多少の学習コストがかかります。最初の環境構築だけは、Claude Codeに「環境構築の手順を教えて」と質問しながら進めるのがスムーズです。完全にゼロからでも、設計する意欲さえあれば十分に挑戦できます。

Q2. 個人開発でアプリを公開するまでにどれくらいの費用がかかりますか？

A. Next.js・Supabase（無料枠）・Vercel（無料枠）・Cloudflare R2（無料枠）を使えば、公開までの初期費用はほぼゼロに抑えられます。実際にかかる費用として見積もっておきたいのは、Claude Code（月額数千円〜）とGemini APIなどの従量課金型AIサービスの利用料です。小規模なベータ公開の段階であれば、月額数千円以内でスタートできる見込みです。ユーザー数が増えるにつれてコスト構造を見直す必要が出てくる点も、初めから意識しておくことをおすすめします。

Q3. 美容アプリ・美容ブログを作る際に気をつけるべき法的なポイントは何ですか？

A. 主に薬機法とステマ規制（2023年10月施行）の2点が重要です。薬機法の観点では、「シミが消える」「肌が治る」といった化粧品の効能を超える表現や、根拠のない数値スコアで効果を暗示する表現は避ける必要があります。「〇〇成分が配合されています」「〇〇へのアプローチが期待できます」のように、事実の提示や可能性の表現にとどめるのが基本です。ステマ規制については、アフィリエイトリンクを掲載する際に「広告」「PR」などの表記を明示することが義務づけられています。美容系コンテンツは特に表現規制が厳しいため、開発・執筆の初期段階で確認しておくことを強くおすすめします。