Won. Studio

🐳 実践 01Orca 使い方 完全ガイド

インストールから、2つの AI、ブラウザで見た目を直す、ワークツリーで同時に進める、スマホから操作するまで。これ1本で、ひと通り使えるようになります。

今回の流れ

  • Orca をインストール — 公式サイトからダウンロードして Applications へ
  • 初期設定 — 4つの質問に答えて、プロジェクトを作る
  • 画面の見方 — 左のメニューと右のファイル一覧
  • Claude Code と Codex を並べて使う — 画面を左右に分けて、同時にお願いする
  • ブラウザで見た目を直す — 崩れている所を指さして、日本語で直してもらう
  • ワークツリーで3つ同時に — 1つのプロジェクトの作業を、別々の AI に同時に頼む
  • Orca モバイル — スマホとペアリングして、外出先から操作する

始める前に用意するもの

  • Mac — macOS 11 以降
    Apple シリコン / Intel
  • AI — Claude Code と Codex を
    インストール・ログイン済み
  • スマホ(任意) — iPhone / Android
    Orca モバイルを使う場合

Orca 自体は無料。Claude Code・Codex の利用にはそれぞれの有料プランが必要です。各編の動画もあわせて見てください。


PART 1 Orca をインストールする

Orca は、Claude Code や Codex などの AI を1つの画面にまとめて使えるアプリです(無料)

公式サイトで「Download for Mac」

Windows のパソコンなら「Download for Windows」。Intel の Mac はボタンの下の「Intel」を選びます

公式サイトで「Download for Mac」

ブラウザ(Safari・Chrome・Edge どれでもOK)のアドレス欄に onorca.dev と入力して開き、「Download for Mac」をクリック

ダウンロードを「許可」(Safari の場合)

ダウンロードを「許可」(Safari の場合)

Safari は「onorca.dev でのダウンロードを許可しますか?」と聞かれるので「許可」。Chrome・Edge ではこの確認は出ずに、そのままダウンロードが始まります

ダウンロードしたファイルを開く

どのブラウザでも、Finder の「ダウンロード」フォルダにある同じファイルをダブルクリックして開けます

ダウンロードしたファイルを開く

右上のダウンロードのアイコンから「orca-macos-arm64.dmg」を開きます(Safari はダブルクリック、Chrome・Edge はクリック)

Orca を Applications へドラッグ

Orca を Applications へドラッグ

左の Orca のアイコンを、右の Applications フォルダの上までドラッグして離します。これでインストール完了です

アプリケーションから Orca を起動

アプリケーションから Orca を起動

Finder の「アプリケーション」にある Orca をダブルクリックします

確認が出たら「開く」

確認が出たら「開く」

「インターネットからダウンロードされたアプリケーションです」は、初めて開くときだけ出ます。「開く」をクリック


PART 2 Orca の初期設定

4つの質問に答えて、作業用のフォルダ(プロジェクト)を作ります

①よく使う AI を選ぶ

Yolo をオンにすると、AI がファイルの削除などを確認なしで実行します。慣れるまではオフが安全です

①よく使う AI を選ぶ

Claude と Codex が自動で見つかります。下の「Yolo / 危険:権限チェックをスキップ」はチェックを外す →「続行」

②画面の色(テーマ)

②画面の色(テーマ)

「システム」のままで OK →「続行」

③GitHub との連携

③GitHub との連携

GitHub を使う人だけ設定します。使わなければそのまま「続行」

④通知を「許可」

④通知を「許可」

右上の Orca の通知の「オプション」→「許可」。AI の作業が終わったときに知らせてくれます

「最初のプロジェクトを追加」

通知が「有効です」になったら、右下のボタンをクリックします

「最初のプロジェクトを追加」

「新規プロジェクトを作成する」

「新規プロジェクトを作成する」

新しい作業用フォルダを作ります(すでにあるフォルダを使うなら「フォルダーを参照」)

名前を入れて「プロジェクトの作成」

名前を入れて「プロジェクトの作成」

名前は半角の英数字で(例:orca-demo)。フォルダは ~/orca/projects/ の中に自動で作られます

準備完了

==準備完了==

左:プロジェクトの一覧 / 真ん中:ターミナル / 右:ファイルの一覧。案内の小さな画面は「×」や「後で」で閉じてOK


PART 3 Orca の画面の見方

左・真ん中・右。この3つだけ覚えれば迷いません

画面は3つに分かれている

画面は3つに分かれている

左:メニューとプロジェクト / 真ん中:ターミナル(AI と話す場所)/ 右:ファイルの一覧

左サイド:メニューとプロジェクト

AI が作業中は緑の点が付きます。左を見れば、どの AI が動いていて、どれが終わったか分かります

左サイド:メニューとプロジェクト

上の4つは Orca の機能です(検索=過去のやりとりを探す、タスク=AI への依頼の一覧、自動化=決まった作業を自動で実行、Orca モバイル=スマホとつなぐ)。下の「プロジェクト」には作業フォルダと、その中で動いている AI が並びます

