wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

「ワードプレスでホームページを作りたい!ウェブサイトを作りたい!ただ、何から始めたら良いのか分からない!」という方に向けて、ワードプレスで長年サイトを運営をしている筆者が図解でやり方を解説します。ちなみに当サイトもワードプレスで運営しています。

ワードプレスは一度慣れてしまえば使いやすいシステムですが、一度も使ったことがない人からするとちょっと分かりにくいですよね。そこで今回は、まだワードプレスを使ったことがない人でも分かるように、ワードプレスでのホームページの作り方を図解で紹介していきます。

CONTENTS

WordPress(ワードプレス)とは?ホームページ作成手順は?

wordpress 1541288850 530x227 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説
まず、ワードプレスとはCMS(コンテンツ管理システム)の一種です。

コンテンツ管理システムと言うと難しい表現ですが、簡単にいうと、ITに詳しくない人でも簡単にブログを書けるようになるシステム、サイトを作れるようになるシステムです。それでは、実際のホームページの作成手順をご紹介しますが、やることは簡単です。

1. レンタルサーバーを契約する

4dad935a5605849cc11743a89ea43e33 530x299 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

公式サイト(エックスサーバー):https://www.xserver.ne.jp/0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

まずは、レンタルサーバーを契約しましょう。

なぜなら、ワードプレスはレンタルサーバーからインストールする方法が一番簡単でコスパが良いからです。レンタルサーバーの中でもコスパが良くサーバーが安定しているのはエックスサーバーで、当サイトでもエックスサーバー0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説のX10プランを利用しています。

エックスサーバーのX10プランであれば、SSL化対応(https化対応)も無料で、アクセス数が増えても容量があるので耐えることができ、サイトの表示速度も早いです。実際に当サイトは初期費用3,000円、初年度は年間16,500円(翌年度から13,000円程度)でサイトを運営しています。

また、エックスサーバーなら最初に無料で利用できる期間が10日間あるため、お試しで利用するのには最適です。

2. ドメインを取得する

604365c7f9f590c03092240e11517dcf 530x198 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説
公式サイト(お名前.com):https://www.onamae.com/0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

続いて、ドメインはエックスサーバーで契約しても良いですし、大手ドメイン業者のお名前.comを利用するのでも良いでしょう。

お名前.comではドメインは安いものでは100円などもありますので、両者の値段を見比べて確認してから購入してみるのも良いかと思われます。ちなみに当サイトはお名前.comでドメインを取得しています。

3. エックスサーバー にドメインを追加する

f28672b413e550c6103d12f4e6a27b35 530x181 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

続いてエックスサーバーの管理画面にログインをします。

次に「ドメイン」の欄から「ドメイン設定」をクリックします。そうすると「ドメイン設定の追加」という項目がありますので、こちらに取得したドメインを追加します。

56307be016747d75522300b7c49755be 530x222 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

例えば、「123.com」ならそちらをドメイン名の空欄に入力します。その後、右下の「ドメイン設定の追加(確定)」をクリックして、ドメインを追加します。

※ドメインをお名前.comで取得した場合は、ドメインの追加が完了したら、お名前.comのネームサーバーをエックスサーバーに変更します(詳しくはこちら)。

4. wordpress(ワードプレス)をインストールする

a20e9b3febfef3c9ec0c37985147b5a0 530x347 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説
次に、ワードプレスをエックスサーバーからインストールします。

エックスサーバー0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説では、契約してマイページにログインすると、ワードプレスの「簡単インストール」という機能がついています。

そちらから、ワードプレスは簡単にインストールすることができるようになっています。一方で、wordpressの公式サイト(wordpress.org)からパソコンのローカルにダウンロードすると、FTPというソフトを使ってアップロードする必要があり、手間も時間もかかってしまいます。そして、結局サーバーは別に契約する必要があります。

そのため、インターネット上級者以外は、レンタルサーバーからダウンロードするやり方が良いでしょう。

>>エックスサーバーでワードプレスを始める方法の詳細についてはこちら

エックスサーバーで運営する際はサイトの無料SSL設定を忘れずに!

ssl 530x182 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

エックスサーバーでサイトを運営する場合、「SSL設定」を無料で完了させることができます。こちらのSSL設定を行なっていないと、サイトのURLが「http〜」のままになってしまいます。

SSL設定を行ってサイトをhttps化することでGoogleで表示させることができる

「http〜」から始まるサイトのままの場合、Googleがサイト訪問者に危ないサイトとして警告し、せっかくのサイトがGoogleの検索上で表示されなくなってしまいます。そこで、こちらのSSL設定を行ってサイトのURLを「https〜」に変更します。

そうすることでこのサイトはしっかりとセキュリティ対策がなされたウェブサイトであることをGoogleに認識してもらい、サイトに訪問してきてくれた人に、無事サイトを表示させることができるのです。エックスサーバーでは、SSL設定の画面からボタンをクリックするだけで完了します。

