【副業】ゼロから作るWordPressでホームページの作り方(コーヒー焙煎豆ネットショップの開き方)

この記事では自分のホームページを作りたい方に向けて、WordPressでゼロから作るランディングページ(以下LP)の開設方法をご紹介します。

 
にゃんこ
ホームページの作り方をいちから教えてほしい~
 
みったまん
ちなみに、EC機能(商品購入のカート機能のこと)は別記事で案内するぞ
スポンサーリンク

WordPress(ワードプレス)によるホームページ(LP)作成は無料でできる

WordPressでのホームページ(LP)の作成は無料です。

ただしWordPress内で利用する一部のプラグイン(オプションのようなもの)は有料になります。

ぼくの場合は有料のプラグインは使っていません。

ぼくがWordPress内で唯一有料で使っているのは、有料のテーマを購入したことだけです。

それで十分な仕上がりのサイトを作ることができます。

有料で最低限必要なものは、下の表にもあるWordPressの有料テーマ代、ドメイン代、レンタルサーバー代の3つです。

本格的なホームページ運営を目的とした場合、WordPressの有料テーマ、レンタルサーバーだい、独自ドメインの契約・取得は必須だと考えてください。

WordPressのテーマは無料と有料がありますが、ここはケチるところではなく有料のテーマを使いましょう。

SEO対策的にも、デザイン的にも有料を使わない手はありません。

大体どの有料テーマでも1万円~3万円のものが多いですがこの支払いは最初の一回だけです。

一回買えばもう支払うものことはありません。

レンタルサーバー代は月額1,000円未満かかります。

独自ドメイン代は年額3000円程度かかります。初年度は無料のものも多いのですが、1年間ごとに更新料が発生します。

まとめると、自分のホームページを持つということは、毎月1,500円程度のランニングコストが発生するということを覚えておいてください。

ただしこれはWordPressによるホームページの作り方に限った話ではありません。

無料作成ツールを使用しても、本格的な運用の際は有料プランへの移行が絶対に必要になりますし、HTMLを直接記述してホームページを自作しても、レンタルサーバーと独自ドメインを契約することになります。

【3ステップ】WordPressでホームページを作成するための準備

WordPress(ワードプレス)によるホームページの作り方を知る前に、いくつか準備段階を経る必要があります。

具体的には以下の3ステップです。

  1. よそのコーヒー販売店とどのように差別化できるか考える
  2. 差別化を意識してホームページの構成を考える
  3. 文章や画像などのコンテンツを用意する

ステップ1:よそのコーヒー販売店とどのように差別化できるか考える

ホームページ作成に取りかかる前に、まずは自分のコーヒー豆をよそのお店と比較してどのようなメリット・デメリットがあるかを考えましょう。

その上でどうやって差別化できるかを考えます。

この差別化が決定的に重要です。

ぼくの場合の差別化はこのように考えました。

  • 注文をもらってから焙煎する
  • 少量しか焼けないので逆手を取って少量ずつのパックで販売する
  • 自分の得意な国の豆だけを販売する
  • 旅行知識が得意なのでパッケージもそれらしくする

 
みったまん
ぼくはコーヒー豆の顔であるパッケージも飛行機の搭乗券風にして目を引くデザインで考えてみました
 
にゃんこ
お店の名前などもこの時点で決めておきたいにゃ

ステップ2:差別化を意識してホームページの構成を考える

差別化を意識できたあとは、構成を考えるステップに進みます。

ここで述べる構成とは、ホームページを完成させるために必要なコンテンツのことです。

具体的には以下のとおりです。

  • お問い合わせ
  • ショップ概要
  • ブログ記事の部分を入れるか入れないか
  • SNS投稿をサイト内に挿入するかしないか など
スポンサーリンク

ステップ3:文章や画像などのコンテンツを用意する

3つ目のステップとしてロゴや文章、画像などのコンテンツを用意します。

文章に関しては、ページ内容ごとに必要なテキストを記載すればOKです。

