注目初心者チュートリアル Vibe Coding プロジェクトハンズオン

Claude Code で最初のアプリを作る：初心者のための実践ガイド

Claude Code で最初の完全なアプリを作るステップバイステップガイド。アイデアからデプロイまで、プログラミング経験不要で一午後で完成。

2026年1月18日 • 18 分 • 著者：Claude World

アイデアがある。Claude Code がある。そのアイデアを動くアプリに変えましょう。

このガイドでは、ゼロから完全でデプロイ可能なアプリを作る方法を説明します—たとえプログラミング経験がなくても。

作るもの

プロジェクト：個人習慣トラッカー

シンプルで美しいアプリで、以下ができます：

追跡したい習慣を追加
毎日習慣を完了としてマーク
連続日数と進捗を確認
週間概要を表示

所要時間：約2時間

必要なスキル：なし（vibe coding で進めます！）

前提条件

始める前に、以下を用意してください：

Claude Code がインストールされている

# インストールを確認
claude --version

# なければ npm でインストール
npm install -g @anthropic-ai/claude-code

Anthropic API キー（Claude Max サブスクリプションまたは API アクセス）
Node.js がインストールされている（アプリ実行用）
```
# 確認
node --version
```

これだけです。作り始めましょう！

パート1：舞台を整える（5分）

ステップ1：プロジェクトを作成

# 新しいフォルダを作成
mkdir habit-tracker
cd habit-tracker

# Claude Code を起動
claude

ステップ2：ビジョンを説明

Claude への最初のメッセージ：

個人習慣トラッカーアプリを作りたい。

雰囲気：クリーンで、やる気が出て、使って満足感がある。
Streaks や Habitify のようなアプリを想像して—
ミニマルだけど楽しい。

欲しい機能：
- 名前と絵文字で新しい習慣を追加
- 今日の習慣をチェックオフ
- 各習慣の連続日数を確認
- 完了状況を表示する簡単な週間グリッド

React でモダンなスタックを使って。まずローカルで
動くようにして、後でデプロイする。

プロジェクトをセットアップして、スタート地点を見せて。

次に何が起こるか

Claude は：

React プロジェクトを作成（おそらく Vite で）
基本構造をセットアップ
必要な依存関係をインストール
初期コンポーネントを作成
スタート地点を表示

見守って任せましょう。 ✨

パート2：最初のバージョン（20分）

ステップ3：作成されたものを確認

Claude がセットアップした後、聞いてみましょう：

アプリを実行して、今何があるか見せて。

基本的なインターフェースが見えます。荒削りに見えるかもしれません—大丈夫！

ステップ4：改良を始める

ここから vibe coding が始まります。自然にフィードバック：

基本的なレイアウトが見える。いくつか：

1. 習慣リストが窮屈—もっと余白を
2. 「習慣追加」ボタンをもっと目立たせたい
3. 習慣をチェックしたとき、感じたい—
   満足感のあるアニメーションを追加して
4. 色がフラット—もっと生き生きと

まだ機能は変えないで、使用感を良くして。

ステップ5：ビジュアルを磨く

感覚を改良し続ける：

良くなった！次は：

- 背景の白がきつすぎる。
  とても淡いグラデーションで柔らかく。
- 習慣カードに優しい影を
- 習慣が現れるときに素敵なトランジション
- 絵文字をもっと大きく—各習慣の
  ビジュアルアイデンティティだから

プレミアム感を出して。

チェックポイント1 ✅

ここまでで：

実行中のアプリ
見栄えの良い習慣カード
スムーズなアニメーション
心地よい配色

スクリーンショットを撮りましょう！ 最初のマイルストーンです。

パート3：コア機能（30分）

ステップ6：習慣追加を動くように

習慣追加フローを動くようにしよう。

追加ボタンをクリックしたとき：
1. シンプルなモーダルを表示（新しいページではなく）
2. 簡単なグリッドから絵文字を選ばせて
3. 習慣名を入力させて
4. Enter か保存クリックで保存

インタラクションは最小限で速く。

ステップ7：チェックを満足感あるものに

習慣をタップして完了にするとき：

1. チェックボックスがきれいにアニメーション（パッと変わるだけでなく）
2. 微妙なバウンスかパルス
3. その日最初の完了なら小さな紙吹雪？
4. 習慣カードが視覚的に完了を反映
  （淡い緑のティントやチェックマークオーバーレイ）

チェックしたとき達成感を感じたい。

ステップ8：連続日数を追加

各習慣に連続日数カウントを追加。

各習慣名の下に連続日数を表示（「🔥 7日」のように）。

連続日数は：
- 連続完了日数をカウント
- 1日逃したらリセット
- マイルストーンで異なる表示
 （7、30、100日で特別な色？）

連続日数を達成感として感じさせて。

ステップ9：データ永続化を追加

今はリフレッシュするとデータが消える。
これを修正。

すべてを localStorage に保存して永続化。
ブラウザを閉じて戻っても、習慣と進捗が
残っているようにして。

チェックポイント2 ✅

これで：

動く習慣作成
満足感のあるチェック体験
連続日数トラッキング
永続化されるデータ

テストしよう！ 実際に追跡したい習慣を追加して。

パート4：週間ビュー（20分）

ステップ10：週間グリッドを追加

週間概要セクションを追加。

グリッドを表示：
- 行は習慣
- 列は今週の7日
- 各セルはその日その習慣を完了したか表示
- 今日はハイライト

一目でパターンが見えるように。

ステップ11：週間ビューを磨く

週間ビューは機能するけど改良が必要：

