動画で見て、図で試す。ホームページとAIの最初の一歩

サーバーって?から、
はじめよう。

架空の「こもれびサロン」の料金変更をたどりながら、
7つの言葉と、その役割をつかみましょう。

全10場面読む・試す目安 15分7分29秒の動画付き登録なしで学べます読む・試す教材
会話の動画からはじめる

今回の小さな更新

5,500円
6,000円
こもれびサロン · 基本コース
説明用の架空の料金です

はじめに · 7分29秒の掛け合い動画

会話を聞きながら、仕組みをつかもう。

「お店の料金を変えたい」から、サーバー・ドメイン、AIとのつながりへ。
イラストと2人の会話で、一つずつ見ていきます。

架空の人物・サロンを使った説明です。WordPress・EmDash・静的HTMLの、編集元を確かめるところから学べます。スマホでは全画面表示も使えます。

図と選択問題で試してみる ↓続きの無料動画3本へ →
会話を文字で読む

名前を押すと、その発言の位置へ移動します。字幕は動画にも表示しています。字幕ファイル(VTT)

  1. こもれびサロンの基本コース、5,500円から6,000円に変えたいんだけど。数字ひとつなのに、どこを触るのか分からなくなった。
  2. この料金ページからたどろうか。パソコンを閉じても、お客さんはこのページを見られるよね。
  3. 見られる。私のパソコンにだけ入ってるわけじゃないんだ。閉店したあとも見てもらえるものね。
  4. ページのデータを保管し、求められた内容を届けるのがサーバー。コンピューターや、その上で動くソフトウェアを指すよ。
  5. 置き場所と、届ける係なんだ。私の画面の数字をなぞっても、お客さんに届く料金は変わらないのね。
  6. うん。公開する中身の編集元を見つけよう。上にあるexample.comは、その置き場所そのものではないよ。
  7. あ、それもサーバーかと思ってた。お客さんに案内する名前のほうは何て呼ぶの?
  8. ドメイン。アクセス先を指定する名前だね。名前から接続先を調べて、サーバーからページを受け取る。名前と中身は別の役割なんだ。
  9. 料金だけ変えるなら、ドメインを取り直すか、ページの内容を直すか。ちょっと二つを見比べてみよう。
  10. ……内容のほう。同じ名前で来てほしいし、変えたいのは基本コースの金額だけだから。
  11. なら、今の名前を使おう。中身をどこで編集するかは、サイトの仕組みによって違う。
  12. 見た目が似ていれば、同じ画面で直せると思ってた。作った人に、何でできているか聞いてみるね。
  13. WordPressやEmDashのように内容を管理する仕組みもあれば、静的HTMLのファイルを編集して公開する構成もある。同じ手順とは限らない。
  14. それなら、うちの編集元と公開先をメモしたい。料金ページが見えているだけでは、まだ分からないんだ。
  15. 編集元は直すデータがある場所、公開先はお客さんに届く側だね。管理画面や契約情報を、管理している人と確かめよう。不明と書いて、進む条件にする。
  16. 不明のまま押さなくていいのは助かる。今日は接続せず、この架空のページで考えるんだよね。
  17. うん、図とサンプルだけ。触る前の地図だね。次は、誰がその編集をするかかな。
  18. そこ。AIに6,000円にしてって伝えれば、画面の向こうまで直してくれるのかと思ってた。
  19. 依頼に沿って手順を考え、使える道具で作業を進めるのがAIエージェント。でも、道具や権限がなければ直接サイトは直せない。
  20. 文章を相談できることと、ページを変更できることは別なんだ。何が使える状態か、先に知りたい。
  21. 道具、実行できる範囲、確認や記録を支える周りの仕組みがハーネス。作業台のように考えられるけど、製品ごとに機能は違う。
  22. 作業台に何があるかを見るのね。料金を読む道具があっても、書き換える道具まであるとは限らない。
  23. 書き換える機能があっても、閲覧だけの権限なら変更できない。ハーネスがあるから安全、ではなく、設定と確認が要る。
  24. まず読んでもらって変更案を見たいな。全部直して、だと、ほかのコースまで変わりそうで落ち着かない。
  25. 基本コースだけ、5,500円から6,000円へ。公開前に案を見せて、にしよう。対象と内容、止まってほしい場所が伝わる。
  26. 公開前に、があると確かめられるね。次の更新でも、この頼み方と確認する順番は残しておきたい。
  27. 手順、参考資料、必要な処理を再利用できる形にまとめるのがスキル。料金変更の確認メモや、表示を比べる手順だね。
  28. 引き継ぎメモみたい。別のお店のメモをもらったら、そのまま実行するか、うちの仕組みに合うか確かめるか……。
  29. ……そのメモには、どこで編集するって書いてある?
  30. あ、別の管理画面だ。確認する考え方は使えても、押す場所まで同じにはできないね。
  31. そこを直して使おう。スキルを追加しても、変更の権限が増えたり、必ず安全になったりはしない。AIの知能を増やすこととも違う。
  32. 手順を持つことと、してよいことは別ね。お願いしたい範囲も、スキル任せにせず決めておく。
  33. 今回は基本コースの料金表示だけ。別の箇所も必要なら、AIから理由と変更案を出してもらい、確認してから広げる。
  34. 私からも追加がある。料金ページの下に予約ボタンがあるの。数字だけ直して、お客さんが困らないか気になる。
  35. 僕にもページだけでは分からないな。予約の金額は別に保存されているかもしれない。確認する場所に加えよう。
  36. まず関係を調べるのね。AIがそのページを読むには、どうつなぐの?
  37. 使う道具とサイトの構成次第だね。接続の話も、一つずつ役割で分けてみよう。
  38. 地図の続きだ。ページがどこにあるかに加えて、どの道でそこまで行くか。
  39. 一つはSSH。認証して遠くのコンピューターにログインし、コマンドなどで操作する仕組み。通信は暗号化される。
  40. 通信が守られても、間違った金額を入れたら、それもそのまま届くんだよね。
  41. うん。接続できることと、変更してよいことは別。相手、権限、実行する操作を確かめてから進める。
  42. 任せきりにはできないね。MCPっていう名前も見かけた。SSHの新しい呼び方?
  43. MCPは、AIを使うアプリと、道具やデータをつなぐ共通の規約。遠隔ログインの方法を指すSSHとは別の役割なんだ。
  44. 料金を読む道具につなぐ約束のほうね。その道具が見るだけなら、MCPでつながっても勝手には直せない。
  45. できることは接続先の機能と権限によるし、接続だけで安全は保証されない。SSHとMCPは、いつも両方必要なわけでもないよ。
  46. うちの編集方法に合う接続を選ぶんだ。管理権限があるかと、今回変更してよい範囲は、管理している人と確かめる。
  47. それから、変更前の状態と戻し方を用意する。構成に合わせてファイルやデータベースなどを保存し、何をどう戻すかも決めよう。
  48. 画面の写真だけ残すつもりだった。それは見比べる資料にはなるけど、サイトを元に戻す準備とは違うね。
  49. 写真も使おう。そのうえで、構成に合うバックアップを用意し、確認用の場所などで戻せるか確かめよう。できなければ、公開する変更には進まない。
  50. そこまでできたら、基本コースの変更案を見る。6,000円かどうかと、ほかのコースが変わっていないか。
  51. 案を確認して、許可した小さな範囲で反映しよう。表示が崩れたり、関係ない内容が変わったりしたら、作業を止めて戻し方を確認する。
  52. 次はパソコンとスマホの両方で見るね。数字は合っていても、予約ボタンが押せないと困る。
  53. 料金ページが6,000円なら終了か、予約や決済の金額も確認するか。あおいさんが気にしていたところだね。
  54. ……その先も。予約側に5,500円が残っていたら迷うもの。別の料金データがあるか確認したい。
  55. 別にあれば更新の許可も確認しよう。リンクが目的のページへ進むか、フォームが送れるか、確認用の送信が実際に届くかも確かめる。
  56. 送信しました、の表示だけでは終わりにしないのね。テストと分かる内容で、届く先の人とも合わせておきたい。
  57. 確認できたこと、残った不明点、変更した場所と日時、使ったバックアップを記録しよう。どこまで済んだか分かるように。
  58. 見る場所が分かった。私が決めるのは何を変えたいか。分からないところは、聞ける形で残しておく。
  59. そのメモから始めよう。続く無料動画3本では、更新メモ、保存と復元、変更後の確認を具体的に見ていくよ。
  60. じゃあ、基本コースの名前と、今の料金、新しい料金から書いてみるね。編集方法は、確認してから埋めよう。