たとえば、ホームページに必要な画像として以下の素材があげられます。

  • お店のロゴ
  • 焙煎風景を紹介する写真
  • お店のオーナーのプロフィール画像
  • 販売商品のイメージ画像 など

自分のお店のロゴの作り方は大まかに2つ

自分で作るか、誰かに依頼するか。

自分で作ろうと思う方は「Canva」がおすすめです。

ロゴではないですが、先程の搭乗券風のパッケージデザインは「Canva」を利用させていただきました。

無料で始められ、プロのデザイナーが作った数多くのテンプレートから 選んで作成することができるので、 バラエティがあるデザイン簡単に作ることができます

有料プランもありますが、1ヶ月間トライアルで始めることができるので、有料プランを使って1ヶ月以内にロゴを作成し退会すればお金もかかりません。

誰かに依頼して作ってもらう場合は、ココナラがオススメです。

まず無料会員登録をしないと使えませんが、この中でロゴの作成を依頼することができます。

他にもクラウドワークスやランサーズなどの同じサービスがありますが、ココナラが一番価格的に安く依頼することができます。

デザインを請け負う側からすると、ココナラはクラウドワークスなどで受注をしたい人の登竜門的な存在なので値段をあまり上げられない分、仕事を依頼したい側は安く注文をしやすいことが理由です。

【6ステップ】WordPressによるホームページ(LP)の作り方

続いてWordPress(ワードプレス)によるホームページの作り方を画像つきで解説します。

全部で以下の6ステップです。

  1. 「お名前.com」で独自ドメインを取得する
  2. 「さくらのレンタルサーバ」でレンタルサーバーを契約する
  3. ドメインとサーバーを連携させる
  4. 「お名前.com」側でネームサーバーの変更をする
  5. ドメインをSSL化させる
  6. WordPressをインストールする

6ステップと聞くと道は長いな~と思ってしまうかもしれませんが、作業内容はさほど難しくありません。

 
みったまん
日常からパソコンに触れている方であれば問題なく行けます。応援してる!

ステップ1:「お名前.com」で独自ドメインを取得する

まずは独自ドメインを取得します。

独自ドメインの取得はお名前.comをオススメしています。

一番安いもので無料からドメインを作ることができるからです。

ただし、無料のものや1円のものは翌年の更新料が高くなっている場合がありますので、更新料も合わせて確認しましょう。

更新料の目安は1年間でだいたい3000円くらいです。

独自ドメインとは

独自ドメイン

※画像参照:お名前.com
ここで取得したドメインは、そのままWordPressのURLの一部となります。

ドメインの前半部分は、ブログ名と同じ文字列に設定して覚えやすいものにしておくと、後々自分のお店のブランド力に効いてきます。

特に最初はオンライン販売から始めて後々実店舗も出す未来を想定しているならばなおさらです。

ドメインの後半部分は、.comや.netなどから選択する方式です。

何でも良いのですが、迷ったら最もメジャーな.comが無難でしょう。

お名前.comでドメインを取得する流れ(所要時間約5分~10分)

  1. 「お名前.com」にアクセスします。
  2. 希望ドメインの空きを確認します。
  3. ドメインの購入とクレジットカードで支払います。

まずはお名前.comにアクセスしましょう。



アクセスできたら、トップページ真ん中の「検索ボックス」に希望ドメインを入力すると、ドメインの空き状況を確認できます。

取得したいドメインの文字列の候補を考えて、色々と検索して絞り込んでみてください。

 
みったまん
ドメインの種類に良し悪しはないから好きなもので大丈夫だよ。
こだわりがなければ、よくある.comにしておけば良いかな

希望ドメインの空きが確認できたら、右側の「料金確認へ進む」ボタンを押します。



サーバーはステップ2で「さくらのレンタルサーバ」を利用するため「利用しないで進む」を選択します。


下の方にオプションが色々書いてありますが、全て不要です。

