作成

【2019年最新版】初心者でもできるサイト作成手順【ワードプレス】

「ウェブサイトの作成」に興味はありませんか?

「専門知識が必要」、「初心者だから作れない」等と思ったりしていませんか?

初心者の方でもサイトを作成できるよう、説明していますよ!

ダイス
ダイス
こんにちは!ダイス(dice@dice_record)です。

この記事の読者の想定は下記の通りです。

  • ウェブサイトを作成したい
  • カスタマイズ性が高いサイトを作成したい
  • WordPress(ワードプレス)で作成したい
  • 専門知識がない人でも作業ができるよう説明して欲しい

上記の内1つでも当てはまる方は、是非お読み下さい

はじめに

ウェブサイト作成に専門知識は不要

専門知識が無くてもウェブサイトは作れます。

後述しますが、最低限のお金(ドメイン取得料やサーバーレンタル代)さえあれば作れます。

因みに本サイトも、当記事の手順に則って作成しています(WordPress・ムームードメイン・MixHostを使用)。

筆者である私にウェブサイト作成の専門知識はありませんでしたが、作成完了できています。

本記事のコンセプト

本記事では、「最短」且つ「誰でも」作れるように説明していきます。

スクリーンショットを多用し、可能な限り「真似するだけ」で作成できるようにしています(「解りやすく」も意識していますが、それ以上に「再現性高く」を意識しています)。
本記事で目指すゴール地点は、ウェブサイトを作成し「Hello world!」と画面上で表示されることを確認することです。

説明を簡略or省略する部分もあります、予めご了承下さい。

また、2019年4月10日時点の最新の情報を元にしますが、私が作成した2019年1月27日時点での情報も部分的に含まれています(※私がサイト作成時にかかった費用、等)。

理屈を少し説明している箇所もありますが、解ればベターレベルの意図で触れています。解らなくても作業に支障は無いようにしていますので、その際はお気になさらず!

ウェブサイト作成に必要なもの

サイトを構築する上で避けられない要素があり、それらをレンタルする代金や、作業をする上で必要になるものがあります。

下記の通りです。

  • 費用(ドメイン代、レンタルサーバー代) ※1
  • パソコン
  • メールアドレス ※2
※1 参考程度に、2~3年分まとめて支払った私の場合、28000円前後でした(3年分のドメイン代:約4000円、2年分のサーバー代:24,106円)。
※2 アカウント登録の手続や、契約完了のお知らせ連絡受け取りに使用します。ログインできさえすれば何でも(Gmail等)大丈夫です。

ウェブサイト作成の流れ

ホームページ作成までの流れを説明します。

①ドメインを取得 → ②サーバーをレンタル+α → ③WordPressを取得+α → 作成完了!

①と②は逆順も可。①と②を終えてから③の手順に入れれば大丈夫です。

「ドメイン」:「ネット上の住所」のようなものです。ホームページのURLの一部分になります。

【例】:本サイトの場合、URLの「https://dice-record.com/」の内…

  • dice-record.com」がドメイン
  • dice-record」がサブドメイン
  • com」がトップレベルドメイン(略称:TLD)

【取得先】:ムームードメイン ※クーポン情報載せてます!(19/04/10時点)

サーバー:「ネット上の家」のようなものです。サイトの構成要素(記事、画像、設定等)の保存先です。

【取得先】:MixHost

WordPress:CMSの1種です。CMSとは「Content Management System」の略で、サイト自体や記事の作成・管理に用います。

【取得先】:※MixHostの設定をしているときに判ります。

ドメインを取得する

ゴールの確認

作業に取り掛かる前に、「ドメイン取得」のゴール地点を確認しておきましょう。

下記のように「取得が完了しました」と表示される画面まで進めれば、ドメイン取得の作業は完了しています。

後述の手続で登録するメールアドレスの方にも「【ムームードメイン】ご契約完了のお知らせ」というものが併せて届きます。上記の画面で伝えられている「ドメイン取得完了メール」ですね。

ムームードメインで独自ドメインを取得する

独自ドメインを「ムームードメイン」で取得します。

【取得先】:ムームードメイン

手順は下記の通りです。

サイトにアクセス

ムームードメインにアクセスします。

欲しいドメイン名を入力→「検索する」

ドメイン名を入力し、「検索する」ボタンを押下します。

トップレベルドメインは入力しなくて大丈夫です(≒この時点では、「.com」や「.co.jp」までは入力しなくて大丈夫、という意味です。入力しても勿論大丈夫ですが、検索するボタン押下後に表示されますので、この時点で限定する必要まではありません)。

