クイックスタートガイド:ホームページ作成チュートリアル

ホームページオープンまでの設定方法

ホームページをはじめて作る方に、3つのステップでホームページを作れるようにしました。はじめてのスタートからホームページをセットアップするまでサポートします。

ホームページオープンまでの設定

  1. プラットフォームを選ぶ
  2. ドメインとレンタルサーバーを選ぶ
  3. セットアップ

ステップ1:プラットフォームを選ぶ

プラットフォームとは、ホームページをオープンする場所や作り方のことです。どのプラットフォームを選ぶかが大切になります。それぞれに良し悪しがあり、どんな目的のホームページが欲しいのかによって変わってきます。大まかに3つの方法があると思ってください。

ホームページ作成サービスホームページ作成ソフトCMS(ここではWordPress)の3種類について解説します。自分にあった作り方を選びましょう。

1-1:ホームページ作成サービスではじめるなら

最短15分ですぐにはじめたい場合は「ホームページ作成サービス」を選ぶといいでしょう。ホームページ作成サービスには無料版が用意されているので、試してみることができます。

ここでは、代表的なホームページ作成サービスのWix.comを例に解説します。

ホームページ作成サービスに向いているのはどんな人?

・サロン・エステ・美容室・理容室・整骨院・トレーニングジム・飲食店などのお店を経営している方。

・弁護士・会計税理士・司法書士・行政書士などの士業系や保険代理店やコンサルタント系の方。

・洗煉されたおしゃれなデザインで訪問者を逃さないホームページを作りたい方。

・起業するから今すぐ、スモールビジネス向けのホームページが欲しい方。

・時間を節約して本格的なホームページを今すぐ作りたい方。

・HTMLなど知識を覚えたくない方。

・更新頻度が高い業種の方。

個人事業主や中小企業向けの小規模なホームページを作りたい方に向いています。ページ数が数百〜千ページもあるような、大規模なホームページには向きません。

ソフトにはない機能、予約管理・クポーン発行・メールマガジンの発行などバックエンドの機能を使いたいならホームページ作成サービスが適しています。

ホームページ作成サービスで作る場合へ

1-2:ホームページ作成ソフトではじめるなら

ホームページ作成ソフトに向いているのはどんな人?

・静的サイトでホームページが作られるので、出来上がったファイルを安全に保管しておきたい方。

・副業に役立つ情報サイト(アフィリエイトサイト)を作りたい方。

・複数のホームページを作りたい方。

100ページ程度の中規模ホームページの作成に向いています。

*補足:静的サイトというのは、HTML・スタイルシートで作られたテキストファイルのことです。アクセスがあった時にファイルをそのまま表示するものです。これに対して動的サイトというのは、サーバーで表示する情報を組み立ててから表示するものです。「ホームページ作成サービス」と「CMS」のほとんど(約90%)は動的サイトです。

*ソフトにはホームページ作成サービスのような本格的ホームページ運営に欠かせない機能(メルマガや予約管理など)はありません。

ホームページ作成ソフトで作る場合へ

1-3:WordPressではじめるなら

当サイトのアンケートで人気の高いCMS、WordPressを例にセットアップまでを解説します。

WordPressに向いているのはどんな人?

・ブログやオウンドメディアを素早くはじめたい方。

・ホームページの運営を本格的にはじめたい方。

・データベースを利用した複雑で大規模なホームページを作りたい方。

メディアなどの大規模なホームページに向いています。

WordPressはさまざまな機能をワンクリックで本体に追加することができます。プラグインとしてたくさんのアプリが公開されており、初心者の方でもカンタンにホームページを作ることができます。*プラグインというのはデフォルトのWordPressにはない機能を追加するアプリのことです。

ただし、プラグインの開発が中止になることも多く、信頼できるプラグインを選ぶ必要があります。ブログやメディアであればWordPressのデフォルトの機能とプラスアルファのプラグインでいいため、初心者の方でもカンタンにはじめることができます。

ホームページ作成サービス以上の機能を実現できますが、ECサイトや複雑なサイトを作る場合は専門知識が必要になり、運営の手間がかかります。

WordPressで作る場合へ

ステップ2:ドメインとレンタルサーバーを選ぶ

ドメインというのは、ホームページの住所のことだと思ってください。当サイトの場合は「youtukuru.com」Google日本法人の場合は「google.co.jp」となります。任意のドメイン名をつけて購入します。ドメインは重複したものは購入できませんので、自分のサイトを表現したドメイン名を考えたら購入できるかを調べましょう。調べ方は後でわかります。ドメインの値段は年間1800円くらいから購入できます。(値段はドメインの種類によって変わります。)

