バイブコーディング URL 読み方｜非エンジニアでも分かるURLの見方と仕組み

冒頭

従業員20人の会計事務所で、バイブコーディングを使って顧問先管理ツールを作った方がいる。アプリは動いた。ところが「顧問先の一覧ページが表示されない」とAIに伝えたとき、AIから「どのURLでエラーが出ていますか？」と聞き返された。画面の上に表示されているアドレスバーの文字列を見ても、何がどう対応しているのか分からない。

12人の広告代理店で案件管理ツールを自作した方も、同じ壁にぶつかった。ページを追加したいが、AIに「/projects/newという画面を作って」と言われても、この /projects/new が何を意味しているのか分からない。

URLとは、インターネット上の住所のようなものだ。あなたがバイブコーディングで作るアプリにも、画面ごとにURLが付く。この仕組みを知っていると、AIへの指示が格段に的確になる。「トップページの次に顧問先一覧を表示して」ではなく「/clients に一覧ページを作って」と伝えられるようになる。

この記事では、URLを5つのパーツに分解して、それぞれの意味を非エンジニアの方にも分かるように解説する。記事の最後に、URLの読み方チートシート（早見表）PDFを無料でダウンロードできる。

URLとは何か — アプリの「住所」

💡URLはアプリの住所

URLは Uniform Resource Locator の略で、インターネット上の「住所」にあたるものだ。ブラウザ（ChromeやSafariなど）の画面上部にあるアドレスバーに表示されている文字列がURLだ。

実世界の住所が「東京都 → 渋谷区 → 神宮前 → 1-2-3」と階層になっているように、URLも左から右へ階層的に詳しくなっていく。

例えば、あなたがバイブコーディングで顧問先管理ツールを作ったとする。このツールのURLは次のような構造になる。

https://myapp.com/clients/123/reports

この1行の中に、5つのパーツが詰まっている。順番に見ていく。

URLの5つのパーツ

パーツ1: プロトコル（https://）

URLの先頭にある https:// は、通信の方式を表している。プロトコルとは「通信のルール」のことだ。

https の s は secure（安全）の略で、あなたのブラウザとアプリの間でやり取りされるデータが暗号化されていることを意味する。2026年現在、ほぼすべてのWebサイトやアプリが https を使っている。

バイブコーディングでアプリを作るとき、このパーツは自動で設定されるので、あなたが気にする必要はほぼない。ただし、アドレスバーに http://（sなし）と表示されている場合は、通信が暗号化されていない状態なので注意が必要だ。

パーツ2: ドメイン（myapp.com）

ドメインは、アプリの「建物の名前」にあたる。実世界で言えば「渋谷パークタワー」のような固有名詞だ。

  • google.com → Googleのサービス
  • amazon.co.jp → Amazonの日本向けサイト
  • myapp.com → あなたが作ったアプリ

バイブコーディングで作ったアプリを開発中に動かすときは、localhost:3000 というドメインになることが多い。localhost（ローカルホスト）とは「自分のパソコンの中」という意味で、3000は接続口の番号だ。開発中はインターネットに公開されていないので、あなたのパソコンからだけアクセスできる。

アプリを公開するとき、このドメインを自分で選んで設定する。AIに「このアプリを公開して」と頼めば、公開用のドメインを自動で取得してくれるサービス（VercelやNetlifyなど）を使って設定してくれる。

パーツ3: パス（/clients/123/reports）

パスは、アプリの中の「部屋番号」にあたる。URLの中で最も重要なパーツで、バイブコーディングで最もよく触れる部分だ。

/clients/123/reports というパスは、スラッシュ（/）で区切られた3つの階層になっている。

  • /clients → 顧問先に関するページ群
  • /clients/123 → 顧問先一覧の中の、ID番号が123の顧問先
  • /clients/123/reports → その顧問先のレポート一覧

実世界の住所に例えると、こうなる。

  • /clients → 3階（顧問先フロア）
  • /clients/123 → 3階の123号室
  • /clients/123/reports → 123号室の書棚

バイブコーディングでAIに指示を出すとき、このパスの概念を知っていると格段にスムーズになる。例えば次のように伝えられる。

  • 「/clients に顧問先の一覧ページを作って」
  • 「/clients/new に新規登録フォームを作って」
  • 「/clients/123 をクリックしたら、その顧問先の詳細が表示されるようにして」

パーツ4: クエリパラメータ（?sort=name&page=2）

URLの中に ? が出てきたら、それ以降はクエリパラメータだ。日本語では「検索条件」や「絞り込み条件」と訳せる。

https://myapp.com/clients?sort=name&page=2

このURLは「顧問先一覧を名前順に並べ替えて、2ページ目を表示する」という意味になる。

  • sort=name → 名前順で並べ替え
  • page=2 → 2ページ目
  • & → 条件をつなぐ記号

