ORIHATA LEARNING LAB
学習トップ›UNIT 11

UNIT 11 · LEARN BY BUILDING

次は、あなたのアイデアを作ってみよう。

題材を自分で決め、最小の1画面・1機能をClaudeと一緒に作ります。計画を先に見て、作ったあとは自分で試して判断します。

困りごとを選ぶ
↓
計画を見てから作る
↓
試して振り返る
第4章：自分の道具を開発する目安40〜60分。UNIT 10までを経験した状態から進みます。教材最後の必修UNITです。
START · 今回のゴール

教材の見本から、自分のアイデアへ。

ここまでに、LP制作から簡易LP編集アプリまでを経験しました。最後は、見本をなぞる学習から離れ、自分が解決したい小さな困りごとを選んで最初のアプリの1機能を作ります。

今回のゴール

誰の何を助けるかを1枚の企画メモに整理し、Claude Codeと一緒に最小の1画面・1機能を作る。自分で動作確認し、次の改善を1つ決める。

01 · 決める小さな困りごと対象と役立つ場面を明確に
02 · 作る1画面・1機能最初から多機能にしない
03 · 確かめる実物を使う自分の目で判断し、学びを残す

Macをお使いの方へ

この教材の操作手順は、Windowsのパソコンで実際に操作して確かめたものです。Macでは、フォルダの開き方やブラウザ、画面の一部が異なります。Macでの手順は、この教材では確かめていません。公式のデスクトップアプリを始めるもあわせて確認してください。

この UNIT の依頼文は、2026年11月12日に Windows 10 Home のパソコンで実際に送って確かめたものです。この UNIT の確認は、Claudeアプリの Code と同じ Claude Code を、ORIHATAがそのパソコンで画面を出さずに動かして行いました。Claude の返事と、できたファイルは会話の記録から写しています。許可の確認の画面は、この UNIT では写真で確かめていません（出たときの見方は UNIT 05・06 と同じです）。ページの写真は、画面を出さない Microsoft Edge で撮ったページの表示です。

STEP 01 · 何を作るか絞る

副業に役立つものでも、最初は小さく。

「売れるアプリを作る」よりも、「1人の困りごとを1つ解消する」から始めます。まずは個人のPCで動く、小さな試作品を作る練習です。需要や収益はまだ検証していません。

最初は大きすぎる

予約・決済・会員登録が全部あるサービス

個人情報、認証、外部サービスの連携が必要で、初心者が動作を確かめる範囲が広がります。

今回向いている

必要な計算や表示をする小さな道具

例：見積金額計算、投稿タイトル比較、作業時間の記録。入力と結果を自分で確認できます。

今回の範囲：ログイン・外部送信・公開・実際の購入処理・顧客データの登録は行いません。最初の1機能が動いたら合格です。
STEP 02 · 自分の企画メモを作る

5つの質問に答えると、依頼文の土台になる。

以下の入力は、この教材ページ上で文章を組み立てるためのものです。入力しただけでClaude Codeに送信されることはありません。実名・顧客情報・秘密の情報は入力しないでください。

企画メモのプレビュー

入力内容をここへ反映します。

入力が決まったら、STEP 03 の依頼文をコピーします。入力を変えると、依頼文の「アイデアは次のとおりです。」の5行だけが変わります。ほかの行（守ること・変えないもの）は変わりません。

初めの入力（副業見積もり計算ツール）のままの依頼文は、この教材の確認で実際に送った文と一字一句同じです。自分のアイデアに書き換えた文は、この教材では確かめていません。

STEP 03 · 1通目：まず計画だけ

いきなり作らせず、画面の構成と作る場所を見る。

📁 lp_learning/
├─ brief.md　← 変更しない
├─ 📁 lp_sample/　← 変更しない
├─ 📁 lp_editor/　← 変更しない
└─ 📁 idea_app/　← 今回ここに新規作成
　　└─ index.html　← 最初の1画面
  1. ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。
  2. 入力欄の下にlp_learning、右側に「手動」と出ているかを見ます（UNIT 06の写真1と同じ画面です）。
  3. 下の1通目をコピーして貼り、文の先頭が1通目になっているかを見てから送ります。
Codeの新しいセッションの画面。上に lp_learning と「環境を選択」、入力欄に依頼文を貼り付けた状態（まだ送っていない）。入力欄の下の帯に「このコンピューター」と lp_learning、右側に「手動」と表示されている。
写真1　新しいセッションで、入力欄の下に lp_learning、右側に「手動」と出た画面。UNIT 06で撮った写真なので、入力欄に貼ってある文は UNIT 06 の1通目です。UNIT 11でも同じ画面で、貼る文だけが違います。名前・フォルダの場所・会話の履歴は灰色で隠しています。
CODE の入力欄に貼る 1通目：計画を見せてもらう（STEP 02 の入力が入ります）
現在選択している lp_learning フォルダの中に、自分のアイデアの小さなアプリを作る計画を立ててください。

作成するファイルは、lp_learning の中の idea_app フォルダにある index.html の1つだけです。
idea_app フォルダがなければ、あわせて作成してください。

アイデアは次のとおりです。
- 名前：副業見積もり計算ツール
- 使う人：個人で仕事を受ける副業実践者
- 困りごと：作業項目ごとの金額を手計算するのが面倒
- 最初の1つの機能：単価と数量を入力すると合計金額が表示される
- うまくいったと分かる例：単価3000円×数量2で6000円と表示される

守ることは次のとおりです。
- 最初は1画面・1機能だけにする
- HTML・CSS・JavaScript を index.html の1つにまとめる。外部の画像・Webフォント・API・ライブラリ・サーバーは使わない
- 入力した文字は文字として表示し、HTMLやスクリプトとして実行しない
- 画面幅 375px でも、文字やボタンがはみ出さないようにする
- 実績、利用者の声、価格などを創作して載せない

brief.md、start.md、lp_sample と lp_editor の中のファイルは変更しないでください。ほかのファイルは作成・変更・削除しないでください。
コマンドの実行、公開、外部への送信はしないでください。
まず、画面の構成と作成するファイルの場所を示して、私の確認を待ってください。
まだファイルは作成しないでください。
初めの入力のままなら、実機の確認で実際に送った文章と同じです。

Claudeの返事から（この教材の確認のとき・要点を抜き出し）

  • 作る場所：lp_learning の中に idea_app フォルダを新しく作り、index.html の1つだけ
  • 画面の構成：見出し → 作業項目（任意）・単価・数量の入力欄 → 「合計を計算する」ボタン → 結果（例：合計：6,000円）
  • 入力した文字は文字として表示し、HTMLとして実行しない。375px でもはみ出さない1列の作り
  • 空欄・マイナス・数字以外のときは計算せず、案内を出す
  • 確認したい点を2つ質問した（作業項目の欄を残すか、計算はボタンを押したときでよいか）

計画を見るときは、作るのが idea_app の index.html だけで、自分が決めた「うまくいったと分かる例」で確かめられる作りになっているかを見ます。質問されたら、答えてから次へ進んでもかまいません。

STEP 04 · 2通目：1画面・1機能を作る

自分が確認した計画だけを作ってもらう。

CODE の入力欄に貼る 2通目：計画どおりに作ってもらう
提示された計画どおりに、idea_app フォルダの index.html を作成してください。

作成・変更してよいのは、idea_app フォルダと、その中の index.html だけです。

brief.md、start.md、lp_sample と lp_editor の中のファイルは変更しないでください。

コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。
実機の確認で実際に送った文章です。このあと、作る前に許可の確認が出ます。
  1. 許可の確認が出たら、場所が idea_app で、ファイル名が index.html かを見ます。
  2. よければ「一度だけ許可」を押します。lp_sample や lp_editor の中のファイルなら「拒否」を押します。
許可の確認の画面。「入力が必要です」の下に「Claude に index.html の書き込みを許可しますか？」と表示され、書き込み先（フォルダの場所は灰色で隠してある）と、書き込む中身が行番号つきで示されている。下に「拒否」と「一度だけ許可」のボタンがある。
写真2　新しいファイルを作るときの許可の確認（「書き込み」）。UNIT 05で撮った写真なので、ファイル名は index.html、場所は lp_sample です。この UNIT では、ファイル名が index.html、場所が idea_app になっているかを見ます。フォルダの場所は灰色で隠しています。

この教材の確認では、1通目の質問に答えずに2通目を送りました。Claudeは「前回の2つの質問にはお返事がなかったので、提示した計画どおりにしています」と書き、作業項目の欄を残し、ボタンを押したときに計算する作りにしました。作ったのは idea_app フォルダと index.html だけでした。

STEP 05 · 自分の判断で検品

動かして、期待した結果と比べる。

  1. エクスプローラーで lp_learning → idea_app を開き、index を右クリック →「プログラムから開く」→「Microsoft Edge」で開きます（写真3）。
  2. STEP 02 の⑤で決めた例を入れて、期待した結果になるかを見ます（見本なら、単価 3000・数量 2 で「6,000円」）。
  3. 文字の入力欄に <b>テスト</b> と入れて、そのままの文字で出るかを見ます。
  4. F12 → Ctrl ＋ Shift ＋ M → 幅 375 にして、はみ出さないかを見ます。
index を右クリックしたメニュー。「開く」「共有」「プログラムから開く(H)」などが並び、「プログラムから開く」の横の一覧に Microsoft Edge などが表示されている。
写真3　index を右クリック →「プログラムから開く」→「Microsoft Edge」。UNIT 05で撮った写真（lp_sample の index）です。idea_app の index でも同じ操作です。一覧に出るアプリは、パソコンによって違います。
写真4　この教材の確認でできたツール（375pxの幅）。左（スマホでは上）：3000×2 で 6,000円。右（スマホでは下）：HTMLに見える文字が、そのままの文字で出ている。画面を出さない Edge で撮ったページの表示です。

ORIHATAの確認では、3000×2＝6,000円、Enterキーでも計算できること、空欄・マイナス・数字以外では計算せず案内が出ること、小数（1000×1.5＝1,500円）と四捨五入、HTMLに見える文字やスクリプトが実行されないこと、外部の読み込みがないこと、320〜1280pxの8通りの幅で長い入力でもはみ出さないことを、Edge と Chrome で確かめました。

確かめる点

入力できるか。自分が先に決めた結果と同じか。lp_sample と lp_editor のファイルが変わっていないか。

学びを残す

うまく動いた点・分からなかった点・次に直したい点を3行でメモします。メモは自分のノートで十分です。

STEP 06 · 次の改善を1つだけ選ぶ

機能を増やす前に、誰に役立つか確かめる。

動く試作品と、副業として使われるサービスは別です。次の改善は、実際の困りごと・使い勝手・使う人の声をもとに選びます。実績や収益の見込みを勝手に作らないことが重要です。

例：「計算結果をコピーできるようにする」——今ある機能を、もう少し便利にする。
次の開発でも同じ：目的を決める → 対象を確認する → 小さく変更する → 実物で確かめる。
HELP · つまずいたら

うまくいかないときの対処。

計画が大きすぎる（ログイン・保存・送信などが入っている）

2通目を送らずに、「最初は1画面・1機能だけにしてください。」と返信します。

許可の確認の場所が lp_sample や lp_editor になっている

「拒否」を押します。今回作るのは idea_app の中だけです。

結果が、自分の決めた例と違う

見たことと期待したことを分けて伝え、まず原因だけを調べてもらいます。同じ点で2回続けて良くならなければ止めます。

公式資料：デスクトップアプリを始める。サービスの仕様や画面は変わることがあります（2026年11月12日に確認）。

FINISH · 完了チェック

自分の題材でも、1つ作って確かめられたら修了。

チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。

ここからが、あなた自身の個人開発です。

一度に全部作る必要はありません。計画を見る → 許可する → 作る → 自分で確かめるを繰り返し、役立つものへ育てていきましょう。この教材では実際の販売や収益化までは保証しません。