XServerアカウントのログインページを開く
下のアドレスを押すと、XServerアカウントのログインページが新しいタブで開きます。開いた画面は、次の手順の画像で確認できます。
もし、ログイン画面ではなく管理画面が開いたら
すでにログイン済みです。手順4に進んでください。
画像なし（例外）
開くだけの手順のため、画像は次の手順（同じ画面）にまとめています。
Claudeで作ったホームページを、
Xserverで公開する方法
パソコンの中のホームページを、お客様が見られる状態に。
アップロードから表示確認まで、全12手順。
🔍 画像は押すと大きく表示できます
このガイドは何のためのものか
前のガイドで作ったホームページのファイル（index.html）を、レンタルサーバー「Xserver」にアップロードして、お客様がインターネットから見られる状態にするためのガイドです。
いま、ホームページはあなたのパソコンの中にだけあります。この手順をやらないと、お客様がスマホやパソコンから見ることはできません。
所要時間の目安
10〜15分ほどです（Xserverの契約が済んでいる場合）。
用意するもの
Claudeで作ったホームページのファイル（index.html）
Xserverの契約と、ログイン用のメールアドレス・パスワード
パソコン（ファイルをアップロードするので、スマートフォンだけでは進められません）
Xserverの契約がまだの方へ
このガイドはXserverのレンタルサーバー契約（有料）が前提です。まだの方は、先に下のリンクから契約を済ませてください。契約が終わると、このガイドで使う「初期ドメイン」（あなたのID.xsrv.jp）が自動で使えるようになります。
先に1つだけ、大事なこと
公開したホームページは、世界中の誰でも見られる状態になります。載せる住所・電話番号・写真は「お客様に見せてよいものだけ」になっているか、アップロードの前にもう一度だけ確認してください。
Part 1｜ファイルマネージャを開く
Xserverの「ファイルマネージャ」は、サーバーの中のファイルをブラウザから出し入れできる画面です。ここまで来れば、あとは置くだけです。
メールアドレスとパスワードを入力する
「XServerアカウントID または メールアドレス」の欄に契約したときのメールアドレスを、その下の欄にパスワードを入力します。
もし、パスワードを忘れてしまったら
ログイン画面の「パスワードを忘れてしまった方はこちら」から、登録メールアドレス宛てに再設定の手続きができます。
「ログインする」を押す
入力欄の下にある「ログインする」のボタンを押します（ボタンは手順2の画像の下部に写っています）。
画像なし（例外）
押すボタンは手順2の画像と同じ画面のため、画像を省略しています。
「ファイル管理」を押す
ログインすると、契約管理ページが開きます。サーバーの欄にある「ファイル管理」を押すと、ファイルマネージャが新しいタブで開きます。
もし、隣の「サーバー管理」を押してしまったら
別の管理画面（サーバーパネル）が開きます。そのタブを閉じて、元のページから「ファイル管理」を押し直してください。
Part 2｜ホームページの置き場所を開く
自分のドメイン名のフォルダを、2回続けて押して開く
ファイルの一覧から、自分のドメイン名のフォルダを探して、2回続けて押します。画像の「komugi123.xsrv.jp」は記入例です。あなたの画面には、契約したときのサーバーID＋「.xsrv.jp」という名前のフォルダ（初期ドメイン）があります。
もし、ほかにもフォルダがたくさん並んでいても
気にしなくて大丈夫です。探すのは「.xsrv.jp」で終わる自分のドメイン名のフォルダだけです。独自ドメインを取得済みの方は、そのドメイン名のフォルダでも同じ手順で進められます。
「public_html」を、2回続けて押して開く
フォルダの一覧から「public_html」を探して、2回続けて押します。この中に置いたファイルが、インターネットで表示されます。
public_htmlの中に、最初からファイルが入っています
「index.html」「default_page.png」など、Xserverが用意した初期ファイルです。消さなくて大丈夫です。このあと自分のindex.htmlをアップロードすると、初期のindex.htmlが自分のホームページに置き換わります。
Part 3｜ファイルをアップロードする
「アップロード」を押す
画面の上にあるボタンの並びから「アップロード」を押します。
「ファイルを選択」を押す
アップロードの画面が出ます。「ファイルを選択」を押します。
もし、ドラッグ＆ドロップに慣れていたら
この画面に「ファイルをドラッグ＆ドロップしてください」とあるとおり、ファイルをこの枠に直接ドラッグしても同じことができます。
Claudeで作ったホームページのファイル（index.html）を選ぶ
パソコンのファイル選択の画面が開きます。前のガイドでダウンロードした「index.html」を選んで、「開く」を押します。ダウンロードしたままなら、「ダウンロード」フォルダに入っています。
もし、ファイルの名前が「index.html」ではなかったら
Claudeに「index.htmlという名前でダウンロードさせて」と伝えて、作り直したファイルをダウンロードしてください。名前が「index.html」だと、アドレスを開くだけでこのファイルが表示されるようになります。
画像なし（例外）
この画面はお使いのパソコンの画面（WindowsやMacのファイル選択画面）で、Xserverの画面ではないため、画像を掲載していません。
「アップロード」を押す
選んだファイル名が画面に表示されたら、「アップロード」のボタンを押します。
一覧に「index.html」が出たことを確認する
アップロードが終わると、public_htmlの中に「index.html」が表示されます。この画面になっていればOKです。
Part 4｜インターネットでの表示を確認する
ブラウザの新しいタブで、自分のドメイン名を開く
ブラウザの新しいタブを開いて、いちばん上のアドレスバーに、自分の初期ドメイン（例：komugi123.xsrv.jp）を入力して、Enterを押します。自分のお店のホームページが表示されたら、公開成功です。お客様のスマホやパソコンからも、同じアドレスで見られます。
もし、表示されなかったら
このすぐ下の「うまくいかない時は」を確認してください。
うまくいかない時は
よくあるつまずき
・アドレスを開くと「このウェブスペースへは、まだホームページがアップロードされていません。」という画面が出る → アップロード前の初期ページが、ブラウザに記憶されて表示されています。ページを再読み込みしてください（Windowsは Ctrl+R、Macは ⌘+R。それでも変わらなければ数分おいてもう一度）。このガイドの検証でも実際に起きました
・アドレスを開いても何も表示されない → 「public_html」の中に「index.html」があるか（手順11の画面）と、アドレスの打ち間違いがないかを確認する
・ホームページを直したあと → 新しいindex.htmlを、手順7〜10と同じ方法でもう一度アップロードすると置き換わります。直した内容が見えない時も、まず再読み込みです
記入例について
このガイドの「komugi123」というIDと「こむぎベーカリー」のホームページは、記入例のための架空のものです。あなたの画面には、ご自分のIDとドメイン名が表示されます。
公開をやめたいとき
public_htmlの中の「index.html」を選んで、画面の上の「削除」を押せば、いつでも公開前の状態に戻せます。
読み終えた人へ — 次の一歩
自分のお店のホームページが、インターネットで見られるようになりました。 前のガイドの「作る」と合わせて、 「作って、公開する」までが自分ひとりでできたことになります。
アドレスをお店の名前（独自ドメイン）にしたい場合は、Xserverの管理画面から ドメインを取得して設定できます。まずは初期ドメインのまま、 お店のSNSやショップカードにアドレスを載せるところから始めても十分です。
ほかのガイドは 実践ガイド一覧 にあります。
このガイドは SUICS SCHOOL 実践ガイド の1本です ／ SUICS SCHOOL ／ お問い合わせ