WordPressでホームページを自作する手順を解説!無料テーマですぐに作れる

この記事のレベル
初心者
(4.0)
重要度
(3.0)
難しさ
(2.5)

こんにちは、編集長のカワウソです!

「ホームページの自作にはWordPressがおすすめって聞いたけど、実際にどうやって作るかイメージが湧かない」という方も多いと思います。

そこで今回は、WordPressを使ってホームぺージを自作する手順を解説します。

カワウソ

この記事は次のような人におすすめ!

  • ホームページをWordPressで自作したい人
  • WordPressによるホームページ作成のイメージが湧かない人
  • Web制作会社に外注する前にWordPressでの作り方について知っておきたい人

この記事を読めば、実際に会社で使えるホームページがWordPressで自作できるようになります。

Web制作会社への依頼を考えている方は、事前に自分で作ってみることで、担当ディレクターとコミュニケーションが上手く取れるようになります。

なお、今回紹介する記事はレンタルサーバーに、WordPressがインストールされていることが前提となります。

「まだレンタルサーバーと契約していない」「WordPressのインストール方法が分からない」という方は、以下の記事を先にご覧いただくとスムーズです。

【誰でも10分】WordPressクイックスタートで始めるホームページ制作

今回の記事で、WordPressを使ってホームぺージを自作してみましょう!

それでは、どうぞ!

まずWordPressのテーマを選ぶ

レンタルサーバーにWordPressをインストールしたら、次はテーマを選びます。

「テーマって何?」という方のために、ここで簡単に解説します。

※すでに知っているという方は読み飛ばしてください。

テーマとは

WordPressのテーマとは、ホームぺージのデザインプレート(雛形)のことです。

テーマを用いると、次のようなメリットがあります。

メリット
  • Web制作スキルがなくてもホームぺージの作成が可能
  • 短時間でホームぺージを完成できる
  • ホームぺージの作成費用を抑えられる

Web制作スキルがなくてもホームぺージの制作が可能

ホームぺージ初心者の方にとって、一番悩みの種となるのが「Web制作スキルがない」ということ。しかし、WordPressのテーマを活用すれば、誰でも簡単にホームぺージが作れます。

すでにデザインされたテーマをWordPressにインストールすれば、そのデザインをそのまま使えます。あとは自社の内容に沿うよう写真やテキストを変更すれば、ホームぺージは完成します。

厳密には「ホームぺージタイトル(名前)」「問い合わせフォームの送信元メールアドレス」など、基本情報をいくつか変更する必要がありますが、WordPressの管理画面から簡単にできます。

短時間でホームぺージを完成できる

また、時間がかからないのもメリットの一つです。テーマを用いずに作るとなると、ゼロから作る必要があり、それなりに時間がかかります。

先述の通り、テーマを活用すればほぼ完成した状態から始められるため、ホームぺージを作る時間を大幅に短縮できます。

ホームぺージの製作費を抑えられる

さらにテーマには「無料」と「有料」があります。

無料のテーマを使えば基本的に費用はかかりません。有料のテーマは「サブスクリプション型」と「買い切り型」の2種類あります。

サブスクリプション型だと年間1~3万円が相場です。仮に3~5年後にホームぺージをリニューアルする場合、それまでにかかるトータルコストは3~15万円です。

買い切り型の相場も同じくらいで、1~3万円です。何年使ってもイニシャルコストしかかからないため、トータルコストを抑えたい人はこちらがおすすめです。

有料のテーマでも、ゼロからホームぺージを作るより圧倒的にコストを抑えられます。ゼロから作るとなると数十万円~数百万円はかかります。

デメリット
  • 他社のホームぺージと似る可能性がある

他社のホームぺージと似る可能性がある

念のため、デメリットについても触れておきます。

メリットの裏返しになる部分ですが、テーマを利用すると他社のホームぺージと似る可能性があります。

たとえば、「ブランドサイトを制作するため、デザインはこだわりたい」といった方は注意が必要です。他社のホームぺージに似てしまってはブランドのオリジナリティが欠けてしまいます。

できる限りフリー(無料)の写真を使わず、自社オリジナルの写真を使うように心がけましょう。

予算がある場合はWeb制作会社に依頼するのがおすすめ。ゼロから作ることはもちろん、コスト削減の観点からテーマを利用したとしても、上手くオリジナリティを演出してくれます。

Lightning(ライトニング)

この記事では参考に「Lightning(ライトニング)」というテーマを用います。

Lightning(ライトニング)

引用:Lightning(ライトニング)

Lightningは、株式会社ベクトルが提供する無料のWordPressテーマです。Web制作スキルがない方でも、ホームページやブログが簡単に作れるように開発されています。

2022年1月時点、有効インストール数は6万件を超えており、信頼と実績があります。

Lightningには、初心者の方でも簡単にテーマをインストールできる「クイックスタート」があります。

