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

【2023年2月10日更新】おすすめのWordPressテーマの紹介を追加しました。

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (2.5)

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

WordPress(ワードプレス)でのホームページ制作を検討しているものの、「実際にどう作るのかイメージが湧かない……」とお悩みではありませんか?

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

カワウソ

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

  • WordPressでホームページを自作したい人
  • 費用や手間をかけずにホームページを作りたい人
  • ひとまずWordPressで1ページ作ってみたい人

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

また、Web制作会社への外注を考えている場合でも、事前に自分で作ってみれば、担当ディレクターとのコミュニケーションが円滑に進むでしょう。

それではどうぞ!

メモ

この記事は、すでにレンタルサーバーにWordPressがインストールされていることを前提としています。

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

WordPressのテーマとは

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

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

ここでは、ホームページ制作でテーマを用いるメリットとデメリットを解説します。

※テーマについて知っている方は、「Lightning(ライトニング)について」からご覧ください。

メリット:高品質なホームページが作れる

WordPressのテーマを使えば、高品質なホームページが作れます。

基本的にWordPressのテーマを作っているのは、Webデザインのプロです。

デザイン性の高さはもちろん、テーマによっては、コンバージョン(問い合わせや資料請求など)を獲得するための「導線設計」が、うまく計算されています。

テーマを活用すれば、見た目だけでなく、成果の上がるホームページを作りやすいでしょう。

※コンバージョンについては、以下の記事で詳しく解説しています。

メリット:時間やコストを抑えられる

時間やコストを抑えられるのも、WordPressのテーマを使うメリットです。

テーマは、すでにデザインがほぼ完成しています。そのため、テーマを活用すると、見た目が整った状態からホームページ制作を始められるのです。

あとはテキストや画像などを自社の素材に変更すれば、オリジナルのホームページが作れるでしょう。

反対にテーマを使わないと、ホームページをゼロから作る必要があり、多くの時間がかかります。
自作するとは言っても、ビジネスである以上、時間はコストと考えるべきですよね。

テーマを使って、パパッとホームページを作ってしまいましょう。

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

利用者数が多いテーマを使うと、他社のホームページと似るおそれがあります。

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

できる限りフリー(無料)の素材は使わず、自社オリジナルの写真やイラストなどを使いましょう。

予算がある場合は、Web制作会社に依頼するのがおすすめ。
既存のテーマを使わず、自社オリジナルのデザインでゼロから構築してくれますよ。

※Web制作会社の選び方については、以下の記事をご覧ください。

Lightning(ライトニング)について

この記事では、『Lightning』というテーマを用いて、ホームページ制作の手順を解説します。

Lightning

▲出典:Lightning

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

2023年2月時点、有効インストール数は8万件を超えていて、信頼と実績があるテーマです。

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

「Lightning G3 クイックスタート」を利用すれば、以下の画像と同じデモサイトを編集する形で簡単にホームページが作れますよ。

Lightningのデモサイト

▲出典:Lightningのデモサイト

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

Lightningのデモサイトをインストール

まずは「Lightning G3 クイックスタート」の手順に沿って、デモサイトのデータをWordPressにインストールしてください。

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

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

注意

弊社『エックスサーバー』の「WordPress クイックスタート」や「WordPress簡単インストール」で『Lightning』を選択した場合、テーマ自体はインストールされるものの、デモサイトの状態にはなりません。

あとからでも「Lightning G3 クイックスタート」の手順どおり進めれば、デモサイトの状態になりますよ。

編集作業の前にバックアップを取得しておこう

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

ほとんどのレンタルサーバーは、管理画面から簡単にバックアップを取得可能。通常のとは別に、必ずMySQL(マイエスキューエル)のバックアップも取っておきましょう

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

エックスサーバーのバックアップ方法については、以下でご確認いただけます。

Lightningデモサイトの編集

この記事では、トップページの編集方法にフォーカスを当てて解説します。

今回作るのは架空の会社、オーガニック化粧品OEMメーカー「Organic Cosmetics Company」のトップページ
トップページの制作にあたり、WordPressで編集するのは主に以下3つの機能です。

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

先に完成イメージを確認したい方は、以下をご覧ください。

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

ロゴの編集

ロゴの編集

初めに、デモサイトのロゴを編集していきます。

STEP1
外観からカスタマイズをクリックする

WordPressのダッシュボードにログインしたのち、メインナビゲーションの「外観」にカーソルをあて、カスタマイズをクリックしましょう。

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

ロゴ近辺にある鉛筆マークをクリックします。

ロゴ近辺にある鉛筆マークをクリック
STEP3
ロゴを変更する

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

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

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

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

Organic Cosmetics Company

