ウェブサイトブログ | HubSpot(ハブスポット)

【WorPress】企業サイトの作り方|事前準備から制作手順まで徹底解説

作成者: 水落 絵理香(みずおち えりか)|Jun 28, 2024 2:01:13 AM

世界には12億7,000万を超えるWebサイトが存在するといわれていますが、そのうちの約半数がCMS(コンテンツ・マネジメント・システム)で作成されています。

【無料】WordPressでのウェブサイト作成方法

HubSpotのウェブサイトエキスパートが、WordPressでのウェブサイト作成を成功に導くための22のステップをまとめました。サイトの最適化やメンテナンスについても詳しく解説しています。

WordPressを使ったウェブサイトの作成方法を
無料でダウンロードする→

CMSは、プログラミングやWebデザインの知識がなくてもWebサイトを制作できるシステムのことで、その中で54%という最大のシェアを占めているのがWordPressです。

WordPressを利用して企業サイトを作ることで、制作費やサイト構築の工数の削減につながります。また、運用開始後にコンテンツの更新・管理もしやすくなるため、コンテンツマーケティングに最適です。

本記事では、WordPressを利用した企業サイトの作り方を、初心者向けにわかりやすく解説します。ぜひ参考にしてください。

WordPressでの企業サイトの作り方【事前準備】

まずは、WordPressをインストールする前に行っておくべきことを紹介します。特に、制作前のサイト設計は、コンバージョンにつながる大切な部分なので、しっかりと確認しておきましょう。
 

Webサイトの目的とターゲットを決定する

企業サイトの場合は、企画の段階でサイトを設置する目的や役割、コンテンツの特徴を整理しておくことが重要です。企業サイトは階層構造を持つため、導線と各カテゴリーの関係をしっかりと設計しておかなければならないからです。

企画段階で、サイト設計がしっかりできているかどうかが企業サイトの成果を決めるため、このステップは飛ばさずに行いましょう
 

1. Webサイトを運営する目的は何か?

まずは、Webサイトの運営を通じて得たい成果を考えましょう。

サイト運営の目的の一例として、次のようなものがあげられます。

  • 見込みの高いリードを創出する
  • 競合他社との違いを明確にする
  • ユーザーとの間に信頼関係を築く
  • ブランド認知を高める
  • 商品やサービスを販売する
  • 講演会やウェビナーの参加者を募る
     

2. ターゲットのペルソナを考える

このWebサイトを訪れるのは、どのような人でしょうか。できるだけ具体的にイメージしていきます。理想的な顧客像を1人の具体的な人間に落とし込んだ「ペルソナ」を作成することによって、Webサイトの性格もはっきりしてきます。それにより、Web制作に関わるチーム全体で共通認識を持つことが可能です。

ペルソナを作成するためには、HubSpotが提供している「バイヤーペルソナの作り方と無料テンプレート」を活用する方法もあります。
 

 

3. 目的を達成するために指標を設定する

次に、最終的な目的を達成するためのルートを考えます。また、Webサイトを訪れたユーザーが、想定した通りのルートを進んでくれているかどうかを判断するための指標も、あわせて設定します。

例えば、Webサイトに、「見込みの高いリードを増やす」という目的があるとします。しかし、その目的だけでは、実際にどのような施策を取るべきなのか、また、施策がうまくいっているかどうか判断する方法がわかりません。

そこで、目的に到達するまでの各ステップで次のように目標を設定します。

  • ブログ記事を読んでもらう
  • メルマガに登録してもらう
  • Webサイトの更新を伝えるメルマガを送付して、より詳細な情報を盛り込んだホワイトペーパーをダウンロードしてもらう
  • 所属企業、役職、氏名、メールアドレスなどを入力してもらう

目標とあわせて、目標を達成してもらうためのアクションも設定しましょう。

データは定量的に取得し、離脱しているユーザーが多いステップが見つかったら、優先的に改善を試みます

最終的な目標と、それを達成するための具体的な指標が明確になったら、今度はそれをサイトに落とし込んでいきます。

すべきことを「固定ページ」と「投稿ページ」に振り分け、フォーム作成やダウンロードなど、必要な機能を満たすプラグインをあげていきます。こうした目標をいくつも設定し、Webサイトの構成を充実させましょう。
 

