更新：2022/07/19　作成： 2021/05/20

更新：2022/07/19
作成：2021/05/20

風仙洞

Ｗｅｂサイトの公開手順

Ｗｅｂページを作成するソフトとしては、ワープロ風に作成する「ホームページ・ビルダー」（2021/05 現在、最新版は Ver.22）が有名です。しかし、私はワープロ風に編集するのが好きではありません。作成するソフトに依存しないのが HTML/CSS の考え方ですし、HTML/CSS を勉強しておかないと、ちょっとした手直しににも特定のＷｅｂページ作成ソフトが必要になってしまうからです。

Vusual Studio Code

その意味で、Ｗｅｂページ作成ソフトとして現時点ではマイクロソフト製の Visual Studio Code（VS Code）をオススメします。

VS Code の初心者向け設定については、別ページで解説しておきましたので、そちらをお読みください。
→ 「HTML/CSS 初心者のための Visual Studio Code 設定」のページ

2020年6月から2021年2月まで私が使っていた Brackets も優秀ですし、一部の機能は VS Code を凌いでいます。2021年3月にアドビ社による開発が終了し、9月にはサポートも終了しましたが、有志による開発が続けられています。
→ https://brackets.io/

Brackets のメリットのひとつは、日本語 OS 環境にインストールすると、いちいち日本語化しなくてもメニューが日本語になっていることです。

さて、このページでは、Ｗｅｂサイトを構築するに当たって、実際の HTML/CSS ファイル、画像ファイルを作成する以外の作業について書いていこうと思います。

特定のフォルダに各種ファイルが既にまとめて保存してあるとすると、Ｗｅｂサイト公開に当たって必要になるのは、

  1. レンタル・サーバーの契約
  2. レンタル・サーバーの主なオプション
  3. ＦＴＰソフトのインストールと設定
  4. Google Search Console への登録
  5. サイトマップの登録
  6. ファビコン（favicon）の組み込み

です。

レンタル・サーバーの契約

Ｗｅｂサイトを構築するとき、個人だけでなく法人でも、普通はレンタル・サーバーを利用します。自宅でＷｅｂサーバーを運営するなんて、Ｗｅｂ技術者の道楽のようなものです。それなりの知識・技術があって、機材や手間、費用を惜しまなければ自宅サーバーも可能ですが、レンタル・サーバーの方が安く済みます。

レンタル・サーバーの業者としては、

などいろいろあります。ネット検索すればわかります。Xfree など、無料レンタル・サーバー業者もありますが、無料の場合は広告が入ったり、容量が少なかったり、SSL 化や独自ドメインの導入ができなかったりと制約がきついです。練習用のサイトにしかならないでしょう。

私が契約している「さくらインターネット（さくらのレンタルサーバ）」はサポートが良く、欲張らないスペックの料金コースがあるので、初心者にはオススメです。安さ、高性能を謳っている業者もあります。有名であってもなかなか問い合わせメールに返事しない有名業者（新型コロナの影響で社員がテレワーク？、或いはコスト徹底削減？）もあるようです。パスワードがわからなくなった場合の問い合わせが有料の業者も存在します。

有料のレンタル・サーバー業者と契約するに当たって必要な料金は、初期手数料と利用料です。初期手数料は 1,000～数1,000円、利用料は、個人・小規模団体向けのコースの場合、年額数1,000～18,000円でしょう。支払い方法は、クレジットカード払いと銀行振込が中心ですが、コンビニ払いや請求書の発行に対応しているところもあります。月払いも可能なところが多いです。

「さくらのレンタルサーバ」スタンダードの主なスペックは、

です。このほかにデータ通信量の制約などもありますが、人気動画サイトにならない限り問題にはならないでしょう。コントロール・パネルから独自ドメインや無料 SSL 化を申し込めることは初心者に優しいと言えます。

年払いの費用は、

です（※2022/02/17 現在。独自ドメインと SSL 化の費用は別途必要）。

という割り切った使い方ならば、ディスク容量 10GB 100GB（2022/02/16 スペック改定） のライト・コースでも十分です（サーバー料金 1,571円/年）。実際、私は 100 MB も使っていなかったりします（爆）　ただし、後になって WordPress を試してみようと思ってもインストールできません。