図とサンプルで学びます。接続や秘密情報の入力は不要です。

10場面の学習マップどの章にも戻れます。回答はこの画面を閉じると消えます。
01

はじめに

料金をひとつ変える、その前に。

目標は、7つの言葉が作業のどこに関わるかを知ること。

図で見る · 今回の小さな更新
今回の依頼基本コースの料金だけ
変更案5,500円 → 6,000円
人が確かめる対象と表示を確認

この教材は図とサンプルの操作です。実際のページや料金は変更しません。

こもれびサロンで考えると

この教材の料金変更は、架空の説明例です。

もう少しくわしく読む

架空のこもれびサロンで、基本コースの料金を5,500円から6,000円に変えるとします。数字を直す前に、ページはどこにあり、AIはどうやって作業するのかを見てみましょう。今日は図とサンプルの操作だけ。名前を全部覚えるより、役割のつながりが分かれば大丈夫です。

ここを覚えておこう自分のサーバーには接続せずに学べます。

ひとつ選んで、確かめる

この入門編で、最初に目指すことは?

用語を全部暗記する

役割をもう一度見てみようまずは、それぞれが何の役に立つかを見ていきましょう。途中で何度でも戻れます。

料金変更に関わる役割を知る

そのとおりですその順番で大丈夫です。ひとつの料金変更を追いながら、役割を見ていきます。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:サーバー →

