【初心者向け】Webサイトの作り方の手順をゼロから徹底解説




こんにちは、IT関係にうといMayu(@Jope_Mayu)です。

先日こんなお問い合わせをいただきました。

ほぺろぐ(当ブログ)のサイトってどうやって作ったんですか?ご自身で?それともどこかのサービスで?

ありがたいことに、「このWebサイト見やすい!」という声をよく頂きます。

実はこのWebサイト、自分1人で作りました。。

Web関係が苦手でネットサーフィンくらいしかしていなかったわたしでも、このブログを簡単に作ることができました。

 

この記事を読んでくださっているあなたも、

サッカー選手(指導者)として学んだことや感じたことをブログで発信したい……
海外生活の記録を形に残すためにブログを始めたい……
起業してWebで集客したい……

なんて思っているかもしれません。

でもWeb関係が苦手であれば特に、

Webサイトってどうやって作ればいいんだ?

と思っちゃいますよね。

 

それを簡単に解決してくれるのがWordPress(ワードプレス)というシステムです。

WordPressを導入してしまえば、簡単に綺麗なWebサイトを作ることができます。

たとえばこんな感じ。

ブログとWebサイト、少し用途が違いますが、WordPressのテーマをそれぞれの目的に合わせて使い分ければどちらにも対応可能。

今回はWordPressのインストールまでを含めた、Webサイトをゼロから作る手順を徹底解説していきます。

ヒトデさんのブログ記事でも綺麗にまとめられており、参考にさせていただきました。

こちらの記事でも同じようにまとめたのでぜひ参考にしてみてください。

Mayu
iTunesさえも使いこなせないわたしが作れたので、思ったより簡単です!!!

ほぺろぐのテーマはSTORKです↓

Webサイトの作り方の大まかな流れ

WordPressで自分のWebサイトを作るために必要な手順はこちら。

インターネット上に自分の家を建てる感覚で考えてください
  1. サーバーを契約する(家を建てる土地を確保)
  2. ドメインを契約する(家の住所を設定)
  3. ドメインをサーバーに設定する(家を建てる土地に住所を紐づける)
  4. WordPressをインストールする(家を建てる)
  5. 独自SSL設定をする(家に鍵を取りつける)
  6. WordPressにテーマをインストールする(最低限の家具を置く)
Mayu
早ければ1時間ほどで出来ちゃいますよ〜

それでは始めましょう!

Webサイトの作り方①サーバーを契約する

エックスサーバーが最も人気かつおすすめ

WordPressを使ってブログをしている人のほとんどがエックスサーバー を使っています。

機能的に安定しているので初心者には安心ですし、料金も他社に比べて高くありません。

なにせ利用している人が多い分、困ったときにググったらたくさん情報が出てきます!それが本当に助かる!

こんなアンケート結果も出ています

Mayu
圧倒的なシェア率

サーバーの契約手順①必要事項を入力して申し込みをする

まずエックスサーバーのトップページ にアクセスします。

トップページのメニューバーからお申し込み→お申し込みフォームを選択

 

新規お申し込みを選択

 

必要事項を入力しましょう。

サーバーIDはサイトURLのことではなく、エックスサーバーのIDなので自由に設定してください。

プランはX10の最も安いプランで十分です。

そのほか名前、住所等の情報を入力して、お申し込みをすれば完了です。

 

申し込みが完了すると、登録したメールアドレスに

【Xserver】■重要■サーバーアカウント設定完了のお知らせ (試用期間)

というタイトルのメールが届きます。

海外在住の方へ
海外からエックスサーバーに申し込むと、エックスサーバーのカスタマーサポートからアクセス元の情報などをもとに、アカウント設定前に確認が入る場合があります。

確認のメールが入っても「現在〇〇にて留学中」など海外からアクセスしている理由を伝えると、アカウント設定を進めてくれると思うので安心してください。(わたしは確認が入りましたが、問題なく進みました)

サーバーアカウント設定完了のメールには、ユーザーアカウント情報やサーバーアカウント情報などの大切な情報が記載されています。しっかりと保存しておきましょう。

 

サーバーの契約手順②サーバー料金を支払う

料金の支払いは忘れないうちに済ませておきましょう

先ほど10日間無料お試し期間込みでお申し込みを済ませましたが、早くサーバー料金を支払ったとしても10日間の無料期間適用後に契約が開始されるので安心してください。

先ほどのアカウント設定完了メールのユーザーアカウント情報から、インフォパネルへアクセスします。

メールに記載された会員IDまたはメールアドレスパスワードを入力してログインします。

 

ログインしたら画面左部にある料金のお支払いをクリック。

 

ちなみに現在のX10プランの価格はこちら。(2018年9月現在)

引用:https://www.xserver.ne.jp/price/price_x10.php

 

