記事一覧
ホームページの仕組み ドメイン/サーバー/ファイル/システム/ブラウザの役割と、誰が管理しているか
ホームページの仕組み ドメイン/サーバー/ファイル/システム/ブラウザの役割と、誰が管理しているか
カピは、会社の Web 担当になって、1年になる。
朝礼の後、社長に呼び止められた。
「うちのホームページって、どこにあるの? 制作会社との契約をやめたら、消えるの?」
カピは、答えられなかった。
制作会社に頼んで作ってもらったことと、毎月の請求書に「サーバー」と「ドメイン」の項目があることは知っている。
でも、それが何で、どこにあるのかは、考えたことがなかった。
カピは、制作会社のビーバー先生に電話をかけた。
朝礼の後、社長に呼び止められた。
「うちのホームページって、どこにあるの? 制作会社との契約をやめたら、消えるの?」
カピは、答えられなかった。
制作会社に頼んで作ってもらったことと、毎月の請求書に「サーバー」と「ドメイン」の項目があることは知っている。
でも、それが何で、どこにあるのかは、考えたことがなかった。
カピは、制作会社のビーバー先生に電話をかけた。
カピ
社長に「ホームページはどこにあるの」と聞かれて、答えられませんでした……。うちの会社のパソコンには、無いですよね?
ビーバー先生
会社のパソコンにはありません。ホームページは5つの部品で出来ていて、それぞれ置き場所と契約が違います。
順番に説明しますね。
「ホームページはどこにあるのか」「契約をやめたらどうなるのか」——。
社内や制作会社から聞かれて答えに詰まる方に向けて、ホームページの仕組みを5つの部品に分けて、それぞれの役割と契約、制作会社からの連絡に出てくる言葉、誰が何を管理しているかの確かめ方をまとめました。
ドメインの設定/SSL 証明書/メール/Git など、部品毎の詳しい話は、それぞれの記事へのリンクを置いています。
社内や制作会社から聞かれて答えに詰まる方に向けて、ホームページの仕組みを5つの部品に分けて、それぞれの役割と契約、制作会社からの連絡に出てくる言葉、誰が何を管理しているかの確かめ方をまとめました。
ドメインの設定/SSL 証明書/メール/Git など、部品毎の詳しい話は、それぞれの記事へのリンクを置いています。
目次
- ホームページは何で出来ているか
- 5つの部品:ドメイン/サーバー/ファイル/プログラムとデータベース/ブラウザ
- URL を入れてから画面に出るまでの流れ
- ホームページとメールは同じドメインを使う
- ドメイン
- 世界で1つの名前を、年毎に借りている
- 名前の契約と、行き先の設定(DNS)は別のもの
- 誰が管理しているかの確かめ方
- 更新を忘れると起きること
- サーバー
- ファイルを置いて、頼まれた時に返すコンピュータ
- サーバーに置いてあるもの
- 共用/VPS/クラウド/専用の違い
- ホームページとメールのサーバーが別の場合
- ファイル(ページの中身)
- HTML/CSS/JavaScript/画像の役割
- サーバーにファイルを上げる方法:FTP と Git
- テストサーバーと本番サーバー
- サーバーの中で動くもの:プログラムとデータベース
- 見るだけのページと、動くページの違い
- プログラム(PHP など)の役割
- データベースとは
- 「システム」と呼ばれるもの
- 他社のサービスを繋いで使うもの
- システムがあると増えること
- 見る側:ブラウザと https
- https と SSL 証明書
- パソコンとスマホで見え方が違う理由
- 直したのに古いまま出る時(キャッシュ)
- 誰が何を管理しているか
- 契約の一覧
- 管理画面のログイン情報の置き場所
- 制作会社に任せていても、自社で持っておきたい情報
- 制作会社を変える時/サーバーを移す時に起きること
- 制作会社からの連絡に出てくる言葉の読み替え表
- よくある質問
- まとめ
ホームページは何で出来ているか
5つの部品:ドメイン/サーバー/ファイル/プログラムとデータベース/ブラウザ
ホームページは、1つの物ではなく、5つの部品の組み合わせです。
誰が持っているかで分けると、次の図のようになります。
誰が持っているかで分けると、次の図のようになります。
自社が契約して
借りるもの
借りるもの
請求書に出てくる
ドメイン
ホームページの名前
(example.co.jp。年毎の契約)
サーバー
ファイルやメールを置いておく場所
(サーバー会社から借りる。月毎か年毎の契約)
制作会社が作って
置くもの
置くもの
サーバーに置く(制作費と保守費)
ファイル
ページの中身
(文章と構造/見た目/動き/画像)
プログラムとデータベース
サーバーの中で動く部分と、記録の置き場所
(フォーム/CMS/ネットショップなど)
お客様の手元に
あるもの
あるもの
自社では触れない
ブラウザ
ページを取りに行って、画面に描く
(Chrome/Safari/Edge など)
ドメインとサーバーは、自社が契約して借ります。
ファイルと、プログラムとデータベースは、制作会社が作って、サーバーに置きます。
ブラウザは、お客様のパソコンやスマホに入っていて、自社では触れません。
「ホームページはどこにあるか」の答えは、「借りているサーバーの中」です。
会社のパソコンや制作会社のパソコンには、作業中のファイルがあるだけで、お客様は、サーバーの中のものを見ています。
ファイルと、プログラムとデータベースは、制作会社が作って、サーバーに置きます。
ブラウザは、お客様のパソコンやスマホに入っていて、自社では触れません。
「ホームページはどこにあるか」の答えは、「借りているサーバーの中」です。
会社のパソコンや制作会社のパソコンには、作業中のファイルがあるだけで、お客様は、サーバーの中のものを見ています。
URL を入れてから画面に出るまでの流れ
ブラウザに https://www.example.co.jp/ と入れてから、画面にページが出るまでは、次の順で進みます。
5つの部品が、この順に出てきます。
5つの部品が、この順に出てきます。
-
ブラウザが、ドメインの行き先を調べるURL の中のドメイン(www.example.co.jp)だけでは、サーバーの場所が分かりません。
ブラウザは、ドメインの設定(DNS)に「www.example.co.jp は、どのサーバーにあるか」を聞き、サーバーの住所(IP アドレス)を受け取ります。 -
ブラウザが、そのサーバーにページを頼む受け取った住所のサーバーへ、「/ のページをください」と頼みます。
https なら、この通信を暗号化しています。 -
サーバーが、ファイルを返す見るだけのページなら、置いてあるファイルをそのまま返します。
フォームや CMS のページなら、サーバーの中でプログラムが動き、データベースから記録を取り出して、ページを組み立ててから返します。 -
ブラウザが、画面に描く届いた HTML を読み、そこに書いてある CSS/JavaScript/画像を順に取りに行って、画面を組み立てます。
1ページを開くだけで、裏では何十回もサーバーとやり取りしています。
カピ
ドメインが住所で、サーバーが土地、ファイルが建物……みたいなことですか?
ビーバー先生
だいたい合っています。付け足すなら、プログラムとデータベースは建物の中の設備と帳簿、ブラウザは見に来るお客様です。
住所を借りる契約と、土地を借りる契約が別なのも、同じですね。
ホームページとメールは同じドメインを使う
www.example.co.jp の example.co.jp と、info@example.co.jp の @ の後ろは、同じドメインです。
ホームページの行き先とメールの届け先は、ドメインの設定の中の、別々の項目です。
そのため、ホームページのサーバーを変えてもメールはそのまま、メールだけ Google Workspace に移す、ということが出来ます。
逆に、ドメインの契約が切れると、ホームページとメールの両方が止まります。
メールの仕組みは会社のメールの仕組みの記事、ドメインの設定の中身はドメインの設定(DNS レコード)の記事で紹介しています。
ホームページの行き先とメールの届け先は、ドメインの設定の中の、別々の項目です。
そのため、ホームページのサーバーを変えてもメールはそのまま、メールだけ Google Workspace に移す、ということが出来ます。
逆に、ドメインの契約が切れると、ホームページとメールの両方が止まります。
メールの仕組みは会社のメールの仕組みの記事、ドメインの設定の中身はドメインの設定(DNS レコード)の記事で紹介しています。
ドメイン
世界で1つの名前を、年毎に借りている
ドメインは、世界で1つしかない名前です。
買い切りではなく、ドメイン会社と契約して、1年や複数年の単位で借ります。
期限が来る前に更新すると、そのまま使い続けられます。
契約には「登録者」の名義があります。
自社の名前になっているか、制作会社の名前になっているかで、後の手続きが変わります(自社で持っておきたい情報)。
.co.jp は日本で登記した会社だけが取れる、.com は誰でも取れる、のように、末尾の種類で取れる人と費用が違います。
買い切りではなく、ドメイン会社と契約して、1年や複数年の単位で借ります。
期限が来る前に更新すると、そのまま使い続けられます。
契約には「登録者」の名義があります。
自社の名前になっているか、制作会社の名前になっているかで、後の手続きが変わります(自社で持っておきたい情報)。
.co.jp は日本で登記した会社だけが取れる、.com は誰でも取れる、のように、末尾の種類で取れる人と費用が違います。
名前の契約と、行き先の設定(DNS)は別のもの
ドメインの契約は「名前を借りること」で、その名前の行き先(どのサーバーにあるか)は、別の設定に書きます。
この設定を DNS(ディーエヌエス)と呼びます。
DNS の設定は、ドメイン会社の管理画面にあることも、サーバー会社の管理画面にあることもあります。
サーバーを移す時に変えるのはこの設定で、ドメインの契約そのものは変えません。
設定の種類(A/CNAME/MX/TXT)と、変える時に起きることは、ドメインの設定(DNS レコード)の記事で紹介しています。
この設定を DNS(ディーエヌエス)と呼びます。
DNS の設定は、ドメイン会社の管理画面にあることも、サーバー会社の管理画面にあることもあります。
サーバーを移す時に変えるのはこの設定で、ドメインの契約そのものは変えません。
設定の種類(A/CNAME/MX/TXT)と、変える時に起きることは、ドメインの設定(DNS レコード)の記事で紹介しています。
誰が管理しているかの確かめ方
ドメインを誰が管理しているかは、次のことで分かります。
- 更新のお知らせのメールが、誰に届いているか(ドメイン会社から、期限の前に届く)
- ドメイン会社の管理画面に、誰が入れるか
- 制作会社に「ドメインの契約者は、誰の名義になっていますか」と聞く
- Whois(フーイズ)という公開の情報で、登録者を調べる。
代行の名義になっていて、分からないこともある
更新を忘れると起きること
期限が過ぎると、ホームページが開かなくなり、メールも届かなくなります。
多くのドメインには、期限が過ぎてもしばらくは元に戻せる期間がありますが、期間と費用は、ドメインの種類と会社で違います。
その期間も過ぎると、他の人が同じ名前を取れるようになります。
更新のお知らせのメールの届け先が、退職した人のアドレスのままになっていないかを、確かめておくと安心です。
自動更新の設定があるドメイン会社なら、それを使う方法もあります。
ドメインの契約先を別の会社に変える流れは、ドメインの移管の記事で紹介しています。
多くのドメインには、期限が過ぎてもしばらくは元に戻せる期間がありますが、期間と費用は、ドメインの種類と会社で違います。
その期間も過ぎると、他の人が同じ名前を取れるようになります。
更新のお知らせのメールの届け先が、退職した人のアドレスのままになっていないかを、確かめておくと安心です。
自動更新の設定があるドメイン会社なら、それを使う方法もあります。
ドメインの契約先を別の会社に変える流れは、ドメインの移管の記事で紹介しています。
サーバー
ファイルを置いて、頼まれた時に返すコンピュータ
サーバーは、ホームページのファイルやメールを置いておき、ブラウザやメールソフトから頼まれた時に返す、24時間動いているコンピュータです。
自社で持つことも出来ますが、会社のホームページでは、サーバー会社のサービス(エックスサーバー/さくらのレンタルサーバ/ロリポップなど)を借りるのが普通です。
これをレンタルサーバーと呼びます。
コンピュータそのものは、サーバー会社のデータセンターにあります。
契約は月毎か年毎で、ドメインと同じく、契約者の名義があります。
自社で持つことも出来ますが、会社のホームページでは、サーバー会社のサービス(エックスサーバー/さくらのレンタルサーバ/ロリポップなど)を借りるのが普通です。
これをレンタルサーバーと呼びます。
コンピュータそのものは、サーバー会社のデータセンターにあります。
契約は月毎か年毎で、ドメインと同じく、契約者の名義があります。
サーバーに置いてあるもの
サーバーの中には、ページのファイルの他に、次のものが入っています。
| 置いてあるもの | 中身 | 誰が触るか |
|---|---|---|
| ページのファイル | HTML/CSS/JavaScript/画像 | 制作会社(FTP や Git で上げる) |
| プログラム | フォーム/CMS など、サーバーの中で動くもの | 制作会社 |
| データベース | CMS の記事/商品/注文などの記録 | Web担当者は CMS の管理画面から、中身の仕組みは制作会社 |
| メール | 届いたメールと、送るための設定 | アドレスの作成は、サーバーの管理画面から。 届いたメールは、各自のメールソフトが読む |
| 設定 | 使うドメインの登録/SSL 証明書/アクセスの制限など | サーバーの管理画面から、制作会社か Web担当者 |
「サーバーは、ホームページとメールを置いておく場所」と覚えておくと、サーバーを移す時に「メールはどうなるのか」という問いが、自然に出てきます。
共用/VPS/クラウド/専用の違い
レンタルサーバーにも種類があります。
違いは、1台のコンピュータを何社で分けるかと、設定を誰が管理するかです。
違いは、1台のコンピュータを何社で分けるかと、設定を誰が管理するかです。
| 種類 | 仕組み | 向いている用途 |
|---|---|---|
| 共用サーバー | 1台を複数の契約者で分けて使う。 設定の管理はサーバー会社 |
会社のホームページ/ブログ/小さなネットショップ |
| VPS/クラウド | 1台を仮想的に分け、自分の分は自由に設定できる。 管理は借りた側(多くは制作会社) |
独自のシステム/アクセスの多いサイト |
| 専用サーバー | 1台を丸ごと借りる。 管理は借りた側 |
大きなサービス |
中小企業のホームページは、共用サーバーで足りることがほとんどです。
制作会社から「VPS にします」と言われた時は、何を動かすためかを聞いておくと、後で保守の費用の理由が分かります。
制作会社から「VPS にします」と言われた時は、何を動かすためかを聞いておくと、後で保守の費用の理由が分かります。
ホームページとメールのサーバーが別の場合
ホームページのサーバーでメールも受けるのがよくある形ですが、メールだけ Google Workspace や Microsoft 365 で使っている会社も多くあります。
この場合、ドメインの設定で、ホームページの行き先はレンタルサーバー、メールの届け先は Google や Microsoft のサーバー、と別々にしています。
サーバーを移す時に、メールまで一緒に移してしまわないよう、自社がどちらの形かを先に確かめておきたいところです。
メールの届け先の設定は、会社のメールの仕組みの記事で紹介しています。
この場合、ドメインの設定で、ホームページの行き先はレンタルサーバー、メールの届け先は Google や Microsoft のサーバー、と別々にしています。
サーバーを移す時に、メールまで一緒に移してしまわないよう、自社がどちらの形かを先に確かめておきたいところです。
メールの届け先の設定は、会社のメールの仕組みの記事で紹介しています。
ファイル(ページの中身)
HTML/CSS/JavaScript/画像の役割
サーバーに置いてあるページのファイルは、役割で4種類に分かれます。
| 種類 | 役割 | ファイル名の例 |
|---|---|---|
| HTML | 文章と構造。 見出し/本文/リンク/画像の位置 |
index.html |
| CSS | 見た目。 色/文字の大きさ/並び方/スマホでの並べ替え |
style.css |
| JavaScript | 動き。 メニューの開閉/スライドショー/入力の確認 |
common.js |
| 画像/PDF | 写真/図/ロゴ/資料 | logo.svg/photo.jpg |
ファイルは、サーバーの中でフォルダに分けて置いてあります。
URL の / の区切りは、そのフォルダの階層に対応しています(CMS では、URL と置き場所が一致しないこともあります)。
「トップページのファイルを差し替えました」のような連絡は、多くはこの中の HTML の話です。
URL の / の区切りは、そのフォルダの階層に対応しています(CMS では、URL と置き場所が一致しないこともあります)。
「トップページのファイルを差し替えました」のような連絡は、多くはこの中の HTML の話です。
サーバーにファイルを上げる方法:FTP と Git
制作会社が作ったファイルは、サーバーに上げて初めてホームページに出ます。
上げ方は、主に2つです。
上げ方は、主に2つです。
- FTP で上げる
- FTP(エフティーピー)のソフトで、自分のパソコンからサーバーへファイルを送る。
昔からある方法で、ID とパスワードで繋ぐ - Git で管理して、自動で上げる
- ファイルの変更の履歴を Git で残し、GitHub などに置く。
マージを合図に、GitHub Actions などの仕組みがサーバーへ上げる
どちらで上げているかは、制作会社からの連絡の言葉で分かります。
「アップしました」「FTP で上げました」なら前者です。
「プッシュしました」「マージしました」は、Git で管理している印です。
マージで自動でサーバーに上がるかどうかは、その仕組み(GitHub Actions など)があるかで変わります。
Git の言葉はGit とは? の記事、自動で上げる仕組みはGitHub Actions とは? の記事で紹介しています。
「アップしました」「FTP で上げました」なら前者です。
「プッシュしました」「マージしました」は、Git で管理している印です。
マージで自動でサーバーに上がるかどうかは、その仕組み(GitHub Actions など)があるかで変わります。
Git の言葉はGit とは? の記事、自動で上げる仕組みはGitHub Actions とは? の記事で紹介しています。
テストサーバーと本番サーバー
直したページをいきなり公開すると、崩れていた時に、お客様に見えてしまいます。
そのため、お客様が見る本番サーバーとは別に、テストサーバーを用意して、先にそこで確かめる形が一般的です。
テストサーバーは、検証環境/ステージングとも呼びます。
テストサーバーは、お客様や検索に見つからないよう、Basic 認証(ID とパスワードを聞く画面)で守っていることが多くあります。
制作会社から「テスト環境で確認をお願いします」と、URL と ID/パスワードが届いたら、それがこのサーバーです。
確かめて返事をすると、制作会社が本番サーバーへ上げます。
そのため、お客様が見る本番サーバーとは別に、テストサーバーを用意して、先にそこで確かめる形が一般的です。
テストサーバーは、検証環境/ステージングとも呼びます。
テストサーバーは、お客様や検索に見つからないよう、Basic 認証(ID とパスワードを聞く画面)で守っていることが多くあります。
制作会社から「テスト環境で確認をお願いします」と、URL と ID/パスワードが届いたら、それがこのサーバーです。
確かめて返事をすると、制作会社が本番サーバーへ上げます。
サーバーの中で動くもの:プログラムとデータベース
見るだけのページと、動くページの違い
カピ
お問い合わせフォームで送った内容は、どこに行くんですか?ファイルの中に書き込まれるんですか?
ビーバー先生
多くのフォームは、ファイルには書き込みません。送るボタンを押すと、サーバーの中でプログラムが動いて、入力をメールにして送っています。
ページには、見るだけのページと、動くページがあるんです。
手で作った会社概要やサービス紹介のページは、サーバーがファイルをそのまま返すだけです。
これを静的なページと呼びます。
一方、お問い合わせフォームの送信/サイト内検索/ログイン/予約/ネットショップの注文は、ブラウザから届いた内容をサーバーの中で処理して、その結果を返します。
これを動的なページと呼びます。
動くページには、プログラムと、多くの場合データベースが要ります。
これを静的なページと呼びます。
一方、お問い合わせフォームの送信/サイト内検索/ログイン/予約/ネットショップの注文は、ブラウザから届いた内容をサーバーの中で処理して、その結果を返します。
これを動的なページと呼びます。
動くページには、プログラムと、多くの場合データベースが要ります。
| 見るだけのページ | 動くページ | |
|---|---|---|
| 例 | 手で作った会社概要/サービス紹介/お知らせ | フォーム/検索/ログイン/予約/注文/CMS で作ったページ |
| サーバーがすること | ファイルを返す | プログラムを動かして、結果を返す |
| 必要なもの | ファイル | ファイル+プログラム(+データベース) |
| 止まる原因 | ファイルを消した/直し間違えた | プログラムやデータベースの不具合/サーバーの設定の変更/古くなった部品 |
WordPress などの CMS で作ったサイトでは、会社概要のページも、記事と同じくデータベースから組み立てる動くページです。
見た目が普通のページでも、ファイルだけをバックアップしても戻せないので、自社のサイトがどちらの作りかを知っておきたいところです。
見た目が普通のページでも、ファイルだけをバックアップしても戻せないので、自社のサイトがどちらの作りかを知っておきたいところです。
プログラム(PHP など)の役割
ホームページのサーバーで動くプログラムは、PHP(ピーエイチピー)という言語で書いたものが多く、WordPress も PHP で出来ています。
他に Ruby/Python/Node.js などもあります。
プログラムは、例えば次のことをしています。
他に Ruby/Python/Node.js などもあります。
プログラムは、例えば次のことをしています。
- フォームの入力を受け取り、抜けや形を確かめて、担当者と送った人にメールを送る(フォームのメールの記事)
- データベースから記事や商品を取り出して、HTML に組み立てて返す
- ログインの ID とパスワードを確かめて、会員だけのページを出す
- 注文を受けて、在庫を減らし、決済のサービスに繋ぐ
プログラムは、制作会社が書くか、WordPress のように出来合いのものを使います。
サーバーの PHP の版(バージョン)が古くなると、サーバー会社が更新を求めてきたり、新しい部品が動かなくなったりします。
「PHP のバージョンを上げます」という連絡は、この話です。
サーバーの PHP の版(バージョン)が古くなると、サーバー会社が更新を求めてきたり、新しい部品が動かなくなったりします。
「PHP のバージョンを上げます」という連絡は、この話です。
データベースとは
データベースは、記事/商品/会員/注文のような、件数が増えていく記録を、表の形で入れておく仕組みです。
サーバーの中にあり、ページのファイルとは別の場所に置いてあります。
レンタルサーバーでは MySQL(マイエスキューエル)か MariaDB という種類が多く、サーバーの管理画面から作ります。
WordPress の記事の本文は、ファイルではなく、データベースに入っています。
管理画面で記事を保存すると、データベースの記録が増えたり、書き換わったりします。
ページを開いた時に、プログラムがその記録を取り出して、HTML にしています。
そのため、ファイルだけをバックアップしても、記事は残りません(システムがあると増えること)。
サーバーの中にあり、ページのファイルとは別の場所に置いてあります。
レンタルサーバーでは MySQL(マイエスキューエル)か MariaDB という種類が多く、サーバーの管理画面から作ります。
WordPress の記事の本文は、ファイルではなく、データベースに入っています。
管理画面で記事を保存すると、データベースの記録が増えたり、書き換わったりします。
ページを開いた時に、プログラムがその記録を取り出して、HTML にしています。
そのため、ファイルだけをバックアップしても、記事は残りません(システムがあると増えること)。
「システム」と呼ばれるもの
制作会社や社内で「システム」と呼んでいるものは、たいてい、プログラムとデータベースを組み合わせたものです。
会社のホームページでよく使うものを並べます。
会社のホームページでよく使うものを並べます。
| システム | 何をするか | プログラム | データベース |
|---|---|---|---|
| CMS(WordPress など) | 管理画面から記事やページを書いて、公開する | 使う | 使う |
| お問い合わせフォーム | 入力を受けて、メールを送る | 使う | 使わないことが多い |
| サイト内検索 | 言葉でページを探す | 使う | 場合による |
| 会員/ログイン | 会員だけのページ/マイページ | 使う | 使う |
| 予約 | 日時を選んで申し込む | 使う | 使う |
| ネットショップ | 商品/カート/注文/決済 | 使う | 使う |
「使う」が多いほど、置くもの/更新するもの/バックアップを取るものが増えます。
作る量が多いうえに、後の更新とバックアップの手間も増えるので、見積もりの「システム」の項目が大きく、保守の費用も掛かります。
作る量が多いうえに、後の更新とバックアップの手間も増えるので、見積もりの「システム」の項目が大きく、保守の費用も掛かります。
他社のサービスを繋いで使うもの
システムを全部、自社のサーバーに置くとは限りません。
次のようなものは、他社のサービスを自社のページに組み込んで使います。
次のようなものは、他社のサービスを自社のページに組み込んで使います。
- フォーム作成サービス
- Google フォーム/formrun など。
入力の受け取りと保管を、そのサービスが行う - 決済
- Stripe/PayPal/各カード会社。
カード番号は自社のサーバーを通らず、決済のサービスが預かる - 地図/動画
- Google マップ/YouTube。
ページに埋め込んで表示する - 計測タグ
- Google アナリティクス/タグマネージャー。
訪問の記録を Google のサーバーに送る(タグマネージャーの記事)
これらは自社のサーバーの外で動いていて、契約やアカウントも別にあります。
ネットショップを BASE や Shopify などのサービスで作っている場合も同じで、商品と注文は、そのサービスの中にあります。
「誰のアカウントで作ったか」が分からなくなりやすいので、契約の一覧に一緒に書いておきたいところです。
ネットショップを BASE や Shopify などのサービスで作っている場合も同じで、商品と注文は、そのサービスの中にあります。
「誰のアカウントで作ったか」が分からなくなりやすいので、契約の一覧に一緒に書いておきたいところです。
システムがあると増えること
見るだけのページに比べて、システムがあるホームページでは、次のことが増えます。
- セキュリティの更新
- WordPress の本体/テーマ/プラグインや、PHP の版に更新が出る。
放っておくと、不正アクセスの入口になることがある - バックアップ
- ファイルとデータベースの両方のバックアップ(控え)を取る。
片方だけでは戻せない。
サーバー会社の自動バックアップの有無と期間を確かめる - サーバー移行で移す物
- ファイルに加えて、データベースの中身と、プログラムの設定(接続先など)も移す(制作会社の担当者がやることの記事)
- 保守の契約
- 更新とバックアップを誰がするかを決めておく。
制作会社の保守契約に入っていることが多い
見る側:ブラウザと https
https と SSL 証明書
URL の先頭の https は、ブラウザとサーバーの間の通信を暗号化している印です。
暗号化には、サーバーに入れる SSL 証明書が要ります。
証明書には期限があり、レンタルサーバーでは、無料の証明書を自動で更新する設定が一般的です。
https のページでは、Safari は URL の欄に鍵のマークを出します。
Chrome/Edge は 2023年から鍵のマークをやめ、サイトの情報を開く別のアイコンに変わりました。
期限が切れると、ブラウザが「この接続ではプライバシーが保護されません」と警告を出し、お客様がページを開けなくなります。
証明書の種類と、警告が出た時の調べ方は、SSL 証明書(https)の記事で紹介しています。
https でも、本物のサイトとは限らないことは、偽サイトを見破る方法の記事で紹介しています。
暗号化には、サーバーに入れる SSL 証明書が要ります。
証明書には期限があり、レンタルサーバーでは、無料の証明書を自動で更新する設定が一般的です。
https のページでは、Safari は URL の欄に鍵のマークを出します。
Chrome/Edge は 2023年から鍵のマークをやめ、サイトの情報を開く別のアイコンに変わりました。
期限が切れると、ブラウザが「この接続ではプライバシーが保護されません」と警告を出し、お客様がページを開けなくなります。
証明書の種類と、警告が出た時の調べ方は、SSL 証明書(https)の記事で紹介しています。
https でも、本物のサイトとは限らないことは、偽サイトを見破る方法の記事で紹介しています。
パソコンとスマホで見え方が違う理由
今のホームページの多くは、パソコンとスマホで別のページを作っているのではなく、1つの HTML を、CSS が画面の幅に合わせて並べ替えています。
これをレスポンシブと呼びます。
そのため、文章を1か所直せば、両方が変わります。
一方で、パソコンで確かめただけでは、スマホで崩れていても気づけません。
制作会社から確認を頼まれた時は、スマホでも開いてみると安心です。
これをレスポンシブと呼びます。
そのため、文章を1か所直せば、両方が変わります。
一方で、パソコンで確かめただけでは、スマホで崩れていても気づけません。
制作会社から確認を頼まれた時は、スマホでも開いてみると安心です。
直したのに古いまま出る時(キャッシュ)
「直しました」と連絡が来たのに、開いても前のままに見える、ということがよくあります。
多くの場合、ブラウザが前に見たページの写し(キャッシュ)を出しています。
次の順で試すと、新しいページが出ます。
多くの場合、ブラウザが前に見たページの写し(キャッシュ)を出しています。
次の順で試すと、新しいページが出ます。
- Windows は Ctrl キーを押しながら F5、Mac は Shift キーを押しながら更新のボタン(Chrome/Edge の場合)
- それでも変わらない時は、シークレットウィンドウで開く
- サーバーの側にも写しを置く仕組み(サーバーのキャッシュ)があり、制作会社が消すまで古いままのこともある
自分には新しく見えていても、お客様のブラウザには前の写しが残っている、ということも起きます。
急ぎの直しでは、制作会社に「キャッシュは消してありますか」と聞いておくと確実です。
急ぎの直しでは、制作会社に「キャッシュは消してありますか」と聞いておくと確実です。
誰が何を管理しているか
契約の一覧
ここまでの部品を、契約の単位で並べると、次のようになります。
自社の分を埋めて社内で共有しておくと、担当が替わった時や、制作会社を変える時に困りません。
自社の分を埋めて社内で共有しておくと、担当が替わった時や、制作会社を変える時に困りません。
| 契約 | 何のため | 契約先の例 | 更新 | 確かめること |
|---|---|---|---|---|
| ドメイン | 名前 | ドメイン会社 | 1年毎(複数年も) | 登録者の名義/更新の通知の届け先 |
| サーバー | ファイルとメールの置き場所 | サーバー会社 | 月毎/年毎 | 契約者の名義/プラン/自動バックアップ |
| SSL 証明書 | https | サーバー会社か、証明書の会社 | 1年以下。 無料のものは自動更新が多い |
期限/自動更新か |
| メール(別の場合) | メールの置き場所 | Google Workspace/Microsoft 365 | 月毎/年毎 | 管理者のアカウント |
| CMS/システムの保守 | 更新とバックアップ | 制作会社 | 年毎など | 何を、どこまでするか |
| 他社のサービス | フォーム/決済/計測など | それぞれ | それぞれ | 誰のアカウントで作ったか |
| 制作会社 | 作る/直す | 制作会社 | 案件毎/保守 | ファイルの一式を受け取れるか |
管理画面のログイン情報の置き場所
ドメイン会社/サーバー会社/CMS/他社のサービスには、それぞれ管理画面があり、ID とパスワードがあります。
担当者のメモや、1人のブラウザにしか残っていない状態だと、その人が休んだ時や辞めた時に、誰も入れなくなります。
パスワード管理アプリ(Bitwarden など)に会社として入れておき、必要な人で共有する形がおすすめです。
始め方はBitwarden の使い方ガイドの記事、2段階認証のコードを複数人で使う方法は共有アカウントの2段階認証の記事で紹介しています。
担当者のメモや、1人のブラウザにしか残っていない状態だと、その人が休んだ時や辞めた時に、誰も入れなくなります。
パスワード管理アプリ(Bitwarden など)に会社として入れておき、必要な人で共有する形がおすすめです。
始め方はBitwarden の使い方ガイドの記事、2段階認証のコードを複数人で使う方法は共有アカウントの2段階認証の記事で紹介しています。
制作会社に任せていても、自社で持っておきたい情報
カピ
ドメインもサーバーも、制作会社さんが代わりに契約してくれています。それだと、駄目ですか?
ビーバー先生
駄目ではありません。ただ、名義が制作会社だと、契約をやめる時や、別の会社に頼む時に、名義を移す手続きが要ります。
少なくとも「何を、どこと、誰の名義で契約しているか」は、自社で持っておいてください。
制作会社に任せていても、次のことは自社で持っておきたい情報です。
- ドメインの契約先と、登録者の名義、期限
- サーバーの契約先と、契約者の名義、プラン、期限
- ドメインの設定(DNS)を、どこの管理画面で変えるか
- CMS の管理画面の URL と、管理者の ID
- 他社のサービスの一覧と、作ったアカウント
- ファイルの一式(または Git のリポジトリ)を、自社でも受け取れるか
名義が制作会社になっている場合、すぐに変えなくても大丈夫です。
「やめる時に名義を移せるか」を契約の時に確かめておくと安心です。
「やめる時に名義を移せるか」を契約の時に確かめておくと安心です。
制作会社を変える時/サーバーを移す時に起きること
ここまでの部品が分かると、「制作会社をやめたら、ホームページは消えるのか」にも答えられます。
- ドメインとサーバーが自社の名義
- 制作会社との契約をやめても、ホームページは消えない。
直す人がいなくなるだけ - ドメインかサーバーが制作会社の名義
- そのまま契約をやめると、制作会社が解約した時点で消える。
ドメインは、先に自社の名義に変えるか、自社の契約先へ移管する。
サーバーは、名義を変えるか、自社で借りた新しいサーバーへ移す - サーバーを移す
- ファイル/データベース/メールを新しいサーバーへ移し、ドメインの設定の行き先を変える(サーバー移行の進め方の記事)
- ドメインの契約先を変える
- 名前はそのままで、契約先だけ移す。
ホームページもメールも止めずに出来る(ドメインの移管の記事)
制作会社からの連絡に出てくる言葉の読み替え表
制作会社からの連絡に出てくる言葉を、この記事の言葉に読み替える表です。
分からない言葉が出てきた時に、戻ってきてみてください。
分からない言葉が出てきた時に、戻ってきてみてください。
| 連絡に出てくる言葉 | 意味 | この記事の中 |
|---|---|---|
| アップ/デプロイ | サーバーにファイルを上げる | FTP と Git |
| プッシュ/マージ | Git で、直したファイルを送る/合わせる | FTP と Git |
| DNS を切り替える | ドメインの設定で、行き先のサーバーを変える | 行き先の設定 |
| ステージング/検証環境/テスト環境 | テストサーバー | テストサーバーと本番サーバー |
| Basic 認証 | テストサーバーに掛ける、ID とパスワードの画面 | テストサーバーと本番サーバー |
| キャッシュ | 前に見たページの写し | キャッシュ |
| レスポンシブ | 1つのページを、画面の幅で並べ替える | 見え方が違う理由 |
| CMS | 管理画面から記事を書く仕組み(WordPress など) | システムと呼ばれるもの |
| FTP | ファイルをサーバーに送る方法 | FTP と Git |
| SSL/証明書 | https のために、サーバーに入れるもの | https と SSL 証明書 |
| データベース/DB | 記事や注文の記録の置き場所 | データベースとは |
| PHP のバージョン | サーバーで動くプログラムの言語の版 | プログラムの役割 |
| API | 他社のサービスと、プログラム同士で繋ぐ口 | 他社のサービス |
| ASP/SaaS | 自社のサーバーに置かず、他社のサービスとして借りて使うもの | 他社のサービス |
| サーバー移行/サーバー移転 | ファイル/データベース/メールを別のサーバーへ移し、ドメインの行き先を変える | サーバーを移す時に起きること |
| 移管 | ドメインの契約先を、別のドメイン会社へ移す | サーバーを移す時に起きること |
| 名義変更 | ドメインやサーバーの契約者を変える | 自社で持っておきたい情報 |
| 名義/管理権限 | 契約者が誰か/管理画面に誰が入れるか | 自社で持っておきたい情報 |
よくある質問
ホームページは、どこにあるのですか?
契約しているサーバー会社のデータセンターにある、コンピュータの中です。
会社のパソコンや制作会社のパソコンには、作業中のファイルがあるだけです。
お客様は、サーバーの中のものを見ています。
会社のパソコンや制作会社のパソコンには、作業中のファイルがあるだけです。
お客様は、サーバーの中のものを見ています。
ドメインとホームページとメールは、1つだけやめられますか?
ホームページだけやめる(サーバーの中のファイルを消す)、メールだけやめる(サーバーのメールの設定を消す)、メールだけ別の会社に移す、は出来ます。
ドメインをやめると、ホームページとメールの両方が使えなくなります。
使わなくなったドメインも、しばらくは持っておく会社が多くあります。
他の人が取って、偽サイトや迷惑メールに使うことがあるためです。
ドメインをやめると、ホームページとメールの両方が使えなくなります。
使わなくなったドメインも、しばらくは持っておく会社が多くあります。
他の人が取って、偽サイトや迷惑メールに使うことがあるためです。
「サーバーが落ちた」とは、何が起きているのですか?
サーバーのコンピュータが止まっているか、アクセスが集中して返せなくなっている状態です。
ホームページが開かず、メールも届かなくなります。
届かなかったメールは、送った側のサーバーがしばらく送り直すので、短い障害なら遅れて届きます。
多くはサーバー会社が復旧し、障害情報のページに状況が出ます。
障害情報のページを見ると、復旧の見込みが分かります。
ホームページが開かず、メールも届かなくなります。
届かなかったメールは、送った側のサーバーがしばらく送り直すので、短い障害なら遅れて届きます。
多くはサーバー会社が復旧し、障害情報のページに状況が出ます。
障害情報のページを見ると、復旧の見込みが分かります。
検索で出てこないのは、なぜですか?
ホームページがサーバーにあることと、検索に出ることは、別です。
Google が見に来て(クロール)、登録して(インデックス)、初めて検索に出ます。
公開したばかり/テストサーバー用の設定(検索に載せない印や Basic 認証)が本番に残っている/他のページに負けている、のどれかが多いです。
検索とホームページの関係は、アクセス解析と集客の全体像の記事で紹介しています。
Google が見に来て(クロール)、登録して(インデックス)、初めて検索に出ます。
公開したばかり/テストサーバー用の設定(検索に載せない印や Basic 認証)が本番に残っている/他のページに負けている、のどれかが多いです。
検索とホームページの関係は、アクセス解析と集客の全体像の記事で紹介しています。
バックアップは、どこまで取れていますか?
サーバー会社の自動バックアップは、ファイルとデータベースの両方を一定の期間だけ残すものが多いですが、プランによって無いこともあり、戻す時に費用がかかることもあります。
制作会社の保守契約で、別にバックアップを取っている場合もあります。
「誰が/何を/どのくらいの期間/戻す時の費用」を確かめておくと安心です。
制作会社の保守契約で、別にバックアップを取っている場合もあります。
「誰が/何を/どのくらいの期間/戻す時の費用」を確かめておくと安心です。
「システムが古いので作り直し」と言われたのは、なぜですか?
プログラムは、動かす側(PHP の版/WordPress の版)が新しくなると、古い書き方のものが動かなくなります。
また、古い部品には、見つかっている弱点(脆弱性)が直らないまま残ります。
見た目に変わりがなくても、土台の更新が要る、という意味です。
何がどう古いのかと、直さない場合に何が起きるかを、聞いてみてください。
また、古い部品には、見つかっている弱点(脆弱性)が直らないまま残ります。
見た目に変わりがなくても、土台の更新が要る、という意味です。
何がどう古いのかと、直さない場合に何が起きるかを、聞いてみてください。
Wix や Jimdo などの作成サービスは、何が違いますか?
サーバー/ファイル/プログラムとデータベースを、そのサービスがまとめて持っていて、自社は管理画面でページを作るだけです。
ドメインは、サービスの中で取るか、別で取って繋ぎます。
手軽な反面、他のサーバーへ「ファイルを持って移る」ことは出来ません(ページを作り直すことになります)。
やめる時にどうなるかを、先に知っておくと安心です。
ドメインは、サービスの中で取るか、別で取って繋ぎます。
手軽な反面、他のサーバーへ「ファイルを持って移る」ことは出来ません(ページを作り直すことになります)。
やめる時にどうなるかを、先に知っておくと安心です。
まとめ
カピは、電話を切った後、社長のところへ戻った。
「ホームページは、借りているサーバーの中にあります。ドメインとサーバーはうちの名義なので、制作会社との契約をやめても消えません。直す人がいなくなるだけです」
社長は、少し驚いた顔をした。
「ホームページは、借りているサーバーの中にあります。ドメインとサーバーはうちの名義なので、制作会社との契約をやめても消えません。直す人がいなくなるだけです」
社長は、少し驚いた顔をした。
カピ
5つの部品で考えると、請求書の項目も、制作会社さんの連絡も、何の話か分かるようになりました。
ビーバー先生
それが一番大事なところです。後は、契約の一覧を1枚作って、名義と期限を書いておけば、担当が替わっても困りませんよ。
ホームページは、5つの部品の組み合わせです。
それぞれの役割と、誰が持っているかは、次の通りです。
それぞれの役割と、誰が持っているかは、次の通りです。
- ドメイン
- ホームページとメールの名前。
ドメイン会社から年毎に借りる。
登録者の名義と期限を書き留めておく - サーバー
- ファイルとメールの置き場所。
サーバー会社から借りる。
ホームページは、この中にある - ファイル
- ページの中身(HTML/CSS/JavaScript/画像)。
制作会社が作り、FTP か Git でサーバーに上げる - プログラムとデータベース
- フォーム/CMS/ネットショップなど、サーバーの中で動く部分と、その記録。
更新とバックアップが要る - ブラウザ
- お客様の手元にある、見る側。
https と、前に見たページの写し(キャッシュ)は、ここの話
制作会社からの連絡で分からない言葉が出てきたら、読み替え表に戻ってみてください。
部品毎の詳しい話は、次の記事で紹介しています。
部品毎の詳しい話は、次の記事で紹介しています。
サイトの課題を、一緒に整理しませんか
IMG-flowは大阪のWeb制作会社です。
サイトの制作から公開後の運用改善まで、できることをサービスページにまとめています。
サービスを見る
相談だけでも受け付けています
サイトの制作から公開後の運用改善まで、できることをサービスページにまとめています。
この記事は参考になりましたか?
ご回答ありがとうございました