コーポレートサイトがあっという間に完成!「企業サイト向け WordPress テーマ by Communitycom」を使ってホームページを制作してみた

アイキャッチ画像:コーポレートサイトがあっという間に完成!「企業サイト向け WordPress テーマ by Communitycom」を使ってホームページを制作してみた

こんにちは!コミュニティコムスタッフの勝沼です。
弊社では埼玉県さいたま市にあるコワーキングスペース7F(ナナエフ)の運営や、WordPressを使ったウェブサイト制作をはじめとし、さまざまな事業をおこなっております。

コーポレートサイト制作を検討されている方の中で、

・見た目がきれいなホームページを簡単に作りたい
・一度 WordPressでのホームページ制作に挑戦したが、挫折した
・ホームページ制作の経験があまりないので不安

といったお悩みはございませんか?

そのような方におすすめなのが、WordPressテーマです。
今回は、弊社が作成した「企業サイト向け WordPress テーマ by Communitycom」というテーマを使用し、実際にコーポレートサイトを制作してみました。

このテーマは、企業の公式ウェブサイト(コーポレートサイト)に必要な機能が揃ったオールインワンな国産 WordPress テーマ(テンプレート)です。
会社の基本情報をはじめ、事業紹介や会社アピールなどのコーポレートサイト特有のコンテンツも簡単に入れ込むことができました。この記事では、その制作過程をご紹介します。

「企業サイト向け」ではありますが、会社以外にも様々な団体や小規模事業者の方もお使いいただける汎用性の高いWordPressテーマです。

「テーマ購入を検討しているが、詳しい操作イメージが持てないと不安」といったお悩みをお持ちの方にもおすすめの内容です。ぜひ一通りご覧ください!

制作概要・参考ページ

今回は以下内容でホームページを制作していきます。

使用テーマ企業サイト向け WordPress テーマ by Communitycom
企業名Sample Factory
ホームページ制作目的・コーポレートサイトが欲しい
・会社に関する情報がわかりやすくまとまったウェブサイトを作りたい
制作する上で参考にしたページWordPress テーマ by Communitycom 設定マニュアル
企業サイト向け WordPress テーマ by Communitycom 設定マニュアル

マニュアルを読みながら作業を進めることで、よりスムーズに制作することができました。
実際に作業される際には、ぜひあわせてご覧ください。

さっそくホームページを制作してみましょう

以降の手順は、WordPress自体のインストールが完了しているところからスタートします。
WordPressのインストールがまだの方は、先に対応してからこの記事をお読みください。

STEP 01 テーマのインストール〜適用

*所要時間:〜5分

テーマのインストール方法 を参考に、テーマを適用していきます。
マニュアルを読みながら進めれば、5分もかからずに適用が完了しました。

適用後、トップページを開いてみるとテーマが無事反映されていることが確認できます。サイトにはまだ情報が入っていないため、お知らせが1件のみ表示されている状態です。

スクリーンショット:テーマ適用後のトップページ
テーマ適用後のトップページ

STEP 02 カスタマイザーで編集する

WordPressのテーマにはカスタマイザーという便利な機能があります。

WordPressには、ホームページの見た目をリアルタイムで変更して確認できるテーマカスタマイザーという機能が用意されています。テーマをインストールした後にテーマカスタマイザーを使えば、HTMLやCSSといった難しいコードを書かなくても手軽に見た目のカスタマイズが可能です。

https://communitycom-shop.jp/theme_manual/how-to-use-customizer/

本来であれば専門知識が必要なところを、カスタマイザーを使えばウェブサイトでユーザーが直接目にする部分(フロント側)のほとんどを感覚的に設定できてしまいます。
ここの工程を一通り終えることで、かなりサイトが充実しました。

さっそく流れを紹介していきます。

本格的な制作に入る前に
以降の工程も簡単に操作ができるようになっていますが、事前に入れる情報を準備しておいた方が、よりスムーズに制作を進めることができます。

▼事前に準備しておいた方が良い情報(例)
・ロゴ画像
・全体的なイメージカラー
・会社の基本情報、アピールポイント、事業内容など
・その他コーポレートサイトに入れたい情報、どのようなページを作成するか、サイト全体の構成
・その他使用したい写真や動画、バナーなど