検索サイトで何かを検索したあと、アドレスバーを見ると ?q=検索ワード のような文字列が表示されているのを見たことがあるかもしれない。これがクエリパラメータだ。

バイブコーディングでAIに「一覧ページに並べ替え機能を付けて」と伝えると、AIが自動的にクエリパラメータを使った仕組みを作ってくれる。あなたが直接クエリパラメータを書く必要はないが、URLを見たときに「あ、これは絞り込み条件が入っているな」と分かるようになると便利だ。

パーツ5: フラグメント（#section-3）

URLの末尾に # が付いていることがある。これはフラグメント（またはアンカー）と呼ばれ、ページの中の特定の場所を指す目印だ。

https://myapp.com/guide#step-3

このURLは「ガイドページのステップ3の位置に直接ジャンプする」という意味だ。ページ全体を読み込んだうえで、#step-3 の位置まで自動でスクロールしてくれる。

長いページの中で特定の場所に飛ばしたいときに使う。目次からクリックすると該当箇所にジャンプする機能は、このフラグメントで実現されている。

5つのパーツを一覧で整理する

📊URLの5つのパーツ

全体を1つのURLで見ると、こうなる。

https://myapp.com/clients/123/reports?sort=date&page=1#latest

左から右に向かって、大きなカテゴリから細かい場所へと絞り込まれていく構造だ。

バイブコーディングでURLの知識が役立つ3つの場面

🔄URLの知識が活きる場面

場面1: AIへの指示が的確になる

バイブコーディングでは、AIにどの画面をどう変えてほしいかを伝える。このとき、URLのパスを使って指示すると、AIが迷わずに正しい画面を特定できる。

伝え方の例:

  • 「/dashboard のトップに今月の売上グラフを追加して」
  • 「/clients/new の入力フォームに電話番号の欄を追加して」
  • 「/reports にアクセスしたとき、最新のレポートが一番上に来るようにして」

「トップページ」「一覧のところ」「あの入力画面」よりも、パスで指定するほうが確実に伝わる。

場面2: エラー対応が速くなる

アプリを使っていてエラーが出たとき、アドレスバーのURLをAIに伝えるだけで、問題の場所を特定してもらえる。

「/clients/456 を開くとエラーになる。/clients/123 は正常に表示される」

このように伝えると、AIは「ID456の顧問先のデータに問題があるのでは」と推測して、原因を調べてくれる。URLを伝えなければ、AIは「どのページでエラーが出ているのか」を聞き返すことになり、やり取りが1往復増える。

場面3: アプリの全体構造を把握できる

バイブコーディングで作ったアプリのパス一覧を見れば、アプリにどんな画面があるか一目で分かる。

例えば、案件管理ツールなら:

  • / → トップページ（ダッシュボード）
  • /projects → 案件一覧
  • /projects/new → 新規案件登録
  • /projects/123 → 案件の詳細
  • /projects/123/tasks → その案件のタスク一覧
  • /settings → 設定

このパス一覧は、いわばアプリのフロアマップだ。新しい機能を追加するとき「/projects/123/invoices という請求書ページを追加して」のように、既存の構造に沿った指示ができるようになる。

よくある不安と答え

URLを間違えて入力したらアプリが壊れるのか

壊れない。存在しないURLにアクセスすると「ページが見つかりません」（404エラー）という画面が表示されるだけだ。間違ったURLを入力してアプリのデータが消えたり、設定が変わったりすることはない。安心して試してほしい。

URLの英語が分からなくても大丈夫か

パスに使う英単語は、clients（顧客）、reports（レポート）、settings（設定）など、基本的なものばかりだ。バイブコーディングでAIに「顧問先管理ページを作って」と伝えれば、AIが適切な英単語を選んでパスを設定してくれる。あなたが英単語を考える必要はない。

開発中のURLと公開後のURLは違うのか

違う。開発中は localhost:3000/clients のように表示されるが、公開後は myapp.com/clients のように、あなたが設定したドメインに変わる。パスの部分（/clients）は変わらないので、使い方や画面の構造はそのまま引き継がれる。

まとめ

URLは「プロトコル → ドメイン → パス → クエリパラメータ → フラグメント」の5つのパーツで構成されている。バイブコーディングで最も使うのはパスの部分だ。/clients、/reports、/settings のように、パスを使ってAIに指示すれば、的確に伝わり、やり取りの回数が減る。まずは自分が作ったアプリのアドレスバーを見て、パスの部分を読み取ることから始めてみてほしい。

🎁 特典

URLの5つのパーツと、バイブコーディングでよく使うパスの一覧をまとめたチートシート（早見表）をPDFにまとめた。アプリを作るとき、手元に置いておくと便利だ。

→ URL読み方チートシートPDF を無料ダウンロード /resources

📚 参考リファレンス