「ウェブサイトの作成」に興味はありませんか？
「専門知識が必要」、「初心者だから作れない」等と思ったりしていませんか？
初心者の方でもサイトを作成できるよう、説明していますよ！
この記事の読者の想定は下記の通りです。
- ウェブサイトを作成したい
- カスタマイズ性が高いサイトを作成したい
- WordPress(ワードプレス)で作成したい
- 専門知識がない人でも作業ができるよう説明して欲しい
上記の内1つでも当てはまる方は、是非お読み下さい。
はじめに
ウェブサイト作成に専門知識は不要
専門知識が無くてもウェブサイトは作れます。
後述しますが、最低限のお金(ドメイン取得料やサーバーレンタル代)さえあれば作れます。
因みに本サイトも、当記事の手順に則って作成しています(WordPress・ムームードメイン・MixHostを使用)。
本記事のコンセプト
本記事では、「最短」且つ「誰でも」作れるように説明していきます。
説明を簡略or省略する部分もあります、予めご了承下さい。
また、2019年4月10日時点の最新の情報を元にしますが、私が作成した2019年1月27日時点での情報も部分的に含まれています(※私がサイト作成時にかかった費用、等)。
ウェブサイト作成に必要なもの
サイトを構築する上で避けられない要素があり、それらをレンタルする代金や、作業をする上で必要になるものがあります。
下記の通りです。
- 費用(ドメイン代、レンタルサーバー代) ※1
- パソコン
- メールアドレス ※2
ウェブサイト作成の流れ
ホームページ作成までの流れを説明します。
①ドメインを取得 → ②サーバーをレンタル＋α → ③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の設定をしているときに判ります。
ドメインを取得する
ゴールの確認
作業に取り掛かる前に、「ドメイン取得」のゴール地点を確認しておきましょう。
下記のように「取得が完了しました」と表示される画面まで進めれば、ドメイン取得の作業は完了しています。
ムームードメインで独自ドメインを取得する
【取得先】：ムームードメイン
手順は下記の通りです。
サイトにアクセス
ムームードメインにアクセスします。
欲しいドメイン名を入力→「検索する」
ドメイン名を入力し、「検索する」ボタンを押下します。
ドメイン名が定まっていない場合、定めるポイントは下記の通りです。
- 管理者名を用いる
- サイトの特徴を表す単語を用いる(※1)
- 単語をハイフンで繋ぐ
- twitterと統一するとより良い(※2)
※2 憶えられやすい利点があるくらいで、必要不可欠というわけではありません。
例としては、
【当サイト】https://dice-record.com/
【当ツイッター】https://twitter.com/dice_record
欲しいドメイン名を「カートに追加」→「お申し込みへ」
「カートに追加」ボタンを押下します。
どれをカートに追加すべきかについて、個人サイトか法人サイトかでカートに追加すべきものが異なります。
- 個人サイトの場合は、先程入力したものに”.com“が付いたものを選ぶことをお勧めします(コストパフォーマンスが高いです)。好みによって他でも問題ありません。
- 法人サイトの場合は、先程入力したものに”.co.jp“が付いたものを選ぶことをお勧めします(値段は高くつきますが、信用度が高いです)。
カートに追加を押したら「お申し込みへ」ボタンを押下します。
アカウント作成を作成・ログイン
上記の手順まで行うと、下記の画面が表示されるかと思います。
「新規登録する」ボタンを押下します。
メールアドレスとパスワードを入力し、利用規約に同意し、本人確認します。
携帯電話の電話番号を入力します。
携帯電話のSMSに届く4桁の数字を入力します。
この画面が表示されればアカウント作成完了です。
右上のバツ印ボタンを押下してカートをクリックします。
「お申し込みへ」ボタンを押下します。
支払い情報とクーポンコードを入力します、他は変更しません。
クーポンコードは持っていれば入力することになります。
ご参考程度に、約2ヶ月強前だと下記のクーポンコードが使用できました。
NEW-190101
【参考】2019年1月末に設定したときの例です(3年分)。
連携サービスは全てスルーします。
■連携設定-スルーするーﾟ(๑•̀ㅁ•́๑)✧
「次のステップへ」ボタンを押下します。
「下記の規約に同意します。」にチェックを入れ、「取得する」ボタンを押下します。
サーバーをレンタルする
ゴールの確認
レンタルサーバー取得のゴール地点を確認しましょう。
ここでは中間地点を1つ、その先にゴール地点1つを設けます。
中間地点は、下記のようなメールが届くことを確認します。
ゴール地点は、サーバーの設定画面(「cPanel」画面)で取得済のドメイン情報を入力し、「アドオン ドメイン」を作成し終えること。
MixHostで取得する
MixHostのレンタルサーバーを契約します。サイトにアクセス
MixHostにアクセスし、「お申し込み」ボタンを押下します。
サブドメインをカートに入れる
サブドメイン名を入力します。
入力し、「続ける」ボタンを押下します。
この時点で「MixHost」のアカウントを持っていない筈ですので、「お客様情報の入力」ボタンを押下します。
アカウントを作成
一通り入力し、「利用規約に同意しました」にチェックを入れ、「注文完了」ボタンを押下します。
下記の画面が表示されれば、アカウント作成完了しています(OKです！)。
「マイページ」ボタンを押下します。
レンタルサーバーを本契約
「サービス」ボタンを押下します。
表示されているサービス「【10日間無料お試し】スタンダード」をクリックします。
「プラン変更（本契約に移行）」ボタンをクリックします。
「クラウドレンタルサーバーv2 -【本契約】スタンダード」(もしくはお好みでプレミアム等)の「36ヶ月払い - 880円」のプルダウンをクリックし、希望に沿って変更します。
「サービスを選択」ボタンを押下します。
クレジットカード情報入力→「お支払い」ボタンを押下します。
※クレジットカード払い以外の場合(銀行振込等)はこの限りではありません。
お支払い手続き完了の画面が表示されれば完了しています。
レンタルサーバーの本契約、おめでとうございます(๑•̀ㅂ•́)و✧
※前述の、ゴール地点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」上から操作します。
「Softaculous Apps Installer」をクリックします。
「WordPress」をクリックします。
「インストール」をクリックします。
インストールの為の設定をしていきます。
【ソフトウェアセットアップ】
- インストールしたいバージョン：最新を選びます。そのままで大丈夫です(19/4/14時点、最新バージョンは5.1.1)。
- プロトコル：「https://」を選びます。そのままで大丈夫です。
- ドメイン：ムームードメインで取得した独自ドメインを設定します。
- ディレクトリ：WordPressのインストール先になります。空欄で良いかと思います。
【サイト設定】
- サイト名：サイトの名前を入力します。
- サイト説明：サイトの簡単な説明を入力します。キャッチーな表現が望ましいです。
- マルチサイトを有効：そのままで大丈夫です。
【管理者アカウント】
- Admin Username：管理者名です。極力セキュアなものを設定します。
- Admin Password：管理者用パスワードです。極力セキュア(※1)なものを設定します。
※1 AdminとPassの組み合わせはNGです。第三者にログインされるリスクが高い為です。
パスワードの決め方が定まっていない方は、「何かの文章のローマ字」＋「数字や大文字、可能なら記号も加える」＋「サイト毎に異なる接尾語を加える」にし、パスワードを手書きの上でお家の施錠できるところでの保管等を個人的にお勧めします。例：Okomeg@suki0*wp とかですね。一例です！
他はそのままで大丈夫です。
ページ下部の「インストール」ボタンを押下します。
ムームードメインにネームサーバを設定
ここまでは、サーバー側(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日後
下記の通りアクセスできる筈です。
喜びもひとしおですね(๑•̀ㅂ•́)و✧
終わりに
ゴールであり、スタートでもある
お疲れ様でした！
サイト作成手順を一通り終えましたが、いかがでしょうか？
初めてで苦労された方、過去に経験があってスムーズに完了された方、様々かと思います。
ただ、これから行っていくことになる「ウェブサイトの作り込み」こそが大変だったりします。
「ウェブサイト作成完了」をゴールとすると、一旦ゴールしたことに違いはありません。
ほんの少しだけ触れましたが、「WordPress」の使い方や、記事の投稿方法、サイトの様々な設定方法、SEO対策等の情報を得つつ、作り込んでいって下さい。
作り込みも、陰ながら応援しております(・ω・)
万が一、情報不足、誤り等がございましたら申し訳ございません。
情報の補足や修正等をさせて頂けると幸いですので、その際は情報をお寄せ頂けると幸いです(お問い合わせフォームかコメントからお願い致します)。