ワードプレスの管理画面からサイトのURLを変更する

https 530x162 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

その後、ワードプレスの管理画面にログインして、設定の「一般設定」をクリックします。そこでWordPressアドレス(URL)とサイトアドレス(URL)の部分を、「http」から「https」に変更して更新します。

そうすると管理画面から一度ログアウトしますが、再びログインすれば無事に利用できるようになります。この対応をしておくことで、Googleに「運営しているサイトが安全なサイトである」として認識してもらえますので、ワードプレスを始める場合はあらかじめ一番最初に必ず設定しておきましょう。

エックスサーバーの公式サイトへ0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

WordPressにはホームページのテンプレートがある!初心者には有料テーマが良い

computer 768608 640 530x353 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

また、Wordpressには「テーマ」という機能があり、プログラミングに詳しい人がすでにテンプレートを作ってくれています。

ホームページを作る際にも、この「テーマ」機能を使うことで簡単に綺麗なサイトを作ることが出来ます。企業サイト向きのテーマや、ブログ向きのテーマなども存在します。

例えば、最初から有料テーマを利用すれば、初心者でもおしゃれなデザインでサイトを作ることができます。当サイトも有料テーマで運営していますが、初心者には特に有料テーマがおすすめです。

無料テーマで始めてしまうと、かっこいいサイトにするのに手間がかかりますし、何よりカスタマイズをするのは初心者にはハードルが高いです。最初から有料テーマを使うことで、そのような無駄な作業を省くことができます。

>>おすすめのワードプレスの有料テーマ比較はこちら

WordPressの「外観」でできること7つ!初心者が知っておきたい基礎知識

wordpress 973439 640 530x297 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

続いて、WordPressをインストールしたら、様々な機能があります。

よく使う「外観」という項目からできることをご紹介します。この外観では先ほどご紹介したテーマに関する操作ができ、具体的には以下の機能があります。

  1. テーマ・テンプレートの変更
  2. テーマ・テンプレートの新規追加
  3. テーマ・テンプレートのアップロード
  4. テーマ・テンプレートのカスタマイズ
  5. ウィジェットの変更
  6. メニューの変更
  7. テーマのソースコードの編集

それぞれ詳細をご紹介します。

WordPressのテーマ・テンプレートの変更方法

a130347bdb88aa2c5d37921c555b1c02 1024x574 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

WordPressのダッシュボードから「外観」→「テーマ」に進みます。

そこで、インストール済みのテーマの一覧が確認できます。

43e26aaec93184ce199987e00a29e9dc - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

使いたいテーマの「カスタマイズ」を押すことで、テーマを変更できます。

テーマ・テンプレートの新規追加

f09d50b8c691506e672d73235b09583f - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

使いたいテーマがあって、まだインストールしていない場合、新規追加からインストールすることができます。

575a4f065acae71220716bac69bc9df0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

こうして、新しいテーマを次々にインストールすることが可能です。

テーマ・テンプレートのアップロード

955ea6dcc8b4688d7dff00b6aac48d2e - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

また、テーマのアップロード方法は、テーマの新規追加ページから行います。

その際は、テーマファイルをZIPに圧縮してアップロードします。このアップロード方法によって、カスタマイズ済みのテーマを上げることも可能です。※FTPを使って、直接フォルダへアップロードすることも可能です。

テーマ・テンプレートのカスタマイズ

129285a7ebb11340de379872f33b669c - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

テーマのカスタマイズは「外観」→「カスタマイズ」から行います。

このページの詳細は、テーマによって異なりますが、一般的に以下の内容が編集できます。

  • サイトタイトル・ディスクリプション
  • アイコン画像
  • ヘッダー要素
  • メニューバーの要素
  • フッターの要素

最後に、「外観」→「ウィジェット」欄から、ウィジェットの変更が行なえます。

ウィジェットの変更

739c234f23a133c3ae222f9207f46501 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

ウィジェットは、サイドバーや記事下などに置くコンテンツです。ここのウィジェットで、配置するコンテンツを変更できます。

メニューの新規作成・変更

f555f29a222411b5b66eea340f7cf8a7 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

「外観」→「メニュー」から、メニューの新規作成や変更が行なえます。

何も編集できない場合は、まずは「メニューの新規作成」を行いましょう。メニューの部分は少し構造が変わっていて、”メニューのセット”みたいなものを作成して、それをヘッダーなりフッターなりに設定していく形を取ります。

テーマのソースコードの変更

最後に「外観」→「テーマの編集」から、テーマのソースコードが変更できます。ただし、こちらは上級者向けの機能となります。

WordPressの「メディア」とは?初心者が知っておきたいメディアでできること5つ

wordpress 589121 640 530x350 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

続いて、WordPressには「メディア」という、画像をアップロードできる機能もあります。こちらもよく使いますので最初にご紹介します。

