keyboard_arrow_up
ホーム学習ログ

Claude Codeは非エンジニアでも...

Claude Codeは非エンジニアでも使える?コードなしでWebアプリを作ってみた

学習ログ

公開日 2026/6/6

Claude Codeを触るまで、自分には関係ないと思っていた

生成AIは日常的に使っています。記事を書くときも、アイデアを整理するときも、ChatGPTをほぼ毎日使っています。

ただ、Claude Codeだけは別物に見えていました。

「エンジニアがコードを書くためのツール」という印象があって、非エンジニアの自分が触るものではないと決めつけていました。プログラミングの知識がゼロでも使えるとは、正直思っていませんでした。

それでも触ってみようと思ったのは、作りたいものがあったからです。

作りたかったのは、自分用の貯金管理アプリ

既存のアプリはいくつか試しました。でも、自分の使い方にぴったり合うものがありませんでした。「最終目標・現在の貯金額・中間目標」を一画面でシンプルに確認したいだけなのに、欲しい機能がなかったり、自分には必要のない機能の設定をさせられたりしました。

「だったら、自分用のものを作れないか」と思い、Claude Codeを試してみることにしました。


Claude Codeで実際にやったこと

ここからは、実際にどんな順番で進めたかを紹介します。細かな指示文やその回答を1つ1つ載せるのではなく、何を考えて指示文を出したかを中心に書きます。

最初にやったのは、条件を整理すること

私はコードが書けないので、Claude Codeに伝えたのはすべて日本語です。「どう伝えるべきか」から迷ったので、ChatGPTに「どういうものを作りたいか」「これから何をしたいのか」を伝えて、Claude Codeに渡す日本語のプロンプトを考えてもらいました。

個人で使う用なので、完璧なアプリのようなものを作ろうとは考えていませんでした。そのうえで、以下のような条件と、画像のような要件を伝えました。

条件:

  • iPadとスマホのブラウザで見やすいレスポンシブデザイン(画面サイズに合わせて自動でレイアウトが変わる設計)にしてください

  • まずはローカルPCで動けばOKです

  • データはブラウザ内に保存してください

  • ログイン、通知、Google連携はまだ入れないでください

  • 作業前に、どんなファイル構成で作るかを日本語で説明してください

  • 作成後に、起動方法と使い方を日本語で説明してください

  • 私はコードが読めないので、難しい専門用語は少なめにして(使う場合は必ず補足)をしてください

Claude Codeに実際に見せた要件の.mdファイル

作業前に「説明してほしい」とお願いしたのは、作業の見通しが見えないと、Claude Codeが何を実行するのか分からず不安だったからです。その判断が、結果的に大きな意味を持ちました。

見通しが見えると、全体を追えるようになる

Claude Codeは、index.htmlstyle.cssapp.js の3ファイルを作ろうとしており、それぞれのファイルの中身を説明してくれました。簡単に書くと、HTMLが画面の骨格、CSSが見た目、JavaScriptが動きを担当する、という整理でした。

実際のファイルの中身であるコードを全部読んだわけではありません。でも、「どのファイルが何をしているか」がざっくりわかるだけで、次に進んでも良さそうと思えました。

もしClaude Codeがコードや自分の知らない単語だらけで作業を進めていたら、非エンジニアの私は、「何もわからない。自分には使いこなせない」と諦めていたかもしれません。「私はコードが読めない」「日本語で説明して」のような前提や指示を伝えておいたおかげで、完全には理解できなくても作業の流れを追えました。

ファイル構成が把握できたところで、実際に作ってもらう段階へ進みました。

試作品を見て、改善条件を出していった

最初の指示をすると、すぐに伝えた条件や要件に合ったものを作ってくれました。

Claudeが実際に作ってくれた画面①

実際の画面を確認して、次にUI(ユーザーが使う時の画面の見た目や操作性)の改善をお願いしました。

【カラー変更】
使用する色は以下の3つに限定してください

- #FFE6EC(メイン・強調)
- #FFCDBD(サブ・背景)
- #FFFFFF(ベース)

ルール:
- 背景は基本 #FFFFFF
- カード背景は #FFCDBD をベースに薄く使う
- ボタン・進捗バー・強調は #FFE6EC
- それ以外の色は極力使わない(グレーは最小限OK)
- 現在の青・紫系の色はすべて削除

同じように、情報の表示順・数字の見せ方・ボタンのサイズ・スマホ幅での崩れ対策も、それぞれ別の項目として整理して伝えました。最後に「機能は変えない・CSS中心で修正する」という制約も明示しました。

修正の指示が曖昧だと、自分の考えている方向性とズレると考え、ChatGPTと練ってから、この指示を出しました。その指示を出した後は、自分のイメージ通りの画面になりました。

Claudeが実際に作ってくれた画面②

この段階あたりで、Claude Codeの印象が変わりました。元々は「コードを使いこなす人が使うAI」という印象でしたが、「自分の言葉で、ものを形にしていくAI」に見えてきました。