上記のデモサイトと同じデータが無料配布されており、WordPressにインストールさえすれば、デモサイトを編集する形で簡単にホームページが作れます。

その他、無料で利用できるオンライン学習サービス「ベクトレ(Vektor Training)」が提供されているため、これからWeb制作について学びたいという方にも、おすすめできるテーマです。

Lightningのインストール

まずは「クイックスタート」の手順に沿って、Lightningのインストールを完了させてください。

実際の画面を確認しながら進めることができ、初心者の方にも分かりやすいように説明されています。

Lightning G3 クイックスタートはこちらをクリック

編集作業の前に必要な準備

編集作業の前に「バックアップ」を取っていると、仮に編集で何らかのトラブルが発生しても復元できます。

ほとんどのレンタルサーバーは、管理画面から簡単にバックアップを取れます。

通常のバックアップとは別に、必ずMySQL(マイエスキューエル)のバックアップも取っておきましょう。

MySQLはデータベースのことですが、WordPressで使用されます。MySQLのバックアップを取っておかないと、完全に復元できなくなるため、必ず取っておいてください。

※バックアップの取得及び復元方法については、便宜上この記事では割愛します。実際に利用されるレンタルサーバーのマニュアルをご参考ください。

Lightningデモサイトの編集

それでは実際に編集していきます。ここでは、トップページの編集方法を解説します。

参考に架空の会社、オーガニック化粧品OEMメーカー「Organic Cosmetics Company」のトップページを作ります。

主にWordPressの以下の三つの機能を編集します。

WordPressのサイドメニュー
  1. 外観 … ホームページの基礎(骨組み)部分を編集する機能
  2. 固定ページ … 各ページの中身(コンテンツ)を編集する機能
  3. 投稿 … お知らせ(ニュース)など、ブログを編集する機能

先に完成イメージを確認したいという方は下記から確認してください。

Organic Cosmetics Companyのホームぺージ完成イメージ

完成イメージを確認する(PDFで開く)

ロゴの編集

ロゴの編集
外観からカスタマイズをクリックする

WordPressのサイドメニューの外観からカスタマイズをクリックします。

WordPressサイドメニュー(外観>カスタマイズ)
鉛筆マークをクリックする

ロゴの左上にある「鉛筆マーク」をクリックします。

ロゴの左上にある鉛筆マークをクリック
ロゴを変更する

左メニューの画像を変更をクリックして、ロゴをアップします。

※推奨画像サイズは縦500×120pxです。背景色と馴染ませたい場合は、背景を透過した「PNGファイル」を用意しましょう。

画像を変更をクリック
公開して完了

ロゴが入っていることを確認し、公開をクリックして完了です。

Organic Cosmetics Company

ヘッダーメニューの編集

ヘッダーメニューの編集

「ヘッダー」はホームページの上部にあるエリアを指します。他のページでも表示される共通エリアです。

「ヘッダーメニュー」はロゴ右側にある「ホーム」「サービス案内」などの各種メニューを指します。※別名「ヘッダーナビゲーション」とも呼ばれます。

メニューをクリックする

サイドメニューから「メニュー」をクリックします。

メニューをクリックする
Header navigationをクリックする

サイドメニューから「Header navigation」をクリックします。

HeaderNavigationをクリック
名称を変更したいメニューをクリックして変更する

名称を変更したいメニューをクリックして変更します。
今回は例として「デザイン要素サンプル」を「オーガニックへのこだわり」に変更します。

まずは、「デザイン要素サンプル」をクリックします。

デザイン要素サンプル
テキストを変更する

ナビゲーションラベルのテキストを「オーガニックへのこだわり」に変更します。

※「説明」からメニュータイトル下部のテキストも変更できます。

ナビゲーションラベルの変更
公開をクリックして完了

公開をクリックして反映されたか確認して完了です。

公開後、反映されたかチェック
下層ページのメニュー名も編集できます

オーガニックへのこだわり
 ∟ページレイアウトサンプル
 ∟2カラム
 ∟1カラム
 ∟1カラム(サブセクション無し)
 ∟siteContentの上下余白を無し

注意

不要なメニューがあっても、この時点では削除しないでください。これらはページの見本であるため、削除すると今後他のページを作成する際に困るかもしれません。

スライドの編集

スライドの編集

「スライド」はトップページ上部のメイン画像エリアです。複数の画像を登録することで、画像がスライド(流れる)する仕組みになっています。

「Lightning トップページスライドショー」をクリックする

サイドメニューから「Lightning トップページスライドショー」をクリックします。

Ligtningトップページスライドショー

画像変更をクリックする

「スライド [1] 」の画像変更をクリックし、 ロードします。
※推奨画像サイズは縦1900×600pxです。

スライド画像の画像を変更

合致する比率の画像を持っていない場合は、WordPress上でトリミング(切り抜き)できます。

