2020/09/01

[5ステップで解説]WordPressでコーポレートサイトの作成手順

WordPress

起業したり自営業で新たにビジネスを展開する際に当たって不可欠なコーポレートサイト。
今では、コーポレートサイトは名刺代わりになるので、会社が存在するのにコーポレートサイトがないと怪しまれてしまう時代になりました。

そこでコーポレートサイトをWordPressで作ろう！と思ったものの、どのように作ったら良いかわからないということで本記事にたどり着いた方も多いかと思います。

僕は現在フリーランスで様々な企業のサイトの改修をさせて頂いています。
また、WebマーケターとしてWeb集客のお手伝いをさせて頂く機会も多くあるため、今回は下記のテーマで解説をしていきます。

本記事のテーマ

• コーポレートサイトを作る上でおさえておくべき大前提
• WordPressでコーポレートサイトを作成する5つの手順

本記事を読んでいる方の中には、WordPress未経験者からプログラミング玄人まで様々な方がいると思いますが、先にWordPressでサイトを作る上での必要スキルをお伝えしておきます。

• HTML・CSS→必須
• PHP・JavaScript→あるとオリジナル性の高いものが作れる
• デザイン→ブランディングのために不可欠

デザインに関しては、外注してしまうのもありですが、自作するのであればHTML/CSSのスキルは必須。
しっかりと思い通りのサイトを作っていくためには更にPHP・JavaScriptのスキルが必要となります。

コーポレートサイトは名刺代わりになると上記で書きました。
正直、HTML/CSSだけだと一般的なサイトしか作ることができず、他と差別化することは難しいです。

なので、しっかりと作り込むにはPHPやデザインも不可欠ということを認識しながら、本記事を読んで頂ければと思います。

WordPressでのコーポレートサイト作成手順１．事前準備

まずコーポレートサイトを作成する事前準備として、３つ決めることがあります。

コーポレートサイト作成の目的を明確にする

まず一つ目に決めるべきことは、コーポレートサイトの目的を明確にすることです。
コーポレートサイトを作成する目的として、考えられるものとして下記があります。

• 企業のブランディングをする
• サービスを販売するための集客をする
• ECサイトを組み合わせて商品を販売する

企業のブランディングをするというだけであればデザインのみを見れば良いですが、集客やECサイトを組み合わせるなら話は変わってきます。
もちろんデザインも重要ですが、機能面もしっかりとユーザーに配慮した作りにする必要があります。

まずコーポレートサイトを作る目的を明確にすることから始めましょう。

サイトの構成を決める

目的を明確にしたら、続いてサイトの構成を考えていきます。
必要なコンテンツとしてどのようなものがあるのかをしっかりと考えることが大事です。

具体的な例でいうとコーポレートサイトとして最低限必要なものとして下記があります。

• 会社概要
• サービス概要
• お問い合わせ
• アクセス情報
• ブログ・ニュース情報
• 特定商取引法　※ネット販売する場合

他にもサービス内容に応じて作成するページがあると思います。
サイト作成に取り掛かる前にしっかりとどのようなページが必要なのか明確にしておくようにしましょう。

ページの枠組みを決める

事前にページの枠組みを決めておくと後のサイト作りがスムーズに進んでいきます。
サイト制作の用語で「ワイヤーフレーム」と呼ばれるものですが、下記画像のようにざっくりとしたページの作りを決めておきます。

※上記は自社決済サイトを作ろうと検討中に途中まで作成したものです。

ワイヤーフレームの作成はExcelなどでもできますが、僕はEdrawのワイヤーフレームを使っています。
実際にサイトを作りながら枠組みを決めても良いですが、あとから「イメージと違った…」となると少し面倒なので枠組みを決めておいた方がスムーズです。

ワイヤーフレーム作成のツールは他にもありますが、ひとまず無料で使えるものから使ってみると良いでしょう。

WordPressでのコーポレートサイト作成手順２．WordPressのインストール

事前準備が完了したらWordPressをインストールしていきます。
WordPressのインストールについては、4つのステップで行っていきましょう。