レンタルサーバーというのは、ホームページを公開する場所のことです。24時間動いているパソコンのことで、月額500円くらいで借りて使うことになります。アクセスがあった時にいつでもホームページを表示してくれます。性能によって料金は変わります。ホームページ作成ソフトとWordPressを利用する場合に必要になります。*ホームページ作成サービスを使う方は必要ありません。

でははじめに、一番カンタンなホームページ作成サービスでホームページをオープンする方法を説明します。

2-1:ホームページ作成サービスWix.comではじめるには

Wix.comで本格的にホームページをオープンしていきます。無料プランでは、「◯◯.wix.com/mysite/」のような Wix.com のドメイン名を使うことになります。これではビジネス上かっこ悪いので、オリジナルのドメイン名ではじめるところまでを説明します。

Wix.comは1年間ドメイン無料なのでとてもお得です。まずは無料版に登録し、プレミアムプランの「コンボ」「無制限」「eコマース」のいずれかを、「年額プラン」で契約することで無料クーポンをもらうことができます。
*プレミアムプランというのは料金を支払うことですぐれた機能を使えるプランのことです。

また、標準でHTTPS(SSL)に対応しています。SSLとは、セキュリティが強化された通信方法のことです。また、SEO(検索順位)にも良い影響があります。これからのホームページはSSL対応が常識です。
*ブラウザーのアドレス(URL)のところに鍵マークが表示されているのをみたことがあるのではないでしょうか。それがSSLに対応したホームページになります。

先ずは無料登録をしてみてください。一緒にすすめていきましょう。

Wix.comに無料登録する

登録するとすぐにテンプレートを選択する画面になりますので、気に入ったものを選んでください。テンプレートは後で変更できます。テンプレートを選択するともうすぐに制作ができます。

Wix.comエディターで編集

適当にいじったら右上の「保存」ボタンを押すことで編集内容を保存できます。

では早速、設定方法を見ていきましょう。

無料プラン登録をしたらダッシュボード内のプレミアムプランを選択します。ダッシュボードへの移動は上メニューの「サイト」から「エディター終了」です。

Wix.comダッシュボードプレミアムプラン

今回はプレミアムプランの中で一番人気の「無制限」を選びました。「帯域幅無制限」「Form Builder」「サイトブースター」がついたお得なセットです。「Form Builder」はオリジナルフォームを作れる有料アプリです。「サイトブースター」はSEO対策が良くなる有料アプリです。

Wix.comプレミアムプラン

年額プランを選択することで、ドメインが1年間無料になります。それに加えて、使用料がかなり安くなります。月額プランだと1,700円ですので、月額の差額434円 × 12ヶ月 =「年間5,208円」お得です。2年間だと「年間6,456円」お得です。

Wix.comプラン別支払い

次に、ドメインを取得します。

無料クーポンの使用期限は2ヶ月なので、いいドメイン名を思いついたらすぐに設定してしまいましょう。ホームページができてなくても、「どんどんアップしていくことでGoogleに更新している」ことが伝わり、SEO(検索エンジン上位表示対策)が良くなります。

Wix.comで取得できるドメインは「.com .net .org .info .biz .co .me .expert .guru .tv .tokyo .center」になります。下の画像に取得したいドメイン名を入力してみましょう。*ドメインの種類によって値段が異なります。新しく追加されていることもありますので、詳細は購入画面で確認してください。

Wixドメイン無料登録

Wix.comはサーバーもセットですので、すぐにホームページを作っていくことができます。

*今回セッティングしたWix.com「無制限プラン」の総費用です。1年目は無料サービスがありますが、2年目以降の目安としてご確認ください。

Wix.com 年払い「無制限プラン」の総費用*税別
項目 月額換算 年額支払い料金
無制限プラン 1,266円 15,192円
独自ドメイン(.bizの場合) 158円 1,900円
Whoisセキュリティー(任意) 100円 1,200円
メールアカウント1個 500円 6,000円
合計費用 2,024円 24,292円

Wix.com の料金はかなり安いです。普通のホームページ運営ではレンタルサーバー費用で月額2000円は普通の料金です。

これで準備完了です!Wix.comを例にすすめましたが、ホームページ作成サービスの場合はこれ以上「クイックスタートガイド」を読む必要ありません。あとは魅力的なホームページを作っていこう!
おっとその前に「売れるホームページの作り方」をみて制作のポイントを学んでください。

