SWELLは、ブロックエディタだけでコーポレートサイト（企業サイト）を組めるテーマです。
この記事では、当方がSWELLで作った企業向けのデモサイトを例に、ページ構成を決めてから公開するまでの順番を説明します。
| 手順 | やること | 使う機能 |
|---|---|---|
| 1. ページ構成を決める | 会社情報・サービス・実績・お知らせ・ブログ・お問い合わせを決める | — |
| 2. ページとカテゴリーを作る | 会社情報などは固定ページ、お知らせとブログは投稿で作る | 固定ページ・カテゴリー |
| 3. ヘッダーとメニュー | ロゴを置き、グローバルナビにメニューを割り当てる | カスタマイザー・メニュー |
| 4. トップページ | メインビジュアルと、実績・サービス・新着の区画を作る | メインビジュアル・フルワイド・リッチカラム・投稿リスト |
| 5. お問い合わせ | フォームとサンクスページを作る | フォームのプラグイン |
| 6. 公開前の確認 | スマホ表示・検索エンジンの設定・フォームの送信テスト | — |
完成形は、企業向けSWELLデモサイトで見られます。
作る前に用意するもの
サーバーにWordPressを入れ、SWELLを有効にしておきます。
手順はWordPressの始め方とSWELLの購入とインストール手順にまとめています。
会社のサイトに使う場合は、会社（サイトを管理する人）が購入者になるように買っておくと、担当者が替わっても更新を続けられます。
お客様のサイトを作って渡す場合の決まりは、SWELLのライセンス・利用規約で整理しています。
テーマはSWELL公式サイトから購入できます。
1. ページ構成を決める
先に、どのページを作るかを決めます。
デモサイトでは、次の6つの構成にしています。
| ページ | 役割 | 作り方 |
|---|---|---|
| 会社情報 | 所在地・代表者・沿革など、会社の基本情報 | 固定ページ |
| サービス | 何を提供しているか、料金や流れ | 固定ページ |
| 制作実績（事例） | これまでの仕事を見せる | 固定ページ、または投稿のカテゴリー |
| お知らせ | 休業日や新サービスなどの告知 | 投稿（カテゴリー「お知らせ」） |
| ブログ | 専門分野の情報発信 | 投稿（カテゴリー「ブログ」） |
| お問い合わせ | 問い合わせを受け付ける | 固定ページ＋フォーム |
お知らせとブログを投稿で作っておくと、トップページに新着を自動で並べられます。
実績が多い会社や、事例を増やしていく予定がある場合は、実績も投稿のカテゴリーにしておくと並べ替えが楽です。
2. 固定ページとカテゴリーを作る
会社情報・サービス・お問い合わせは、固定ページで作ります。
スラッグ（URLの末尾）は company・service・contact のように英語にしておくと、URLが読みやすくなります。
お知らせとブログは、投稿のカテゴリーとして作ります。
URLの形を決めるパーマリンクの設定は、記事が増えてから変えると手直しが広がるので、ここで済ませます。
設定の場所はWordPressの初期設定チェックリストにまとめています。
3. ヘッダーとメニューを整える
ロゴは、カスタマイザーの「ヘッダー」にある「ロゴ画像の設定」で入れます。
メニューは「外観」＞「メニュー」で作り、位置を「グローバルナビ」にするとヘッダーに出ます。
スマホで出すメニューは、「スマホ開閉メニュー内」の位置に別で割り当てられます。
会社情報・サービス・実績・お知らせ・ブログの5つ程度に絞ると、スマホでも一目で見渡せます。
幅が960px前後の画面でヘッダーが崩れるときは、960px付近のヘッダーの表示崩れ対策で直せます。
フッターにロゴや連絡先を入れる方法は、次の記事にあります。
4. トップページを作る
トップページは、固定ページを1枚作って「設定」＞「表示設定」でホームページに指定します。
中身の組み方はSWELLでサイト型トップページを作るで、手順を追って説明しています。
デモサイトのトップページの並び
デモサイトのトップページは、上から次の順に区画を並べています。
| 区画 | 中身 | 使ったブロック・機能 |
|---|---|---|
| メインビジュアル | 会社の第一印象を決める画像と一言 | カスタマイザー「トップページ」＞「メインビジュアル」 |
| Works | 制作実績 | フルワイド・投稿リスト・ボタン |
| Service | 提供しているサービス | フルワイド・リッチカラム・ボタン |
| About us | 会社の紹介 | フルワイド・リッチカラム・ボタン |
| News | お知らせの新着 | 投稿リスト |
| Blog | ブログの新着 | 投稿リスト・ボタン |
| Contact | 連絡先の案内と、その場で送れるフォーム | フルワイド・ボックスメニュー・フォーム |
区画ごとにフルワイドブロックで背景を分けると、ページが長くなっても切れ目が分かりやすくなります。
区画の余白を調整したいときや、メインビジュアルまわりを変えたいときは、次の記事が使えます。
5. お問い合わせフォームを置く
SWELLにはフォームの機能が無いので、フォームはプラグインで作ります。
デモサイトでは、Snow Monkey Forms を使っています。
送信後にサンクスページへ移る形にしておくと、問い合わせの数をアクセス解析で数えられます。
- Snow Monkey Formsの使い方｜設置から必須マーク・サンクスページまで
- 送信完了後サンクスページにリダイレクトする方法
- プライバシーポリシーをお問い合わせに埋め込む方法
- Snow Monkey Forms のカスタマイズ・設定方法まとめ
問い合わせのメールが届かない、迷惑メールに入る、というときはお問い合わせメールが届かない場合の設定方法を確かめてください。
6. 公開前に確かめること
- スマホで全ページを開き、メニューと表の表示が崩れていないか
- 「設定」＞「表示設定」の「検索エンジンがサイトをインデックスしないようにする」が外れているか
- 各ページのタイトルと説明文が入っているか
- お問い合わせをテスト送信し、会社宛てと送信者宛ての両方のメールが届くか
- サイトの表示が遅すぎないか
タイトルと説明文は、SEO SIMPLE PACKで入れられます。
入れておくプラグインの目安は、入れるべきWordPressプラグイン／入れてはいけないプラグインにまとめています。
業種別のデモサイト
業種ごとの見せ方の例として、SWELLで作ったデモサイトを公開しています。
どれもブロックエディタで組んでいるので、構成を決めるときの参考にしてください。
| 業種 | デモサイト |
|---|---|
| 企業・コーポレートサイト | 企業向けデモ |
| 歯科医院 | 歯科向けデモ |
| 税理士事務所 | 税理士向けデモ |
| 美容院 | 美容院向けデモ |
| 学習塾 | 学習塾向けデモ |
| 音楽教室 | 音楽教室向けデモ |
| ヨガ教室 | ヨガ教室向けデモ |
| 飲食店（寿司屋） | 寿司屋向けデモ |
| 民泊 | 民泊向けデモ |
ほかのデモはSWELLのデモサイト一覧にまとめています。
まとめ
SWELLでコーポレートサイトを作るときは、ページ構成を先に決め、固定ページと投稿を使い分けるところから始めます。
トップページはフルワイドの区画を重ね、お知らせとブログは投稿リストで新着を自動で並べます。
フォームはプラグインで作り、公開前にテスト送信まで済ませておきます。
買う前の確認から入れたあとまでの流れは、SWELL導入ガイドにまとめています。
