2時間もかからず完成!「イベント集客サイト向け WordPress テーマ by Communitycom」を使ってホームページを制作してみた

2時間もかからず完成!「イベント集客サイト向け WordPress テーマbyCommunitycom」を使ってホームページを制作してみた

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

イベント集客を目的としたホームページ制作を検討されている方の中で、

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

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

そのような方におすすめなのが、WordPressテーマです。
今回は、弊社が開発した「イベント集客サイト向け WordPress テーマ by Communitycom」というテーマを使用し、実際にホームページを制作してみました。

制作してみて、「ウェブに関する基本的な知識はあるが、実際にホームページ制作をしたことがなく不安」という方にとっては、簡単にホームページを完成させることができた!と思っていただけるテーマだと感じました。
実際のイベント運営の経験から生まれたテーマであるため、目的に沿ったフィールドが用意されており大変制作しやすかったです。この記事では、その制作過程をご紹介します。

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

制作概要・参考ページ

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

使用テーマイベント集客サイト向け WordPress テーマ by Communitycom
イベント名Sample Festival 2022
ホームページ制作目的・イベントの情報が集約されているホームページが欲しい
・イベントの集客をしたい
制作する上で参考にしたページWordPress テーマ by Communitycom 設定マニュアル
イベント集客サイト向け WordPress テーマ by Communitycom 設定マニュアル

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

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

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

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

*所要時間:〜5分

テーマのインストール方法 を参考に、テーマを適用していきます。
マニュアルを読みながら進めれば、特に難しい工程はなくあっという間にテーマが適用されました。

適用後、トップページを開いてみるとテーマが無事反映されていることが確認できます。
情報はまだ何も入っていませんが、これだけでもおしゃれで気分が上がりますね。

テーマ適用後のトップページ
テーマ適用後のトップページ

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

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

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

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

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

カスタマイザーで編集できる部分はとても多いです。
さっそく流れを紹介していきます。

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

▼事前に準備しておいた方が良い情報(例)
・ロゴ画像、イベントにまつわる写真や動画
・イベントの開催情報(日程、交通案内、チケット料金など)
・イベント紹介文章
・サイト全体のイメージ(色・雰囲気など)

操作自体はシンプルなのですが、デザインや掲載したいイベントの情報などを考えることに時間がかかってくるかと思います。
テーマの初期設定のままで十分きれいに仕上がりますが、オリジナリティを出したい方やこだわりのある方、早く公開したい!という方は特に、サイトに関連する情報を事前に準備しておくことをおすすめします。そうすることで、この後の工程にかかる時間がグッと短くなってくるはずです。

作業自体が簡単な分、ホームページの内容を考える方に時間を割くことができるのも、テーマ利用のメリットかもしれません。

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

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

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

・サイトタイトル、ロゴ
・デザインの設定(カラー、フォントの指定、ヒーローエリアの装飾など)
・ヘッダー画像の設定
・メニューの設定
・ウィジェットの設定
・ページ共有の設定
・その他の設定

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

これらを設定していくと、見た目がガラッと変わってきます。

特に「カラー」や「ヒーローエリアの装飾(背景画像の設定)」「フォント」といったデザイン部分は、ワンタッチで見た目が変わるため楽しいです。
オリジナリティを出したい方は、プレビューを見ながら色々と試してみるもの良いと思います。

カスタマイザーで見た目を整えた後のトップページ
カスタマイザーで見た目を整えた後のトップページ

STEP 02-2 イベントに関する情報の設定をする

*所要時間:10〜20分

次はイベントに関する情報を入れていきます。

・イベント情報の設定
・イベント運営者の設定
・チケットの設定
・交通案内の設定

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

情報が入って、ページの充実度がグッと上がった印象です。
カスタマイザーの項目に入れるべき情報が明記してあるため、中身を用意しておけばあとは入れるだけでした。

テーマの適用からここまでの所要時間は30分〜1時間ほど。一通りマニュアル通りに入力していけば、随分と形になってきます。

