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

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

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

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

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

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

それではどうぞ！

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

WordPressのテーマとは

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

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

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

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

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

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

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

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

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

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

コンバージョン（CV）とは？意味・種類・選び方など解説

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

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

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

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

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

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

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

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

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

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

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

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

Web制作会社の選び方！初心者向けにコツや注意点を解説

Lightning（ライトニング）について

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

▲出典：Lightning

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

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

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

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

▲出典：Lightningのデモサイト

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

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

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

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

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

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

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

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

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

• 「Webデータ」・・・ 取得方法／復元方法
• 「MySQLデータベース」・・・ 取得方法／復元方法

Lightningデモサイトの編集

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

トップページとは？ホームぺージ作りで意識すべきポイント

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

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

完成イメージを確認する（PDFで開く）

ロゴの編集

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

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

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

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

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

ロゴを変更する

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

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

公開して完了

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

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

ホームページに適したロゴとは？作り方やお役立ちサイトを紹介

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

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

グローバルナビゲーションとは？作り方のポイントやデザイン例を解説

メニューをクリックする

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

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

HeaderNavigationをクリックする

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

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

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

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

テキストを変更する

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

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

公開をクリックして完了

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

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

スライドの編集

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

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

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

画像変更をクリックする

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

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

スライドテキストを変更する

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

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

公開をクリックして完了

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

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

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

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

• 位置・・・中央
• スライド上の文字色・・・黒色
• 文字に影をつける・・・チェックなし
• 文字の影の色・・・白色
• スライドに被せる色 (任意)・・・白色
• スライドに被せる色の濃さ・・・70%

コンテンツの編集

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

固定ページから編集をする

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

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

画像を変更する

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

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

テキストを変更する

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

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

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

公開をクリックして完了

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

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

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

お知らせの編集

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

投稿一覧をクリックする

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

新規追加をクリックする

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

タイトルを入力する

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

文字や画像を挿入する

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

公開して完了

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

フッターの編集

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

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

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

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

プロフィールを入力する

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

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

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

鉛筆マークをクリック

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

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

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

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

公開をクリックして完了

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

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

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

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

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

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

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

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

Snow Monkey（スノー モンキー）

▲出典：Snow Monkey

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

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

プラグインとは

WordPressの拡張機能です。本来開発が必要な機能でも、プラグインをインストールすれば、簡単に実装できます。

【企業ホームページ向け】WordPressプラグインおすすめ10選

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

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

オウンドメディアとは？企業マーケティングに活用される理由

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

Snow Monkey（WordPressテーマ）のメリット・デメリット！おすすめのブロックを解説

LIQUID CORPORATE（リキッド コーポレート）

▲出典：LIQUID CORPORATE

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

コーポレートサイトとは？目的や役割、掲載内容を詳しく解説

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

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

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

LIQUID CORPORATEを解説！手軽に高品質なホームページが作れるWordPressテーマ

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

おすすめのWordPressテーマ厳選5つ！企業ホームぺージならこれ

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

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

WordPressが人気の理由は？

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

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

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

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

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

なぜ？WordPressが会社のホームページ制作に適している理由

WordPressには月いくらかかる？

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

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

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

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

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

WordPressの料金はいくら？項目別の相場を詳しく解説

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

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

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

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

WordPressのホームページ事例！探し方や確認方法も解説

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

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

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

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

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

WordPressにログインできない原因と対処法を12個解説

まとめ

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

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

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

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

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

ホームページの開設を検討している方へ

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

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

10月17日12時まで利用料金35%キャッシュバックキャンペーンを開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

▶【10月17日まで】利用料金35%キャッシュバックキャンペーン詳細はこちら！

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

※ 2023年5月時点、hostadvice.com調べ。

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

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

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

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