WordPress

wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

social 2470875 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

「ワードプレスでホームページを作りたい!ただ、何から始めたら良いのか分からない!」という方も、いらっしゃるのではないでしょうか?

ワードプレスは一度慣れてしまえば使いやすいシステムですが、一度も使ったことがない人からすれば、ちょっと分かりにくいですよね。

そこで今回は、まだワードプレスを使ったことがない人でも分かるように、ワードプレスでのホームページの作り方を紹介していきます。

CONTENTS

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

まず、ワードプレスとはCMS(コンテンツ管理システム)の一種です。

コンテンツ管理システムと言うと難しい表現ですが、簡単にいうと、ITに詳しくない人でも簡単にブログを書けるようになるシステム、サイトを作れるようになるシステムです。

それでは、実際のホームページの作成手順をご紹介しますが、やることは簡単です。

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

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

なぜなら、ワードプレスはレンタルサーバーからインストールする方法が一番簡単でコスパが良いからです。

レンタルサーバーの中でもコスパが良いのは、エックスサーバーで、当サイトでもエックスサーバー0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめを利用しています。

エックスサーバーのX10プランであれば、月々1,000円程度で利用ができ、SSL化対応(https化対応)も無料で、アクセス数が増えても容量があるので耐えることができます。

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

【公式サイト(エックスサーバー)】https://www.xserver.ne.jp/0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

2. ドメインを取得する

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

ドメインは安いものでは100円などもありますので、両者の値段を見比べて確認してから購入してみるのも良いでしょう。0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

【公式サイト(お名前.com)】https://www.onamae.com/0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

a20e9b3febfef3c9ec0c37985147b5a0 530x347 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ
次に、ワードプレスをレンタルサーバーからインストールします。

エックスサーバー0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめであれば、契約してマイページにログインすると、ワードプレスの「簡単インストール」という機能がついています。

そちらから、ワードプレスは簡単にインストールすることができるようになっています。

一方で、wordpressの公式サイトからパソコンのローカルにダウンロードすると、FTPというソフトを使ってアップロードする必要があり、手間も時間もかかってしまいます。

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

エックスサーバーでのワードプレス(WordPress)のインストール方法

xserver 1 1024x639 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめまず公式サイト(エックスサーバー0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ)に移動し、契約を完了させます。X10プランであれば、月額1,000円程度で契約ができます。

そうして契約が完了したら、エックスサーバーのサーバーパネルにログインします。

※お名前.comでドメインを取得した場合は、「ドメイン設定」から、Xサーバーにドメインを追加する作業が発生します。

自動インストールで「wordpress」を入れる

xserver2 1024x374 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

そうして、自動インストールという箇所から「wordpress」を入れます。

xserver3 1024x433 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

そうするとブログ名などを入力する画面に飛びますので、案内に従って進めてください。

これだけで、ワードプレスのインストールが可能です。

あわせて読みたい
pc 1541898432 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ
ワードプレスを安くすぐ始める方法を初心者向けに簡単解説ワードプレス(wordpress)を安く簡単に今日から始めるには、一体どうすれば良いのでしょうか? 結論からお伝えすると、まずはコ...

WordPressにはホームページのテンプレートがある

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

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

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

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

WordPressの「外観」でできること

続いて、WordPressの外観の欄からできることをまとめます。

  • テーマ・テンプレートの変更
  • テーマ・テンプレートの新規追加
  • テーマ・テンプレートのアップロード
  • テーマ・テンプレートのカスタマイズ
  • ウィジェットの変更
  • メニューの変更
  • テーマのソースコードの編集

などがあります。

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

a130347bdb88aa2c5d37921c555b1c02 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

43e26aaec93184ce199987e00a29e9dc - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

f09d50b8c691506e672d73235b09583f - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

575a4f065acae71220716bac69bc9df0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

955ea6dcc8b4688d7dff00b6aac48d2e - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

※FTPを使って、直接フォルダへアップロードすることも可能です。

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

129285a7ebb11340de379872f33b669c - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

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

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

ウィジェットの変更

739c234f23a133c3ae222f9207f46501 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめウィジェットは、サイドバーや記事下などに置くコンテンツです。ここのウィジェットで、配置するコンテンツを変更できます。

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

f555f29a222411b5b66eea340f7cf8a7 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

何も編集できない場合は、まずは「メニューの新規作成」を行いましょう。

メニューの部分は少し構造が変わっていて、”メニューのセット”みたいなものを作成して、それをヘッダーなりフッターなりに設定していく形を取ります。

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