2-2:ソフトとWordPressの場合:レンタルサーバーを選ぶ

ソフトとWordPressではじめるなら、ホームページをインターネットに公開し、いつでも見てもらえるようにします。そのための準備をしていきましょう。ソフトで作ったホームページやWordPressを入れておく場所が必要になります。

その場所のことを「レンタルサーバー」といいます。インターネットに24時間つながったパソコンのことです。毎月500円ほどで借りることになります。

ここでは人気の「ロリポップレンタルサーバー」を例に解説します。

初心者にとてもわかりやすくサポートも充実したサーバーです。気軽にはじめるのにとても適しています。

ロリポップレンタルサーバー

ロリポップには4つのプランがあるのですが、その中でおすすめなのは、月額500からの「スタンダードプラン」です。それ以下のプランは極端に性能が悪くなるためです。スタンダードプランではデータベース30個、PHPモジュール版の利用ができるなど、下位プランと大幅に機能が変わりますので、ご注意ください。

特にWordPressを利用する場合はスタンダードプランがおすすめです。はじめてのホームページの運営に適したプランです。

ロリポップ公式サイトへ

まずは登録方法から説明します。

最初にロリポップで利用できる無料ドメインを登録します。任意のドメイン名を入力して登録します。このドメインはロリポップのサーバーを利用している間だけ、使用することができます。

ロリポップレンタルサーバー設定

ドメインの登録が済んだら、すぐにログインしてみましょう。

料金の支払いをします。左メニューの「サーバー契約・お支払」を選択し、右下の「お支払」ボタンから進めてください。事前にクレジットカード設定をしておけば「自動更新」を選べるので契約し忘れを防止できます。

ロリポップ料金支払い

ロリポップ「スタンダードプラン」費用*税別
項目 月額支払い 半年支払い 年額支払い
サーバー料金月額換算 600円 500円 500円
初期費用(1回のみ) 1,500円 1,500円 1,500円
契約時合計費用 2,100円 4,500円 7,500円
2年目以降年間費用 7,200円 6,000円 6,000円

2-2-1ドメインを購入する

ドメインの会社として有名なムームードメインを例に解説します。まずは公式サイトからドメイン名を検索しましょう。購入できない場合はすでに誰かに購入されています。

ムームードメイン

ムームードメインの公式サイトへ

>ムームードメインに表示されている料金は1年目の割引料金が含まれるドメインもあります。2年目以降のドメインの価格は申し込みページで複数年を選択した時にわかります。2年目以降の料金が正規価格です。

1年目の割引価格はキャンペーンで変動するので、参考までにご確認ください。ドメインも長期契約するほどお得になります。やすいと思って飛びつかずに2年目以降の料金を確認してから購入しましょう。

ドメインの価格例*税別
項目 1年目 2年目
.org 499円 1,815円
.site 69円 4,049円

ステップ3:セットアップ

ここでは取得したドメインをレンタルサーバーに接続する方法とFTPSソフトでレンタルサーバーにファイルを転送する方法を説明します。

3-1:ドメインをレンタルサーバーに接続

では、先ほど取得したドメインをレンタルサーバーに設定していきます。

「ドメイン管理」から「ドメイン一覧」を表示し、取得済みのドメインをクリックすると下の画像の画面になります。ここで確認するのは「ネームサーバー」です。

ネームサーバー設定

ネームサーバー設定ロリポップを選択

これでドメイン側の設定は終了です。反映されるまで最大で2〜3日かかる場合があります。

3-2:レンタルサーバー側で使用するドメインの設定

次にレンタルサーバー側で使用するドメインの設定をします。左メニューの「サーバー管理・設定」から「独自ドメイン設定」を選びます。

サーバードメイン設定

3-3:独自SSLの設定

独自SSLを設定することでセキュリティに強い通信が可能になります。Googleでは検索順位に影響すると正式にアナウンスしています。

ロリポップは無料で独自SSLの設定ができるので必ず設定しておきましょう。

左メニュー「セキュリティ」から「独自SSL証明書購入」を選んでください。下にスクロールすると下記の設定箇所が表示されます。ドメイン名www有・無の両方にチェックを入れてください。

独自SSLのを設定

しばらくしてから、ブラウザーからドメイン名を入力してアクセスしてみましょう。

3-4:FTPソフトをレンタルサーバーに接続

FTPソフトというのは自分のパソコンのファイルをレンタルサーバーに送るためのソフトです。