02

サーバー

見えているページは、どこから届く?

ページのデータを保管し、求められた内容を届けるコンピューターやソフトウェア。

図で見る · サーバーと画面
サーバー文章・写真・料金を保管
● ● ● こもれびサロンの料金ページ
基本コース5,500円お客さんの画面に表示

ページを求めると、サーバーから内容が届き、ブラウザーが表示します。

こもれびサロンで考えると

サーバー → お客さんのブラウザー → 料金ページ

もう少しくわしく読む

お客さんがページを開くと、文章や画像がインターネットの向こうから届きます。データを保管し、ページを動かしたり届けたりするコンピューターやソフトウェアが、サーバーです。お店の裏側の作業場、というたとえで考えてみましょう。手元の画面は届いた内容を表示しています。

ここを覚えておこうサーバーには、コンピューター側とソフトウェア側の意味があります。

ひとつ選んで、確かめる

ページの文章や画像を届ける役割は?

サーバー

そのとおりですサーバーが求められた内容を届け、ブラウザーが画面に表示します。

ドメインの名前そのもの

役割をもう一度見てみようドメインはアクセス先を指定する名前です。内容を届ける役割はサーバーが担います。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:ドメイン →

03

ドメイン

ドメインは、来てもらうための名前。

インターネット上で、アクセス先を指定するための名前。

図で見る · 名前と中身
example.com

アクセス先を指定する名前(説明用)

DNS名前から接続先を調べる
サーバーページの中身を届ける
基本コース 5,500円

変えたいのは、この「ページの中身」です。

名前を変える作業と、料金の内容を変える作業を分けます。

こもれびサロンで考えると

example.com は説明用の名前です。アクセスや設定変更は行いません。

もう少しくわしく読む

ドメインは、ホームページへアクセスするときに使う名前です。住所にたとえられますが、サーバーそのものではありません。名前から接続先を調べる仕組みを、DNSと呼びます。料金を変えるときは、まずページの内容を直します。ドメインの名前を変えることとは、別の作業です。