デザイン設計

企業サイトの制作において、デザイン設計はWebサイトの基盤となる要素を決定していく重要なプロセスです。デザイン設計にはどのようなステップがあるのか確認しておきましょう。
 

サイトマップ

サイトマップとは、サイト全体の構成を地図のようにして一覧にしたものです。一般的に、サイトの構成は複数のページが階層的に配置されています。

サイトマップを作成しておくことで、サイトに必要なコンテンツやページ数をあらかじめ把握することができるほか、ユーザーが回遊しやすいサイト構成を事前に考えることができます。
 

ワイヤーフレーム

各ページのレイアウトとコンテンツ配置を決めます。これを図面にしたものがワイヤーフレームです。

ワイヤーフレームを作成することで、サイトの必要な要素がすべて含まれているか、また、ユーザーにとってわかりやすい導線が設計されているかを事前に確認できます。また、完成イメージを社内で共有することで、制作をスムーズに進めることができます。

ワイヤーフレームの作り方:サイトマップを基に、ページごとにワイヤーフレームを作成します。同じ階層にあるページで同じ構成になる場合は、代表的な1ページのワイヤーフレームを作成しましょう。
 

デザインカンプ

レイアウトが決定したら、サイトデザインに着手します。デザインの完成イメージを「デザインカンプ」と呼びます。

一般的にはWebデザイナーがデザインを行いますが、自社ですべてのデザイン作業を行う場合は、WordPressの「テーマ」を使用する方法がおすすめです。テーマは、構成やデザインがある程度決まっています。カスタマイズ性は低いものの、文章や写真の準備だけで済むため、初心者でも比較的手軽に制作が可能です。

WordPressのテーマについては、企業サイト用テーマのインストールで解説しています。
 

レンタルサーバーの契約とドメインの取得

サイトの運営には、サーバーが必要です。自社サイトを設置するレンタルサーバーを選んで契約しましょう。参考に企業向けレンタルサーバーとして代表的なものと、各サービスの標準的なプラン費用を目安として紹介します。

※2023年11月現在の税込み価格

レンタルサーバーを決めたら申し込みを行い、あわせてドメイン名も決定します。ドメイン名は、インターネット上の住所のようなもので、各サイトに個別のドメイン名を設定します。

あわせて読みたい

失敗しないドメインの決め方|基本の3ルールと注意点を具体例を交えて解説

 

WordPressでの企業サイトの作り方

 

インストールと初期設定

ここでは、WordPressをインストールする一般的な手順を説明します。

  1. WordPressデータベースのインストール
  2. クイックインストール
  3. 初期設定
  4. WordPressインストール
     

1. WordPressデータベースのインストール

レンタルサーバーとの契約が完了したら、レンタルサーバー上にWordPressのデータベースを作成します。レンタルサーバー上にはWordPressの簡単インストール機能が用意されているので、指示に従います。
 

2. クイックインストール

データベースが作成されたら、次はWordPressのクイックインストールです。契約時に作成した独自ドメインを入力し、インストール先を決定します。
 

3. 初期設定

設置先のURLをクリックし、初期設定プロセスに入ります。Webサイトの名称と、ユーザー名、パスワード、管理に使用するメールアドレスを入力します。
 

4. WordPressログイン

初期設定画面にある「WordPressをインストール」のボタンを押せば、インストールは完了します。インストール完了時に出る「成功しました」という画面のログインボタンをクリックすると、ログインページに移動します。

ログイン画面では、インストール時に設定したユーザー名とパスワードを入力すれば、WordPressにログインできます。ログインするとダッシュボード(管理画面)に移動します。
 

企業サイト用テーマのインストール

WordPressをインストール後、最初に行うのはテーマのインストールです。初期状態でもいくつかシンプルなデザインのテーマがインストールされていますが、自社のイメージに合ったテーマを新規でインストールした方が良いでしょう。

WordPressのテーマには、デザイン性に優れた海外製のものも数多くありますが、WordPressに慣れるまでは日本製のテーマを使ってみてください。

ダッシュボードから「外観」をクリックして、新規追加を選ぶと、新しいテーマの候補が表示されます。外部サイトからテーマをWordPressへダウンロードする必要がある場合には、テーマの公式サイトを参考にしてダウンロードしてください。