右サイド:ファイルの一覧

上のアイコンで「ファイル」「変更点」などに切り替えられます。左上・右上の四角いボタンで、左右のサイドを閉じたり開いたりできます

右サイド:ファイルの一覧

いま開いているプロジェクトのファイルが並びます。AI が作ったファイル(hello.html など)もここに出てくるので、AI の作業結果はここで確認します

左:どこで作業するかを選ぶ

画面は3つに分かれています。まず左から見ていきます

左:どこで作業するかを選ぶ

上のメニューは Orca 全体の機能です。タスク=AI に頼んだ作業の一覧、自動化=決まった作業の自動実行、Orca モバイル=スマホとつなぐ(PART 4 で使います)。下の「プロジェクト」が作業フォルダの一覧で、プロジェクト名の下の「main」をクリックすると、その作業部屋が真ん中に開きます

右:AI が何を作ったかを見る

真ん中がターミナル(AI と話す場所)、右がその結果を確かめる場所です

右:AI が何を作ったかを見る

いま開いているプロジェクト(orca-demo)の中身が出ます。AI がファイルを作ったり直したりすると、ここに増えていきます。「名前 / 内容」でファイル名からでも中身からでも探せます。上のアイコンで表示を切り替えられます(左端がファイル一覧)


PART 4 Claude Code と Codex を1つの画面で使う

左に Claude Code、右に Codex。2つの AI に同時に作業をお願いできます

タブの「+」→「Claude」

Claude Code・Codex は事前にインストールとログインを済ませておきます(Claude Code 編・Codex 編を参照)

タブの「+」→「Claude」

メニューに Claude と Codex が並んでいます。まず「Claude」をクリックすると Claude Code が起動します

フォルダを信頼するか聞かれたら

フォルダを信頼するか聞かれたら

↓キーで「Yes, I trust this folder」に合わせて Enter。Orca で作ったプロジェクトなので安心です

右クリック →「ターミナルを右に分割」

右クリック →「ターミナルを右に分割」

Claude Code の画面の上で右クリックし、メニューの「ターミナルを右に分割」を選びます(⌘D でも同じ)

右側で codex と入力して Enter

右側で codex と入力して Enter

Codex が起動します。フォルダの確認は「1. Yes, continue」のまま Enter

1つの画面に2つの AI

==1つの画面に2つの AI==

左が Claude Code、右が Codex。それぞれの入力欄にお願いを書いて Enter

同時にお願いできる

同時にお願いできる

左の Claude Code が作業している間に、右の Codex にも別のお願いを送れます。待たずに並行して進みます

結果は右のファイル一覧で確認

結果は右のファイル一覧で確認

Claude Code が作った hello.html と、Codex が作った about.md が並びました。左の一覧には、どの AI が完了したかが表示されます


PART 5 ブラウザで見た目を直す(フィードバック)

Orca にはブラウザが入っています。「フィードバック」を使うと、崩れている所を指さして日本語で書くだけで、動いている Claude に直してもらえます

…メニュー →「ビューポートのサイズ」

ビューポートのサイズ

右上の … から「ビューポートのサイズ」→ Mobile M を選ぶと、スマホの幅で表示できます

直したい所をクリックして、日本語で書く

直したい所をクリックして書く

吹き出しのアイコンを押してから、崩れている所をクリック。「スマホで見出しが切れてる」のように、そのまま日本語で書いて「追加」

「送信」→ 動いている Claude へ

送信

ためた指示を、動いている Claude にまとめて送ります。選んだ場所の HTML とスタイルも一緒に届くので、場所の説明はいりません

スマホの幅で直った

直る前と後

見出しは2行に折り返し、メニューもボタンも画面に収まりました。くわしい手順は「スマホで崩れたページを「指さすだけ」で直す」で


PART 6 ワークツリーで3つの作業を同時に

ワークツリーは、1つのプロジェクトの中に「作業ごとの別の部屋」を作る機能です。部屋ごとに別の Claude が動くので、同時に頼んでもお互いのファイルを壊しません

つまずきポイント:Git で管理していないフォルダでは使えない

Git リポジトリではありません

「このフォルダーは Git リポジトリではありません」と出たら、ワークツリーは使えません。いったん「キャンセル」

ターミナルで1行打つ(最初の1回だけ)

git init

cd ~/komorebi && git init && git add -A && git commit -m "first" と打って Enter。これでフォルダが Git で管理されます

もう一度追加すると、プロジェクトになる

プロジェクトとして追加

左に komorebi と「main(プライマリ)」が出ました。main が元の作業場所です

プロジェクトの「+」→ 名前 → 作成

ワークツリーを作成する

名前(例:menu)を入れて、使う AI(Agent)を選んで「ワークツリーを作成する」。作るとその部屋で Claude が自動で起動します。フォルダを信頼するか聞かれたら「Yes, I trust this folder」

それぞれの Claude に日本語で頼む

メニューのページを作って