ここを覚えておこうドメインを変えることと、ページの内容を変えることを分けます。

ひとつ選んで、確かめる

料金を5,500円から6,000円へ変えたいときは?

ドメインの名前だけを変える

役割をもう一度見てみよう名前が変わっても、料金の内容はそのままです。今回は対象ページの内容を見つけます。

対象ページの料金を直す

そのとおりです今回は内容の更新です。ドメインとページの中身を分けて考えられました。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:サイトの仕組み →

04

サイトの仕組み

同じ見た目でも、作り方はいろいろ。

WordPress・EmDash・静的HTMLなど、内容の保存や公開の方法は構成によって異なります。

図で見る · 見た目と作り方
WordPress管理画面などから編集
EmDash構成に合わせて編集
静的HTML編集元を直して公開

↓ いずれも同じような料金ページを表示できます

● ● ● こもれびサロンの料金ページ
基本コース5,500円お客さんの画面に表示

見た目だけで仕組みは決められません。編集元・公開先・戻す方法を確認します。

こもれびサロンで考えると

画面の見た目だけでは、WordPressか静的HTMLかを決めつけられません。

もう少しくわしく読む

同じ料金ページでも、WordPress、EmDash、静的HTMLでは、編集する場所や公開する方法が異なります。CHSで静的HTMLをベースに構築する場合も、編集元と公開先を確かめます。どれかを急いで選ぶ前に、今のサイトが何でできているかを知るところから始めます。

ここを覚えておこう構成に合わせて、接続・バックアップ・公開方法を確かめます。

ひとつ選んで、確かめる

サイトの仕組みが分からないとき、どうする?

分からないことをメモして確認する

そのとおりです分からないことを質問にできれば準備になります。管理画面や契約先を担当者と確認できます。

どのサイトも同じ方法で変更する

役割をもう一度見てみよう見た目が似ていても、編集元や公開方法は異なります。最初に構成を確かめます。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:エージェント →

05

エージェント

AIエージェントは、道具も使う。

依頼に沿って手順を考え、使える道具を使いながら作業を進める仕組み。

図で見る · 依頼と道具
人の依頼基本コースだけ変更案を
AIエージェント手順を考え、道具を使う
使える道具例:料金ページを読む
5,500円 → 6,000円

基本コースだけの変更案です。実際のサイトには保存・公開していません。

使える道具がなければ、エージェントが直接サイトを直せるわけではありません。

こもれびサロンで考えると

「料金ページの基本コースだけ。5,500円から6,000円へ。公開前に確認したい」

もう少しくわしく読む

AIエージェントは、依頼に沿って手順を考え、使える道具で作業を進める仕組みです。話すだけのチャットとの違いを、道具も使う係と考えてみましょう。使える道具がなければ、サイトを直接直せるわけではありません。対象と意図を取り違えることもあるので、まず変更案を見て確かめます。

ここを覚えておこう依頼する人が、目的と確認する範囲を決めます。

ひとつ選んで、確かめる

最初の依頼は、どちらが確かめやすい?

料金を全部、いい感じに直して

役割をもう一度見てみよう対象が広く、どの金額をどう変えるかが曖昧です。今回は1か所から始めましょう。

基本コースだけ6,000円へ。まず変更案を見せて

そのとおりです対象と新しい内容、確認する順番が分かります。次の実践動画でも、この依頼を整理します。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:ハーネス →

06

ハーネス

ハーネスは、作業を動かす周りの仕組み。

AIの実行、道具、権限、確認や記録などを支える周辺の仕組み。

図で見る · 道具・権限・確認・記録

ハーネス:作業を支える周りの仕組み

AIエージェント使える道具と権限の範囲で動く
道具料金を読む
権限閲覧のみ
確認人が内容を見る
記録何を調べたか
内容は読める

「閲覧のみ」なら、料金の書き換えには進みません。

含まれる機能は製品によって異なります。設定や確認が必要です。

こもれびサロンで考えると

この教材の実演は「閲覧のみ」。料金を書き換える権限は持たせません。