ドメイン名が定まっていない場合、定めるポイントは下記の通りです。

  • 管理者名を用いる
  • サイトの特徴を表す単語を用いる(※1)
  • 単語をハイフンで繋ぐ
  • twitterと統一するとより良い(※2)
※全てを取り入れるというよりかは、1つ目と2つ目のどちらかに加えて、複数(目安2~3個以下)の単語をハイフンで繋ぐ で十分です。ポイントはシンプルにすることです。当サイトの場合は「管理者名を用いる」+「特徴」(記録付け(※ダイスが記録する、ダイスについて記録する))+「単語をハイフンで繋ぐ」で「dice-record」です。

※2 憶えられやすい利点があるくらいで、必要不可欠というわけではありません。

例としては、

【当サイト】https://dice-record.com/

【当ツイッター】https://twitter.com/dice_record

欲しいドメイン名を「カートに追加」→「お申し込みへ」

カートに追加」ボタンを押下します。

どれをカートに追加すべきかについて、個人サイトか法人サイトかでカートに追加すべきもの異なります

  • 個人サイトの場合は、先程入力したものに”.com“が付いたものを選ぶことをお勧めします(コストパフォーマンスが高いです)。好みによって他でも問題ありません。
  • 法人サイトの場合は、先程入力したものに”.co.jp“が付いたものを選ぶことをお勧めします(値段は高くつきますが、信用度が高いです)。

 

カートに追加を押したら「お申し込みへ」ボタンを押下します。

アカウント作成を作成・ログイン

上記の手順まで行うと、下記の画面が表示されるかと思います。

「新規登録する」ボタンを押下します。

(もしくは「Amazonアカウントでログイン」や「Facebookでログイン」でもいいかもしれません。仮にアカウントを既にお持ちであれば、「ログインする」を押下します)。

 

メールアドレスとパスワードを入力し、利用規約に同意し、本人確認します。

 

 

携帯電話の電話番号を入力します。

 

 

携帯電話のSMSに届く4桁の数字を入力します。

 

 

この画面が表示されればアカウント作成完了です。

右上のバツ印ボタンを押下してカートをクリックします。

 

 

「お申し込みへ」ボタンを押下します。

 

支払い情報とクーポンコードを入力します、他は変更しません。

ドメイン契約年数は長ければ長いほど1年当たりが安くなり、コスパが上がります(基本的には2~3年以上お勧めし、お試しくらいの方は1年で良いかと)。

クーポンコードは持っていれば入力することになります。

ご参考程度に、約2ヶ月強前だと下記のクーポンコードが使用できました。

NEW-190101

 

 

 

【参考】2019年1月末に設定したときの例です(3年分)。

 

連携サービスは全てスルーします。

■連携設定-スルーするー゚(๑•̀ㅁ•́๑)✧

 

 

次のステップへ」ボタンを押下します。

 

 

下記の規約に同意します。」にチェックを入れ、「取得する」ボタンを押下します。

 

 

ドメイン取得おめでとうございます!゚゚+。:.゚ヽ(*´∀)ノ゚.:。+゚

サーバーをレンタルする

ゴールの確認

レンタルサーバー取得のゴール地点を確認しましょう。

ここでは中間地点を1つ、その先にゴール地点1つを設けます。

中間地点は、下記のようなメールが届くことを確認します。

 

ゴール地点は、サーバーの設定画面(「cPanel」画面)で取得済のドメイン情報を入力し、「アドオン ドメイン」を作成し終えること。

MixHostで取得する


MixHostのレンタルサーバーを契約します。

サイトにアクセス

MixHostにアクセスし、「お申し込み」ボタンを押下します。

このとき、基本的には「スタンダード」プランをお勧めします。
筆記時点で私は、スタンダードプランにしています。契約期間中、「差額を支払うことで上位プランに変更すること」(逆もしかり)も可能ですので、一旦はスタンダードで宜しいかと思います。

 

サブドメインをカートに入れる

サブドメイン名を入力します。

大抵の方は、このサブドメイン名を使うことはありません(前述の、ムームードメインで取得した独自ドメインの方を使います。ここで作成することを必要とされる「~.mixh.jp」の方は、管理画面上でしか使うことにならないと思います)。
重複しないものを入力します。

 

入力し、「続ける」ボタンを押下します。

 

この時点で「MixHost」のアカウントを持っていない筈ですので、「お客様情報の入力」ボタンを押下します。

アカウントを作成

一通り入力し、「利用規約に同意しました」にチェックを入れ、「注文完了」ボタンを押下します。