トップページ:NEWSの下に入力したイベント情報が表示された
トップページ:NEWSの下に入力したイベント情報が表示された

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

*所要時間:15〜20分

さらに細かな設定をしていきます。

■トップページオプション
・イントロダクションの設定
・フォトギャラリーの設定
・トップページの表示項目の設定

■その他
・ページ共有の設定
・その他の設定

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

フォトギャラリーは、枚数によって見え方の印象が変わりました。先に使用したい写真をメディアライブラリにアップロードしておくと、プレビュー画面を見ながら感覚的に調整できると思います。

「トップページの表示項目の設定」は、投稿を作成していない状態だと見た目が何も変わらず戸惑うかもしれませんが、この後投稿を作成すればしっかりトップページに反映されますのでご安心ください。

テーマのマニュアルにも、この後に「投稿を作成しよう!」という手順があります。上から順に設定していくので問題ありませんでした。

トップページ:フォトギャラリーに写真を5枚入れた様子

ここまでがカスタマイザーでの編集でした。お疲れ様でした!
気になるところがあれば、公開後でも簡単に変更できるのも嬉しいポイントですね。もう少しでホームページが完成します。

STEP 03 投稿を作成していく

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

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

お知らせの投稿を作成すると、先ほどは何も表示されていなかったトップページに投稿の「投稿日・タイトル」が表示されるようになります。新規投稿には7日間「New」の表示がつく仕様です。

トップページ:お知らせの投稿を作成した後の様子

おまけ情報 その1

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

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

投稿の編集画面を開き、右側のメニュー「投稿」のタブを一番下までスクロールします。
すると「ディスカッション」という項目が出てきます。
ディスカッションの「コメントを許可」のチェックを外せば、コメント欄が非表示になります。

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


おまけ情報 その2

お知らせ一覧ページを作成することもできます。(参考マニュアル:お知らせ一覧ページの作成
テンプレートが準備されているので非常に便利です。ワンステップでお知らせ一覧ページが作成できます。

マニュアル通りに作成すると投稿編集画面の中身がすっからかんで不安になるかもしれませんが、公開してみるとびっくり!きちんと一覧ページができあがっています。

投稿編集画面
公開後のお知らせ一覧ページ

このページを自分で作成しようとするととても大変だと思います。
これでさらに見栄えの良いホームページに仕上がるのではないでしょうか。
ぜひ作成してみてください。


STEP 03-2 その他の投稿を作成する

*所要時間:30分〜1時間(投稿数による)

お知らせ以外の投稿も作成していきます。

・プログラムの投稿
・FAQの投稿
・スポンサーの投稿
・​​イベント紹介動画の設定

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

お知らせ一覧ページとは違い、プログラム・FAQの一覧ページは標準で備わっていました。特に何も設定していない状態で、「もっとみる」ボタンから遷移することができました。

STEP 03-3 メニュー・ウィジェットの設定をする

*所要時間:5〜10分

最後に、メニューとウィジェットを設定していきます。
どちらもカスタマイザーか管理画面の「外観」から編集することができます。
この段階までくるとサイトの全体像も見えてきていると思いますので、作成してきたページからメニュー・ウィジェットにに表示したいものを追加していきましょう。

このテーマではウィジェットがフッターの左・中央・右の3つ、トップページの動画・地図と合計5つあります。
イベントを効果的にアピールしたい方は動画を、よりアクセス情報を分かりやすくしたい方は地図を追加してみるのがおすすめです。

トップページ:動画、地図のウィジェットを設定した様子

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

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

合計1時間半〜2時間ほどでできあがりました。
マニュアルをみながら一通り設定していくだけで、あっという間に完成!
入れるべき情報が視覚的にわかりやすく編集画面に表示されているので、見たまま操作・編集しているうちにサイトができあがっている印象でした。
特段難しい部分もなく、よりシンプルでよければ、さらにかかる時間は少なくなると思います。

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

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

ホームページの目的が明確に決まっている方には、非常におすすめのテーマです。ぜひ候補の1つに入れてみてはいかがでしょうか?