もう少しくわしく読む

エージェントが使う道具、実行できる範囲、途中の確認や記録などを整える周辺の仕組みを、ハーネスと呼びます。作業台にたとえられますが、製品によって含まれる機能は異なります。閲覧だけの権限なら、内容を調べても変更はできません。ハーネスがあるだけで安全になるのではなく、設定と確認が大切です。

ここを覚えておこう使える道具と、してよい操作を分けて確認します。

ひとつ選んで、確かめる

「閲覧のみ」の設定で料金変更を依頼すると?

内容を確認し、変更には進まない

そのとおりですこのサンプルでは変更する権限がありません。何を任せられるかを先に確かめる意味が分かります。

ハーネスがあるので自動で変更できる

役割をもう一度見てみようハーネスは権限を飛び越える仕組みではありません。使える道具と権限に合わせて動きます。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:スキル →

07

スキル

スキルは、次にも使える手順。

繰り返す作業の手順、参考資料、必要なスクリプトなどを再利用できる形にまとめたもの。

図で見る · 再利用する手順
  1. 対象を確かめる
  2. 変更前を保存する
  3. 変更案をつくる
  4. 表示を確認する
  5. 作業を記録する

料金変更の手順をひとまとめに。次に使うときも、そのサイトに合うか確認します。

こもれびサロンで考えると

料金変更スキル:対象確認 → 保存 → 変更案 → 表示確認 → 記録

もう少しくわしく読む

料金変更のたびに、確認方法を最初から説明するのは大変です。そこで、作業の手順や資料、必要な処理を再利用できるようにまとめます。それがスキルです。AIの知能そのものが増えるのではなく、仕事の進め方を使いやすくします。ほかのサイトで使えた手順も、今のサイトに合うか確かめます。

ここを覚えておこうスキルは、再利用する手順や資料です。

ひとつ選んで、確かめる

別のサイト用のスキルを見つけたら?

今のサイトの構成に合うか確かめる

そのとおりです保存先や公開方法が違う場合があります。内容を確かめてから、必要な手順を使います。

同じ料金変更なので、そのまま全部実行する

役割をもう一度見てみよう同じ作業名でも、対象の仕組みや権限が違うことがあります。手順が合っているかを先に確かめます。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:SSH →

08

SSH

SSHは、遠くのサーバーへ接続する方法。

認証して遠くのコンピューターに接続し、暗号化された通信でコマンドなどを実行する仕組み。

図で見る · 遠くへの接続
手元のパソコン認証して接続する
遠くのサーバー許可された範囲で操作

SSHの接続図です。実際には接続しません。接続できることと、変更してよいことを分けます。

こもれびサロンで考えると

手元のパソコン ⇄ SSHの接続 ⇄ 遠くのサーバー

もう少しくわしく読む

SSHは、認証して遠くのサーバーへ接続し、コマンドなどで操作するための仕組みです。通信は暗号化されますが、接続した先で何をするかは別に確かめます。料金変更のたびに必ず使うわけでもありません。構成に合った方法を選び、相手と権限を確認します。ここでは接続の図を見るだけです。

ここを覚えておこうパスワードや秘密鍵を、この教材に入力する必要はありません。

ひとつ選んで、確かめる

SSHに接続できたら、すぐ変更してよい?

対象と権限、戻す準備を確かめる

そのとおりです接続できることと、その変更をしてよいことは別です。準備が確認できてから進めます。

通信が暗号化されるので、何をしても大丈夫

役割をもう一度見てみよう暗号化は通信を守ります。誤った操作による変更まで防ぐものではありません。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:MCP →

09

MCP

MCPは、AIと道具をつなぐ共通の約束。

AIを使うアプリと、道具やデータをつなぐための共通の規約。

図で見る · AIと道具の連携
AIアプリエージェントが使う側
道具・データ例:料金を読む道具

MCPは連携の共通規約です。SSHの接続とは別の役割で、いつも両方を使うとは限りません。

こもれびサロンで考えると

AIアプリ → MCP → 料金を読む道具(説明用の接続例)