※以下の記事では、ホームページに最適なロゴの作り方を解説しています。「これからロゴを準備する」という方は、ぜひご覧ください。

ヘッダーナビゲーションの編集

ヘッダーナビゲーションの編集

「ヘッダーナビゲーション」は、ロゴ右側にある「ホーム」「サービス案内」などの各種リンクのことです。
※なかでも、他のページに共通して表示されるものを、「グローバルナビゲーション」と言います。

STEP1
メニューをクリックする

引き続き、「カスタマイズ」の編集画面です。

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

ヘッダーメニューの編集
STEP2
HeaderNavigationをクリックする

続いてHeaderNavigationをクリックします。

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

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

まずは、デザイン要素サンプルをクリックしてください。

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

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

※「説明」では、メニュータイトル下部のテキストを変更可能です。

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

公開をクリックして反映されたか確認してください。

以上でヘッダーナビゲーションの編集は完了です。

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

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

注意

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

スライドの編集

スライドの編集

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

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

引き続き、「カスタマイズ」のサイドメニューからLightning トップページスライドショーをクリックします。

Ligtningトップページスライドショー
STEP2
画像変更をクリックする

スライド [1] 」の画像を変更をクリックし、 任意の画像をアップロードしてください。
※推奨画像サイズは1900×600pxです。

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

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

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

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

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

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

公開をクリックして完了

「スライド[2]」や「スライド[3]」の設定方法も同様です。※画像を削除すると、スライドの数を減らせます。

ちなみに、下記を変更すれば、スライド画像を調整できますよ。

※完成イメージの設定もあわせて記載しているので、参考にしてみてください。

完成イメージの設定
  • 位置・・・中央
  • スライド上の文字色・・・黒色
  • 文字に影をつける・・・チェックなし
  • 文字の影の色・・・白色
  • スライドに被せる色 (任意)・・・白色
  • スライドに被せる色の濃さ・・・70%
スライド画像の見え方は詳細設定可能

コンテンツの編集

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

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

WordPressのダッシュボードに戻り、メインナビゲーションから「固定ページ」にカーソルをあて、固定ページ一覧をクリックしましょう。

固定ページ>固定ページ一覧

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

HOMEをクリック
STEP2
画像を変更する

メガネの「画像」をクリックしたのち、置換をクリック。その後、アップロードをクリックして、画像をアップロードしてください。

画像を変更する

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

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

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

テキストを変更する

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

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

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

以降の「サービス案内」や「会社案内」など、他の要素も同じように編集できます。

注意

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

※画面左上の「元に戻す」ボタンから一つ前の状態に戻せます。誤って作業した場合は、この機能を利用してください。

元に戻すのボタン

お知らせの編集

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

STEP1
投稿一覧をクリックする

メインナビゲーションの「投稿」にカーソルをあて、投稿一覧をクリックしましょう。

投稿>投稿一覧
STEP2
新規追加をクリックする

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

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

「タイトルを追加」にお知らせのタイトルを入力してください。

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

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

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

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

公開して完了

フッターの編集

フッターメニューの編集

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

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

「外観」から「カスタマイズ」を開いたあと、ページ下部までスクロールし、ロゴの左側にある鉛筆マークをクリックします。

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

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

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

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

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

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

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

Twitterアカウントの入力

左メニューの「アカウント:Twitter アカウントを入力してください。」の欄に表示したいTwitterアカウント名を挿入しましょう。

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

※SNSのタイムライン表示が不要な場合は、オプションをクリックしたのち、従来のウィジェットを削除をクリックしてください。

従来のウィジェットを削除
STEP4
公開をクリックして完了

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

公開をクリックして完了

もっと詳しく手順を知りたい方へ

ここまでで、『Lightning』のテーマを活用して、トップページを作成する方法を解説しました。

さらに「詳しい手順を知りたい」という方は、以下の連載企画がおすすめ。 トップページだけでなく、ホームページ全体を作る手順を解説していますよ。

以下の連載企画を読めば、WordPressや『Lightning』での制作スキルが身に付き、自社オリジナルのホームページが作れるようになるでしょう。ぜひあわせてご覧ください。

Lightning以外のおすすめテーマ2つ

もしかすると、「他のテーマも見ておきたい」という方もいるかもしれません。

そこで以下では、有料ではあるものの、おすすめのテーマを2つ紹介します。

Snow Monkey(スノー モンキー)

Snow Monkey

▲出典:Snow Monkey

『Snow Monkey』は、株式会社モンキーレンチが提供する有料のWordPressテーマ。
コンセプトは「どんな味付けにも染まる。高級お出汁のような WordPress テーマ」で、以下のような特徴があります。

初心者向け

ホームぺージでよく使う機能が最初から用意されているので、素早く立ち上げられる