※会社名の入力は無くても大丈夫です。

 

下記の画面が表示されれば、アカウント作成完了しています(OKです!)。

マイページ」ボタンを押下します。

レンタルサーバーを本契約

サービス」ボタンを押下します。

 

表示されているサービス「【10日間無料お試し】スタンダード」をクリックします。

 

プラン変更(本契約に移行)」ボタンをクリックします。

後述する「サービス詳細」画面です。「アドオン ドメイン」の設定時に再度開くことになります。

 

「クラウドレンタルサーバーv2 -【本契約】スタンダード」(もしくはお好みでプレミアム等)の「36ヶ月払い - 880円」のプルダウンをクリックし、希望に沿って変更します。

3年のままが宜しければ、特に変更する必要はありません。

サービスを選択」ボタンを押下します。

 

クレジットカード情報入力→「お支払い」ボタンを押下します。

※クレジットカード払い以外の場合(銀行振込等)はこの限りではありません。

お支払い手続き完了の画面が表示されれば完了しています。

レンタルサーバーの本契約、おめでとうございます(๑•̀ㅂ•́)و✧

※前述の、ゴール地点2つ示した内の1つ目が完了です。2つ目もこのままクリアしましょう(数分で完了します)。

設定(サーバー側)

MixHostでアドオンドメインの追加をします。

「サービス詳細」画面を開きます。

※ログイン後の画面→サービス→「【本契約】スタンダード」で「サービス詳細」画面に辿り着けます(当記事内で、サービス詳細で検索(Ctrl + Fキー押下で検索ウィンドウを表示)をおかけください)。

下記の通り入力します、2枚目のスクリーンショットもご参考に。

  • 「新しいドメイン名」:ムームードメインで取得したドメイン名をフルで。
  • 「サブドメイン名」:ムームードメインで取得したドメイン名の内、「.com」(.co.jp)の部分を除く。
  • 「ドキュメントルート」:ムームードメインで取得したドメイン名をフルで。

(1枚目のスクリーンショット)

(2枚目のスクリーンショット)

 

下記のような画面が表示されれば完了しています!おめでとうございます(・ω・)

WordPressのインストール~設定

ゴールの確認

ここでは中間地点を2つ、その先にゴールを1つ設けます。

中間地点1つ目は、WordPressをインストールし終えること。

 

中間地点2つ目は、ドメインネームを設定し終えること。

 

3つ目は、「Hello world!」を表示すること(※ドメインネームを設定してから、2日~3日前後かかります。私の場合は約2日かかりました)。

ダイス
ダイス
いよいよサイト作成も大詰めです。残りも頑張りましょうᕦ(ò_óˇ)ᕤ

WordPressのインストール

引き続きMixHostの管理画面「cPanel」上から操作します。

cPanelホーム画面の真ん中辺りに「ソフトウェア」があり、その中に「Softaculous Apps Installer」があります。

Softaculous Apps Installer」をクリックします。

 

WordPress」をクリックします。

インストール」をクリックします。

インストールの為の設定をしていきます。

【ソフトウェアセットアップ】

  • インストールしたいバージョン:最新を選びます。そのままで大丈夫です(19/4/14時点、最新バージョンは5.1.1)。
  • プロトコル:「https://」を選びます。そのままで大丈夫です。
  • ドメイン:ムームードメインで取得した独自ドメインを設定します。
  • ディレクトリ:WordPressのインストール先になります。空欄で良いかと思います。

 

「サイト設定」の項目は、インストール後以降いつでもWordPressの管理者画面から変更ができます(「設定」の内の「一般」から)。お気楽に!

【サイト設定】

  • サイト名:サイトの名前を入力します。
  • サイト説明:サイトの簡単な説明を入力します。キャッチーな表現が望ましいです。
  • マルチサイトを有効:そのままで大丈夫です。

【管理者アカウント】

  • Admin Username:管理者名です。極力セキュアなものを設定します。
  • Admin Password:管理者用パスワードです。極力セキュア(※1)なものを設定します。

※1 AdminとPassの組み合わせはNGです。第三者にログインされるリスクが高い為です。

パスワードの決め方が定まっていない方は、「何かの文章のローマ字」+「数字や大文字、可能なら記号も加える」+「サイト毎に異なる接尾語を加える」にし、パスワードを手書きの上でお家の施錠できるところでの保管等を個人的にお勧めします。例:Okomeg@suki0*wp とかですね。一例です!

他はそのままで大丈夫です。

