ホームぺージを開設するなら今!

国内シェアNo.1のレンタルサーバー
\エックスサーバーのお得な情報/

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

ホームぺージを開設するなら今!

国内シェアNo.1のレンタルサーバー
\エックスサーバーのお得な情報/

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

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

\この記事をシェアする/

カワウソ

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

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

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

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

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

『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のホームぺージ完成イメージ

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

ロゴの編集

ロゴの編集

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

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

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

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

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

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

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

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

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

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

Organic Cosmetics Company

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

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

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

ヘッダーメニューの編集

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

グローバルナビゲーションとは?作り方のポイントやデザイン例を解説
メニューをクリックする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意

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

スライドの編集

スライドの編集

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

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

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

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

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

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

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

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

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

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

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

公開をクリックして完了

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

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

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

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

コンテンツの編集

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

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

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

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

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

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

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

画像を変更する

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

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

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

テキストを変更する

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

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

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

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

注意

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

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

元に戻すのボタン

お知らせの編集

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

投稿一覧をクリックする

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

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

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

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

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

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

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

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

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

公開して完了

フッターの編集

フッターメニューの編集

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

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

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

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

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

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

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

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

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

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

Twitterアカウントの入力

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

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

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

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

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

公開をクリックして完了

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

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

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

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

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

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

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

Snow Monkey(スノー モンキー)

Snow Monkey

▲出典:Snow Monkey

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

初心者向け

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

中級者向け

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

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

プラグインとは

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

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

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

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

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

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

Snow Monkey(WordPressテーマ)のメリット・デメリット!おすすめのブロックを解説

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

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のメリット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には月いくらかかる?

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のレンタルサーバーであり、18万社の導入実績があります。

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

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

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

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

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

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

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

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

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

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

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

URLをコピーしました!