編集の引き継ぎ

みきさんLPの編集マニュアル

コードを書く必要はありません。直したい場所のスクリーンショットを撮って、言葉で伝えるだけで更新できます。

編集するサイト 選ばれる私へ ｜ Instagram集客サポート miki-instagram-academy.pages.dev ↗

はじめに｜このサイトの公開の仕組み

最初にここだけ読んでいただけると、あとの手順が分かりやすくなります。

このサイトは、GitHub のファイルを更新すると、自動でサイトが公開される仕組みになっています。
はじめての方は、次の順番で進めてください。

1 GitHub のコラボレーターとして招待を受ける サイトのファイルを編集できる権限をお渡しします。
2 GitHub のファイルを更新する 文章や画像を直して、GitHubに送ります。
3 サイトが自動で更新される 送られた内容が自動で公開されます。1〜2分で反映されます。こちらでの操作は何もありません。
用意していただくもの
GitHubのアカウント … 無料 ／ 5分ほど。これ1つだけです。
※ 作り方は手順1でご案内します。初めてでも大丈夫です。
※ 編集にはお使いの Claude Code をそのまま使っていただきます。追加で入れるものはありません。

このガイドに出てくる言葉

GitHub（ギットハブ）

サイトのファイルを保管しておく場所です。ここのファイルを書き換えることが「サイトを編集する」ことになります。

コラボレーター

GitHubで「このファイルを編集していいですよ」と許可された人のことです。招待を承認すると、この立場になります。

1GitHubのアカウントを作る

サイトのファイルが置いてある場所です。無料プランでOKです。

  1. 登録ページを開く

    https://github.com/signup

  2. メールアドレス・パスワード・ユーザー名を入力する

    ユーザー名は英数字で、あとから他の人に見える名前です。本名でなくてOKです。

  3. メールに届く認証コードを入力する
  4. 二段階認証（2FA）を設定する

    GitHubでは必須です。スマホの認証アプリか、SMSで設定してください。
    設定後に出る「リカバリーコード」は、必ず保存しておいてください。

  5. GitHubのユーザー名を連絡する

    招待をお送りするために必要です。

2招待を受け取る

GitHubのユーザー名をいただいたら、こちらから招待をお送りします。

  1. 「Invitation to collaborate on ...」という英語のメールが届きます

    迷惑メールに入ることがあるのでご注意ください。

  2. メール内の「View invitation」を押す
  3. 「Accept invitation」（緑のボタン）を押す

3ファイルの置き場所を決める（最初の1回だけ）

Claude Codeは、パソコンの中のフォルダを1つ使って作業します。そのための置き場所を用意します。

このフォルダの中を、ご自身で開く必要はありません
  • ファイルを直接編集したり、画像を手で入れたりすることはありません。
  • Claude Codeが読み書きするための場所です。用意するだけで、あとは触りません。
  • 新しく追加する画像も、チャットに貼っていただければ、正しい名前をつけて正しい場所に置かれます。
  1. 置き場所になるフォルダを1つ作る

    場所はどこでも構いません。
    例：「書類」フォルダの中に みきさんサイト という名前のフォルダを作る。

  2. Claude Codeを開いて、そのフォルダを選ぶ
  3. GitHubにログインする

    初回だけ、GitHubとの接続を求められます。案内にしたがってログインしてください。

  4. こう伝える
「github.com/yumiokadesign-cyber/miki-instagram-academy を、このフォルダにコピーしてください」

これで、サイトのファイル一式がそのフォルダに入ります。
2回目からは、同じフォルダをClaude Codeで開くだけです。この手順はもう必要ありません。

フォルダの作り方・選び方が分からないときは
Claude Codeに 「作業用のフォルダはどこに作ればいいですか？」 と聞いてください。 パソコンに合わせて案内してもらえます。自分で調べなくて大丈夫です。

4更新のしかた

やることは毎回この3つだけです。

  1. 直したい場所をスクリーンショットで撮る
  2. その画像をチャット欄に貼って、やりたいことを言葉で伝える
  3. できあがったら「公開して」と言う