ページ下部の「インストール」ボタンを押下します。

 

おめでとうございます。1つ目の中間ゴール突破です(・ω・)

ムームードメインにネームサーバを設定

ここまでは、サーバー側(MixHost)での作業が続きました。

ここからは、一時的にドメイン側(ムームードメイン)での作業になります。

ムームードメインにアクセスし、「ドメイン管理」メニューの「ドメイン操作」から「ネームサーバ設定変更」を選択します。

【アクセス先】:ムームードメイン

 

ネームサーバ設定変更」ボタンを押下します。

 

GMOペパボ以外のネームサーバを使用する」にチェックを入れます。

ネームサーバ1から5までの項目に、それぞれ下記の情報を入力していきます(MixHostのサービス詳細画面に記載されている情報です)。

ネームサーバー1: ns1.mixhost.jp
ネームサーバー2: ns2.mixhost.jp
ネームサーバー3: ns3.mixhost.jp
ネームサーバー4: ns4.mixhost.jp
ネームサーバー5: ns5.mixhost.jp

 

入力後、「ネームサーバ設定変更」ボタンを押下します。

 

確認メッセージが画面上部に出ます、「OK」ボタンを押下します。

 

下記の画面が表示されていれば、実質的に作成手順全て完了しています。おめでとうございます!!

Hello world!の表示を確認する

WordPressのインストール完了時、表示されていたURLにアクセスします。

【URL】https://(※設定したドメイン名)

【例:私の場合】https://dice-record.com/

 

上記の通り、アクセスできませんでした。

焦ることはありません、ネームサーバの設定をしてから2~3日(48~72時間)程はアクセスができないものです。

2~3日経ってからアクセスし直します。

その間に、「ウェブサイトが表示されて以降」についての情報を収集したり、整理されると良いかと思います。

お勧めとしては、用途にもよりますが共通的なところでは…

  • SEO対策
  • WordPressのテンプレート
  • WordPressの設定方法
  • WordPressでの記事の作成・投稿方法

等です。特にテンプレートとSEO対策は後々の手戻りを発生させない為にある程度は把握された方が良いです。

私も別途記事を設けるつもりですが、極々簡易的に触れておきます。

【SEO対策】

後々の手戻りを発生させない為にとりわけ把握しておいて頂きたいのは「記事の投稿時のURL設定」です。

必ずパーマリンクを設定するものにします。

且つ、1度URLを定めたらそこから変えないようにします(時間が経てば経つほど変更すると痛手になります。少なくとも、得た被リンクは切れ、アクセス分析等に悪影響が出ます)。

(反面教師にして頂きたいのですが、私はこの辺りを後回しにして、ブログ開始してから1ヶ月強後にURLを全記事変更しました。変更自体も手間(時間を浪費する)、Google Analyticsのアクセス統計も1週間くらいおかしくなりました)。

【WordPressテーマ】

無料ですとCocoon、有料ですとJINがお勧めです(参考程度に、私が現サイトで使っているのもJINです)。

今ですと「ルクセリタス」等も評価が高いようです、是非調べてみて下さい。

全体を通して書籍等を参考にするのも有りかと思います。

例として私が使用したものですと 『収益・集客が1.5倍UPするプロの技79』 で、全体を俯瞰しざっと理解する点で役立ちました。

2~3日後

下記の通りアクセスできる筈です。

喜びもひとしおですね(๑•̀ㅂ•́)و✧

終わりに

ゴールであり、スタートでもある

お疲れ様でした!

サイト作成手順を一通り終えましたが、いかがでしょうか?

初めてで苦労された方、過去に経験があってスムーズに完了された方、様々かと思います。

HelloWorld表示をゴールとした「ウェブサイト作成」は、以上で完了です。

ただ、これから行っていくことになる「ウェブサイトの作り込み」こそが大変だったりします。

「ウェブサイト作成完了」をゴールとすると、一旦ゴールしたことに違いはありません。

言い換えになりますが、「ウェブサイト作り込みのスタートラインに立てた状態」とも言えます。

ほんの少しだけ触れましたが、「WordPress」の使い方や、記事の投稿方法、サイトの様々な設定方法、SEO対策等の情報を得つつ、作り込んでいって下さい。

作り込みも、陰ながら応援しております(・ω・)

ダイス
ダイス
ご参考になれば幸いです。

万が一、情報不足、誤り等がございましたら申し訳ございません。

情報の補足や修正等をさせて頂けると幸いですので、その際は情報をお寄せ頂けると幸いです(お問い合わせフォームかコメントからお願い致します)。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です