目的に効果的なWordPressテーマを決める

実際にWordPressをインストールする前にWordPressのテーマを決めておくと良いです。
個人的なオススメなレンタルサーバーとしてはエックスサーバーですが、ConoHa WINGでは、WordPressテーマとセットでお得な価格で導入することができるものがあります。

2020/9/1時点で取り扱っているテーマは、ブログやアフィリエイトに向いている下記のテーマですが、カスタマイズがしっかりできる方ならコーポレートサイトでも使うことができます。

• JIN
• Cocoon
• SANGO

僕が以前作らせていただいたママ向きコミュニティのお店のサイト（https://mother-natures.com/）に関してはJINで作成しました。
コーポレートサイト作成に向いたテーマについては下記でも紹介しているので、参考にしてみてください。

 

サーバーへWordPressをインストールする

WordPressテーマを決めたらサーバーへWordPressをインストールします。
サーバーによってインストールの方法は違いますが、エックスサーバーでWordPressをインストールする方法は下記の記事にて紹介しています。

 

ブログをテーマに書いた記事ですが、基本的なインストール方法はコーポレートサイトでも変わりません。

テーマと必要なプラグインを入れる

上記の解説記事の中にも書いていますが、WordPressをインストールしたらテーマと必要なプラグインを入れましょう。
テーマの導入の仕方はテーマによりけりなので各テーマのマニュアルを見て頂ければと思いますが、基本は「外観」→「テーマ」→「新規追加」からテーマのファイルをアップロードすれば適用することができます。

この時、子テーマも忘れずにインストールするようにしましょう。

プラグインに関しては、テーマによって相性があるので一概にオススメをいうことはできないですが、下記のプラグインは重宝します。

• EWWW Image Optimizer・・・画像を圧縮してくれる
• BJ Lazy Load・・・画像の読み込みを遅らせることで表示速度を速くしてくれる
• Yoast SEO・・・SEOの設定で大事

僕はこれまでWordPressで10サイト以上作ってきましたが、前者２つは基本的に入れています。
後者のYoast SEOもWordPressのテーマによっては入れています。（上述のJINでは不要）

一つ注意点として、プラグインを入れすぎると表示速度が遅くなってしまい、ユーザビリティが下がってしまうので注意が必要です。
なお、初期から入っているテーマやプラグインで不要なものは削除しておきましょう。
※不要なテーマやプラグインを削除することで表示速度が改善する場合があります。

SEO最適化のための最低限の設定をする

続いて、SEO集客する場合は最初のうちから最低限必要な設定をしておきましょう。
いくつかSEOに効果的な設定を書くと下記の通りです。

サイトアドレスの設定

事前にサーバー側でSSL設定をしておくことが前提となりますが、「設定」→「一般」からWordPressアドレスとサイトアドレスを変更しましょう。
初期は「http:～～」となっているので、「https:～～」へ変更します。

パーマリンクの設定

パーマリンクの設定は、「設定」→「パーマリンク設定」から行えます。
各ページのドメイン下のアドレスを指定するもので、「投稿名」に変えておくとSEOに効果的かつわかりやすいものになります。

なお、ドメインやリンクの設定は下記の動画でも解説をしているので、興味がある方は参考にしてみてください。

Yoast SEOの設定

Yoast SEOに関しては、設定ウィザードがあるので、プラグインを入れたらウィザードに従って初期設定をしておきましょう。

WordPressでのコーポレートサイト作成手順３．必要なページの作成

WordPressのインストール後、必要なページを作っていきます。
手順１でサイトの構成案を決めたと思いますが、そちらの構成案に沿って作成していきます。

トップページを作成する

まず必須で作るものはトップページです。
固定ページにてトップページ用のページを作成して、「設定」→「表示設定」より「ホームページの表示」で作成した固定ページを指定します。

固定ページでページを作っていくだけでなく、拘りたい場合はPHPファイルもいじっていきます。
テーマによりますが、「index.php」や「front-page.php」や「home.php」といったファイルをコーディングすることでオリジナル性の高いトップページを作ることが可能です。