①該当のサーバーにチェックを入れ、②更新期間を選択し、③お支払い方法を選択をクリックします。

金額と期間を照らし合わせて更新期間を選択し、金額を確認してお支払いを済ませます。

これでサーバーの契約が完了しました。

Mayu
自分のサーバー持ってるってなんかカッコいいよね

 

Webサイトの作り方②ドメインを契約する

ドメインは前にも書いたようにお家の住所のようなもので、WebサイトのURLを指します。

当ブログほぺろぐの場合はhttps://jopelog.com/の青文字部分がドメインにあたります。

こちらもITにうといわたしでも出来たので取得は簡単です。

お名前.comでドメインを取得する

エックスサーバーでもドメインを契約することができるのですが、お値段が少し高め。

そこでわたしも使っているお名前.com での取得をおすすめします。

Mayu
なんと最安値1円〜取得できます

ブロガーさんのほとんどがお名前.com で取得しているので、先ほどのサーバー同様に困ったときたくさんの情報をググって探せるのもポイント。

ドメインの契約手順③設定したいドメインを決めよう

お名前.com へアクセスします。

トップページ上部にある白枠に、設定したいドメイン名が空いているか(誰にも使われていないか)調べてみましょう。

注意
ドメイン名は早い者勝ちなので、誰かに取られる前にすぐ取得しておきましょう!

試しにドメイン名「jopelog」で検索してみると、このように検索結果が出ます。

語尾.comの場合は、当ブログでわたしが取得しているので登録できないようになっています。(ドメインが解放されたら(わたしがドメインを捨てたら)メール通知しますよというステータス)

それ以外の空白部分はすべて選択可能です。

補足
表示されている金額は1年分の価格

語尾が色々とあるので迷うと思いますが、特に変わりはないのでどれを選んでも構いません。

「.work」「.xyz」「.site」などは安いですが、2年目以降高くなる場合もあるので注意しましょう。

 

ドメインの契約手順②ドメインを購入する

語尾も含めてお気に入りのドメインが決まったら、購入手続きに進みましょう。

画面右側の料金確認へ進むをクリック。

登録するメールアドレスとパスワードを入力して次に進みます。

あなたの名前や住所等の情報を入力しましょう。

 

お申し込み内容の確認で「登録年数」を選択し、Whois情報公開代行にチェックをいれます。

注意
Whois情報公開代行を後から依頼する場合は有料になってしまうので、事前に設定しておきましょう。
(Whois情報公開代行とは、サイト運営者情報をお名前.comに代行してもらうもの)

お支払い方法を選択してドメイン購入を完了させましょう。

 

ドメイン契約手順③登録したメールアドレスを認証する

購入が完了すると、登録したメールアドレスに下記件名のメールが届きます。

【重要】[名前.com] ドメイン 情報認証の願い

メール内に表示されているURLを期限内にクリックして、メールアドレス認証をしましょう。

 

これでドメイン契約の手続きは完了です。

Mayu
URLを取得すると自分のWebサイトが出来た実感がしてワクワクしますね!

 

Webサイトの作り方③ドメインをサーバーに設定する

サーバーとドメインの契約が完了しました!お疲れさまでした!

あとはもう契約するものはないので安心してください。

次にサーバーとドメインを紐づける作業が必要です。

お名前.comにサーバーを設定する

まずはお名前.comのドメインNAVIにログインしましょう。

ログインしたらトップページにある「ご利用状況」という部分の「ドメイン一覧」をクリック。

先ほど契約したドメインが出てくると思います。

その該当ドメインの「ネームサーバー」部分が「初期設定」になっているので、初期設定をクリック。

 

2.ネームサーバーの選択の部分で「その他」を選択し、下記ネームサーバー欄に入力していきます。

ネームサーバーは全部で5つ入力しなければならないので、右下の+ボタンを押してネームサーバー5まで増やしましょう。

入力するネームサーバーの内容はサーバー契約時に届いた下記件名のメール、

【Xserver】■重要■サーバーアカウント設定完了のお知らせ (試用期間)

に記載されています。

こちらを全て転記しましょう。

入力したら確認をクリックし、入力内容にまちがいがないか今一度チェックしましょう。

問題なければOKをクリック。

「完了しました」の表示が出れば完了です。(反映まで時間がかかる場合があります)

これでお名前.com内での作業は終了。

 

エックスサーバーでドメインを設定する

エックスサーバーのサーバーパネルにログインをします。

サーバーIDとパスワード

サーバIDとサーバーパスワードはサーバー契約時に届いた下記件名のメール、

【Xserver】■重要■サーバーアカウント設定完了のお知らせ

に記載されています。

ユーザーアカウント情報ではなく、サーバーアカウント情報の部分なので注意してください。

