当記事では、WordPressテーマ「SWELL」でコーポレートサイトを作る手順をわかりやすく解説していきます。
さっそくですが、今回の記事で作り方を解説するコーポレートサイトのデモをご用意していますので、下記サイトをご覧ください。
装飾は一部CSSで整えていますが、ほとんどSWELLの標準機能のみで制作したものです。このようなコーポレートサイトを作る手順を5ステップでわかりやすくまとめましたので、ホームページを自作する際にお役立てください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
手順1. コーポレートサイトに必要なページ構成を整理する
いきなりサイトを作り始めるのではなく、まずはコーポレートサイトの基本ページ構成を考えていきましょう。
SWELL（WordPress）を使ったサイト制作では、トップページの他に「カテゴリ・固定ページ・投稿ページ」の3種類をうまく組み合わせながら制作していきます。
例えば今回デモとしてご用意したコーポレートサイトは、下記のようなページ構成で制作しています。
自社のコーポレートサイトに、どのような要素やページが必要なのか整理してメモしていきましょう。
とはいえまずはデモサイトの構成をそのまま流用して、あとから調整していっても構いません。
ここでは各ページの役割や使い方について解説していきます。
トップページ
トップページは、コーポレートサイトの顔になる部分です。訪れる方に見せたい情報をわかりやすく配置するとともに、会社のイメージを伝えられるようなデザインを取り入れましょう。
ブランディングにも関わりますので、オリジナル動画を活用したり、動きのあるアニメーションを取り入れたりと、遊び心のあるサイトデザインにする企業が増えています。
カテゴリ
SWELL（WordPress）では、記事にカテゴリを設定して整理できるようになっています。
定期的にページを作成していく予定の情報ジャンルは、その種類ごとにカテゴリを設定しておき、訪れた方が各記事に辿り着きやすいように整理しましょう。
今回のデモサイトでは「お知らせ」「導入事例」「コラム」のカテゴリを用意して、それぞれの個別記事が格納されるようにしてあります。
投稿ページ
カテゴリを用意した情報ジャンルについては、WordPressにある「投稿」の機能を使ってページを作っていきます。
ブログ記事のように更新できて、公開日や更新日が表示されるページです。
固定ページ
企業情報や採用情報、利用規約など更新頻度が高くない情報ページは「固定ページ」の機能で作っていきます。
今回のデモサイトでは「製品情報」も固定ページで用意していますが、新製品を早いペースでリリースしていく企業でしたら、カテゴリをつくって投稿ページで更新していっても良いかもしれません。
企業の業態やサービス内容にあわせて、構成を検討してみてください。
手順2. コーポレートサイトに掲載する素材を準備する
次に、コーポレートサイト内に用意するページにあわせて、画像や動画の素材を準備しておきましょう。
できれば自社で撮影したものがあるのがベストですが、素材サイトを利用する手段もあります。状況にあわせて検討してみてください。なお今回のデモサイトで使用している画像や動画は、すべてAdobeストックに登録していれば使える無料素材です。
必要な素材は、おもに下記の3種類です。
- ファーストビュー用の素材
- 製品や社員の素材
- 導入先企業の画像素材
ファーストビュー用の画像・動画素材
ファーストビューとは、Webサイトを開いて最初に目に入る部分のこと。デモサイトでいえば、下記の画面です。
コーポレートサイトのファーストビューには、一般的に企業イメージを伝えられるような画像や動画と、企業ロゴを掲載します。必要な画像や動画を用意しておきましょう。
なおメイン画像については、SWELLの機能で複数枚をスライドショーのように切り替えて表示することもできます。1枚に決めきれない場合は、何枚か用意しておくのもおすすめです。
製品や社員の写真・動画素材
次に、製品紹介や社員インタビュー、代表メッセージなどで使う写真や動画素材も必要です。
形のないサービスならフリー素材でも構いませんが、実際にプロダクトが存在する場合は、掲載する製品の写真を一通り用意しておくことをおすすめします。
製品導入先のロゴや画像素材
導入事例を掲載する場合は、導入先企業のロゴ画像や、顧客の使用写真などを用意しておきましょう。
導入事例として掲載して良いか確認する必要がありますので、仲の良い企業や顧客がいらっしゃるなら、インタビューへと協力してもらうのもおすすめです。
手順3. SWELLでコーポレートサイトを構築する
コーポレートサイトの構成を整理して素材を集めたら、いよいよサイトを作りましょう。
SWELLでコーポレートサイトを構築する手順を解説していきます。
1. レンタルサーバーにWordPressを設置
SWELLでサイトを制作するには、まずはレンタルサーバーを借りて、サーバー上にWordPressを設置する必要があります。
サーバー代は月額1,000円程度、WordPress本体は無料です。こういった作業に不慣れなようでしたら、レンタルサーバーはConoHa WINGがもっとも初心者向けだと感じますので、ご検討ください。
詳細な手順は下記の記事で解説していますので、まだWebサイト自体がない場合は、WordPressの設置から始めてください。
2. SWELLを購入してインストールする
WordPressが設置できたら、SWELLを購入してインストールしましょう。手順は下記のとおりです。
まずはSWELL公式サイト「ダウンロードページ」より、Stripeの決済フォームを利用してライセンスを購入します。
入力したメールアドレス宛に、フォーラムの登録方法やダウンロード方法などが送られますので、間違えないように入力してください。
マイページより、SWELLのテーマファイルをダウンロードします。
「SWELL 本体最新版」と「子テーマ」をダウンロードしてください。
WordPressの「外観→テーマ→新規追加→テーマのアップロード」と進み、まずは「SWELL 本体最新版」のファイルをインストールします。
その後「子テーマ」のファイルをインストールして、子テーマを有効化してください。
テーマを有効化すると、ユーザー認証が求められます。登録したメールアドレスで認証すると、利用規約への同意を求められ、その後は最新バージョンに更新できるようになります。
これでインストールは完了です。
ここまでくれば、すでにWebサイトの基礎が出来上がっています。
3. トップページの土台を用意する
コーポレートサイトの顔になる「トップページ」にするページを作成しましょう。一般的に「サイト型トップページ」と呼ばれるものを設定するのですが、これはSWELLの機能で標準搭載されています。
ページを用意する手順は、下記のとおりです。
- トップページ用のページを固定ページで作成する
- 新着記事一覧に使う固定ページを作成する
- カスタマイザーからサイト型トップページへ変更する
まずは空のページで問題ありませんので、上記のとおり設定しましょう。
とはいえこれだけだとわからないと思いますので、具体的な設定は下記の記事で詳しく解説しています。あわせてご覧ください。
手順4. SWELLでトップページデザインを作成する
次に、コーポレートサイトのトップページをデザインしていきましょう。
今回ご用意したデモサイトのトップページには、下記のように要素を並べています。
この構成を参考に、ページを作成していきましょう。全10項目に分けて、一つずつ順番に解説していきます。
- ファーストビュー
- ヘッダー
- お知らせ
- 企業の特徴
- 製品情報
- 導入事例
- ブログ記事（コラム）
- 会社情報
- 採用情報
- フッター
1. ファーストビュー
上記ファーストビューの大きな画面部分は、SWELLの「メインビジュアル」機能で作成します。
ダッシュボード「外観→カスタマイズ→トップページ→メインビジュアル」と進み、下記の項目を設定します。
- 表示内容：画像 or 動画
- 表示設定：メインビジュアルの高さ設定を「ウインドウサイズにフィットさせる」に。フィルターやカラーはお好みで設定。
- 画像 or 動画の設定：表示させたい動画や画像を設定
表示させるテキスト部分は、メインビジュアル機能内の「メインテキスト」や「サブテキスト」で設定することもできますし、ブログパーツ機能で作成したものを表示させることもできます。
ちなみにデモサイトの設定は、下記のとおりです。
テキスト部分はブログパーツで作っており、下記のような状態。フォントサイズを調整した程度で、とくに難しいことはしていません。
ひととおり設定して公開すると、メインビジュアルがトップページに表示されるようになります。
2. ヘッダーパーツ
ヘッダー部分は、ヘッダーロゴとグローバルナビで構成されています。
まずヘッダーロゴについては「外観→カスタマイズ→ヘッダー」と進み、画像やサイズを設定します。デモサイトでは下記のとおり設定しています。
グローバルナビは全ページに共通で表示されるメニューで、とくに顧客へと訴求したい項目を並べていきます。
「外観→カスタマイズ→メニュー→メニューを新規作成」と進み、必要な項目を追加。メニューの位置は「グローバルナビ」を選んで公開します。
デモサイトでは、下記のような設定にしています。
メニュー名の下にある小さな文字は「説明」欄に入れています。
なおデモサイトでは一番右上にお問い合わせボタンを設置していますが、これは「外観→カスタマイズ→ウィジェット→ヘッダー内部」から設定します。下記のとおり、ブログパーツで作成したボタンをカスタムHTMLから実装。
標準機能だけでここまでカスタムできます。
3. お知らせパーツ
ここからはトップページ用に設定した固定ページでデザインを作っていきます。
お知らせのパーツは「リッチカラム」と「投稿リスト」で実装しています。
デモサイトでは、リッチカラムの設定を下記のように「20%」と「80%」の幅しています。
投稿リスト部分の設定は、下記のとおり。
「お知らせ」カテゴリに紐づけた投稿記事を一覧表示する設定にしています。
4. 会社の特徴パーツ
次に、会社の特徴や理念などを説明する部分を用意しています。
ここは「メディアとテキスト」のパーツを使い、下記のように設定しました。
スタイルはブロークングリッドを使い、PC表示では画像を大きく表示したかったので、メディアの幅を少し大きめの60%に設定しています。
とくに難しいことはないかと思いますので、お好みにあわせて作成してください。
5. 製品情報パーツ
製品情報の部分も「メディアとテキスト」を使っています。ここでは「デフォルト」のスタイルを使い、画像とテキストの領域は半々に設定しました。
また各製品それぞれの詳細情報を固定ページで作成し、各ページへとリンクさせるボタンを設置しています。
ここも、好みに合わせて設定してみてください。
6. 導入事例パーツ
導入事例の部分は、メリハリをつけるために「フルワイド」ブロックで背景色を設定し、その上に「投稿リスト」ブロックで実装しています。
フルワイドブロックは、下記のような設定。
投稿リストは下記の設定にしてあります。
なお「導入事例」カテゴリを用意して、そこに紐づいている記事を表示する設定にしました。
7. コラムパーツ
コラム表示部分も、これまでのパーツの応用です。
リッチカラムで左右それぞれ30%、70%の幅に設定し、投稿リストで「お役立ちコラム」のカテゴリの記事だけを表示する設定にしてあります。
8. 会社情報パーツ
会社情報の部分は、フルワイドブロックに画像を設定して固定背景にした上に「50%-50%に設定したカラム」を設置して、カラムの左側のみを使ってテキストを載せています。
フルワイドブロックは下記のような設定。
テキスト部分の下部「代表メッセージ・会社概要・会社沿革」の部分は「リンクリスト」のブロックで実装しています。
別途「企業情報」のページを固定ページで作成して、それぞれの見出しへのページ内リンクを設置しています。
なおデモサイトでは、背景画像の関係でテキストが見づらくなったため、テキストを載せるカラムの背景色にCSSで白色を当てています。
9. 採用情報パーツ
採用情報の部分は「バナーリンク」のブロックで作成しています。
今回はバナーリンク内にある「Recruit」の文字に「h2タグ」を設定したかったのですが、標準機能では対応していなかったため、多少コードを書き換えて実装しています。
デザイン自体は下記のとおり設定しています。
採用情報のページを別途固定ページで作成して、そこにリンクさせています。
10. フッターパーツ
フッターパーツは、ウィジェットとメニューをつかって実装しています。
ウィジェット3箇所のパーツはそれぞれ個別に「ブログパーツ」で作成して実装しています。
フッターメニューの作り方はとくに難しくないと思いますが、下記のページも参考にして作成してください。
手順5. カテゴリや個別ページを作成していく
トップページのデザインがまとまれば、コーポレートサイトに必要なカテゴリや個別ページを作成していきましょう。
カテゴリの作成
今回のデモサイトでは、下記のとおりカテゴリを作成しています。
| カテゴリ名 | パーマリンク | 用途 |
|---|---|---|
| お知らせ | /news | 新着のお知らせ記事を格納していく。 ゴールデンウィーク休業、業務提携、プレスリリースなど。 |
| 導入事例 | /casestudy | 製品の導入事例記事を格納していく。 企業インタビューや顧客の声など。 |
| お役立ちコラム | /column | ブログ記事を格納していく。 業種に合わせた専門記事や、SEO集客記事など。 |
ちなみにカテゴリページの「ページに表示するサブタイトル」が、デフォルトだとcategoryと表示されますので、それをパーマリングと同じ英字に変えています。
これだけで少しスタイリッシュになりますので、参考にしてみてください。
利用規約/プライバシーポリシーページの作成
利用規約とプライバシーポリシーページは、かならず用意しておきましょう。
内容は、基本的にはテンプレで問題ありません。
ちなみに『Webサイトの利用規約』というサイトに「利用規約」と「プライバシーポリシー」の汎用テンプレートが掲載されており、筆者はいつもここからコピペして使っています。
特定商取引法に基づく表記ページを作成
Webサイト上でサービスや商品を販売する場合は「特定商取引法に基づく表記」の明記が義務付けられています。
今回のデモサイトは商品販売ページを想定していないので掲載していませんが、もし必要であれば作成しておきましょう。
お問い合わせフォームの作成
お問い合わせフォームもかならず用意しておきましょう。今回のデモサイトでは個別ページを作成していますが、トップページの下部にフォーム自体を設置してしまっても良いと思います。
デモサイトでは「コンタクトフォーム7」という無料プラグインで実装して、少しCSSでデザインを調整しています。
その他必要な記事ページの作成
あとは、お知らせや導入事例、コラム記事を必要なだけ作成・更新していってください。
いまさらかもしれませんが、WordPressで記事を書く基本的な方法については、下記のページで解説しています。
SWELLがコーポレートサイト制作に向いている理由
今さら感はありますが、SWELLがコーポレートサイト制作に向いている理由についてもお伝えしておきます。
テーマの更新頻度が高い
SWELLは開発者の了さんが意欲的に更新・開発に取り組んでおり、リリースから4年たった現在でも定期的にアップデートされているテーマです。
コーポレートサイトを作るときに、大きな懸念がメンテナンス性です。特定のテーマを使うと、更新が途絶えてしまったときに載せ替えを検討する必要が出てきますが、その点で更新頻度が高いのは安心材料になります。
コストを大きく抑えられる
Web制作会社にWordPress開発を依頼すると、基本的にはなにも機能がないところから開発してもらうことになります。
ゼロから自社専用テーマを作るのと同じような話ですから、当然ながらコストや時間がかかり、費用的には1件100万円〜程度の相場になります。
しかしSWELLを使えば、テーマ代17,600円で大部分の機能をまかなえます。WebデザイナーとWebエンジニア一人ずつに依頼したとしても、ゼロから開発するのとはコストに雲泥の差が出るはずです。
デザインの拡張性が高い
SWELLをつかっていて感じるのが、拡張性の高さです。
標準機能だけでもある程度の見た目に整えられるテーマですが、ある意味ではクセがなく、手を入れれば大きくカスタマイズできる魅力があります。
またSWELLはGPL100%のテーマであり、どれだけカスタマイズしても公式的に問題がないことも、コーポレートサイト制作に向いている部分です。
SWELLでコーポレートサイトを作ろう
今回解説した手順で進めていっていただくと、まったく同じデザインではないにせよ、似たようなコーポレートサイトが出来上がるはずです。
基本的なページ構成は今回のもので十分だと思いますので、あとはオリジナリティを出しながら、素敵なサイトを作っていってください。