もう少しくわしく読む

MCPは、AIを使うアプリと、道具やデータをつなぐための共通の規約です。共通の差し込み口、というたとえで考えられます。遠くのサーバーへ接続するSSHとは役割が違います。MCPで何ができるかは、接続先が用意する機能と権限で変わります。つながっただけで安全が保証されるわけではありません。

ここを覚えておこうMCPとSSHは別の役割です。いつも両方を使うとは限りません。

ひとつ選んで、確かめる

「閲覧できるMCP」と聞いたら、先に確かめることは?

どのデータを見られ、どの操作が許可されるか

そのとおりです同じMCPでも、公開された道具や権限は違います。範囲を確かめて使います。

つながったので、サイトを自由に変えられる

役割をもう一度見てみよう接続できる範囲と変更できる範囲は同じとは限りません。道具と権限を確認します。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次:全体の流れ →

10

全体の流れ

つながりが分かったら、小さな更新へ。

対象・準備・変更案・確認・記録を、小さな範囲でつなげます。

図で見る · 次の実践の流れ
  1. 対象を決める
  2. 変更前の状態と戻し方を用意する
  3. 変更案を確認する
  4. 許可した範囲で直す
  5. 表示を確認し、記録する

ホームページ・予約・決済では、料金が別々に保存されている場合があります。

こもれびサロンで考えると

7つの役割をつないで、次の更新を確かめながら進めます。

もう少しくわしく読む

料金変更の流れを並べてみましょう。対象を決める。変更前の状態と戻し方を用意する。変更案を確認する。許可した範囲で直す。表示を確かめ、記録する。ホームページの料金と予約や決済の料金が、別々に保存されていることもあります。続く無料3本では、更新メモ、保存と復元、変更後の確認を具体的に学びます。

ここを覚えておこう全部の用語を暗記する必要はありません。必要な場面で戻って確かめましょう。

ひとつ選んで、確かめる

料金表示を直した後、何を確かめる?

表示だけ見て、すべて完了とする

役割をもう一度見てみよう別ページや予約・決済の金額は別の仕組みかもしれません。関係する箇所を分けて確認します。

対象の表示と、関係する箇所への影響を確認する

そのとおりですその確認を、次の3本で詳しく学べます。分からない点は「不明」とメモに残して大丈夫です。

何度でも選び直せます。答えを選んでも、自動では次へ進みません。

次の一歩 · 無料動画3本

小さな更新を、
確かめながら進めよう。

更新メモ、保存と復元、変更後の確認。
続きは無料動画で具体的に学べます。

無料動画3本の登録へ進む 登録ページに移動します。この教材で個人情報を入力することはありません。
この教材の参考資料

用語の説明は、以下の資料をもとにしています。リンクは別のタブで開きます。

  1. Webサーバーのしくみ(MDN) ↗

    ページを保管し、ブラウザーへ届けるしくみの説明です。
    確認日:2026-10-25

  2. ドメインとDNS(Cloudflare) ↗

    サイトの名前から、接続先を調べるしくみの説明です。
    確認日:2026-10-25

  3. SSHの公式マニュアル(OpenBSD) ↗

    遠くのコンピューターへの接続と認証の説明です。
    確認日:2026-10-25

  4. MCPの公式ガイド ↗

    AIアプリと道具・データを連携させる規約の説明です。
    確認日:2026-10-25

  5. AIエージェント(OpenAI) ↗

    手順を考え、道具を使って作業を進めるしくみの説明です。
    確認日:2026-10-25

  6. ハーネスの役割(OpenAI) ↗

    道具やスキル、実行環境、作業の継続を支えるしくみの一例です。
    確認日:2026-10-25

  7. スキルの使い方(OpenAI) ↗

    手順・資料・必要な処理をまとめ、繰り返し使う方法の説明です。
    確認日:2026-10-25

  8. みまもりAIスクールの対応範囲 ↗

    WordPress・EmDash・静的HTMLで取り組む実習のご案内です。
    確認日:2026-10-25