コーポレートサイトの内容が充実しているほど企業の信頼感・安心感がアップしますので、十分に準備しておくことをおすすめします。
作業自体が簡単な分、ホームページの内容を考える方に時間を割くことができるのも、テーマ利用のメリットかもしれません。

STEP 02-1 見た目を整える(基本事項)

*所要時間:10〜20分ほど(内容が事前に決まっていれば)

カスタマイザーを使用して、見た目を整えていきます。

・サイトタイトルまたはロゴの設定
・デザインの設定(テーマで使用する色、ページヘッダーの背景画像、投稿のアイキャッチ画像、サイドバーの表示について)
・ヘッダー画像の設定 または スライドショーの設定
・メニューの設定
・ウィジェットの設定

企業サイト向け WordPress テーマ by Communitycom 設定マニュアルを読みながら進めています

企業サイト向け WordPress テーマ by Communitycomの独自ウィジェットは以下の3つとなります。

  • [CMC]バナー
  • [CMC]新着コラム
  • [CMC]最近の投稿(画像つき)
スクリーンショット:カスタマイザーで見た目を整えた後のトップページ
カスタマイザーで見た目を整えた後のトップページ

今回ウィジェットは、以下で設定をしました。

◇サイドバーウィジェットエリア
・検索
・[CMC]最近の投稿(画像つき)

◇コラム用サイドバーウィジェットエリア
・[CMC]新着コラム

◇フッターウィジェットエリア1〜3
・[CMC]バナー
・[CMC]最近の投稿(画像つき)

「コラム用サイドバーウィジェットエリア」はその名の通り、コラムの投稿ページとアーカイブページで表示されるサイドバーとなります。

一通り設定すると、ファーストビューに写真とテキストが入ったことで「どのような会社か?」ということが少し伝わるサイトになってきました。
ちなみに、コラムの投稿はまだ作成していないためトップページに「コラム」セクションは表示されていない状態です。マニュアル通りに進めていけば、後ほど投稿を作成する手順も出てきますのでご安心ください。

STEP 02-2 会社に関する情報を設定する

*所要時間:10〜20分ほど(内容が事前に決まっていれば)

カスタマイザーを使用して、会社に関する情報を設定していきます。

・会社情報の設定
・事業紹介の設定
・会社アピールの設定

企業サイト向け WordPress テーマ by Communitycom 設定マニュアルを読みながら進めています

「事業紹介の設定」では、タイトルを変更することができるため事業紹介以外の内容を入れることも可能です。

今回は食器を取り扱う企業のコーポレートサイトのため、「商品紹介」としました。企業によって色々と変更できる部分になりますので、最適な内容を検討してから作成することをおすすめします。

また、「会社アピール」についても同様にタイトルを変更することができます。今回は「Sample Factoryの強み」としましたが、「選ばれる理由」「特徴」などよりイメージにあった内容を掲載してみてください。

会社に関する情報を入れたことで、見応えのあるサイトになってきました。これでも十分コーポレートサイトとして機能しそうですが、後少しだけカスタマイザーで設定する部分があります。

スクリーンショット:カスタマイザーで会社に関する情報を設定した後のトップページ
カスタマイザーで会社に関する情報を設定した後のトップページ

STEP 02-3 さらに細かな設定をしていく

*所要時間:10分ほど(内容が事前に決まっていれば)

マニュアルに沿って、さらに細かな設定をしていきます。

・SNSアカウントの設定
・ページ共有の設定
・その他の設定
・カスタムテンプレート

企業サイト向け WordPress テーマ by Communitycom 設定マニュアルを読みながら進めています

SNSアカウントがある場合には、会社のアピールに繋がりますのでリンクを設定することをおすすめいたします。設定すると、フッターの会社情報の下に設定したSNSのアイコンが表示されるようになります。

ここまでがカスタマイザーでの編集です。
改めてトップページを見てみると、情報が充実してきたことがわかります。ここまで設定してきたものは全て、カスタマイザーでいつでも気軽に変更することができます。