すべてのファイルがある場合は、front-page.php　>　home.php　>　index.phpという優先順位となります。

その他の必要なページを作成する

トップページが作成できたら、続いて他の必要なページも作成していきます。
ブログやニュース記事以外に関しては、基本は固定ページにて作成します。

問い合わせフォームについては、プラグインの「Contact Form 7」がよく使われますが、こだわりがなければGoogleフォームでも可能です。
本サイトについてもGoogleフォームにて作成しています。

参考：お問い合わせフォーム

固定ページに関しては、トップページと同様に「page.php」ファイルを編集することでこだわったテンプレートにすることが可能です。
この際、page.phpを編集すると全ての固定ページに適用されますが、別で「page-<パーマリンク>.php」というファイルを用意することで個別に編集することが可能となります。
※「sample」というパーマリンクの記事に対して個別に指定したい場合は、「page-sample.php」というファイルを作成します。

ナビゲーションメニューを設定する

特にデザインなどに拘りがない場合は、ナビゲーションメニューもしっかり設置してあげるとユーザビリティが上がります。
本サイトでいうと下記の画像の部分です。

本サイトはマナブログのテーマを作っているのですが、ナビゲーションメニューは下記コードで設定しています。

<?php if ( is_mobile() ) : ?>
<!-- スマホ用 -->
<nav class="pushy pushy-left">
<?php else: ?>
<!-- PC用 -->
<nav>
<?php endif; ?>

	<ul class="nav navbar-nav">
		<li class="dropdown" itemprop="name">
			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart" aria-hidden="true"></i> Redmine <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/redmine/">Redmineトップ</a></li>
				<li><a href="<?php echo home_url(); ?>/category/redmine-install/">Redmineのインストール</a></li>
				<li><a href="<?php echo home_url(); ?>/category/redmine-project/">Redmineのプロジェクト</a></li>
				<li><a href="<?php echo home_url(); ?>/category/redmine-ticket/">Redmineのチケット</a></li>
				<li><a href="<?php echo home_url(); ?>/category/redmine-plugin/">Redmineのプラグイン</a></li>
				<li><a href="<?php echo home_url(); ?>/category/redmine-wiki/">RedmineのWiki</a></li>
			</ul>
		</li>
	</ul>
	<ul class="nav navbar-nav">
		<li class="dropdown" itemprop="name">
			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-code" aria-hidden="true"></i> Excel VBA <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/category/excel-vba/">Excel VBA</a></li>
			</ul>
		</li>
	</ul>
	<ul class="nav navbar-nav">
		<li class="dropdown" itemprop="name">
			<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-wordpress" aria-hidden="true"></i> WordPress <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="<?php echo home_url(); ?>/category/wordpress/">WordPress</a></li>
			</ul>
		</li>
	</ul>

</nav>

大抵のWordPressテーマであれば、「外観」→「カスタマイズ」からメニューを設定できる項目があるのでそちらから変更すれば大丈夫です。
自分で記述する場合については上記のコードも参考にして頂ければと思います。

WordPressでのコーポレートサイト作成手順４．デザインを調整する

手順３で必要なページは完了しました。
ページが用意できたら、最終的なデザインの調整をしていきます。
色などの調整はCSSをいじればできますが、配置を変えたりするのはテーマ依存、場合によってはPHPファイルを編集します。
よく使うWordPressデフォルトのPHPの用途をいくつか紹介します。

function.php：機能を実装する際などに使用

扱う際に最も注意が必要なファイルです。
編集にミスってしまうとサイトが表示されなくなったり、管理画面でも編集できないようになってしまいます。
※もし管理画面もいじれなくなった場合は、FTPで直接ファイルをいじることになります。

function.phpでは、例えば下記のような機能を実装する際にコードを記述します。

• 記事のアクセスランキング順に表示する
• ショートコードを定義する
• 記事投稿画面をカスタマイズする

特別なにかやりたいことがなければいじることはないので、何かやりたいことがあってググってみたらfunction.phpを編集するとなっていた場合にいじる程度に考えておけばOKです。