中級者向け

WordPress のテンプレート機能を拡張しているので、高度なカスタマイズが可能

また、『Snow Monkey』にはブログ機能を充実させる、「Snow Monkey Editor」というプラグインが備わっています。

そのため、オウンドメディア(ブログ)の運用に注力したい方におすすめです。

※オウンドメディアについては、以下の記事で解説しています。

『Snow Monkey』の詳細については、以下の記事をご覧ください。

LIQUID CORPORATE(リキッド コーポレート)

LIQUID CORPORATE

▲出典:LIQUID CORPORATE

『LIQUID CORPORATE』は、リキッドデザイン株式会社が提供する、有料のWordPressテーマです。
『LIQUID PRESS』というテーマシリーズの一種で、コーポレートサイトの制作に適したデザインを備えています。

その他、標準機能としては珍しい「多言語機能」が備わっているのも特徴。

グローバル展開やインバウンド対策を予定している企業におすすめのテーマです。

『LIQUID CORPORATE』については、以下で詳しく解説しています。

※おすすめのWordPressテーマについては、以下の記事でも解説しているので、気になる方はご覧ください。

WordPressでのホームページ制作に関するQ&A

最後に、WordPressでのホームページ制作に関するQ&Aをまとめました。

WordPressが人気の理由は?

結論、WordPressには多くのメリットがあるためです。

WordPressのメリット10個
  1. 世界シェア1位
  2. 無料のソフトウェア
  3. 制作ソフトが必要ない
  4. Web制作スキルがなくても更新できる
  5. Web制作会社に外注しやすい
  6. テーマやプラグインが豊富
  7. スマホ対応している
  8. SEOに強い
  9. 定期的にアップデートされている
  10. ノウハウなどの情報が多い

WordPressは、世界でもっとも人気のCMS。
2023年2月時点で、「63.5%」という圧倒的なシェアを誇っています。

CMSとは

「Contents Management System:コンテンツ・マネジメント・システム」の略で、HTMLやCSSなどのWeb制作スキルがなくても、簡単にホームページの制作や更新ができるシステムのこと。

CMSの世界シェア

▲出典:W3 Techswordpress-cms「Usage statistics of content management systems」

たくさんのメリットがあるからこそ、WordPressは世界No.1のシェアを獲得しているのです。

詳しくは、以下の記事をご覧ください。

WordPressには月いくらかかる?

WordPressの利用方法には以下の2種類があり、それぞれで月にかかる費用が異なります。

WordPress.org(オルグ)

別途契約したレンタルサーバーにWordPressをインストールして利用する方法。
レンタルサーバーの月額費用は1,000円程度。

WordPress.com(コム)

WordPressとサーバーがセットになったサブスクリプションサービス。
プランによって値段が異なり、「無料~月額5,220円」。

一見、無料プランがある「WordPress.com」のほうがお得に感じますよね。

ただ、「WordPress.com」の無料プランは、会社ホームページの運用には向いていません。
実用レベルで考えると、ビジネスプラン(月額2,900円)以上に申し込む必要があります。

そのため、別途レンタルサーバーを契約する、「WordPress.org」のほうが安くなるのです。

以下の記事で詳しく解説しています。ぜひあわせてご覧ください。

WordPressで作られたホームページの事例をチェックしたい

「WordPressで作られたホームページの事例を見て、インスピレーションを得たい」という方もいることでしょう。

そんな方に向け、以下の記事ではWordPressで作られた企業ホームページを紹介しています。

また、参考にしたいホームページが、WordPressで作られているかどうかを判別する方法も解説していますよ。

WordPressにログインできないときの解決方法は?

WordPressにログインできない原因は一つではありません。

複数の原因が考えられるため、状況に応じた解決策を知っておきましょう。

以下の記事では、WordPressにログインできない原因12個に対し、それぞれの解決策を紹介しています。

ホームページ運営のトラブルを減らすためにも、ぜひあわせてご覧ください。

まとめ

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

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

まとめ
  • WordPressでホームページを自作しておけば、外注時にも役立つ
  • 『Lightning』は、企業ホームページにおすすめの無料テーマ
  • 「Lightning G3 クイックスタート」ならデモサイトを編集しながら作れる
  • トップページ以外も作りたい方は、Lightning連載企画がおすすめ
  • 『Lightning』以外にも、『Snow Monkey』や『LIQUID CORPORATE』などがある

この記事を参考にしながら、ぜひWordPressでのホームページ制作にチャレンジしてみてください!

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

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

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

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

2024年4月3日12時まで、サーバー利用料金『半額キャッシュバックキャンペーン』を開催中です!

.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

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

※ 2023年10月時点、W3Techs調べ。

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

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

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

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

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

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

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

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!