【2023年2月10日更新】おすすめのWordPressテーマの紹介を追加しました。
こんにちは、編集長のカワウソです！
WordPress（ワードプレス）でのホームページ制作を検討しているものの、「実際にどう作るのかイメージが湧かない……」とお悩みではありませんか？
そこで今回は、WordPressでホームページを自作する手順を解説します。
カワウソ
この記事は次のような人におすすめ！
- WordPressでホームページを自作したい人
- 費用や手間をかけずにホームページを作りたい人
- ひとまずWordPressで1ページ作ってみたい人
この記事を読めば、WordPressで会社のホームページを自作できるようになります。
また、Web制作会社への外注を考えている場合でも、事前に自分で作ってみれば、担当ディレクターとのコミュニケーションが円滑に進むでしょう。
それではどうぞ！
この記事は、すでにレンタルサーバーにWordPressがインストールされていることを前提としています。
「まだレンタルサーバーを契約していない」「WordPressのインストール方法が分からない」という方は、まずは以下の記事をご覧ください。
【誰でも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にインストールしてください。
実際の画面を確認しながら進めることができ、初心者の方にも分かりやすいように説明されています。
「Lightning G3 クイックスタート」はこちらをクリック！
弊社『エックスサーバー』の「WordPress クイックスタート」や「WordPress簡単インストール」で『Lightning』を選択した場合、テーマ自体はインストールされるものの、デモサイトの状態にはなりません。
あとからでも「Lightning G3 クイックスタート」の手順どおり進めれば、デモサイトの状態になりますよ。
編集作業の前にバックアップを取得しておこう
作業の前に「バックアップ」を取っていると、編集で何らかのトラブルが発生しても復元できます。
ほとんどのレンタルサーバーは、管理画面から簡単にバックアップを取得可能。通常のとは別に、必ずMySQL（マイエスキューエル）のバックアップも取っておきましょう。
MySQLはデータベースのことで、WordPressで使用されます。MySQLのバックアップがないと、完全に復元できなくなるため、必ず取っておいてください。
『エックスサーバー』のバックアップ方法については、以下でご確認いただけます。
Lightningデモサイトの編集
この記事では、トップページの編集方法にフォーカスを当てて解説します。
トップページとは？ホームぺージ作りで意識すべきポイント
今回作るのは架空の会社、オーガニック化粧品OEMメーカー「Organic Cosmetics Company」のトップページ。
トップページの制作にあたり、WordPressで編集するのは主に以下3つの機能です。
- 外観 … ホームページの基礎（骨組み）部分を編集する機能
- 固定ページ … 各ページの中身（コンテンツ）を編集する機能
- 投稿 … お知らせ（ニュース）など、ブログを編集する機能
先に完成イメージを確認したい方は、以下をご覧ください。
ロゴの編集
初めに、デモサイトのロゴを編集していきます。
WordPressのダッシュボードにログインしたのち、メインナビゲーションの「外観」にカーソルをあて、カスタマイズをクリックしましょう。
ロゴ近辺にある鉛筆マークをクリックします。
左メニューの画像を変更をクリックして、ロゴをアップします。
※推奨画像サイズは「縦500×120px」です。背景色と馴染ませたい場合は、背景を透過した「PNGファイル」を用意しましょう。
ロゴが入っていることを確認し、公開をクリックして完了です。
※以下の記事では、ホームページに最適なロゴの作り方を解説しています。「これからロゴを準備する」という方は、ぜひご覧ください。
ホームページに適したロゴとは？作り方やお役立ちサイトを紹介
ヘッダーナビゲーションの編集
「ヘッダーナビゲーション」は、ロゴ右側にある「ホーム」「サービス案内」などの各種リンクのことです。
※なかでも、他のページに共通して表示されるものを、「グローバルナビゲーション」と言います。
グローバルナビゲーションとは？作り方のポイントやデザイン例を解説
引き続き、「カスタマイズ」の編集画面です。
サイドメニューからメニューをクリックします。
続いてHeaderNavigationをクリックします。
名称を変更したいメニューをクリックしましょう。
今回は例として「デザイン要素サンプル」を「オーガニックへのこだわり」に変更します。
まずは、デザイン要素サンプルをクリックしてください。
ナビゲーションラベルのテキストを「オーガニックへのこだわり」に変更します。
※「説明」では、メニュータイトル下部のテキストを変更可能です。
公開をクリックして反映されたか確認してください。
以上でヘッダーナビゲーションの編集は完了です。
オーガニックへのこだわり
∟ページレイアウトサンプル
∟２カラム
∟１カラム
∟１カラム（サブセクション無し）
∟siteContentの上下余白を無し
不要なメニューがあっても、この時点では削除しないでください。これらはページの見本であるため、削除すると他のページを作成するときに困るかもしれません。
スライドの編集
「スライド」は、トップページ上部のメイン画像エリアです。複数の画像を登録すると、スライド（流れる）する仕組みになっています。
引き続き、「カスタマイズ」のサイドメニューから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』での制作スキルが身に付き、自社オリジナルのホームページが作れるようになるでしょう。ぜひあわせてご覧ください。
- 【連載その1】WordPressとLightningでホームページを自作する方法！「事前準備編」
- 【連載その2】WordPressとLightningでホームページを自作する方法！「トップページ編」
- 【連載その3】WordPressとLightningでホームページを自作する方法！「私たちの強み編」
- 【連載その4】WordPressとLightningでホームページを自作する方法！「サービス編」
- 【連載その5】WordPressとLightningでホームページを自作する方法！「料金編」
- 【連載その6】WordPressとLightningでホームページを自作する方法！「ご契約の流れ編」
- 【連載その7】WordPressとLightningでホームページを自作する方法！「導入事例編」
- 【連載その8】WordPressとLightningでホームページを自作する方法！「お問い合わせ編」
- 【連載その9】WordPressとLightningでホームページを自作する方法！「無料相談窓口編」
- 【連載その10】WordPressとLightningでホームページを自作する方法！「会社案内編」
- 【連載その11】WordPressとLightningでホームページを自作する方法！「お知らせ（ブログ）編」
- 【連載最終回12】WordPressとLightningでホームページを自作する方法！「CTA編」
Lightning以外のおすすめテーマ2つ
もしかすると、「他のテーマも見ておきたい」という方もいるかもしれません。
そこで以下では、有料ではあるものの、おすすめのテーマを2つ紹介します。
Snow Monkey（スノー モンキー）
▲出典：Snow Monkey
『Snow Monkey』は、株式会社モンキーレンチが提供する有料のWordPressテーマ。
コンセプトは「どんな味付けにも染まる。高級お出汁のような WordPress テーマ」で、以下のような特徴があります。
初心者向け
ホームぺージでよく使う機能が最初から用意されているので、素早く立ち上げられる
中級者向け
WordPress のテンプレート機能を拡張しているので、高度なカスタマイズが可能
また、『Snow Monkey』にはブログ機能を充実させる、「Snow Monkey Editor」というプラグインが備わっています。
WordPressの拡張機能です。本来開発が必要な機能でも、プラグインをインストールすれば、簡単に実装できます。
そのため、オウンドメディア（ブログ）の運用に注力したい方におすすめです。
※オウンドメディアについては、以下の記事で解説しています。
オウンドメディアとは？企業マーケティングに活用される理由
『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には多くのメリットがあるためです。
- 世界シェア1位
- 無料のソフトウェア
- 制作ソフトが必要ない
- Web制作スキルがなくても更新できる
- Web制作会社に外注しやすい
- テーマやプラグインが豊富
- スマホ対応している
- SEOに強い
- 定期的にアップデートされている
- ノウハウなどの情報が多い
WordPressは、世界でもっとも人気のCMS。
2023年2月時点で、「63.5%」という圧倒的なシェアを誇っています。
「Contents Management System：コンテンツ・マネジメント・システム」の略で、HTMLやCSSなどのWeb制作スキルがなくても、簡単にホームページの制作や更新ができるシステムのこと。
▲出典：W3 Techswordpress-cms「Usage statistics of content management systems」
たくさんのメリットがあるからこそ、WordPressは世界No.1のシェアを獲得しているのです。
詳しくは、以下の記事をご覧ください。
なぜ？WordPressが会社のホームページ制作に適している理由
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にログインできないときの解決方法は？
WordPressにログインできない原因は一つではありません。
複数の原因が考えられるため、状況に応じた解決策を知っておきましょう。
以下の記事では、WordPressにログインできない原因12個に対し、それぞれの解決策を紹介しています。
ホームページ運営のトラブルを減らすためにも、ぜひあわせてご覧ください。
WordPressにログインできない原因と対処法を12個解説
まとめ
この記事では、WordPressでホームぺージを自作する手順を解説しました。
まず自分で作ってみることで、WordPressに関するさまざまな知識を身に付けられます。
- WordPressでホームページを自作しておけば、外注時にも役立つ
- 『Lightning』は、企業ホームページにおすすめの無料テーマ
- 「Lightning G3 クイックスタート」ならデモサイトを編集しながら作れる
- トップページ以外も作りたい方は、Lightning連載企画がおすすめ
- 『Lightning』以外にも、『Snow Monkey』や『LIQUID CORPORATE』などがある
この記事を参考にしながら、ぜひWordPressでのホームページ制作にチャレンジしてみてください！
それでは、素敵なホームページが完成することを祈っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
4月21日12時まで利用料金最大30%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