何もチェックを打たずに進みましょう。

もし仮に必要になったとしても取得後修正することができます。

初めて利用しますので、メールアドレスとパスワードを入力し会員登録する必要があります。

 
みったまん
会員登録すると、メールで数字のお名前IDが送られてきますので絶対に無くさないようにしてください。

続いてドメインの購入・支払いを進めていきます。

 
みったまん
更新料も出てくるので必ずチェックしてね。
初期費用が無料でも長く使う場合は1年毎の更新料が必要だよ

あとはクレジットカードの情報などを入力し購入手続きとなります。

以上で、独自ドメインの購入は完了です。

ひとまずここまでお疲れ様でした。

ステップ2:「さくらのレンタルサーバ」でレンタルサーバーを契約する

続いてステップ2ではレンタルサーバを契約します。

レンタルサーバーは数多くの企業が提供していますが、おすすめは以下の3つです。

月々の定額料金が安く、初心者さんでも導入しやすいレンタルサーバの代表格です。

中でも「さくらインターネット」社が提供している「さくらのレンタルサーバ」はわからなくなった場合、ネットで検索すると情報が豊富に出てくることや、かわいいキャラクターをふんだんに使って説明してくれるため初心者さんに圧倒的にオススメです。

今ご覧をいただいているこのブログも「さくらのレンタルサーバ」を使用しています。

今のところサーバーが落ちるなどの問題は一回もありませんし、安くて簡単に設定できるので初心者の方にも安心してススメられます。

また後述しますが、WordPressの導入やSSL設定がとても簡単な仕様になっている点も良いと思います。

今回はぼくも使っている「さくらのレンタルサーバ」を見本にWordPressの公開手順をご紹介します。

2週間の無料お試し期間がありますので、初心者の方でも安心して使ってみることができますよ。

サーバーの申し込み

まずは、さくらのレンタルサーバにアクセスして、申し込みを進めていきましょう。

公式: https://rs.sakura.ad.jp

 
みったまん
上のリンクから公式サイトに入って申込みとWordPress開設の両方ができるよ

公式サイトにアクセスしたら、トップページ右上の「お申込み」ボタンをクリックしてください。(画像の中の緑枠の部分)

サービスプランの選択

さくらのレンタルサーバに用意されているプラン一覧が表示されるので、希望するプランを探して「選択する」をクリックしてください。

プランは自由に選択できますが、特にコスパが優れているスタンダードプラン(画像の中の緑枠の部分)がおすすめです。

それ以上の料金のプランもありますが、個人事業主で始める分には容量は300Gバイトで十分です。

 
みったまん
ライトプランはWordPressが利用できないため、スタンダードプラン以上を選択するようにしてください。

さくら会員IDの取得

さくらインターネット 会員認証の画面で、「新規会員登録へ進む」をクリックしてください。

さくらインターネットのアカウント登録に使うメールアドレスを入力し、「会員登録のご案内メールを送信」をクリックしましょう。

そうしましたらメールが飛んできますので、「さくらインターネット会員登録」のURLをクリックしましょう。

会員情報の入力

URLを開いたら、続いて氏名や住所、電話番号、レンタルサーバの管理画面を開く際のパスワードなど、登録に必要なユーザー情報を入力していきます。

すべて入力したら、確認画面へ進み、確認画面が表示されるので入力内容を確認して「会員登録する」をクリックしましょう。

初期費用の支払い

続いて、ドメインなどの初期費用の支払い手続きを進めていきます。

ご契約期間を選択して、支払い方法は「クレジットカード」を選択します。

お支払いカードの選択の項目で「新しいクレジットカードを登録」をクリックしてください。

それぞれのお支払い方法に関する詳細が表示します。

支払いに使うクレジットカード情報を入力して、カードの登録を進めていきましょう。

サーバーの初期費用や今後の月額費用が表示されるので、しっかりと確認した上で「この内容で申し込む」のボタンを押してください。

