オンライン化が急加速している今の時代、企業のホームページは極めて大きな看板のひとつとなり、新しい時代の会社の顔といえます。
TCDでは、さまざなまWordPressテーマを世に送り出し続けていますが、企業サイト（コーポレートサイト）用のテンプレートには特に定評があります。現にTCDの中でも特に人気のあるテーマは、NANOやFAKE、CUREなどコーポレートサイトに活用できるものが多いです。
そんな私たちが、本日リリースした最新の企業サイト向けテンプレートが「SOLARIS」です。本稿ではSOLARISで企業サイトを制作する手順を機能解説と共にご紹介いたします。
目次
WordPressテーマ「SOLARIS」の特徴
まずはSOLARISがどんなテーマというところから。一言でいうと中規模以上の本格的な企業サイトをサクサク制作できるテーマです。具体的な特徴は以下のような感じです。
- スマートで堅実性のあるデザイン
- 不要な設定項目がない（設定項目の簡略化）
- 上記によってテーマ自体の軽量化を実現
- すべてのページを記事を書くように作成できる
- 企業サイトを簡単に形作るページ制作機能
1.企業サイト（自社のホームページ）の骨組みを作る
WordPressテーマ「SOLARIS」を例に自社サイトをつくる手順を解説いたします。テーマはあくまで入れ物なので、そこに何を入れるかによってサイトのクオリティは大きく変わります。
低コストで自社サイトを作る方法やそのメリットは下記記事でもご覧いただけます。
「会社のホームページを費用を抑えて早くつくりたい」 という方向けに、初心者でも挑戦できる会社のホームページ（自社サイト）の作り方と、そのメリットがわかる記事を書いてみました。よろしければ参考にしてみてください。 低コストで本格的な企業サイトをつくる方法とは？ 低コストで本格的なサイトをつく...
企業サイトの骨組みとなるあなたの会社の基本情報やアピールしたいコンテンツをリストアップすれば、SOLARISに用意されているページ制作機能に当てはめていくだけでスムーズに企業サイトを制作できます。
1-1.企業の基本情報リストアップする
まずは会社のホームページでアピールしたいコンテンツをリストアップしてみましょう。ここでリストアップしたものが、サイトの骨組みとなります。
どんな企業でも用意できるのは、以下のような企業の基本情報コンテンツですね。
- 代表の挨拶
- 企業理念
- 会社概要
その他にも、従業員や提携先企業の紹介や、沿革、アクセス情報などもコンテンツとして盛り込めます。ここまでは基本情報としてどの企業でも作成できると思います。
これらに加えて、企業毎に異なる事業の内容や実績などを掲載し、どんな企業であるかを訴求していきます。事業内容はもちろんですが、企業の基本情報は意外とよく見られているコンテンツです。
あなたが何かの商品を買う時やサービスを契約する際に訪れるのはその会社のウェブサイトではないでしょうか。中でもその企業を信用できるかどうかを見極めるために、企業の基本情報に目を通すと思います。
以上の理由からも、まずは基本情報からしっかりと作り込みましょう。
1-2.SOLARISのカスタム投稿「企業情報」へセットする
先ほどリストアップした基本情報は、SOLARISのカスタム投稿タイプ「企業情報」に当てはめていきます。デモサイトでは下記のよう分類し6ページ制作しています。
少なくとも「提携会社」以外は、どの企業でも作成できると思います。それぞれ同じカスタム投稿タイプで制作していますが、本文の内容は通常の投稿（ビジュアルエディター/クラシックエディター）と同様の要領で作成できます。
ボタン一つでデザインされた見出しを出力できるクイックタグももちろんご活用いただけます。
下記のように入力欄も用意されているので、まずは項目を埋めてアイキャッチ画像をセットするだけでもページのイメージが湧いてくるはずです。
いくつか企業情報ページを作るとこのようなアーカイブページが自動で生成されるので、サイトの全体像がイメージしやすくなります。
1-3.新商品のリリース情報などの会社のタイムリーな情報をリストアップ
次に会社で起こったタイムリーな変化をリストアップしてみましょう。新事業の開始でも、新事務所の設立でもいいですし、新しい商品やサービスの取り扱いの開始や、休業期間のお知らせでもいいです。
最近会社で起きた鮮度の高い情報をまとめてみましょう。
1-4.カスタム投稿タイプ「お知らせ」にセットする
タイムリーな情報がコンテンツ化できそうなら、カテゴリー別に分けれるか検討してみてください。IR情報や、通常のお知らせ、重要なお知らせ、採用情報などいくつかのカテゴリーに分けれると思います。
数が増えても見やすいので、カテゴリー分けしておくことをおすすめします。SOLARISのお知らせ一覧ページではワンタッチでソートできる仕様なので、目的のお知らせへとすぐにリーチできます。
さらにSOLARISでは、企業のお知らせを手軽に投稿できるようにアイキャッチ画像無しでも自然なレイアウトで表示できます。詳しくはデモサイト内の下記の記事をご覧ください。
→プレスリリースや企業活動の更新などに使えるワンカラムデザインの「お知らせ」
1-5.企業の事業内容をコンテンツ化する
続いて、あなたの会社の事業を整理してコンテンツ化する準備をします。まずは営んでいる事業を大きい括りでカテゴリー分けしてみてください。例えば建設業なら外壁、内装などの単位で分けてもいいかもしれません。外壁だけに特化しているならその中で細分化したページを作成するイメージです。
まずはざっくりとしたカテゴリーで分けるので2つ〜5つぐらいで分類してみましょう。
1-6.カスタム投稿「サービス」に事業内容をセットする
上記でカテゴリー分けした事業内容をSOLARISに用意されているカスタム投稿タイプ「サービス」にセットします。デモサイトでは事業を4分割し以下の4ページを制作した例になります。
先ほどのカスタム投稿タイプ「企業情報」と同じく、通常の投稿と同じエディターで作成できます。
下記の入力項目も用意されているので、画像をセットすると美しいレイアウトで事業の一覧ページが自動生成される仕様です。
1-7.詳細な事業内容やプロジェクト、実績を整理する
次は、先ほどざっくりと分けた事業内容をより詳しいレベルで細分化してみましょう。先ほどの例に倣うと、大きな括りの外壁工事をカスタム投稿「サービス」にセットして、外壁の種類別の施工事例などをここでまとめます。日々増えていくコンテンツをカスタム投稿タイプ「プロジェクト」でつくるイメージです。
必ずしもサービスページとプロジェクトページに関連性を持たせる必要はなく、それぞれを個別に使うこともできます。
1-8.カスタム投稿「プロジェクト」へセットする
事業内容を細分化できたら、カスタム投稿タイプ「プロジェクト」にセットしていきましょう。このプロジェクトページは、カテゴリーで整理できてページャーも表示される仕様なので更新頻度の高いコンテンツに向いています。
編集画面は通常の記事と同じエディターで編集できるので、SOLARIS用に追加されている新しいクイックタグ機能などを活用して自由に制作可能です。
ご覧のようにカテゴリーも設定できるので、増え続けるプロジェクトや実績をアーカイブしていくのに最適な投稿タイプになります。
2.トップページにセットするコンテンツを考える
上記4-2.までの手順を踏めば、ある程度サイトの骨組みが出来上がっています。最後にトップページの設定を行います。自社サイトの顔となるトップページなので、どのコンテンツを見せたいかしっかりと検討しましょう。基本的にトップページの構成は、先ほどまでの手順で制作した下層ページへの導線ということになります。
2-1.最初に目に入るヘッダーコンテンツを考える
企業サイトを検索時にユーザーが最初に目にするページは、トップページのヘッダーコンテンツです。
ここで企業の最初の印象が決まるので、ぜひこだわって作り上げてみてください。上記デモサイトでは4枚の画像をセットしてスライダー形式で表示しています（動画もセット可）。それぞれにキャッチフレーズを登録し、一部のスライドに下層へのボタンを表示しています。
また、デモサイトでは読み込み中の画面でキャッチフレーズを表示する設定にしていますので、第一印象でメッセージを訴求できるようになっています。
ロード画面については、こちらの記事をご覧ください。
→ロードアイコンのタイプとロード完了後のアニメーションをリニューアルしました！
2-2.下層への導線を自由自在に組み立てる
次にヘッダーより下の部分です。この部分は追加・並び替えが簡単に行えるコンテンツビルダー形式なのでトップページのコンテンツがスムーズに組み上がります。
以下のような設定画面なので、先ほど制作した下層ページの導線となる「お知らせ一覧」「サービス一覧」「プロジェクト一覧」の3つを追加してみましょう。
トップページで表示を確認すると、先ほど制作した下層ページのコンテンツ3つが以下のように反映されます。
これだけでも上記のようなトップページが出来上がりますが、SOLARISには「タブコンテンツ」と「フリースペース」も用意されています。
詳しい機能は別記事で紹介いたしますが、デモサイトのトップページでは上記2点もセットして、企業のメッセージを発信したり、会社情報のページへの導線として活用しています。必要なコンテンツだけを表示してもいいですし、並び替えたり、データを残したまま非表示にすることも可能です。
3.最後の仕上げにフォントやカラーを一括設定する
ここまででサイトの大部分が完成しました。最後の仕上げとして行うことをおすすめしているのが、全体のフォントやカラーリングの設定です。当記事では、グローバルメニューやフッターメニューの設定は割愛していますが、下記記事を参考にご覧いただけます。
2021/3/31 情報を更新いたしました。 WordPressサイトのヘッダーやフッターのメニュー項目は、管理画面から設定できます。例えば、当サイトのグローバルメニューもナビゲーションメニュー機能で作成しています。 当記事では、ナビゲーションメニューの設定方法について解説します。 ...
「フッターは見られない。」 「見られたとしても細かくは見ていない。」 「だから、適当でいい。」 あなたは「フッター」に対してこのような勘違いをしていませんか。ヘッダーは作り込んでいるのに、フッターで手が抜かれているWebサイト（ホームページ）は珍しくありません。もちろんフッターを抜くと、サ...
3-1.サイト全体のフォントを調整する設定
最初に仮で設定しておいてもいいのですが、ある程度サイトが形になってきた時に、最終調整をしておくとより美しいサイトに仕上がります。
SOLARISでは、見出しサイズや本文や説明文などのフォントタイプやサイズを一括で変更できます。TCDのデザイン観を元に揃えるべきところには、一括適用される仕様です。一部だけ異なる雰囲気で違和感を感じることがありません。
変更しても違和感の感じにくい部分は、調整できる仕様なので、一定の自由度も担保されています。
3-2.メインカラー・サブカラーの設定
ここで企業やブランドのキーカラーをサイトのメインカラーとして設定します。
メインカラーを変更すると多くの場所に適用されるので、サイトのイメージがガラッと変わります。多くの箇所でメインカラーを適用するかどうかも選択できるので、一部だけ色を変更することも可能です。
サブカラーは、基本的にホバーカラーという風に認識いただければ大丈夫です。カーソルをリンクできる箇所に重ねた際に適用されるカラーになります。
SOLARISのメインカラーとサブカラーには、あまり大きな差が生まれないように以下の2点に注意して設定しましょう。
- 可読性
- デザイン性
まずは、カーソルを合わせた際に適用されたサブカラーによってテキストが読みにくくならないかどうか。
もう一点は、メインカラーが適用されているボタン等にホバーした際の色の変化に注目してみましょう。SOLARISのデモサイトではメインカラーを「#00729f」に設定していて、サブカラーを「#004968」に設定しています。デモサイトのボタンをご覧いただければわかりますが、サブカラーには、メインカラーよりも濃い同系色のカラーを設定しています。
必ずしもホバーカラーを濃くさせる必要はないので、同系色で薄くさせるなど企業のメインカラーに合わせて、サブカラーを設定してみてください。
SOLARISで本格的な企業サイトをスマートにつくろう
ここまで設定すると企業サイトとして形になってきたのではないでしょうか。SOLARISでは各ページの設定項目や、テーマオプションの設定項目数をスリム化しているので、自社サイトリリースまでのスピードをアップできます。項目を削ぎ落としたことによって、サイトの自体の軽量化にも成功しています。デモサイトもサクサク表示されているはずです。
本格的な企業サイトをSOLARISを使って制作する流れを解説いたしましたが、ウェブサイトは定期的に更新することでその真価を発揮します。事業の内容やお客様に役立つ情報を企業サイト内でコンテンツ化し、オンラインからもあなたの会社を宣伝しましょう。
コメント