最後に「外観」→「テーマの編集」から、テーマのソースコードが変更できます。

WordPressの「メディア」とは?でできることは?

続いて、WordPressには「メディア」という、画像をアップロードできる機能もあります。

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

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

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

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

47365fe706480255caccd657c85e8f36 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

20dcb8ec7dbd6dcfc01bec869af05fe9 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

708c05f79cf2243bca82655d4a5cd553 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

fb6b5dd6f3d972a9630333359950b4ac - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

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

コンテンツの削除

31376d668ceaefcea08aba2bdc18e5a1 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

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

WordPressでの企業サイトの作り方は?ブログとの違いは?

ちなみに、Wordpressでは企業サイトも作成できますが、もともとはブログ向けのサービスです。

そのため、有料テーマを利用しない場合は、事前にきちんとサイト設計をしておくことが必要です。

必要な要素を書き出し、マップにする

まずは、必要な要素を書き出し、マップ(サイトマップ)にします。参考程度に、下記は青葉堂さんのサイトマップになります。

site - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

出典:http://www.aoba-do.com/sitemap.html

このように、サイトに必要なパーツ(トップページや、aboutページ、特定商取引法ページ)をまずはマップ型で書き出します

これによって、ページ数が把握できます。なお、このページ数は、例えばサイト制作の依頼を出す時にも重要です。

ロゴ・アイコンを用意する

次は、ロゴとアイコンを用意します。

一般的には、サイトの上部に配置されているマークを「ロゴ」と呼び、タブやショートカットに出るマークを「アイコン」と呼ぶことが多いです。

アイコンは基本的に正方形ですが、ロゴは長方形状になることが多いです。ですので、ロゴは作成時にサイズを考慮する必要があります。

このサイトのデザインの場合、適正は「300px × 60px」ですが、テーマによって変わります。

ですので、デザイナーさんにお願いして、余白を入れた複数サイズを作ってもらうのが良いかと思われます。

画像を用意する

次は、各部分に配置する画像を準備します。

最近はフリー画像でも綺麗なものがありますので、商用利用可能なフリー画像を使うのも一手です。

なお、画像が主に必要となる部分は、

  • メインヴィジュアル・ヒーローヘッダー(トップページの一番上の画像)
  • 他トップページに使う画像
  • 他下層ページで画像を使うポイント

です。この次の工程のフレームワーク・カンプと順番が前後することがよくあります。

フレームワーク・カンプを作る

次は、フレームワーク・カンプを作ります。これは、ラフなサイトのデザイン案というイメージです。

下の画像は製作予定のサイトなので、全体をお見せすることは出来ませんが、このようなものを作っていきます。

jps 1024x922 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ

このフレームワーク・カンプがあると、デザイナー側も非常に作りやすく、画像を入れた際のイメージもつきやすいですし、どのような画像を用意すべきかもわかります。

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

最後に、中にはホームページの制作会社に、サイト制作の依頼を考えている方もいるかと思われます。

ここで一点注意点ですが、不当に業者から高い料金を請求されない対策のためにも、相場を抑えておくことは重要です。

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

ですので、「サイト作るならいくらぐらいかかるの?」と聞かれても、一概に答えにくいのが現実です。

また、当然制作会社によって料金体系も違いますので、一度見積もりを出してみるか、見積もりができるサイトで調べてみることをオススメします。

サイト制作の料金相場はどれくらい?

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

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

この要素ですと¥450,000と出ました。この業界に詳しい方からすれば、「相場だね」と思うかもしれません。

サイトでもスマホでもみやすいようにレスポンシブ対応をさせたりすると、より高額になりますし、色々と機能をつけようとすると、さらに料金はかさみます。

また、初期費用が安くても月額で費用がかかる場合もありますので、合計料金で比較することが重要です。

制作会社によって強みも異なりますので、実際に見積もりを出して比較検討されてみるのがおすすめです。

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

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

基本的に自分でワードプレスをインストールして始める場合は、レンタルサーバーエックスサーバーなど)0 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめを契約し、そこからインストールして始めるのが一番簡単です。

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

あわせて読みたい
pc 1541898432 - wordpressでホームページを作成したい人向けの基礎知識とやり方まとめ
ワードプレスを安くすぐ始める方法を初心者向けに簡単解説ワードプレス(wordpress)を安く簡単に今日から始めるには、一体どうすれば良いのでしょうか? 結論からお伝えすると、まずはコ...

今回の記事が、あなたのサイトの制作の助けになっていれば幸いです。最後まで読んでいただき、ありがとうございました。