FTPソフトを使うケースは、ホームページ作成ソフトで作ったファイル一式をレンタルサーバーに送ることと、WordPressのテーマをカスタマイズした場合にテーマファイルをレンタルサーバーに送るために使います。

WordPressでブログ・メディアをすぐにはじめる方はここをスキップしても構いません。WordPressをインストールする方法へ移動。

ここでは代表的なFTPソフトの「FileZilla(ファイルジラ)」を使って設定方法を解説します。「Client」をダウンロードしてください。

Filezillaのダウンロード

FileZillaの公式サイトへ

アプリを立ち上げ、「ファイル」「サイトマネージャー」を選択すると下記の画面があらわれます。「新しいサイト」をクリックすると右側が編集可能になります。そこにロリポップの FTPアカウントの内容を入力します。

Filezillaの設定

レンタルサーバー側では、「ユーザー設定」「アカウント」を選択すると下記の画面が表示されます。セキュリティの関係上パスワードなどは隠しています。画像の下の対照表を参考に入力してください。

サーバー側FTPアカウント

FTPソフト入力欄対照表
FileZilla入力欄 選択項目 FTPアカウントより入力
プロトコル FTP-ファイル転送プロトコル
ホスト FTPSサーバー
ポート なし
暗号化 明示的なFTP over TLSが必要
ログオンタイプ 通常
ユーザー FTP・WebDAVアカウント
パスワード FTP・WebDAVパスワード

以上の項目を埋め、「接続」をクリックするとレンタルサーバーに接続できます。基本的な操作としては、ローカルサイトからリモートサイトへ「ドラッグ&ドロップ」することでファイルの転送ができます。

FTPソフトでファイル転送のやり方

詳しい操作は下記に紹介しています。

3-4:ホームページ作成ソフトで作ったファイルをレンタルサーバーに転送する方法

ローカルサイトの URLを入力する。自分のパソコンの中の、転送したいファイルのある場所を調べてください。そして、URLを入力します。

ローカルサイトのURLを入力

ロリポップに設定したドメイン名のフォルダの中に転送ます。初心者の頃はどこに入れたらいいかわからないと思います。トップに入れないように注意してください。

ドメイン名のフォルダをダブルクリックしてその中に転送してください。

ドメイン名フォルダをダブルクリック

ホームページ作成ソフトで作ったファイルを転送する方法は以上で終了です。ブラウザーにURLを入力してアクセスすると、ホームページが表示されていると思います。

また、WordPressのテーマをカスタマイズして、転送するときにも使いますので、必要なときにご確認ください。*WordPressテーマのURL「/wp-content/themes/テーマ名フォルダ」。

3-6:WordPressをインストールする方法

ロリポップレンタルサーバーにWordPressをインストールし、立ち上げてみます。

「サイト作成ツール」「WordPress簡単インストール」を選択してください。データベスは自動作成にし、サイト名・ユーザー名・パスワード・メールアドレス等を入力して完成です。ユーザー名とパスワードはメモしておいてください。

*ユーザー名は普通でいいのですが、パスワードは複雑で推測されにくく長いものにしてください。自己責任で管理するのが鉄則ですので、安易なパスワードをつけないように気をつけましょう。

サーバーでWordPress立ち上げを設定

ドメイン名をクリックするとすぐにWordPressサイトが完成したことがわかります。「ドメイン名/wp-admin」をクリックするとログイン画面に移動します。URLをブックマークしておきましょう。

サーバー側WordPress立ち上げ完了画面

このようにWordPressサイトが出来上がりました。

WordPressサイト完成

ドメイン名/wp-admin からログインしてみましょう。先ほどメモをしたユーザー名とパスワードで管理画面に入ることができます。

WordPressログイン画面

ログインしたらすぐに、セキュリティーの強化をしておきます。左メニューの「プラグイン」「インストール済みプラグイン」をクリックしてください。そして「SiteGuard WP Plugin」の有効化ボタンを押してください。このプラグインを有効化することでログインURLが変更になります。そして、ログイン時に画像認証が必要になり、セキュリティーが強化されます。

*ログインURLが変更になりますので、そちらもブックマークしておきましょう。

SiteGuard WP Pluginを有効化

WordPressも立ち上げまではとても簡単にできますので、あとは使い方を覚えて記事を書いてブログやメディアを楽しみましょう!

メディアサイトを作るときのチュートリアルもご覧ください。
4日で出来るWordPress本格的メディアサイト作成チュートリアル