ログインが出来たら、右上の「ドメイン設定」をクリック。

次にドメイン設定の追加タブをクリック。

 

取得したドメイン名を入力し、ドメインの設定の追加(確認)をクリック。

ドメイン設定の追加(確定)をクリックすれば、設定は完了です。

 

ここで「無料独自SSLの設定に失敗しました」と出てしまっても大丈夫。

次で独自SSL設定をしていきます。

 

Webサイトの作り方④独自SSL設定をする

エックスサーバーのサーバーパネルのホームに一度戻りましょう。

ドメインメニュー部分から、「SSL設定」を選択します。

 

SSL設定の追加タブをクリックします。

SSL化したいサイトのドメインを選択して、「独自SSL設定を追加する(確定)」をクリック。

これでSSL設定は完了ですが、WordPressインストール後にやらなければいけない作業があります。

Mayu
記事の後半に記載していますので、できれば最後までお読みください。。

 

Webサイトの作り方⑤WordPressをインストールする

いよいよ終盤に差しかかってきました。あとほんのちょっとです!

まずはサーバーパネルのトップページに戻って、ページ下部の「WordPress簡単インストール」をクリック。

WordPressをインストールしたいドメインを選択します。

 

WordPressのインストールタブを選択し、

入力事項についての補足

  • インストールURL:何も記入する必要なし
  • ブログ名:ブログタイトルが決まっていれば記入する(あとで変更可能です)
  • ユーザ名:WordPressへログインするときのユーザー名になるので、わかりやすいものにしておきましょう
  • パスワード:こちらもWordPressへログインするときに必要になります
  • メールアドレス:使用している自分のメールアドレスを記入

入力し終えたら右下のインストール(確認)をクリック。

内容を確認して問題がなければインストール(確定)をクリック。

「WordPressのインストールを完了しました」と表示されたら無事完了です!!

 

このページでは、

  1. WordPress(自分のWebサイト)にログインするときのURL
  2. ログインID
  3. ログインパスワード

が表示されます。忘れないよう、きちんとメモしておきましょう。

ログインするときのURLはこれから何度も使うようになるので、ブックマークしておきましょう

 

補足:WordPressインストール後にやっておいてほしいこと

先ほど独自SSL化の設定をしましたが、設定を完了するためにWordPressインストール後にやらなければならないことがあります。

まずはWordPressへログインをしてください。

ログインができたら、左にあるメニューから「設定」→「一般設定」をクリック。

 

一般設定の中に「WordPressアドレス」「サイトアドレス」の項目があります。

そこに表示されているURLの先頭を「http://」→「https://」となるようにsを加えましょう。

こうすることで、URLが危険にさらされる可能性が極端に減ります。(家に鍵をつける感覚)

これで独自SSL化の設定は完了です。

 

Webサイトの作り方⑥WordPressにテーマをインストールする

WordPressのインストールは無事完了しました!

ですがこの状態であれば、なんとも簡素なWebサイト……

せっかくWebサイトの運営を始めるなら、おしゃれで見やすいWebサイトにしたいですよね。

でもWeb初心者だったら、Webデザインをいじるなんて難しそう……と思うかもしれません。

 

そんなあなたを助けてくれるのがWordPressの「テーマ」。

これをWordPressにインストールするだけで、簡単におしゃれなWebサイトへ変身してくれます。

色々なテーマがありますが、おすすめしたいのは私も実際に使っている「STORK」というテーマです。

ブロガーのためのテーマとも言われているくらい、ブログを作りたい人にはぴったりなテーマ。

わたしはWebデザインの知識なんてまったくありませんが、このテーマを導入しただけで綺麗で見やすいブログに仕上がりました。

何よりWebデザインに時間をかけず、ブログ記事を書くことに時間を使えるのがありがたい。

このテーマを使っているブロガーさんはたくさんいるので、何か困ったことがあってもググるとたくさん情報が出てきます。それも安心できる点です。

>>STORK(ストーク)の公式サイトはこちら >>STORK(ストーク)をWordPressにインストール方法はこちら

 

まとめ

Webサイトをゼロから作る手順を説明してきました。

やってみると思ったより簡単にWebサイトが作れたのではないでしょうか。

これからあなたのWebサイトがたくさんの人に見てもらえる人気サイトになるかは、あなたのサイト運営次第です。

ネット上にできたあなたのお家(Webサイト)を豪華にしていきましょう!

Muchas gracias por leer♡




ABOUTこの記事をかいた人

スペイン在住のホペイロ(エキップメント)×ブロガー。 大企業を辞めスペイン語英語ゼロでバルセロナのサッカーチームに1人で乗り込み、マネジメント活動中。 現地スペインのサッカー情報、人生を楽しむ達人らとのラテン生活を発信。 九州女子。