公開方法も、日本語で相談した

スマホでも開けるように、次はURLで公開する方法を相談しました。(URLをブックマークし、それをホーム画面へ追加することで、アクセスが簡単になり、アプリのように使えます。)

ここでもChatGPTへ相談し、Claude Codeへの指示文を考えてもらいました。この時、GitHub Pages・Netlify・Vercelの中からどれかを使う必要がある、と言われましたが、そもそもどれが何なのかが私には分かりませんでした。そのため、まずはそれら3つの違いを、非エンジニア向けに整理してもらいました。「無料で使えるか」「公開の手軽さ」「向いている人」といった軸で比較してもらい、自分の状況に合う選択肢を選びました。

あとは、操作手順を示してくれたので、分からなくなったときだけ聞けば、サービスの存在すら知らなかった私でも、スマホで開くまでの手順を追うことができました。

一連の作業を終えて、Claude Codeへの印象がはっきりと変わっていました。


触ってわかったこと

Claude Codeを実際に使ってみて感じたのは、ただ「指示に従ったものをコードを使って作る」だけではなく、「やりとりをしながら自分のペースに合わせて進めてくれる」ということです。

作業前には進め方を整理してくれ、ファイル構成についても説明してくれました。完成後は使い方まで説明してくれたので、最後まで迷いはなかったです。そのおかげで、非エンジニアの私でも貯金管理用アプリを数時間で作ることができました。

ただしこのフォローは、「コードが読めない」「日本語で説明してほしい」と伝えておいたから引き出せたものです。その前提を伝えずに使い始めていたら、おそらく違う結果になっていました。

Claude Codeを初めて使う場合には、普通のAIチャットで自分の背景などを含めて、何をしたいかを整理しておくことをおすすめします。私はChatGPTにClaude Codeへの指示文を考えてもらいましたが、ClaudeのChatでも同じことができます。

なお、仕事でClaude Codeや生成AIを使う場合、どこまで入力してよいかの判断に迷うことがあります。入力情報の種類や用途、影響度から判断する基準をまとめた記事があるので、合わせて読んでみてください。


作りたいものが思いつかない人へ

私は元々作りたいものがある人ではありませんでした。なので、「とりあえず触ってみて、何か作ってみて」と言われても、何をすればよいか分かりませんでした。今回たまたま自分が使いたい理想のアプリがない、と気づいて作った貯金管理アプリでしたが、作ってみてひとつ気づいたことがあります。

日常的に使っているものでも、どこかで「こういう機能があれば」「この機能はいらないのに」と考えることはありませんか。それに気づければ、自分が欲しい機能だけに絞ったものを作るチャンスです。例えば、タスク管理、単語帳、レシピ記録なども自分好みのものを作れます。

どうしても思いつかない場合は、今挙げた例のどれかを作ってみてください。1つ作ってみると、Claude Codeについての理解が深まり、次に作りたいものが自然と浮かぶかもしれません。

(個人情報やお金が絡む本格運用をする場合は、情報の取り扱いに十分注意してください。)

Claude Codeを試すなら、最初はこのくらいの範囲がいい

最初は、小さな目標で作り始めるのがおすすめです。

具体的にはこんな範囲から始めるといいです。

  • 自分だけが使う小さなツールを題材にする

  • ログインや外部連携は入れない

  • まずローカルや限定公開で試す

  • 指示は一度に全部出さず、試作 → UI改善 → 公開、と段階を分ける

作りたいものを「機能」ではなく「使う場面」から考えると良いと思います。機能から考えると、「あれも入れたい、これも入れたい」となりがちです。「いつ、何を見たくて使うのか」という場面から考えると、必要な機能が自然と絞れます。

Claude Codeを触ってみると、生成AIそのものの仕組みも気になってきます。AIが外部情報を使って回答する仕組み「RAG」について、図で整理した記事もあるので、興味があれば読んでみてください。


まとめ

触ってみて一番変わったのは、Claude Codeへの印象もそうですが、自分が何を作れるかという感覚でした。

コードを書けなくても、何を作りたいかを言葉にできれば、形にできる範囲は思ったより広いです。生成AIを文章以外に使ったことがない人こそ、まず小さいものを1つ作ってみてください。

生成AIは使っているけれどClaude Codeは自分には関係ないと思っている人でも、Claude Codeを「業務改善や試作の入口」として一度試してみてください。まずは、自分が日常で「ちょっと不便だな」と感じているものを1つ思い浮かべるところから始めてみてください。

著者

名前:minoRi

営業事務でデータ分析を独学で担当した経験や、非エンジニアとして生成AIを日常的に活用していることから、データ・AI領域の情報を発信しています。同じような立場の人に向けた記事を書いています。
Tableau Certified Data Analyst(2025年4月取得)。

この記事をシェアする

minoRi

データをわかりやすく伝えるお手伝いをしています📈
Tableau Certified Data Analyst(2025年4月取得)

ホーム学習ログ

Claude Codeは非エンジニアでも...