「会社のかっこいいホームページをつくりたい」
「コーポレートサイトをリニューアルしたい」
そんなご要望にお応えすべく開発されたWordPressテーマ「GENESIS」。ジェネシスと読めますが、あえてゲネシスとしています。起源や発生という意味を含んでいて、企業サイトの刷新にもご活用いただけるサイトテンプレートです。
レイアウトやアニメーションが特徴的で、テンプレートで作成したとは思えないスタイリッシュな企業サイトに仕上がります。
当記事ではGENESISの基本仕様、機能概要についてご紹介いたします。
目次
WordPressテーマ「GENESIS」とは
GENESISは、TCDからリリースされた第103作目のWordPressテーマで、企業のホームページ（コーポレートサイト）を制作するために開発されました。
企業のホームページは、インターネット上の看板となるので非常に重要です。ホームページがイケてるかダサいかで、その企業のイメージを180度変える可能性すらあります。
ですからGENESISでは、スタイリッシュでかっこいいイメージとともに、企業のスローガンやビジョンを真っ直ぐに伝えられるように設計されています。基本仕様や制作できるサイトの事例は次の通りです。
基本仕様（できること）
企業サイト向けのGENESISに搭載されている基本仕様は、次の通りです。
- トップページヘッダーのレイアウト3種（静止画/動画も設置可）
- 印象的なアニメーションやレイアウト
- CSRやプレスリリースを発信するページ作成機能
- 事業内容や実績を掲載するページ作成機能
- 会社情報やビジョンを掲載するページ作成機能
企業サイトに必要なコンテンツをテンプレートに倣って作成でき、訪問者の印象に残るデザインで設計されています。
また、GENESISでは「初心者でも操作しやすい設定画面」を意識し、UIに改良が加えられました。
操作しやすいUIについては、後述しています。
→新しくなったテーマオプションのUI
制作できるサイトの事例
GENESISは企業サイトのほかにも、次のようなサイトの制作に適しています。
- WEBサービス
- 士業や議員のホームページ
- 環境保護団体や慈善団体
- フリーランスのポートフォリオ
- ブランディングサイト
すべてに共通しているのは、メッセージ性が特に強く求められる業種ですね。
ユーザーに響くキャッチコピーや、スローガンにマニフェストなど、強いメッセージ性の訴求に適したサイトと相性がいいテンプレートです。各所に英語を配置することを想定したデザインは、欧米圏のユーザーを対象としたサイトにもマッチします。>> 英語版のデモサイトはこちら
伝えたいことをテンプレートに当てはめると、綺麗にレイアウトされます。その印象的なデザインは個人のブランディングにも十二分に活用可能です。
新しくなったテーマオプションのUI
GENESISの機能概要をご紹介する前に、少しだけお時間をください。GENESISでは、初めてTCDテーマを操作する方にも使いやすいように、テーマオプションのUIを刷新しています。
「サイト上のどこに反映されるのか。」
「何のための機能なのか。」
操作画面内でそれらを確認しやすいように、イメージ画像を設置して、設定箇所に番号を振っています。
これはトップページの「サービス一覧」を設定する画面ですが、どこに何が反映されるのかが直感的にわかります。設定項目によって補足説明も記載されているので、設定に迷うことはないはずです。
最悪迷ってもテーマ付属の操作マニュアルがあなたの力になりますし、もちろん弊社サポートにもお問い合わせも可能です。その他のテーマオプションのUIは、こちらの記事でご覧いただけます。
TCDテーマでつくれるサイトは、ほとんどの設定をテーマオプションで行えるようになっています。当記事では、サイトの全体に横断して反映される箇所をまとめた「基本設定」のUIをご紹介いたします。
GENESISの機能概要
ここからは、GENESISの仕様や機能を個別にご紹介いたします。企業サイトをつくる想定で、各機能をご紹介しますが、「私ならこう使う。」そんな風にイメージを膨らませていただけますと嬉しいです。
ロード画面
まずは、どーんと表示されるこのロード画面。
動きを見ていただくには、こちらのデモサイトをご覧になってみてください。
>> デモサイト
2枚のスライドが切り替わる動きをします。1枚目にキャッチフレーズ、2枚目にロゴ画像という形です。従来のテーマにはなかったGENESIS独自の仕様です。
ワンクッション置いてから、2枚目がスライドするアニメーションは、一度見たらかなり記憶に残る動きではないでしょうか。映画のオープニングのような高揚感を与えてくれますね。
当然、次のようなシンプルにアイコンのみを表示するロード画面にも変更できますし、
表示ページや回数も設定可能なので、わずらわしさを与える心配はありません。
トップページヘッダー
次に特徴的なのは、このヘッダースライダーです。
横2段に分割されていて、上部にキャッチフレーズ、下部にメディアコンテンツ（画像か動画）をセットできます。
デモサイトでは下半分に動画をセットしていますが、上下を入れ替えたり、画像を複数枚セットしたり、全画面で動画を見せたり、バリエーション豊かに変更できます。
それぞれデモページでご確認いただけます。
設定画面は以下のようになっていて、いつでもワンタッチで変更可能です。
フォントタイプやサイズもお好みで変更いただけます。
トップページのメインコンテンツ
ヘッダースライダー以下の下記箇所。トップページのメインコンテンツですね。
ここはブロックを組み上げていくように簡単に作成できます。上の画像と見比べていただけると、どれが何の設定箇所かお分かりいただけるかと思います。
このUIでは、ドラッグして並び替えや表示/非表示（ON/OFF）もワンタッチです。後述する各種ページを作成しておけば、お好きな順に登録するだけで、下層ページへの導線が完成する仕組みです。
各項目が先述の新しいUIになっていますので、迷うことなく操作可能です。
HTMLが使える「フリースペース」も用意されているので、完全オリジナルのコンテンツを差し込むことも可能です。例えば、バナー画像やアクセスマップなどですね。クイックタグを使うと、こんな風に地図を埋め込むのも10秒でできます。
カスタム投稿「お知らせ」
続いてご紹介するのは、CSRやプレスリリースに適した投稿タイプ「お知らせ」です。
個別にカテゴリーを設定できて、クリックすると情報を絞り込むこともできます。ぜひデモページで試してみてください。
「プレスリリースだけを見る」
「CSRだけを見る」
訪問者のそんなご要望をサクッと解決します。
あと、もう一点お伝えしたいのは、アイキャッチ画像無しでも使えるという点。
企業サイトでは特に鮮度が重要な情報があります。事務所の移転や休業情報、2023年9月時点でタイムリーなことでいえば、インボイス制度への対応などでしょうか。
こういった情報はすぐに掲載した方がいい。ということで、アイキャッチ画像無しでも使える仕様になっています。デモサイトではアイキャッチ画像を設定していますが、無しの場合はこのように表示される仕様です。
カスタム投稿「サービス」
カスタム投稿「サービス」は、事業内容や実績の掲載を想定した機能です。
例えばデモサイトでは、SOCIETY（循環型社会事業）というカテゴリーに属するサービスが2つ掲載されている箇所があります。
カテゴリー名とその説明書きのすぐ下に、そのカテゴリーに紐づくサービスが表示されています。
で、この機能が特徴的なのは、事業内容を階層化できる点にあります。上の例では1ページ内ですべての事業が紹介されているので、階層にはなっていません。
ですが、これではサービス（事業）数が多い場合に、ページが長くなってしまいます。そこで、階層化できる別タイプのアーカイブページも使えるようになっているわけです。
このようにカテゴリーページへリンクするボタンが表示されるんですね。クリックすると次のようなページに飛びます。
「SOCIETY」カテゴリーに属した記事が4記事表示されている例です。ページ上部には、パンくずリンクも表示されています。
つまり、カテゴリーごとにページを用意するか否かを、サイトの規模に合わせて選択できる機能というわけです。記事が増えていくような運用（実績の掲載など）の場合は、階層化して整理できますね。
・実績や商品紹介などとして使う場合：カテゴリーページ有り
ユーザー様次第で、いかようにも使い分けていただけます。途中でタイプを変更することも可能ですし、操作はワンタッチです。
固定ページ作成機能
ABOUTページなど、会社情報の掲載に利用される固定ページ。GENESISには、そんな固定ページをスマートにデザインできるページテンプレートが搭載されています。
例えば、ABOUTページはこんな雰囲気。
こういうページを1からレイアウトするのは、難しいんですよね。余白が広い分、どこかが僅かにズレても気づきにくかったり、スマホでどのようにレイアウトするのかは、一筋縄ではいきません。
そこをお任せできるのが、GENESISのページテンプレートです。ぜひ次のページをPC/スマホでもチェックしてみてください。こんなページを簡単につくれるテンプレートが内蔵されています。
>> デモサイトのABOUTページを見る
>> デモサイトのCOMPANYページを見る
他には、次のような固定ページもつくれます。
ヘッダー画像やメニュー項目の有無、コンテンツ幅の違いなど、さまざまなバリエーションで固定ページをつくれるんですね。
で、その設定箇所はというと、
上記のような画像と項目で、設定をポチポチ切り替えられる仕様です。難しいコーディングは一切不要で、レイアウトを変更いただけます。
ブログやお知らせページと同じレイアウトで、右側のサイドバー（ウィジェットエリア）有りの「通常の固定ページ」をつくることも可能です。
>> 通常の固定ページのデモ
専用のクイックタグと汎用クラス
先ほどの固定ページを見て疑問に思った方もいるかもしれませんが、GENESISでは、特徴的なデザインを多くの箇所に使っています。
次のような左右にテキストを配置したデザインや、
画像やテキストがアニメーションして表示されるデザインなどです。
通常、こういったデザインをつくるにはHTMLやCSSを使って作成しますが、GENESISでは専用のクイックタグや汎用クラスをご用意していますので、簡単に実現いただけます。
複雑なレイアウトだけでなく、綺麗なアニメーションまでもワンタッチで再現可能です。GENESISで実現できる装飾はこちらの記事にまとめていますので、ぜひご覧ください。
GENESISは横並びにレイアウトされているデザインが特徴的ですが、クイックタグで簡単に再現できます。クイックタグの他、スタイルが指定されている便利な汎用クラスも用意しているので、こちらでご紹介いたします。
企業サイトのアップデートはGENESISで
WordPressテーマ「GENESIS」の基本仕様と機能概要についてご紹介いたしました。
- スローガンやメッセージを印象に残すデザインやレイアウト
- 事業内容や実績の掲載など、企業サイトに必要なコンテンツを想定したテンプレート
GENESISの特徴は大きく分けてこの二つに集約されます。その上、細部の設定まで、初心者の方でも操作できるようにUIが進化しています。
なので、後から編集したり、設定を変更するのもスムーズに操作いただけるんですよね。企業サイトは一度完成すると放置されがちですが、こまめに管理、アップデートしていくことが重要です。
企業サイトの制作・運営には、ぜひGENESISをお役立てください。
コメント