スクリーンショットの撮り方
Mac … command + shift + 4 を押して、撮りたい範囲をドラッグ
Windows … Windows + shift + S を押して、撮りたい範囲をドラッグ
※ 画面全体ではなく、直したい部分がはっきり分かる範囲で撮ってください。前後の見出しが一緒に写っていると、場所が伝わりやすくなります。

よくある更新の例

文章を直したい

言い回しの変更、金額や日程の修正など。

「ここの文章を『〇〇〇〇』に変えてください」 添える物 … 直したい場所のスクリーンショット

写真を差し替えたい

プロフィール写真、講座の様子の写真など。

「ここの写真を、この画像に差し替えてください」 添える物 … 今の場所のスクリーンショット ＋ 新しい写真
  • 写真のサイズや形式を気にする必要はありません。そのまま渡していただければ調整されます。

「講座生の声」をもう一人分追加したい

お客様の声を増やすとき。

「ここにもう一人分追加してください」 添える物 … 講座生の声のスクリーンショット ＋ 顔写真 ＋ 下の情報
  • お名前（例：さくらさん）
  • お仕事の内容（例：ヘアメイク・着付け）
  • Instagramのアカウント名（載せない場合は「なし」と伝えてください）
  • 感想の本文
  • 星の数（例：★5つ）
  • 特に目立たせたい一文があれば「ここにマーカーを引いてください」と添える

「実績」をもう一人分追加したい

CASE 01〜05 のスマホ画面が並んでいるところ。

「ここにもう一人分追加してください」 添える物 … 実績のスクリーンショット ＋ Instagram画面の画像 ＋ 下の情報
  • お名前（例：さくらさん）
  • 載せたい成果の数字（例：フォロワー1万人達成 / 再生回数50万回）
  • ひとこと説明（例：インスタ経由でご予約が埋まるように）

どう頼めばいいか分からないとき

やりたいことが固まっていなくても大丈夫です。

「ここをこんな感じにしたいんですが、どうするのがいいですか？」 添える物 … 気になっている場所のスクリーンショット
  • 先に相談すると、やり方を提案してもらえます。いきなり直させなくて大丈夫です。

5公開する

GitHubに送ると、そのまま自動でサイトが更新されます。

  1. 先に見た目を確認する

    「ブラウザで見せて」と伝えると、公開前の状態を画面で確認できます。

  2. 問題なければ公開する
「GitHubに送って公開してください」

1〜2分でサイトに反映されます。 → https://miki-instagram-academy.pages.dev

下書き用の環境はありません
  • 公開した内容は、そのまま本番サイトに反映されます。お客様が見るページが、すぐに変わります。
  • 迷ったら「まだ公開しないでください」と伝えておけば、送らずに止めておけます。
  • 公開したあとでも前の状態に戻せます。戻したいときは、そのままご連絡ください。

うまくいかないときは

よくあるつまずきと、その対処です。ここを見てもわからなければ、遠慮なくご連絡ください。

「公開して」と伝えたら、エラーが出た

エラーの画面をそのままスクリーンショットで撮って、「これが出ました」と貼ってください。多くはGitHubへのログインが済んでいないだけで、その場で案内してもらえます。

公開したのに、サイトが変わらない

まず2〜3分ほど待って、ページを再読み込みしてみてください。ブラウザに古い表示が残っていることもあるので、再読み込みは強めに（Macは command+shift+R、Windowsは Ctrl+F5）行ってください。
それでも変わらない場合は、公開の処理が途中で止まっている可能性があります。そのままご連絡ください。こちらで確認します。

間違えて公開してしまった

前の状態に戻せます。何をどう変えたかを添えてご連絡ください。あわてて上書きで直そうとすると、かえって分かりにくくなることがあります。

招待メールが届かない

迷惑メールフォルダをご確認ください。それでも見当たらない場合は、登録したメールアドレスをもう一度お知らせください。再送します。