WordPress上でのトリミング
スライドテキストを変更する

Lightningはスライド画像の上にテキストとリンクボタンを設置できます。ここではそれぞれの項目に対し、以下のように設定します。

ポイント
  • スライドタイトル … オーガニック専門化粧品OEMメーカー
  • スライドテキスト … 化学薬品に頼らないオリジナルコスメを作ります。
  • ボタンのテキスト … 詳しくはこちら
  • スライド画像リンク先 URL … ※リンク先ページが完成次第、設定予定
公開をクリックして完了

公開をクリックして完了です。

公開をクリックして完了

以下を調整することで、スライド画像を調整できます。

  • 位置
  • スライド上の文字色
  • 文字に影をつける
  • 文字の影の色
  • スライドに被せる色 (任意)
  • スライドに被せる色の濃さ
スライド画像の見え方は詳細設定可能

コンテンツの編集

トップページの「こんなお悩みありませんか?」以降にあるコンテンツの編集方法を解説します。

コンテンツの編集
固定ページから編集をする

サイドメニューから「固定ページ」から「固定ページ一覧」をクリックします。

「HOME」の「編集」をクリックして編集していきます。

固定ページ>HOME>編集
画像を変更する

メガネの「画像」をクリックし、画像をアップロードします。

画像を変更する

画面右側にある「ブロック」の「スタイル」から好きな形を選択します。

ブロックから好きなスタイルを選ぶ
テキストを変更する

テキストをクリックすると、編集できるようになります。

テキストを変更する

ここでは「こんなお悩みありませんか?」はそのままにして、下部3つの項目を以下のように変更します。

  • どのオーガニック原料を選べばよいか分からない
  • 海外メーカーとの取引は何か不安
  • ラベルやパッケージのデザインに自信がない
変更後のイメージ
公開をクリックして完了

画面右上のプレビュー確認し、問題がなければ公開をクリックして完了です。

他の要素も同じように編集できます。

注意

「お知らせ」については別の画面で作成したものが、自動でトップページに表示されるようになっています。誤って「お知らせ」の機能自体を消さないようにしましょう。

※編集作業は画面左上の「戻るボタン」から一つ前の作業に戻ることができます。誤って作業した場合はこの機能を利用してください。

お知らせの編集

ここでは「お知らせ」を新規投稿する方法を紹介します。

投稿一覧をクリックする

サイドメニューの「投稿」ぁら「投稿一覧」をクリックします。

投稿>投稿一覧

新規追加をクリックする

画面上部の「新規追加」をクリックします。

新規追加をクリック
タイトルを入力する

タイトルを入力します。

タイトルを入力する
文字や画像を挿入する

本文を入力していきます。
画像は「/」(半角スラッシュ)を入力すると、挿入できます。

文字や画像を挿入する
公開して完了

画面右上のプレビューで確認し、問題がなければ公開をクリックします。

公開して完了

フッターメニューの編集

フッターメニューの編集

「フッター」はホームページの下部にあるエリアを指します。他のページでも表示される共通エリアです。

鉛筆マークをクリックする

ロゴの左側にある「鉛筆マーク」をクリックします。

そして、サイドメニューの「画像を選択」からヘッダーで使ったロゴ画像を選択します。

ロゴの横の鉛筆ボタンをクリックする
プロフィールを入力する

「プロフィールテキスト」から住所も変更可能です。

各種SNSについてはアカウントがあればURLを記入します。
アカウントがなければ、元々記載されていたURLは削除しましょう。

「Email リンク先ページのURL」はお問い合わせページが完成した際にそのURLを挿入してください。

プロフィールの入力
鉛筆マークをクリック

Twitterの左側にある「鉛筆マーク」をクリックします。

Twitterアカウントの入力

左メニューの「アカウント:Twitter アカウントを入力してください。」の欄に、接続したいTwitterアカウント名を挿入します。

ここでは、私カワウソのTwitterアカウント(@kawauso_xsv)を登録します。

SNSのタイムライン表示が不要の場合は、「ブロックを削除」をクリックします。

ブロックを削除
公開をクリックして完了

公開をクリックして完了です。

公開をクリックして完了

まとめ

この記事では、WordPressを使ってホームぺージを自作する手順を解説しました。

まず自分で作ってみることで、WordPressに関するさまざまな知識を身に付けることができます。

今回は「Lightning(ライトニング)」のテーマを用いて、トップページのみ解説しました。

他のページの編集にもチャレンジされる際は、無料で利用できるオンライン学習サービス「ベクトレ(Vektor Training)」をご利用ください。

それでは、素敵なホームページが完成することを祈っております。

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

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

12月9日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに12月5日18時まで秋のスタートキャンペーンも開催中!
Amazonギフト券10,000円分が当たるビッグチャンスです。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2022年10月時点、hostadvice.com調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!