レンタル・サーバーを申し込むと、受付確認及び ID、パスワード等の情報が契約者の登録メール・アドレスに送信されます。誤って削除しないようにしましょう。できればパソコンで POP 接続で送受信するメール・アカウントに登録情報用フォルダを作成して保存した方が良いでしょう。

レンタル・サーバーの主なオプション

前の章で少し触れましたが、レンタル・サーバーの主なオプションには次のようなものがあります。

レンタル・サーバーを契約すると、初期ドメインが提供されます。さくらのレンタルサーバの場合、

（ユーザー ID）.sakura.ne.jp

が初期ドメインです。初期ドメインのまま運用すればランニング・コストが安くなりますが、今や新規の契約では独自ドメインと SSL は常識です。

さくらインターネットの
ドメイン設定画面

※画像をクリックするとブラウザが
新しいタブに拡大表示

独自ドメインの種類は色々ありますが、個人や小規模グループが取得する場合は、gTLD（com/net/biz/org/info）が手頃です。各社年間 1,500～2,000円ですが、初年度だけ特別割引を適用するところもあります。さくらインターネットでは、年間料金約 2,000円で取得できます。「～jp」ドメイン（汎用jp/co.jp/or.jp/ne.jp）は、料金が数倍になるだけでなく、取得のための要件があったりして手続きが面倒です。また、安いからといって怪しげなもの（.xyz 等）は避けましょう。

なお、独自ドメインが有効になる（インターネット上に情報が伝わる）には、契約後数時間～数日かかります。

SSL は、Secure Sockets Layer の略で、Ｗｅｂサーバーと端末の間で暗号化された安全なデータ送受信を行うための仕組みです。入力フォームなどで個人データを扱うときには必須です。SSL が有効なときにはブラウザの URL 欄の左端に🔒マークが付きます。

大手のレンタル・サーバー業者は、年間 1,000円～約 10万円の有料 SSL サービスだけでなく、無料の SSL サービスも提供しています。その代表が Let's Encript です。

さくらのレンタルサーバの場合は、独自ドメインを取得しないと SSL が共有タイプになるという制約がありますが、独自ドメインを取得するならば、レンタル・サーバーのコントロール・パネルから Let's Encript を簡単に申し込めます。無料の SSL でも暗号強度は有料と同じですが、有料の場合はドメイン証明や企業証明、EV 証明も行われる選択もあります（しかし、その場合は万円単位と高い！）。

WordPress を代表とする CMS（Content Management System）については、各社とも主要な料金コースでは無料でインストールできます。ただし、CMS の設定についてのサポートはしていません。

メール・アドレスについては、各社のサービスとも全体のディスク容量の許す限りアカウント数を自由に増やせますが、１アカウントあたりの初期容量は 200 MB 程度だったりします。容量を増やせるかどうかは、契約前のスペック表では明記されていなかったりしますが、XServer は、200 GB の料金コースでも１アカウントのディスク容量を最大 5 GB まで増やせることを謳っています。さくらのレンタルサーバでは、いつの間にか初期容量が 1 GB になっていました（2021/06/10 確認）。

FTP ソフトのインストールと設定

FileZilla の画面

レンタル・サーバー会社のヘルプ・ページには、FTP ソフトでの設定例が掲載されているのが普通です。設定例が紹介されているという意味で、

がオススメです。両方とも定評のあるフリーソフトですが、特に FFFTP は、日本のインターネット草創期からある定番です。

なお、この種の小物のオンライン・ソフトは、Office系などの大物ソフトとは別に、C ドライブ直下に OLS というようなフォルダを作成し、その下にソフトごとのフォルダを作成しておくと、パソコンを入れ替えたときに OLS ソフトごとコピーできて便利です。大物ソフトと違って、オンライン・ソフトのほとんどは、Windows のシステム・フォルダに DLL ファイルをインストールしないので、コピーしただけでも動作します。

FFFTP の画面（Ｗｅｂサーバーに接続した状態）
FFFTP の「ホスト設定」基本画面