以上でさくらのレンタルサーバの申し込み・初期費用の支払いは完了となります。

申し込み完了後、下記のような「仮登録完了のお知らせ」メールを登録したメールアドレスに届きます。

レンタルサーバーのご利用に必要な情報を記載しているむちゃくちゃ重要なメールですので、無くさないようにしましょう。

 
みったまん
このメールなくすと大変だぞ~

クレジットカードでお申し込みの場合は、2週間のお試し期間終了後「自動的に本契約」となります。

キャンセルをご希望の際は、お客様自身でキャンセル手続きを行っていただく事で料金は発生しません。

 
みったまん
ここまで終わったら、準備の6割くらい終わったようなもんです。あと少しがんばろう

ステップ3:ドメインとサーバーの連携

ステップ3では、ステップ1で契約した「お名前.com」の独自ドメインとステップ2で契約した「さくらのレンタルサーバ」を連携させていきます。

まず、さくらのレンタルサーバの管理画面にログインします。

左側のメニューの中から、「ドメイン/SSL→ドメイン/SSL」と選択します。

続いて右側の「ドメイン新規追加」ボタンを押します。

次のページが開いたら、一番下までスクロールしてください。

一番下にある「他社で取得したドメインを移管せずに使う」の追加ボタンをクリックしてください。

そうしたら緑の枠の部分へ、お名前.comで取得した独自ドメインをここへ入力します。

「http://www.▲▲▲▲▲.com」の後ろの部分「▲▲▲▲▲.com」だけを入力しましょう。

これでお名前.comで取得したドメインがさくらのレンタルサーバに入りました。

 
みったまん
うぉっしゃあああああああ、あと少し!休憩しながら気張ってこ!!

ステップ4. お名前.com側でネームサーバーの変更

ステップ4では何を行うかというと、「さくらのレンタルサーバー」側にドメインを追加した様に、ドメイン側(お名前.com側)にも設定を追加する必要があります。

「お名前.com」のドメインのWHOIS情報に登録されている「ネームサーバ(Name Server) 」情報を「さくらのネームサーバ」情報に変更していきます。

がんばりましょう。

もう一度お名前.comにアクセスします。

右上の「契約管理画面」ボタンよりログインします。(緑の枠の部分)

IDとパスワードでログインしましょう。

さくらインターネット指定ネームサーバは、実は2つ上の画像にちらっと出てきましたが下記になります。

  • ネームサーバー1:ns1.dns.ne.jp
  • ネームサーバー2:ns2.dns.ne.jp

ちなみにレンタルサーバーでドメインの追加設定をする前に、ネームサーバ情報を変更すると(お名前.com側で)、不具合が生じる可能性があるようです。

必ずさくらのレンタルサーバにドメインを追加した後で、この作業をおこなってください!

ネームサーバ情報を変更すると、変更された情報がインターネット上に反映するまでおよそ数時間~48時間必要になります。

お名前.comにログインできたら、「ご利用中のサービス」の欄に新しく登録したドメインが書かれていると思うので、そのドメインをクリックします。

そうしたら、ドメインの詳細が出てきます。

中段に「ネームサーバー情報」という欄があります。

ネームサーバー1が「ns1.dns.ne.jp」

ネームサーバー2が「ns2.dns.ne.jp」

になっていれば、さくらレンタルサーバのネームサーバーが登録されています。

違う場合は、②のネームサーバーの変更をクリックして登録しましょう。

続いて上記画像の①~④を行います。

  1. 該当のドメインにチェック入れる。
  2. 他のネームサーバを利用を選択する。
  3. 下記をそれぞれ入力する。
    1プライマリネームサーバが「ns1.dns.ne.jp」
    2セカンダリネームサーバが「ns2.dns.ne.jp」
  4. 確認画面へ進みます。
  5. 「ご確認」画面で問題がないことを確認し、「OK」ボタンをクリック。

以上で設定は完了です。

ご確認画面で書かれている通り、反映完了まで24時間から72時間かかる場合があります。