menu には「メニューのページを作って。終わったらコミットして」。同じように access には「アクセスのページを作って」、dark には「ダークモードの切り替えボタンをつけて」と頼みます

別々の部屋で同時に進む

サイドバーに3つのワークツリー

左のサイドバーに3つのワークツリーが並び、作業中・完了がひと目でわかります。終わったものには完了のしるしと、やったことの要約が出ます

最後に main の Claude に「全部まとめて」

全部メインにまとめて

Orca には main に取り込むボタンはありません(PR を作るには GitHub が必要)。main の Claude に「三つのワークツリーの変更を、全部メインにまとめて」と頼みます

ぶつかった所も Claude がまとめてくれた

マージの結果

3つとも同じナビの部分を書き換えていたので、ぶつかった所がありました。Claude が両方を残してまとめてくれています

ブラウザで確かめる

ダークモード

右上の月のボタンでダークモードに切り替わります。メニューのページ(menu.html)とアクセスのページ(access.html)もできています

アクセスのページ

終わったワークツリーは右クリック →「削除」

ワークツリーの削除

作ったページは main に残っているので、ワークツリーは片付けて大丈夫です。まだコミットしていない変更があると、削除の前に警告が出ます


PART 7 Orca モバイルで iPhone から操作する

実際に iPhone をつないだ画面で進めます。外出先でも、AI の様子を見て続きを頼めます(Android も同じ手順)

左の「Orca モバイル」→「始めましょう」

左の「Orca モバイル」→「始めましょう」

Mac の Orca で、左のメニューの「Orca モバイル」を開き、「始めましょう」をクリックします

ステップ1:スマホにアプリを入れる

ステップ1:スマホにアプリを入れる

iPhone は App Store、Android は Google Play から Orca を入れます。画面の QR をスマホのカメラで読み取るとアプリのページが開きます。入れたら「Continue」

ステップ2:つなぎ方は「LAN」

まずは LAN が簡単です。「ネットワーク」に Mac の IP アドレスが出ていれば準備OK

ステップ2:つなぎ方は「LAN」

LAN:Mac とスマホが同じ Wi-Fi にいるときだけつながる(アカウント不要)
Orca Relay:外出先のモバイル回線でもつながる(Orca アカウントでサインインが必要)

iPhone で「Pair Desktop」をタップ

iPhone で「Pair Desktop」をタップ

iPhone に入れた Orca アプリを開くと「Connect your desktop」と出ます。「Pair Desktop」をタップします

Mac に出た QR コードをカメラで読み取る

QR コードは自分の Mac につなぐための合言葉。人に見せたり SNS に載せたりしない(資料ではぼかしています)

Mac に出た QR コードをカメラで読み取る

iPhone のカメラが開くので、Mac の画面の QR コードに向けます。ふつうはこれだけでペアリングが終わります

カメラが使えないときはコードを貼り付ける

カメラが使えないときはコードを貼り付ける

Mac 側の「ペアリングコードをコピーする」でコードをコピーし、iPhone の「Or paste pairing code」に貼り付けて「Save」。今回は画面を録画していてカメラが使えないため、この方法で進めました

つながった

==つながった==

iPhone に Mac のプロジェクト「orca-demo」と、その中の「main」が表示されます

「main」をタップ

「main」をタップ

Mac で動いている Claude Code や Codex の画面が、そのまま iPhone に開きます

上のタブで画面を切り替える

上のタブで画面を切り替える

Mac と同じタブが並びます。Claude Code のタブに切り替えると、Mac で頼んだ作業の結果が iPhone でも読めます

iPhone から続きをお願いする

iPhone から続きをお願いする

下の入力欄に「hello.html の文字を青色にして」と入れて送信。Mac の Claude Code が実行し、結果が iPhone に返ってきます

Mac と iPhone で同じ画面

どちらの画面も中身は同じ。Mac に戻って続けても、iPhone で続けても構いません

==Mac と iPhone で同じ画面==

左が Mac、右が iPhone。iPhone から頼んだ「文字を青色に」が、Mac の Claude Code にもそのまま反映されています

Mac で続けるときは「このターミナルを取り戻す」

※ Mac の Orca を閉じるとつながりません。外出先から使うときは Mac の Orca を開いたままにします

Mac で続けるときは「このターミナルを取り戻す」

スマホで操作している間、Mac 側には「スマホが操作中です」と出ます。Mac で続けるときはこのボタンをクリックします

つまずきやすいところ

  • ワークツリーが使えない — フォルダが Git で管理されていない。ターミナルで git init を1回
  • フィードバックを送ったら Claude が終了した — 初めてのフォルダでは、先に Claude を起動して「Yes, I trust this folder」を選んでおく
  • ペアリングコードが作れない — Orca を一度終了して、開き直す

1つの画面で、

いくつもの AI を同時に。

タブの「+」で起動して並べる。崩れは指さして直す。プロジェクトの「+」でワークツリーを作って同時に進め、最後は main にまとめる。スマホとつなげば外出先からも続きを頼める。