「さくらインターネット」のレンタル・サーバーを借りている場合、FTP ソフト FFFTP のホスト設定「基本」タブには右図のように設定します。

  1. ホストの設定名：任意の命名
  2. ホスト名（アドレス）：
    初期ドメイン*
  3. ユーザー名：FTP アカウント*
  4. パスワード：
    サーバパスワード*
  5. ローカルの初期フォルダ
  6. ホストの初期フォルダ*

「*」のついた項目が「[さくらのレンタルサーバ] 仮登録完了のお知らせ」に記載されます。初期ドメインの先頭部分とユーザー名（FTP アカウント）は同一です。

通常の家庭向けインターネット回線の場合、おそらく基本タブ以外の設定箇所は、

だけです。

Google Seach Console への登録

独自ドメインが有効になったら、今度は Google Search Console への登録が必要です。Ｗｅｂサイトを開設しても、検索エンジンに登録しなくてはクローラー（検索情報収集プログラム）に来てもらえず、検索対象にさえならないかも知れません。

Google Search Console の案内ページ（日本語）は、
https://search.google.com/search-console/about?hl=ja
です。このリンクを利用しなくても「Google Search Console」でネット検索すれば簡単に見つかります。

Google Search Console の案内ページ

右図の青い「今すぐ開始」ボタンをクリックすると、Google Search Console に行きます。

まず行うのは、プロパティ＝対象ドメインの登録です。上の図で、左上の「▼」をクリックすると、右図のように「プロパティを追加」項目が現れますので、これをクリックします。

プロパティの登録方法は２つあります。

機能としてどう異なるのかというと......

プロパティ・タイプの選択

です。

「ドメイン認証」を選択した方が便利だと思いますが、Google Search Console の項目データ（「google-site-verification=」で始まる文字列）をコピーした上で、ドメイン管理の「ゾーン編集」で追加する必要があります。下の図は、さくらインターネットのドメイン管理メニューの例です。

✅さくらインターネットは２０２２年２月にリニューアルを行い、既存の会員に対しても新システムへの移行を促しています。下のサイト・デザインは、リニューアル前のものです。

ゾーン表示とゾーン編集

「変更」をクリック → 「種別」で「テキスト(TXT)」を選択 → 「値」欄に Google Search Console からのデータをペースト → 「新規登録」 → 「データ送信」

「URL プレフィックス」の場合は、所有権の確認方法として

  1. 確認コードを記述した HTML メタ・タグを head セクションにコピーしたトップページをサーバーにアップロード
  2. 確認コードを記述した HTML ファイル をサーバーにアップロード
  3. Google Analytics のアカウントを使用する
  4. Google タグ マネージャーのアカウントを使用する
  5. ドメイン名プロバイダ：DNS レコードを Google に関連付ける

がありますが、初めてレンタル・サーバーを借りた人にとっては、1. か 2. が実行しやすいでしょう。いずれの場合も「確認」ボタンをクリックすることが必要です。なお、1. の確認コードを記述した HTML メタ・タグのコピーは、次のような画面で行います。

確認コードを記述した HTML メタ・タグをコピー

※上の画像をクリックすると別タブに拡大表示

2. の HTML ファイルの場合も、コピー対象がテキストで、拡張子を「.html」とした指定のファイル名で保存することが違うだけで、似たようなものです。

サイトマップの登録

プロパティとして自サイトを登録したら、次はサイトマップの登録です。インタ－ネット上に無料で作成してくれるサービスがありますので、それを利用するのが簡単です。URL の数（Ｗｅｂページの数）が最大 1,000 だったりしますが、個人で 1,000 ページなんて普通は作れないので問題ありません。

サイトマップ作成サービスを利用してのサイトマップ作成手順は、

  1. 「サイトマップ 自動生成 無料」をキーワードにネット検索
  2. 見つかったサービス・サイト（例えば http://www.sitemapxml.jp/）で自サイトの URL など、必要項目を入力
  3. 「サイトマップ作成」ボタンをクリック
  4. 作成された sitemap.xml を自分のパソコンにダウンロード