後日ネームサーバが変更されているかを確認する場合は、先ほど行った手順でドメインをクリックし、ドメインの詳細を確認しましょう。

 
みったまん
あとここまで来たらあと少しや!


ステップ5:SSL設定

続いて、さくらのレンタルサーバでSSL設定をしましょう。

さくらのレンタルサーバの管理画面で、さくらのレンタルサーバにログインします。

左側のメニューの中から、「ドメイン/SSL→ドメイン/SSL」と選択します。

新たに追加された独自ドメインの右側にある「SSL」ボタンを選択してください。

登録設定を始めるSSL証明書の種類を選択」をクリックします。

有償SSLも表示されていますが、今回は無償SSLを利用していくので、費用はかかりません。

今回は、無料SSLのLet’s Encryptを選んで「利用する」をクリックしましょう。

「Let’s Encryptの利用ポリシーに同意する」にチェックを入れて、「無料SSLを設定する」を押してください。

上の画像のようなエラー画面が表示された場合は、ドメイン側の処理中の状態です。

1時間程度の時間をおいてから再度実行すると、問題なくSSLの設定ができます。

これでSSL設定の完了です。

 
みったまん
よくわからないだろうのに、ここまでよくがんばった!

ステップ6:WordPressをインストールする

続いて「さくらのレンタルサーバ」のWordPressクイックインストール機能を利用します。

さくらのレンタルサーバの管理画面で、「Webサイト/データ→クイックインストール」と選択します。

クイックインストールが表示されたら、WordPressの「新規追加」をクリックしましょう。

WordPressインストール設定を入力します。

先に手順をすべて説明しておきます。

③のデータベース作成の部分で、別のページに一回離れるので、④以降はデータベース作成後入力してください。

なお③のデータベース作成後、データベース接続パスワードテーブルの接頭語は、データベース作成後、自動で入力されます。

  1. 独自ドメインを選択します。(似たのが2つあって、www無しのがあるので、そっちがおすすめです)
  2. インストールURL:このまま変更無しでOK
  3. データベース作成:クリックして先にデータベースを作成します。(後述で詳しく解説しています)
  4. ★サイトのタイトル:ブログ名を入力。後からでも変更可。★WordPressユーザー名:ログイン時に使うユーザー名を入力します。★WordPressパスワード:ログイン時に使うパスワードを入力します。★メールアドレス:WordPress管理用メールアドレスを入力します
  5. 検索エンジンでの検索:チェックを入れない。(検索してほしいため)
  6. 同意にチェックを入れます。
  7. 作成ボタンを押します。

データベース新規作成

続いて③のデータベース作成ボタンを押したページの解説です。

各項目は次の通り、入力を進めてください。

  • データベースバージョン
    初期選択されているバージョンでOKです。
  • データベース名
    「ドメイン名db」を英数字で入力します。
  • データベース文字コード
    初期選択されているUTF-8のままでOKです。

全ての項目の入力が完了したら、最下部の「作成する」を押すと、WordPressがインストールされます。

 
みったまん
これでWordPressにログインできる!でもデザインもまだこれからこれから。とりあえず本当にお疲れ様でした!

7. 【最後に】WordPressにログインしてみよう

WordPress簡単インストールの完了後、自分自身のWordPressに関する情報が表示されます。

管理画面へのログイン 管理画面URLをクリックすると、管理画面へのログイン画面が表示されます。

設定した「ユーザ名またはメールアドレス」と「パスワード」を入力し『ログイン』をクリックします。

ログイン後、WordPressの各種設定が可能となります。

エラーとなった場合は、反映まで1時間ほど待ってみてください。

不明点などありましたら、下の「コメントを書く」からもご質問ください!

次のステップとして、「WordPressテーマ「ザトール」をインストールして適用させる方法を簡単③ステップ解説」の記事では、実際にWordPressにテーマをインストールする方法を解説しています。

スポンサーリンク