スクリーンショット:カスタマイザーでSNSアカウントを設定した後のフッター
カスタマイザーでSNSアカウントを設定した後のフッター

STEP 03 投稿を作成していく

さらに詳細な情報を追加していきます。
それぞれの投稿を作成するとトップページにも新たなセクションが現れます。

STEP 03-1 お知らせの投稿を作成する

*所要時間:〜15分ほど(内容が事前に決まっていれば)

お知らせを作成すると、トップページ>フッターの上に作成した投稿の「投稿日・カテゴリ・タイトル」が表示されました。企業サイト向け WordPress テーマ by Communitycomでは最新の投稿が5件分トップページに表示される仕様になっています。

スクリーンショット:トップページ:お知らせの投稿を作成した後の様子
トップページ:お知らせの投稿を作成した後の様子

おまけ情報 その1

作成したお知らせの詳細ページにコメント欄が表示されてしまった場合…

スクリーンショット:投稿のコメント欄

コメント欄が不要な場合には、ディスカッション設定を見直すことで非表示にすることができます。
方法としては「WordPressの管理画面から設定をする」もしくは「記事ごとに設定をする」の2通りがあります。今回は後者の方法で対応します。

投稿の編集画面を開き、右側のメニュー「投稿」のタブを見ると「ディスカッション」という項目があります。

ディスカッション「受付中」となっているところをクリックするとポップアップが出てきますので、そこでディスカッション「受け付けません」を選択、「ピンバックとトラックバックを許可」のチェックを外した後に変更を保存してください。

スクリーンショット:ディスカッション設定欄

近年コメント欄に寄せられるスパムも多くなってきているため、一度WordPressの管理画面からサイト全体のディスカッション設定を見直しておくと安心です。より詳しく知りたい方は「1-13 ディスカッション設定でコメント欄を管理しよう」をご覧ください。


おまけ情報 その2

お知らせ一覧ページを作成することもできます。(参考マニュアル:お知らせ一覧ページの作成
テンプレートが準備されているため、1分とかからずお知らせ一覧ページを作成することができました。

スクリーンショット:お知らせ一覧ページ
お知らせ一覧ページ

STEP 03-2 コラムの投稿を作成する

*所要時間:10〜30分ほど(内容が事前に決まっていれば)

今回のテーマには、コラム(ブログ)の投稿機能があります。
お知らせごととは別に、会社の思いやお客様にとってのお役立ち情報などを発信していきたい場合には「コラム」を活用すると良いと思います。

スクリーンショット:コラムの記事を投稿した後のトップページ
コラムの記事を投稿した後のトップページ

コラムの投稿を作成すると、トップページにも「コラム」セクションが出現しました。トップページには最新コラムが6件表示される仕様になっています。

コラムは内容を考えることに時間を要すると思います。そのため、サイトを公開した後から少しずつ投稿していく方法もおすすめです。

簡単にホームページ制作ができた!

ホームページが完成しました!(完成したホームページはこちら → PDFファイルを見る

合計1時間半〜2時間ほどでできあがりました。
入れる情報さえ決まっていれば作業自体は非常にシンプルで、マニュアルに沿って進めていくことで迷わずに制作することができました。

「企業サイト向け WordPress テーマ by Communitycom」では初めから会社に関する情報を入れるフィールドが用意されているため、そこに沿って情報を入れていくだけでコーポレートサイトが完成するというのは初めてホームページ制作をする方にとっても安心かと思います。

このサイトからお問い合わせやエントリーを受け付ける場合は、この手順とは別にお問い合わせフォームの作成が必要です。
代表的なプラグインContactForm7での作成手順を解説した記事もありますので、参考になさってください。

まとめ
・詳しい知識がなくても簡単に見た目の整ったウェブサイトが制作できた
会社情報に特化しているため、関連する情報を入れるフィールドが用意されていてわかりやすい
・一般的なテーマを自分用にカスタマイズするよりも、時間をかけずにホームページを制作することができる

高品質で信頼感のある採用・求人に特化したホームページを制作したい方には、非常におすすめのテーマです。
ぜひ候補の1つに入れてみてはいかがでしょうか?