ここでは、無料テーマの「Lightning」を例にあげて設定方法を紹介します。

まず、「外観」から「Lightning」を選んでインストールします。

「有効化」ボタンをクリックすると、運営サイトが「Lightning」のデザインに設定されます。

こちらの記事では、企業サイト向けのWordPressテーマを20選紹介していますので、あわせてご確認ください。

あわせて読みたい

【WordPress】企業サイトのテーマどう選ぶ?おすすめ7選&選定のコツ

 

企業サイト用プラグインの追加

WordPressは、最小限の機能しか備わっていないのがデフォルトの状態です。機能を追加するためには、必要に応じてプラグインを利用しましょう。プラグインとは、Webサイトの目的に合わせてさまざまな機能を提供し、複雑なプログラミングを行うことなくサイトをカスタマイズできるようにするものです。

プラグインのインストール方法は、次の通りです。

  1. ダッシュボードから[プラグイン]をクリックし、使用したいプラグインを選択
  2. [今すぐインストール]ボタンをクリック
  3. インストールされたら[有効化]をクリック

プラグインは簡単にインストール・アンインストールでき、短時間でユーザー体験を向上できるため大変便利です。しかし、プラグインをインストールしすぎると、サーバーの動作が重たくなったり、不具合が発生したりすることもあるため、目的に合わせて最小限のプラグインをインストールしましょう。
 

ベーシック認証(任意)

制作の途中であるサイトを一般公開したくない場合には、ベーシック認証を行うことができます。

ベーシック認証とは、IDとPasswordの設定で、サイトへアクセスできるユーザーを制限する機能で、この認証が設定されているサイトにアクセスしようとすると、設定したIDとパスワードの入力を求められます。

エックスサーバーをはじめとする多くのホスティングサービスでは、サーバーパネルからベーシック認証を設定できます。利用しているサーバーによって設定方法が異なるため、具体的な設定方法については使用しているサーバーの公式サイトやサポートで確認してください。

無料レンタルサーバーを利用している場合、ベーシック認証のために必要な「.htaccess」ファイルを利用できないことがあるので注意が必要です。
 

パーマリンクのカスタマイズ

パーマリンクとは、各ページのURLのことで、あとから変更するとユーザーが前のURLでページにアクセスできなくなったり、SEOに影響したりするので注意が必要です。初期設定であらかじめ使用する配列を設定しておきましょう。

今回は、投稿ページのタイトルをパーマリンクとして設定する方法を紹介します。

  1. WordPress画面の左下にある「設定」→「パーマリンク設定」
  2. 共通設定からカスタム構造を選択し、タグの中から「/%postname%」を選択
  3. 変更を保存して完了
     

メニューの設定

Webサイトのユーザビリティを高めるため、サイト上部に表示されるグローバルナビゲーションメニューの設定は重要です。グローバルメニューを作成する際は、あらかじめ作成したサイトマップに基づいて、必要なページやカテゴリーへのリンクを組み込んでください。

WordPress管理画面の項目[外観]→[メニュー]からグローバルメニューに表示するボタンの追加や編集が可能です。

画面のサイドバーに表示されるメニューや要素はウェジェットと呼ばれ、ウェジェットを追加・編集する場合にも同様に[外観]の[ウェジェット]から設定が可能です。
 

コンテンツの制作

Webサイトのコンテンツ制作は、事前に作成したワイヤーフレームに沿って進めます。WordPressテーマを使用する場合は、そのテーマの特性に合わせて各ページをカスタマイズしてください。

企業サイトで主に必要となるのは、次のページです。

  • トップページ
  • 会社概要
  • 事業案内
  • お問い合わせ
  • サイトマップ
  • プライバシーポリシー

ヘッダーやフッターのデザインも、サイト全体のイメージに合わせてカスタマイズしましょう。
 

WordPressを活用すればコード無しでも企業サイトが作れる

企業サイトの構築には、制作工数の削減と運用開始後の管理のしやすさという観点から、WordPressの活用がおすすめです。WordPressでは多様な企業サイト用テーマが提供されており、これらを活用することでコード編集の知識がなくてもオリジナルのサイト制作が可能です。

WordPressを使ってユーザーにとって魅力的な企業サイトを作成してください。