1. チェックマークではなくドットか丸（よりクリーン）
2. 完了した日は塗りつぶした丸
3. 未来の日は薄く
4. 曜日名を表示（月、火など）
5. ビューがロードされるとき微妙なアニメーション

スプレッドシートではなく、ビジュアルサマリーに見えるように。

ステップ12：ナビゲーションを追加

今日ビューと週間ビューを切り替える方法が必要。

上部にシンプルなタブかトグルを追加：
- 「今日」—チェック用の習慣リスト表示
- 「週間」—週間グリッド表示

ビュー間のトランジションをスムーズに。

チェックポイント3 ✅

これで：

トラッキング用の日次ビュー
概要用の週間ビュー
両者間のスムーズなナビゲーション
完全な習慣トラッキングアプリ！

パート5：最終仕上げ（15分）

ステップ13：空状態を追加

まだ習慣がないときどうなる？

素敵な空状態を追加：
- フレンドリーなメッセージ
- 最初の習慣を追加する明確なコールトゥアクション
- 壊れているのではなく、意図的に見える

最初の体験は歓迎されていると感じるべき。

ステップ14：モバイルファーストのクリーンアップ

モバイル（スマホサイズの画面）でどう見えるか確認。

確認すること：
- タッチターゲットが十分大きい
- テキストが読める
- はみ出しがない
- 使用感がネイティブ

これは主にモバイルアプリ、
デスクトップは二次的。

ステップ15：素敵なヘッダーを追加

シンプルなヘッダーを追加：
- アプリ名（「Habits」や「Daily」など）
- 今日の日付をフレンドリーなフォーマットで
- 毎日変わる小さなモチベーションメッセージ

控えめに—習慣が主役。

ステップ16：最終調整

最後の改良：

1. 習慣チェック時に触覚フィードバックのような
   アニメーション
2. 全体の色を少し暖かく
3. すべてがアクセシブルか確認（良いコントラスト）
4. トランジションに微妙なローディング状態

もう一度すべてテスト。

パート6：デプロイ（20分）

ステップ17：デプロイの準備

これをデプロイして、スマホで使えるようにしよう。

まず、ビルドが動くか確認：
- プロダクションビルドを実行
- ローカルでプロダクション版をテスト
- すべてまだ動くか確認

それから Vercel にデプロイ。

ステップ18：Vercel にデプロイ

これを Vercel にデプロイして。

ガイドして：
1. 作成が必要なアカウント
2. 実行する正確なコマンド
3. 公開 URL の取得方法

どのデバイスからもアクセスできるようにしたい。

ステップ19：実機でテスト

スマホで URL を開く。すべてテスト：

習慣の追加
チェックオフ
週間ビュー
データが永続化されるか

おめでとうございます！ 🎉 最初のアプリを作ってデプロイしました！

よくある問題と解決策

「アプリが起動しない」

アプリが動いていない。エラーを見せて、
修正しよう。

「何か壊れて見える」

[具体的なもの] がおかしい。原因を見せて
修正して。

「この部分が気に入らない」

[具体的なもの] の動き/見た目が気に入らない。
違うものを試そう。[好みを説明]

「新機能を追加したい」

新機能のアイデアがある：[説明]。
実現可能？可能なら追加しよう。

学んだこと

このプロジェクトを通じて、体験したこと：

Vibe Coding - 作り方ではなく、欲しいものを説明
反復開発 - 荒削りから磨き上げまでレイヤーごとに構築
フィードバックループ - レビュー、フィードバック、改善
実際のデプロイ - アプリをインターネット上で公開

次のステップ

1つアプリを作ったので、次は：

このアプリを強化

通知を追加
習慣のカテゴリ/タグを追加
統計とインサイトを追加
ダークモードを追加

新しいものを作る

次のプロジェクトのアイデア：

個人ジャーナル - プロンプト付きの毎日の執筆
支出トラッカー - 支出の記録と分類
レシピボックス - レシピの保存と整理
読書リスト - 読む本とメモの追跡

より深く

Claude が書いたコードを理解する
React の基礎を学ぶ
より複雑なアプリ用にデータベースを探求
ユーザーアカウント用に認証を学ぶ

次のプロジェクトへのヒント

感覚から始める

良い：「美しいノートに書くような
      感覚のメモアプリが欲しい」

あまり良くない：「SQL データベースを持つ
               メモ CRUD アプリが必要」

問題を具体的に

良い：「ボタンがモバイルで小さく感じる」

あまり良くない：「ダメ」

休憩を取る

うまくいかないときは、離れる。リフレッシュして戻る。

進捗を保存

今まで何を作ったか、現在の状態を
まとめてくれる？続ける前に保存したい。

質問する

[もの] が何をするか分からない。
簡単に説明してくれる？

最初のアプリチェックリスト

次のプロジェクトを始める前に、確認：

完了

動く習慣トラッカーを作った
見た目も使用感も良くした
インターネットにデプロイした
実際のスマホで使った

理解した

欲しいものの説明方法
作られたものへのフィードバック方法
より良い結果への反復方法
アプリのデプロイ方法

次の準備ができた

次のアプリのアイデアがある
新しいプロジェクトを始める自信がある
困ったときどこで助けを得るか知っている

最後に

アプリを作るには以前は何年もの学習が必要でした。AI の支援で、一午後で本物のアプリを作ってデプロイしました。

これは始まりに過ぎません。作るすべてのアプリがより多くを教えてくれます。すべてのプロジェクトが前より速くなります。

あなたは「AI を使ってコードを書いている」のではありません—ソフトウェアを創造しているのです。AI はあなたのアクセラレーター、しかしビジョンはあなたのもの。

さあ、何かを作りに行きましょう。🚀