完全なチュートリアル: クロード コードと鉛筆を使用して 16 分で美しいモバイル アプリを構築する

In This Article

購読者の皆様、今日は、ワークアウトを追跡するための美しいモバイル アプリを構築する方法を説明したいと思います。モバイル アプリの構築には、エンジニアのチームが必要でした。しかし、Claude Code や Pencil などの AI ツールを使用すると、コードの書き方がわからなくても、自分で美しいアプリを簡単に出荷できるようになりました。チュートリアルを見て、わずか 16 分でその方法を説明します。タイムスタンプ:(0:00) 構築するもの: ワークアウトを追跡する美しいモバイル アプリ(2:01) ステップ 1: クロードで要件を定義する(6:11) ステップ 2: Pencil でデザインを作成する(8:56)ステップ 3: クロード コードを使用してアプリを構築する(14:21) App Store でアプリを入手する(15:19) 3 つのステップすべての要約YouTube で今すぐ見るか、以下の文書ガイドをお読みください。提携できることを誇りに思います…GranolaGranola は、チームが会議メモを整理し、相互に共有する新しい方法である Spaces を開始しました。たとえば、インタビューで「ユーザー通話」スペースを作成し、誰でもユーザーのニーズについて質問できるようにすることができます。 Granola の新しい API と MCP を使用すると、Claude、ChatGPT、または Gemini で直接質問することもできます。 Granola を無料でお試しください私たちが構築するもの: ワークアウトを追跡するモバイル アプリ私たちは、気に入った既存のモバイル アプリを見つけるよりも、独自のモバイル アプリをバイブコーディングする方が簡単な時代に生きています。それでは、次のことができるアプリを構築しましょう。 エクササイズを選択し、セット数と回数を選択してワークアウトを作成する。各エクササイズ セットをタップして完了することで、ワークアウトをライブで追跡する。各エクササイズのカレンダーとグラフで進捗状況を測定します。以下の 3 つのステップでその構築方法を説明します。1.クロードと一緒に要件を定義します。一緒に要件を定義するときは、常にクロードに質問してもらいます。まず、このプロンプトをクロードに貼り付けてみましょう。モバイル フィットネス アプリの要件について一緒に作業しましょう。 3 つの画面が必要です: ワークアウトの追加/編集: ワークアウトを作成し、セットと回数を含むエクササイズを追加します。ワークアウト セッション: ワークアウトをリアルタイムで追跡し、タップしてセットを完了します。カレンダー: ワークアウトした日を確認し、ワークアウトの詳細を表示します。これは基本ですが、一緒に仕様を検討してみましょう。要件をしっかりと把握し、質問がある場合は、番号付きリストで質問してください。このプロンプトの最も重要な部分は、「質問がある場合は、番号付きリストで質問してください」ということです。クロードと要件について話し合うときは、仕様をより良くするための質問をできるように、常にこの行を含めます。以下にいくつかの質問と回答の例を示します。 クロード: 休憩タイマーが必要ですか?私: はい、設定でカスタマイズさせてください。 クロード: 失敗したセットの後に自動デロードしますか?私: いいえ、シンプルにしましょう。クロードが仕様を満足のいく状態に仕上げたら、「仕様を設計要件と技術要件に分割します。柔軟性の余地があるように、設計要件についてはあまり詳細にしないでください。」と依頼します。 Pencil (AI デザイナー) はクロードよりもデザインが優れているため、最後の行を含めます。 🙂次にそれについて説明しましょう。モデルが改良されるにつれて、プロンプトの入力が怠けてきました (そしてスペルも悪くなりました)2。 Pencil を使用してモバイル画面をデザインするPencil は、要件に基づいて 8 つの美しい画面をゼロから作成しました。ここで魔法が起こります。 AI のスロップではなく、Pencil を使用して美しく細工されたモバイル画面を作成する方法は次のとおりです。 続きを読む

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw