ORIHATA LEARNING LAB
学習トップ›UNIT 01

UNIT 01 · LEARN BY BUILDING

Claude Codeを知る。

Claude Codeがどこにあり、普通のチャットAIと何が違うのか。この教材で何を作り、始める前に何が必要かを確かめます。

どこにある?
↓
チャットとの違い
↓
作るものと準備
第1章:基礎と環境準備このUNITは読むだけです(目安15分)。アプリのインストールや申し込みは、まだ行いません。
START · 今回のゴール

使う道具と、作るものの全体像をつかむ。

この教材では、Claude CodeというAIに手伝ってもらいながら、自分のパソコンの中にWebページ(LP)と小さなアプリを作ります。操作を始める前に、どの道具を、何のために使うのかを確かめておきましょう。

今回のゴール

Claude CodeがClaudeアプリの中の「Code」で使えること、チャットAIとの違い、この教材で作る2つのもの、始める前に必要なものを、自分の言葉で説明できる。

なぜ最初に知るの?

道具の役割を知らないまま進むと、「どこに入力するのか」「AIが何を変えたのか」が分からなくなりやすいからです。このUNITの内容は、UNIT 02以降のすべての操作の前提になります。

STEP 01 · どこにある?

Claude Codeの入口は、Claudeアプリの中にある。

「Claude Code」という名前のアプリを別に探す必要はありません。この教材では、パソコンにClaudeアプリ(デスクトップアプリ)を入れ、その中の「Code」に切り替えて使います。

Claudeアプリパソコンに入れるアプリ
Chat相談する・考える

質問への答えや、文章・アイデアを返してもらう使い方。

この教材で使うCodeフォルダの中で作業する

選んだフォルダのファイルを読み、作る・直す作業を手伝ってもらう使い方。

図1 Claudeアプリの中の2つの使い方(ORIHATAによる概念図です。実際の画面ではありません)
画面の見え方は、UNIT 02で実際の画面写真を使って確かめます。公式ドキュメントでは、アプリのサイドバー上部にある「Code」タブと説明されています。日本語で表示したときの名前やボタンの位置は、アプリの版によって変わることがあります。

PowerShellやターミナル(文字だけで操作する画面)は、この教材の必修の手順では使いません。使いたい人向けに、公式のターミナル版の始め方があります。

STEP 02 · チャットとの違い

違いは「できたファイルが、どこに届くか」。

同じ「LPを作って」という頼み方でも、チャットとCodeでは、その後の流れが変わります。下の図で、あなたが手を動かす場所を比べてみてください。

チャットで頼む場合

  1. 頼む「こんなLPを作って」と入力する
  2. 答えが画面に出る文章やコードが表示される
  3. 自分で保存するコピーしてファイルに貼る・置き場所を決める
  4. 自分で開いて確かめる直したいときは、また最初から

Codeで頼む場合

  1. 作業するフォルダを選ぶ例:練習用の lp_learning
  2. 頼む・AIが作業内容を示すどのファイルを作るか、先に説明してもらう
  3. 許可する内容を見て、よければ進めてもらう
  4. フォルダにファイルができる続けて「ここを直して」と頼める
  5. 自分で開いて確かめるAIの「できました」だけで終わらせない

あなたの番の印は、あなたが操作・判断するところです。

図2 チャットとCodeの流れの違い(ORIHATAによる概念図)

チャットでもファイルを作れる場合がありますが、自分のパソコンのフォルダに直接ファイルを置き、そのまま直し続けられるのがCodeの強みです。そのぶん、どのフォルダで作業させるかと何を許可するかが大切になります。

STEP 03 · できることと、自分で決めること

作業はAIに頼める。判断は、あなたが持つ。

プログラミングの経験がなくても、日本語で頼めば、ページの文章や見た目を作ったり、気になる所を直したりする作業を手伝ってもらえます。一方で、何を作るか、何を許可するか、できあがりで良いかは、あなたが決めます。

AIに頼めること(この教材の例)

  • LPのファイルを作る・文章や色を直す
  • スマホで崩れていないか一緒に調べる
  • 入力に合わせて見た目が変わる小さなアプリを作る
  • エラーの意味を、分かる言葉で説明してもらう

あなたが決めること

  • 誰に向けて、何を作るか
  • 作業させるフォルダと、許可するかどうか
  • できあがりを自分で開いて、良いか判断する
  • 公開・送信・削除・支払いをするかどうか
01 · 本人が決める目的と対象誰向けのページにするか、どんな機能を作るか
02 · AIに頼む小さく制作ファイルを作る前に、変更内容を説明してもらう
03 · 本人が確かめる画面と動作「できた」という報告だけで終わらず自分で開いて試す
この教材の合言葉:「説明を聞く → 承認する → AIが作業する → 自分で確かめる」。同じ方法で2回試してもうまくいかないときは、いったん止めて状況を確かめます。許可を求められたときに見るポイントは、UNIT 03で実際の操作と一緒に練習します。
STEP 04 · この教材で作るもの

最後には、LPと、LPを編集するアプリが手元に残る。

題材は、架空のサービス「SNS画像デザイン室」です。1つの題材を使い続けるので、途中で何を作っているか迷いにくくなっています。

成果物 01 · UNIT 04〜09

1枚のLP

サービスを紹介する1枚のWebページ。企画から始めて、最初の画面、説明、スマホ表示へと育てます。

完成見本を見る →
成果物 02 · UNIT 10

簡易LP編集アプリ

サービス名や見出しを入力すると、LPのプレビューが変わり、HTMLとして書き出せる小さなアプリ。

完成見本を見る →
  1. UNIT 01〜03準備と最初の操作
  2. UNIT 04〜06LPを1枚作る
  3. UNIT 07〜09確かめて、安全に直す
  4. UNIT 10LP編集アプリを作る
  5. UNIT 11自分のアイデアへ
図3 学習の道のり(いまは左端の「準備」の段階です)

上の2つの完成見本は、学習用にORIHATAが用意した見本です。Claude Codeで実際に作った結果を、そのまま載せたものではありません。

STEP 05 · 始める前に

用意するもの、かかる費用、注意すること。

パソコン

WindowsまたはMac。スマホだけでは進められません。

インターネット

アプリのダウンロードと、AIとのやり取りに使います。

Claudeのアカウント

メールアドレスなどで作ります。作り方はUNIT 02で説明します。

有料プラン

Claude Codeを使うには、Claudeの有料プランが必要です(下の図)。

0円この教材

閲覧は無料です。教材が課金や申し込みを代行することはありません。

使えないClaudeの無料プラン

チャットは使えますが、Claude Codeは含まれていません。

使えるClaudeの有料プラン

Pro・Maxなど。使える量には上限があり、5時間ごと・週ごとに回復します。

図4 教材とClaudeの費用の関係(2026年11月10日に公式の料金ページで確認)
申し込むかどうかは、あなたが決めます。2026年11月10日時点の公式の料金ページでは、いちばん安いProが月払いで20ドル(年払いは200ドル)です。料金・プラン名・上限の仕組みは変わることがあるため、申し込む前に必ず公式の料金ページを確かめてください。ChatGPTなど、ほかのAIの契約とは別です。

はじめる前の注意

  • 会社や学校のパソコン:アプリを入れてよいか、先に管理している人に確かめてください。
  • 練習は自分のパソコンの中だけ:この教材では、作ったものをインターネットに公開しません。
  • 大切なファイルとは分ける:AIには練習用のフォルダだけを渡します(UNIT 03で作ります)。
  • 画面写真について:この教材の操作画像はWindowsの実際の画面です。Macの手順は公式資料で確認できる範囲で説明し、実機で確かめていない部分はその旨を書きます。

公式資料:デスクトップアプリを始める / 料金プラン。サービスの仕様は変わることがあります(2026年11月10日に確認)。

HELP · つまずいたら

よくある疑問に、先に答えておきます。

「Claude Code」というアプリが見つかりません。

入れるのは「Claude」という名前のアプリです。Claude Codeは、その中の「Code」で使います(STEP 01)。

プログラミングを覚えないと使えませんか?

この教材では、コードを書けることは求めません。かわりに、できあがりを自分で開いて「意図どおりか」を確かめることを大切にします。

無料プランのまま試せますか?

2026年11月10日時点の公式情報では、無料プランにClaude Codeは含まれていません。教材を読むことは無料でできます。

黒い画面(ターミナル)を使う必要はありますか?

この教材の必修の手順では使いません。アプリの画面だけで進めます。

AIが勝手にファイルを消したりしませんか?

変更の前に確認を求める設定を選べます。この教材ではその設定で進め、練習用のフォルダだけを渡します(UNIT 03)。

FINISH · 完了チェック

道具と、作るものと、準備が分かったら完了。

次はUNIT 02へ

パソコンにClaudeアプリを入れてログインし、「Code」の画面を開くところまで進みます。Windowsの実際の画面写真を見ながら、1つずつ操作します。