header.php：ヘッダーを編集するファイル

ヘッダー部分を変更したい場合に修正するファイルです。

上記で触れたナビゲーションメニューを記述する場合は、こちらのheader.phpに記述するのが一般的です。

footer.php：フッターを編集するファイル

フッター部分を変更したい場合に修正するファイルです。

コピーライトやサイトマップなど記述する場合に編集します。

sidebar.php：サイドバーを編集するファイル

サイドバー部分を変更したい場合に修正するファイルです。

特に見てもらいたい記事への内部リンクやバナーなどを設置します。
なお、ここまで挙げたheader・footer・sidebarに関しては、page.phpやindex.phpなどで呼び出したい時に呼び出します。

category.php：カテゴリーページを編集するファイル

カテゴリーページのテンプレートファイルです。
たとえば、WordPressに関する記事一覧のようなカテゴリページのフォーマットを決めるファイルとなります。

style.css：デザインを調整するファイル

全体のデザインを整えるためのcssファイルです。
細かくファイルを分けたい場合はcssファイルを別で作成しても良いですが、基本はこのstyle.cssにデザインに関する記述をしていきます。

なお、別ファイルを作成する際は内などで呼び出すことを忘れずに。
ここまでの作業が完了すれば、ひとまずコーポレートサイトの作成は以上となります。

WordPressでのコーポレートサイト作成手順５．集客の導線を決める

コーポレートサイトの作成がブランディングを目的とするものであれば不要ですが、集客も目的としたい場合は集客の導線をしっかり決める必要があります。
集客方法としては、主に下記３つがあります。

• アナログでの営業
• SEOでの集客
• SNSでの集客

SEOでの集客については、僕がSEOコンサルをしている内容を元に下記の記事にて細々と解説しています。

SEO対策による集客ロードマップ！SEOコンサルが実際やってる事を紹介 ｜ ノマドの樹｜ライフワークを主軸に発信するブログ

SEO対策で集客する方法を実際にSEOコンサルとして色々な企業さんにコンサルをしてきた経験を元に解説していきます。大きく5つのステップで初心者でもわかるようにかみ砕いて説明！有料級のものですが、無料公開させていただきます。

SNSに関しては、Twitter・Instagram・YouTubeなどいろいろなものがあるので、サービス内容に基づき考えて運用していく必要があります。
もしここまで読んで頂いて「サイト制作と集客をご自身でやっていく自信がない…」という場合は、下記の通りサイト制作×Web集客のサポートを僕の方でセットで対応させて頂くことも可能です。

ビジネススタートに向けたサイト制作×Web集客を承ります ｜ ノマドの樹｜ライフワークを主軸に発信するブログ

中小企業や個人事業などのビジネススタートに向けた、サイト制作とWeb集客のサポートをします。各々で依頼をすると効率の悪さや手間が発生するところ、一括して請け負います。興味ある方はご気軽にお問合わせください。

ご興味がある方はまずお問い合わせいただければと思います。

まとめ

今回はコーポレートサイトをWordPressで作成する方法についての流れを紹介してきました。
WordPressのテーマによってはほとんどコーディングすることなく、プログラミング知識ゼロで作ることも可能です。

ただし、テーマに依存したデザインでなく、しっかりサイトを作り込んでいくにはHTML/CSS・PHPの知識が不可欠となります。
ちなみにHTML/CSSの基礎的なところについてはテックアカデミーのYouTubeがわかりやすいです。

• はじめてのHTML入門講座
• はじめてのCSS入門講座
• はじめてのレスポンシブWebデザイン入門講座

もし、自作が難しそうであればご気軽に連絡頂ければと思います。
＞＞ミツキへ問い合わせる

というわけで今回は以上となります。

スキルを身につける プログラミングスクールおすすめ7選！徹底比較した失敗しない選び方

コーポレートサイト向きテーマ WordPressでコーポレートサイトを作る際のおすすめテーマ８選

ブログ向きテーマ ブログ向けWordPressテーマおすすめ7選【SEO対策済】

• facebook
• Tweet
• hatebu
• Share
• Read Later