です。もっとも、サイトマップと言っても結局は XML という HTML に似たデータ・フォーマットで書かれたテキスト・ファイルなので、Ｗｅｂページを自分で作成するくらいの知識があれば、自分で作成できます。

ポイントは、

です。繰り返し部分は、表計算ソフトやデータベースソフトに慣れていれば、計算式で項目データを連結して作成できます。

「桐 Ver 10s for Windows」でのサイトマップ・データ

※上の画像をクリックすると別タブに拡大表示

私は「桐 for Windows」というデータベースソフトに馴染んでいるので、サイトマップのデータを「桐」で作成しています。url 要素となる「連結」項目の計算式は、

"<url><loc>"+[LOC]+"</loc>"+"<lastmod>"+[LASTMOD]+"</lastmod></url>"

です。これで繰り返し部分をテキストとして書き出し、固定部分に挟めば XML ファイルとして出来上がりです。なお、サイトマップのファイル名に「sitemap.xml」を使うことが多いようですが、必ずしも「sitemap.xml」である必要はありません。半角英数字で拡張子が「.xml」であれば Google Search Console は受け付けます。

いずれにしても、

  1. FTP ソフトでサイトマップファイルをサーバーの初期フォルダ（トップ・ページ＝index.html があるフォルダ）にアップロード
  2. Google Search Console でサイトマップの URL を入力して「送信」ボタンをクリック

するとサイトマップに記述された URL を Google のクローラーが約１週間後から巡回するようになります。巡回するようになれば２日前までの

をグラフや表などで表示してくれます。最後の２項目は、私の場合データ不足とのことで、まだ表示されません。

ファビコン（favicon）の組み込み

最後はファビコン（favicon）です。どういうものかというと......

上の画像で赤丸印を付けたのがファビコンです。

  1. ブラウザの各タブ左端やアドレスバー
  2. ブラウザのブックマーク左端

で使われます。而してその実体は......サイトのトップページと同じフォルダ、または画像用のフォルダに置かれた ICO 形式の画像データです。問題は ICO 形式の画像作成に対応している画像処理ソフトが少ないことです。Adobe Photoshop でも素のままでは対応していなくて、プラグインが必要らしいです。

作成・設置方法はいくつかありますが、

  1. できれば 16 × 16 ピクセル、32 × 32 ピクセル、48 × 48 ピクセルの３種類の大きさで（32 × 32 ピクセルでだけでも可）PNG 形式の画像を作成する。
  2. インターネット上の無料ファビコン作成サイトで ICO 形式に変換してもらう（複数の大きさで PNG 形式画像を用意した場合、ひとつにまとめられる）。
  3. 自サイトのトップページと同じフォルダに FTP ソフトでアップロードする。
  4. HTML ファイルのヘッド・セクション（<head>から</head>の間）に
    例： <link rel="icon" href="favicon.ico">
    と記述する。

のが一番手軽です。ブラウザは、ICO 形式画像に含まれた最も適切なサイズのデータを、必要な場合は縮小して利用するそうです。

ファイル名が「favicon.ico」であり、トップページと同じフォルダに設置されていれば、link 要素での組み込みがなくてもたいていブラウザは認識するそうですが、link 要素で組み込んだ方が確実です。また、link 要素を使ってパスを正しく指定すれば、ファイル名が「favicon.ico」でなくても（ただし半角英数字＋拡張子「.ico」）、トップページと異なるフォルダであってもファビコンとして認識されます。

ファビコンが無くても、Ｗｅｂページとしての動作や機能には関係ありません。単なる飾りです。しかし、ファビコンがあることで、視認性が高まり、印象深くなります。是非とも設置しましょう。

なお、PNG 形式の 180 × 180 ピクセルの画像を「apple-touch-icon.png」というファイル名で作成すれば、スマートフォンやタブレットのホーム画面向けに登録されるそうです。link 要素での指定は、

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

が普通です。サイズ部分の「x（アルファベットの小文字エックス）」は、大文字の「X」でもＯＫです。また、パスを正しく記述すれば別のフォルダに置いても構いません。