ホームページ制作

WordPressホームページの作り方【完全初心者向け】

ここではCMSにおいて世界No,1シェアを誇るWordPress(ワードプレス)を使ったホームページの作り方を解説したいと思う。

この記事ではサーバー・ドメインの取得までを含め、全くの初心者の方でも90分程度の作業で「あとは掲載する文章を考えるだけ」の段階まで進められることを想定している。

men
men
頑張って作る!
woman
woman
その心意気
Google検索広告の定額サービス

ホームページを自作する前に知っておくべきこと

おそらくこの記事を読みながらホームページ作成に取り掛かれば95%の方はホームページの自作に成功するだろう。

しかしその後のホームページ運用を通したネット集客には間違いなく失敗する。車を買うのと運転をするのが違うように、ホームページ制作と運用は全くの別問題である。

一旦インターネット上に公開されたホームページはプロのWebコンサル達とアクセスの奪い合いをすることになり、勝てることはまずない。

自身でSEO対策やネット集客の勉強をしながら改善をし続けるしか勝つ方法はないが、100回以上の失敗は覚悟されるべきだ。

それを理解した上でホームページの自作をはじめて欲しい。

今回作るホームページの構成

今回はコポーレートサイト型と呼ばれる企業向けホームページを作りたいと思う。また、集客目的の構造となっており、全5ページで構成される。

サイトマップ

個別記事とはいわゆるブログ記事のことで、これに関しては完成後に各々で執筆いただきたい。

また他サイトの作成記事よりも優秀な点は以下の3点である。

  • 常時SSL対応
  • スマートフォン対応
  • 集客の基本導線完備

それでは作成を進めていきたい。

men
men
スマートフォン対応って何?
woman
woman
・・・・

サーバー・ドメインの取得

まずはホームページの作成に取り掛かる前にサーバーとドメインの2つを取得する必要がある。ゆっくり1つずつ進めるので安心して進めて欲しい。

レンタルサーバーを準備する

家を建てるのに土地が必要なように、ホームページを作る際もデータを収納して管理するための「サーバー」をサーバー会社からレンタルする必要がある。

サーバー会社も多数存在しサービス内容も様々だが、ここではエックスサーバーの展開するサービス「WordPress専用サーバー wpX Speed」を推薦させていただく。

エックスサーバーをお勧めする理由
  • 150万件以上の運用実績
  • これまでに大規模障害の発生なし
  • 表示速度と安定性においてトップ

また、wpX Speedの利用料金は月額1,200円となっている。探せばさらに数百円安いサーバーも存在するが、その差額分で安全性とパフォーマンスを保証する保険に加入したと考えていただきたい。

wpX Speedへの登録は下記リンクより進めていただける。

WordPress専用クラウド型レンタルサーバー『wpX Speed』

上記リンク先ページの「お申し込み」>「新規お申込み」の順にクリックしてページを進める。

サーバー申し込み画面

すると次に登録情報の入力フォームが出てくるので記入を進める。プランは「W1」を選択しよう。

サーバー登録画面

情報を入力し終われば、「確認」>「完了」の順に申し込みが終わるはずだ。

登録完了後、入力したメールアドレス宛にパスワードなどが記載されたメールが届くので大切に保管しよう。

また、メール内に記載されているユーザーアカウント情報は次のステップで利用する。

ユーザー情報

ドメインを取得する

次に、〇〇.comといったドメインを同じくエックスサーバーのサービスを使って取得する。ドメインはインターネット上でのホームページの住所の役割を持つ。