具体的にメディアでは、下記のような機能があります。

  1. アップロードコンテンツの一覧確認
  2. アップロードコンテンツのURL確認・取得
  3. コンテンツのタイトル・キャプション・代替テキスト(alt)変更
  4. コンテンツの削除
  5. 画像一括最適化(圧縮) ※プラグイン導入時のみ

それぞれを少しだけ解説します。

WordPressのメディアへのアップロード

47365fe706480255caccd657c85e8f36 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

まず、ダッシュボードからメディアのページを開いた後、コンテンツをドラッグ&ドロップすると、アップロードが可能です。

WordPressのアップロードコンテンツの一覧

20dcb8ec7dbd6dcfc01bec869af05fe9 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

こうしてアップロードしたコンテンツは、ダッシュボードから「メディア」→「ライブラリ」で確認できます。

アップロードコンテンツのURL確認・取得

708c05f79cf2243bca82655d4a5cd553 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

また、アップロードしたコンテンツは個別にURLなどを確認することが出来ます。

タイトル・キャプション・代替テキスト(alt)変更

fb6b5dd6f3d972a9630333359950b4ac - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

また、個別のコンテンツのタイトルやキャプション、代替テキストを変更することが出来ます。

代替テキスト欄にその画像を表すような文字を記入しておくと、画像が表示されなくてもユーザーにどんな画像なのかを認識させることが可能です。

コンテンツの削除

31376d668ceaefcea08aba2bdc18e5a1 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

コンテンツの削除は、個別ページの右下にある「完全に削除する」から行うことが出来ます。

ホームページ制作会社に依頼する場合の料金の相場と注意点

web 3967926 640 530x307 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

ちなみに、中にはここまで読んでワードプレスだと大変そう…と思った方もいらっしゃるかもしれません。

そこでホームページの制作会社などに、サイト制作の外注の依頼を考えている方もいるかと思われます。ここで一点注意点ですが、不当に業者から高い料金を請求されない対策のためにも、あらかじめ相場を抑えておくことは重要です。

事前にサイト制作の相場を抑えておくことは大切

基本的に、ホームページの制作の場合は、「下層ページ」などの対応ページ数や工数で料金が決定されます。

ですので、「サイト作るならいくらぐらいかかるの?」と聞かれても、一概に答えにくいのが現実です。また、当然制作会社によって料金体系も違いますので、一度見積もりを出してみるか、見積もりができるサイトで調べてみることをオススメします。

サイト制作の料金相場はどれくらい?実際に見積もってみた

今回は試しに、以下のパーツを揃えたサイトをメテオリレイで見積もってみました。

  • TOPページ
  • 下層ページ5枚
  • wordpress
  • メールフォーム1つ設置
  • GA、SEO内部対策
  • ロゴ

この要素ですと¥450,000と出ました。この業界に詳しい方からすれば、「相場だね」と思うかもしれません。サイトでもスマホでもみやすいようにレスポンシブ対応をさせたりすると、より高額になりますし、色々と機能をつけようとすると、さらに料金はかさみます。

また、初期費用が安くても月額で費用がかかる場合もありますので、合計料金で比較することが重要です。制作会社によって強みも異なりますので、実際に見積もりを出して比較検討されてみるのがおすすめです。だいたいおしゃれなサイトを作ろうとした場合は、100万円以上の予算が必要になるのが一般的です。

上場企業が提供するホームページ制作サービスを利用するのも一つの方法

0c49dd92fc7069ebde8ceb58f6b9bdef 530x267 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説
【公式サイト】https://www.homepage296.com/

なお、当サイトでは上場企業の株式会社ビジョンが運営するホームページ.comをおすすめしています。

年間依頼実績が1,800件以上あり、初期費用0円で最短2週間でサイトを作ることができるからです。これまでのサイト作成事例も公式サイトに多く掲載されていますし、事前の相談などは無料でできますので、外注を検討されている方は一度相談されてみるのがおすすめです。

ホームページ.comの公式サイトへ

ホームページ.comの詳しい口コミへ

初心者向けのWordPress(ワードプレス)でのホームページ作成に関するまとめ

interface 3614766 640 530x354 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

以上になりますが、ワードプレスでホームページを作ろうとしている時の悩みは解決できましたか?

基本的に自分でワードプレスをインストールして始める場合は、エックスサーバーなどのレンタルサーバーを契約し、そこからワードプレスを簡単インストールして始めるのが一番簡単です。

エックスサーバーの公式サイトへ0 - wordpressでのホームページ(ウェブサイト)の作り方!初心者向けに基礎知識を図解で徹底解説

エックスサーバーでワードプレスを始める方法はこちら

また、初心者の方は最初からワードプレスの有料テーマを利用された方が、おしゃれなテーマでストレスなく記事の更新ができるでしょう。

ワードプレスを使ったサイト運営が難しいと感じた方は、上場企業が運営するホームページ制作サービス(ホームページ.com)を利用するのも一つの方法かと思われます。今回の記事が、あなたのサイトの制作の助けになっていれば幸いです。

最後まで読んでいただき、ありがとうございました。

おすすめの記事