まずはXserverアカウント(https://www.xserver.ne.jp/login_info.php)に先ほどのメールに記載されていた会員ID・パスワードを入力してログインしよう。

エックスサーバーアカウントログイン画面

ログイン後、左側メニューの中にある、「サービスお申し込み」をクリックする。

エックスサーバーアカウント画面

次に中央メニュー下部にある「ドメイン」「新規申し込み」をクリックしよう。

エックスサーバーアカウント画面

同意画面が表示されるので「同意する」をクリックすると、次にドメインの新規取得画面に進む。まずは好きなドメインを入力後、そのドメインが空いているかをチェックする必要がある。

また、ドメインは半角英数字とハイフンの組み合わせのみ可能である。

ドメイン新規取得画面

すると空いているドメインが表示されるのでチェックボックスにチェックを入れてから「お申し込み内容の確認・料金のお支払い」をクリックして進む。もし空いているドメインがない場合はドメインを変えて再度チェックし直そう。

新規ドメイン取得画面

お支払い方法の選択画面に進むので、クレジットカード・銀行振込などから任意の支払い方法を選択していただきたい。

支払い方法選択画面

なお、ここで表示されているお支払い金額はドメインを1年間利用するための料金である。先のサーバーとは違って月額料金ではないので安心してほしい。

サーバーパネルでドメインを登録する

ここまでの作業でサーバー・ドメインの準備ができた。次にこのサーバーとドメインを紐づける作業を行いたいと思う。

サーバーパネル(https://www.xserver.ne.jp/login_server.php)に入り、サーバー契約時に送られてきたメール内に記載されていた「サーバーアカウント情報」を入力してログインしよう。

サーバーパネルログイン画面

ログイン後、画面右上辺りにある「ドメイン設定」をクリックする。

ドメイン設定画面

次に画面内メニューの「ドメイン設定追加」を選択し、フォームに先ほど購入したドメインを入力する。

2つのチェックボックスにチェックを入れたままで「確認画面へ進む」をクリックしよう。

次の画面で「ドメインの追加(確定)」をクリックしてこの作業は完了となる。

次にとうとうWordPressのインストールに取り掛かるが、追加したドメインが管理画面上に反映されるまで1時間~半日程度掛かる場合がある。

これは待つしかないのでご了承いただきたい。

SSL設定(任意)

エックスサーバーでは無料でSSL設定することができる。SSLとは、インターネット上のデータ通信を暗号化させる仕組みを指す。

SSL設定を行うことでホームページのURLが「http://〇〇.ne.jp」から「https://〇〇.ne.jp」へと変わる。

これはホームページの信頼性にも関わるのでなるべくSSL設定は済ませてしまおう。作業は1分で終わる。

まず、画面左側メニューの「SSL設定」をクリックする。

SSL設定画面

すると先ほど購入したドメインが表示されるはずなので「選択する」をクリックする。

SSL設定画面

次に「独自SSL設定追加」を選択し、「確認画面へ進む」をクリックする。

独自SSL設定追加画面

次の画面で「追加する」をクリックでSSL設定は完了だ。

また、SSLの反映にも最大1時間程度の時間がかかるのでご了承いただきたい。

WordPressをインストールする

次にいよいよWordPressのインストールを行う。サーバーパネルのWordPressメニューにある「WordPress簡単インストール」をクリックしよう。

簡単インストール画面

続いてWordPressのインストール先を決める必要があるため、購入したドメインを選択する。

簡単インストール画面

次の画面で「WordPressインストール」を選択後、ブログ名・ユーザー名・パスワード・メールアドレスを入力してから「確認画面へ進む」をクリックしよう。

また、ブログ名はあとからでも変更できるので、とりあえずの名前で問題ない。

ワードプレスインストール画面

次に、「インストール(確定)」をクリックでインストール作業は完了だ。インストールが完了するとWordPress管理画面にログインするための情報などが表示されるので、必ずコピペで保管しておこう。

WordPressの基本設定

ここからはデザインを構築する前準備として、諸々の基本設定を進めていきたい。

WordPressのURL(サイトアドレス)設定

※URL設定は先ほどのSSL設定をおこなった方のみ対象となる。SSL設定をしていない方はこの手順を飛ばしていただきたい。

まずはWordPress管理画面へログインする。ログイン画面URLは先ほど保管されたと思うが、もし判らない方は「http://ドメイン/wp-admin/」とアドレスバーに入力すれば良い。

ユーザー名とパスワードを入力後に「ログイン」をクリックしよう。

ワードプレスログイン画面

次に左メニューにある「設定」にカーソルを合わせ「一般」をクリックして進む。

ワードプレス設定画面

WordPressアドレス(URL)とサイトアドレス(URL)の両方の「http」のうしろに半角小文字の「s」を加えて「https」へと修正する。

ワードプレスのURL設定画面

最後に画面下にある「変更を保存」をクリックして反映させる。これであなたのサイトはSSL対応のホームページとなった。

ワードプレスURL設定画面

サーバー側のリダイレクト設定

少し難しい話になるが、現在SSL設定の影響であなたの作っているホームページは「http://ドメイン.jp」と「https://ドメイン.jp」の2つが存在する状態である。

ページの内容は全く同じであるのにURLが2つ存在するのはGoogleからペナルティを受ける可能性があるので、今からリダイレクトという設定をして2つのURLを「https://ドメイン.jp」に統一したいと思う。

設定はエックスサーバーのサーバーパネル(https://www.xserver.ne.jp/login_server.php)から行う。

パネル内のホームページメニューにある「.htaccess編集」をクリックしよう。

.htaccess編集

すると所有するドメイン一覧が出てくるので該当ドメインの「選択する」をクリックし、「.htaccess編集」を選択しよう。

リダイレクト設定画面

次に、出てくる枠内にコードを貼り付けていただくのだが、枠内に元々記述されている内容は非常に重要なものなので決して消さないように注意して欲しい。

.htacess編集画面

.htacessに書き加える内容は以下の通りになる。コピーをして枠内の一番上に貼り付けよう。

  1. RewriteEngine On
  2. RewriteCond %{HTTPS} !on
  3. RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

くどいようだが、元々記述されていた内容は消さないように気をつけていただきたい。

リダイレクト設定画面

「確認画面へ進む」をクリックし、次画面で「実行する」をクリックでリダイレクト設定は完了だ。

ホームページの骨格を作る

さていよいよホームページを作り込んでいきたいと思う。今回作るホームページは冒頭でも説明したようにコーポレートサイト型といわれるホームページであり、サイト構造は以下のようになる。

サイトマップ

左メニューの「固定ページ」>「固定ページ一覧」をクリックして既存の固定ページを全て削除(ゴミ箱)する。

固定ページ削除

次にそのまま「新規追加」をクリックする。

固定ページ追加

すると新しい固定ページの作成画面に移るので、タイトルに「HOME」と入力して「公開」をクリック。これが先ほどのホームページ構成図の「TOP」の骨格に該当する。

トップページ作成

次に再度「新規追加」をクリックして他のページの骨格も作っていこう。今度はタイトルに「ブログ」と入力する。

公開後、タイトル下に表示される「パーマリンク」に表示して欲しい。パーマリンクとは作ったページのURLのことを指す。

固定ページのタイトルが日本語の場合、パーマリンクも「https://〇〇.jp/ブログ」といった日本語の混ざったURLになってしまう。これは良くないのでアルファベットURLに変更したいと思う。

パーマリンク横にある「編集」をクリックしよう。

パーマリンク編集

※テストサイトの場合、〇〇.jpの後ろに「test」と入っているが気にしないでいただきたい。

次に、「ブログ」を「blog」に変更してから「OK」をクリック。

パーマリンク変更

最後に右メニューにある「更新」をクリックして変更を反映させよう。

パーマリンク変更

更新後、再度「新規追加」をクリックしてブログページを作ったのと全く同じ要領で「会社概要」「問い合わせ」「アクセス」の3ページを作って欲しい。

固定ページタイトルパーマリンク
会社概要info
問い合わせinquiry
アクセスaccess

すると以下のような3ページが出来上がるはずだ。

問い合わせページ
会社概要ページ
アクセスページ

全ての固定ページが完成後、左メニュー「設定」>「表示設定」をクリックして、「ホームページの表示」という項目の「固定ページ」にチェックを入れよう。

表示設定

次にプルダウンメニューからホームページを「HOME」、投稿ページに「ブログ」を選択する。

ページ下に「検索エンジンでの表示」というメニューがあるのでチェックを入れた後に「変更を保存」をクリックして骨格作りは完了だ。

ページ構成作成

「検索エンジンへの表示」にチェックが入っていないまま作成作業を進めると未完成段階のホームページが検索結果に出てきてしまう。そのため、検索結果に表示されないよう一旦ここにチェックを入れた状態で作業を進める。

サイトタイトルとキャッチフレーズを決める

次に、左メニューの「設定」>「一般」をクリックする。するとページ上部に「サイトのタイトル」「キャッチフレーズ」という項目があるはずだ。

サイトタイトルの入力

この2つはYahoo!・Googleなどの検索結果において以下のように反映される。

検索結果画面

特にサイトのタイトルはSEO面において非常に重要であり、ここに最も売上げに繋がる検索キーワードを含めよう。

自分のビジネスを探す場合、お客様はどういった検索キーワードを用いるのかを考えると良い。

例えばラーメン店の場合、「〇〇市 ラーメン」という地名を組み合わせた検索キーワードで表示されることが最も売上げに結び付く。

他にも美容室の場合は「〇〇市 美容室」、集客範囲の少し狭い整体院の場合は「〇〇駅前 整体院」など、店舗ビジネスの場合は基本的に「都市名×業種」の組み合わせになることがほとんどだろう。

今回のテストサイトでは、富山市にある結婚相談所と仮定して「富山市 結婚相談所」というキーワードをサイトタイトルに含めてある。

また、キーワードの詰め込み過ぎはSEOにおいてマイナスとなるので、含めるキーワードは2~3個が好ましい。

サイトのタイトルとキャッチフレーズを決めた後、ページ下部の「変更を保存」をクリックして完了だ。

サイトタイトル変更

パーマリンク設定

次に先ほどの固定ページ作成で触れたパーマリンクの基本設定をしたいと思う。この設定をすることで今後ブログ記事を作成した際に、記事毎にSEOに最適なURLを付けることが可能となる。

まずは左メニューの「設定」>「パーマリンク設定」をクリックする。

そして進んだ先で「カスタム構造」にチェックを入れた後、入力欄に/%postname%/をコピーして貼り付ける。

パーマリンク変更

そして最後に「変更を保存」をクリックで完了だ。

デザインテーマをインストールする

WordPressは「テーマ」と呼ばれるデザインテンプレートを利用して簡単に何回でもデザイン(見た目)を着せ替えることができる。

テーマには有料・無料合わせて数千種類と存在するが、カスタマイズ性・SEO面を考慮してLightningという無料テーマを使用したい。

まずはWordPress管理画面から左メニューにある「外観」>「テーマ」をクリックし、次に「新規追加」をクリックして進む。

テーマ追加画面

検索窓にLightningと入力し、出てきた該当テーマの「インストール」をクリックしよう。

Lightningのインストール画面

続いて「有効化」をクリックするとテーマデザインがホームページに反映される。

テーマ有効化画面

プラグインのインストール

プラグインとはWordPressに様々な機能を追加するためのプログラムである。テーマと一緒に必要なプラグインのインストールを済ませたいと思う。

左メニューにある「プラグイン」>「新規追加」をクリックする。

プラグイン追加画面

次に検索窓にClassic Editorと入力し、該当プラグインの「今すぐインストール」をクリックする。

Classic Editorインストール画面

そしてテーマと同じように「有効化」をクリックして完了だ。

クラシックエディター有効化画面

そのあと、また左メニューの「プラグイン」>「新規追加」をクリックして、全く同じ要領で今度は「Contact Form 7」「VK All in One Expansion Unit」「XO Featured Image Tools」というプラグイン3つのインストール・有効化を進めて欲しい。

これでプラグイン追加作業は完了となる。

ホームページのデザイン構築

基本設定は全て終わった。あとはサイト訪問者に見てもらう各ページのデザインを作っていきたいと思う。

men
men
やっとここまで来た・・・
woman
woman
がんばれ!あと半分!

会社概要ページを作る

まずは会社概要ページから作っていく。左メニュー「固定ページ」>「固定ページ一覧」をクリックし、先ほど作成したページ一覧の中から「会社概要」をクリックしよう。

固定ページ一覧

そしてタイトルの下辺りに「ビジュアル」「テキスト」と切り替えられるタブがあるので「ビジュアル」に切り替えよう。テキストはHTMLなどの知識がないと使いこなせないため、今後は全てビジュアルにて作成を進めたい。

ビジュアル・テキスト切り替え

会社概要のページ内容だが、見栄えを綺麗にするために一番上に画像を挿入したいと思う。

本文入力フォームの左上辺りをクリックしてカーソルを合わせた後に「メディアを追加」をクリックする。

会社概要作成

そして「ファイルをアップロード」にタブが切り替えてから「ファイルを選択」をクリックする。

ファイルのアップロード

すると端末に保存されている画像を選択できるようになるので好きな画像を「開く」からアップロードする。店舗の外観写真などを使用するのが一般的であるが、適切な画像がない場合はフリー素材サイトから代用する画像を取得すると良い。

画像をアップロードすると画面が切り替えり、既にアップロードした画像にチェックが入っている状態になっているはずだ。今回は高層ビルの画像をアップロードしてみた。

次にチェックは入れたまま、画面右側にある「代替テキスト」を入力する。

画像のアップロード

代替テキストとは、Googleクロウラーに画像の内容を説明する役割を持つ。空欄でも特に問題はないが、SEOにも若干の影響はあるので今後画像をアップロードした際は代替テキストを入力する習慣をつけよう。

今回の場合、代替テキストの中に「高層ビル」と入力するのが適切である。

次に右メニューを下にスクロールして「サイズ」をクリックしてブルダウンメニューから適切な画像サイズを選択しよう。

画像サイズ変更

今回の場合、ページ上部に貼り付けるので目立つように「フルサイズ」を選択する。フルサイズとは、アップロードした画像の原寸サイズである。

そしてサイズ選択後に「固定ページに挿入」をクリックしよう。するとカーソルの位置に画像が挿入されたはずだ。

画像挿入

そこからEnterキーを押して改行後に「会社名」と入力する。そしてまたEnterキーで改行をして「株式会社〇〇」と実際の会社名を入力する。すると以下のような状態になっているはずだ。

会社情報入力

次に「会社名」の部分をコピーする要領で選択した状態でメニューバーにある「段落」をクリックする。するとプルダウンメニューが開くので「見出し2」を選択しよう。

見出し設定

すると見栄えがリッチになるはずだ。

見出し2を設定

見出しとはページ内の構造を示す目次のような役割を持つ。使用する際は基本ルールに則る必要があるので無暗に使わないよう注意して欲しい。

次に、「株式会社ひまわり」の下に「代表取締役」「会社所在地」「電話番号」など記載する情報を同じ要領で追加していこう。

会社概要ページの作成

必要な情報を入力し終えたら右メニューの「更新」をクリックして反映させよう。

更新ボタン

「更新」の真上にある「変更をプレビュー」をクリックすることで、実際に訪問者からどのようにページが見えるかの確認もできる。

アクセスページを作る

ここまででかなりWordPressの操作にも慣れてきたと思う。次にアクセスページを作るので左メニューの「固定ページ」>「固定ページ一覧」をクリックして固定ページ一覧にある「アクセス」をクリックしよう。

出張サービス型のビジネスの場合は必要ないページなので読み飛ばしていただいて問題ない。

アクセスページには、店舗に訪れる人が迷わないよう経路を掲載するのが好ましい。「店舗外観の写真」「経路案内」「Googleマップ」の3点を掲載するのが良いだろう。

まずは「メディアを追加」をクリックしてページ上部に店舗外観の写真を貼り付けよう。

アクセスページ

画像を貼り付けた後、Enterキーで改行をしてから経路案内を記述しよう。経路案内とは、最寄りの駅・バス停などから店舗までの距離などが適切だ。

まずは「店舗までのアクセス」とテキスト入力をし、更に改行をしたあとに経路案内のテキストを入力していこう。

アクセスページ作成

そして「店舗までのアクセス」をコピーする要領で選択した状態で「段落」>「見出し2」をクリックする。すると以下のようになっているはずだ。

アクセスページ作成

最後にその下にGoogleマップを埋め込みたいので、Googleマップ埋め込みコードの取得方法を説明したいと思う。

まずGoogleマップ(https://www.google.co.jp/maps/)を開いて自身の事業所を検索しよう。

ゼンリン地図と連動するためほとんどの事業所はGoogleマップに自動登録されている。もし自身のビジネスが検索をしてもGoogleマップに出てこない場合は下記記事を参考にして登録いただきたい。

Googleマップに会社が表示されない!正しい登録方法はコチラ Googleマップ上で自社がどのように表示されているか、これは現代社会においてビジネスを行う上で非常に大切なことです。 例...

そして検索後、「共有」をクリックする。

Googleマップ

すると地図上にタブが表示されるので「地図を埋め込む」をクリックする。

Googleマップ

次に「HTMLをコピー」をクリックする。

Googleマップ

これで埋め込みコードをコピーできたので、貼り付けるために再度アクセスページの編集画面に戻る。

この時に注意していただきたのが、HTMLを扱うときは「ビジュアル・テキスト」タブを「テキスト」へ切り替えることだ。切り替えた上で先ほど入力した経路案内の下に埋め込みコードを貼り付けよう。

埋め込みコードの貼り付け

最後に右メニューの「更新」をクリックすればアクセスページの完成だ。

アクセスページの完成

Googleマップ埋め込みはSEO面においても効果があるため、なるべく取り入れていただきたい。

問い合わせページを作る

次に問い合わせページのさくせいだが、まずは左メニューの「問い合わせ」>「コンタクトフォーム」をクリックしよう。

もし「お問い合わせ」というメニューが見当たらない場合、前工程(プラグインのインストール)で「Contact Form 7」のインストール・有効化ができていない可能性が高い。

コンタクトフォーム

次に赤色枠内のショートコードを選択してコピーする。

ショートコードをコピー

コピーが終わったら「投稿ページ」>「投稿ページ一覧」をクリックし、「問い合わせ」のページをクリックする。

そして本文入力欄にショートコードを貼り付けよう。ショートコードはビジュアルのまま貼り付けていただいて問題ない。

問い合わせページ作成

最後に右メニューの「更新」をクリックすれば完了だ。

更新ボタン

プレビューより見ていただくと下記のような問い合わせフォームが既にできているはずだ。

問い合わせフォーム

今後、問い合わせフォームから送られるメールはWordPressインストール時に設定したメールアドレスに全て届く。

ヘッダーロゴを変更する

続いて左メニューの「外観」>「カスタマイズ」をクリックしよう。

すると画面右側にサイトが表示されるが、それが現在のTOPページである。デフォルトではこの状態である。

サイトTOP

TOPページの一番上に「ひまわり結婚相談所|富山県富山市」と表示されているが、それをロゴ画像に変更したいと思う。ロゴ画像が用意できない場合は一旦読み飛ばしていただきたい。

左メニューの「Lightningデザイン設定」をクリックする。

Lightningデザイン設定

そして「画像を選択」をクリックして使用するロゴ画像をアップロードする。サイズは「280×60px」でpng形式の透過背景が好ましい。

ロゴ画像アップロード

すると自動で反映されるので、メニュー上の「公開」をクリックして変更を確定する。

ヘッダーロゴ変更

ナビゲーションメニューを作る

ナビゲーションメニューとは、下記画像の赤色枠部分に該当する箇所である。SEO面でも重要な役割を持つので作成したいと思う。

左メニュー上の「>」をクリックしてメニュー一覧へ戻る。

メニュー画面へ戻る

そして左メニューから「メニュー」をクリックする。

メニュー選択

画面が切り替わるので次に「メニューを新規作成」をクリックする。

メニュー名に「グローバルナビゲーション」と入力し、

「+項目を追加」をクリックした後に、固定ページの「ホーム」「アクセス」「会社概要」「問い合わせ」「ブログ」を全て順番にクリックして追加していく。

グローバルナビ作成

全ての固定ページの追加が終わったら「公開」をクリックして確定する。

グローバルナビ設定

トップページを作る

次にTOPページをデザインを構築していこう。TOPページに関しては表示したい内容が各々で全く異なってくるはずだ。飲食店ならば商品写真をたくさん並べたいだろうし、整体院ならテキストでサービスの強みを掲載したいだろう。

ここからはあくまで操作方法に慣れていただくため、例として結婚相談所のTOPページを作りたい。

メインビジュアルを変更する

メインビジュアルとは、下記画像の赤色枠部分に該当する。

メインビジュアル

このままでは結婚相談所のホームページとして使えないので、変更したいと思う。まずはメニュー上の「<」を2回クリックして最初のメニュー一覧へ戻る。

戻るボタン

次に左メニューの「Lightningトップページスライドショー」をクリックする。

スライドショー

次に、〔1〕スライド画像〔1〕モバイル用スライド画像の2つを順にクリックして画像を設定しよう。モバイル用スライド画像とは、スマートフォンで見た際に表示される画像である。

次に画像の代替テキストを入力する。今回は結婚相談所らしく女性の画像を使用したいので、代替テキストも「女性」が適切である。また、〔1〕スライドに被せる色〔1〕スライドに被せる色の濃さを使用することで画像に透過カラーを付けることができる。

スライダー設定

続いて「スライドタイトル」「スライドテキスト」も変更していく。ここはホームページを開いて一番最初に目に入るテキストであり、集客率を左右する非常に重要なものだ。

サービスの魅力が十分に伝わるテキストを入力しよう。

スライダー画像

そして「READ MORE」と書かれたボタンを変更する。「ボタンの文字」からボタン内のテキストを変更ができる。また、ボタンをクリックした際の移動先は「〔1〕スライド画像リンク先URL」で設定できる。

CTA設定

このボタンは集客に繋がるよう「問い合わせ」と設定するのをお勧めする。また、リンク先URLには先ほど固定ページで作成した問い合わせページのURLを設定する。

また、このボタンを電話発信リンクにしたい場合は「ボタンの文字」に電話番号、「スライド画像リンク先URL」には「tel:電話番号」を入力する。これでスマートフォンで閲覧した際に電話問い合わせが増えやすくなる。

電話発信リンク

もし自動で切り替わる画像スライダーを作りたい場合は、全く同じ要領でスライド〔2〕、スライド〔3〕も設定しよう。一枚で良い場合はスライダー〔2〕のデフォルト画像を削除する。

スライダー画像

最後にメニュー上の「公開」をクリックしてスライダーの設定は完了だ。かなりホームページの雰囲気も変わってきた。

サイトトップ

今度はメインビジュアルの下部分を順番に作り込んでいきたいと思う。

1カラムに変更する

メニュー上の「<」をクリックしてメニュー一覧まで戻っていただき、「Lightningデザイン設定」をクリックする。

デザイン設定

次に「トップページを1カラムにする」にチェックを入れてから「公開」をクリックする。すると画面幅が広くなるのでコンテンツが見やすくなる。

PR blockを編集する

PR blockとは、下記画像の部分に該当する。訪問者にサービスの特徴・強みを伝えるために必要不可欠なパーツである。

PR block

またメニュー一覧に戻っていただき、今度は「Ligthning トップページ PR Block」をクリックする。

PR block編集

そして「タイトル」「サブテキスト」を自身のサービスに合わせて変更していく。

問い合わせに繋がりやすいよう訪問者にはあまりページ移動して欲しくないため、「リンクURL」は空欄にしておくことをお勧めする。

もしアイコンを変更したい場合はFontAwesome(https://fontawesome.com/)より好きなアイコンを取得しよう。

最後に「公開」をクリックして変更を確定する。

ホームページが少しずつ完成に近づいてきた。あと少しだ。

お客様の声を掲載する

ホームページからの集客を考える際、サービスへの信頼を得るために「お客様の声」は非常に重要なコンテンツとなる。

まずはメニュー一覧の「ウィジェット」とクリックする。

ウィジェット

次に「トップページコンテンツエリア上部」をクリック。

そして「ウィジェットを追加」>「LTG全幅見出し」を順にクリックしよう。

「タイトル」「サブタイトル」を入力してから「△」をクリックして一旦閉じる。

見出し設定

今度は「ウィジェットを追加」>「VK 3PRエリア」をクリックして追加する。

3PRエリア設定

そして「タイトル」「PC用画像」「概要となるテキスト」の3点を入力する。他は空欄のままで問題ない。

画像に関してはお客様の写真が好ましいが、難しい場合は空欄・もしくはフリー素材で代用する。

お客様の声を設定

同じ要領でPRエリア2、PRエリア3も設定を終わると下記画像のようになるはずだ。サンプルサイトではフリー素材の写真を丸く型取って使用している。

お客様の声を3名分入力し終えたら、「公開」をクリックして保存したのち「△」をクリックする。

お客様の声を保存

アクセス情報を掲載する

次に、TOPページにもアクセス情報を掲載したいと思う。訪問者がサイト内で迷子になって離脱しないように、必要な情報はTOPページにも全て記載したい。

「ウィジェットを追加」>「VK固定ページ本文」を順にクリックして追加しよう。

アクセス情報

「タイトル」「アクセス」と入力し、プルダウンメニューから先に作成したアクセスページを選択。最後に「完了」をクリックで完成だ。

固定ページ選択

するとお客様の声の下にアクセスページの内容がそのまま挿入される。

アクセス情報の設定

お問い合わせ情報を掲載する

最後に、サービスに興味を抱いた訪問者が問い合わせをしやすいように、TOPページに問い合わせ情報を掲載したいと思う。

「ウィジェットを追加」>「VKお問い合わせ情報」をクリックする。

お問い合わせ情報

すると下記画像のようなコンテンツが挿入されるので、中の電話番号などを編集していきたいと思う。

お問い合わせ情報

メニュー上の「公開」をクリックしてから、「<」をクリックしてメニュー一覧まで戻る。

そして「Ex Unit設定」>「お問い合わせ情報」を順にクリックする。

ここに関してはあとは説明不要かと思う。お問い合わせボタンをクリックした際の移動先は「お問合せ先URL」で設定できる。先に固定ページで作成した問い合わせページのURLを入力すると良いだろう。

これでTOPページの制作は完了となる。

men
men
終わったーーー!
woman
woman
お疲れさまでした

まとめ

これでコーポレートサイトとして必要なページは全て揃えられた。TOPページも問い合わせに繋がりやすい必要最小限のコンテンツ構成となっている。

ウィジェットをご覧になっていただくと判るよう、今回使用したテーマにはSNS連携など他にも多くの機能が設けられている。

各々で試行錯誤しながら、素晴らしいホームページを作っていただきたい。

men
men
よければシェアしてください!
woman
woman
よろしくお願いします
Google検索広告の定額サービス