Swellでコーポレートサイトの作り方|制作者が教える設計ガイド

「Swellでコーポレートサイトって本当に作れるの?」「ブログ向けテーマじゃないの?」

こうしたご質問をよくいただきます。結論から言うと、Swellはコーポレートサイト制作に非常に適したテーマです。私自身、中小企業のコーポレートサイトをSwellで何件も制作してきましたが、クライアントの満足度は総じて高いです。

正直に言うと、Swellはもともとブログ向けテーマとして知名度を上げましたが、アップデートを重ねるうちにコーポレートサイトにも十分対応できる機能を備えるようになりました。この記事では、Swellでコーポレートサイトを作るための設計ガイドを、制作者の視点から解説します。


目次

Swellとは?── コーポレートサイトに選ばれる理由

Swellの基本情報

Swell(スウェル)は、日本人開発者の了さんが開発したWordPress有料テーマです。

項目内容
価格¥17,600(税込・買い切り)
ライセンス複数サイトで使用可(GPL100%)
対応エディタブロックエディタ完全対応
レスポンシブ標準対応
日本語対応ネイティブ対応(国産テーマ)

コーポレートサイトに向いている5つの理由

  1. ブロックエディタ完全対応 ── 直感的にページを構築でき、制作後にクライアントご自身で更新しやすい
  2. カスタマイズ性が高い ── カスタマイザーだけで色・フォント・レイアウトを自由に変更可能
  3. 高速表示 ── テーマ内部で速度最適化がされており、追加プラグインが最小限で済む
  4. 日本語に最適化 ── 見出し・本文のタイポグラフィが日本語前提で設計されている
  5. 複数サイトで使い回せる ── 一度購入すれば、お客様のサイトにも使用可能

「クライアントに引き渡した後の運用のしやすさ」でSwellに勝るテーマはなかなかありません。管理画面が直感的なので、「更新の仕方がわからない」というお問い合わせが激減しました。


コーポレートサイトの推奨ページ構成

最低限必要な5ページ

中小企業のコーポレートサイトに最低限必要なページは、以下の5つです。

ページ役割Swellでの作り方
トップページ会社の第一印象を決める固定ページ+フルワイドブロック
会社概要信頼性を伝える固定ページ+テーブルブロック
サービス紹介何をしている会社かを伝える固定ページ+カラムブロック
お問い合わせコンバージョンポイント固定ページ+Contact Form 7
プライバシーポリシー法的要件を満たす固定ページ+テキスト

成果を出すために追加したい5ページ

余裕があれば、以下のページも追加すると集客力と信頼性が大幅にアップします。

  1. 実績・事例紹介 ── お客様が最も重視するページ。「この会社に頼んで大丈夫か」の判断材料になる
  2. 代表挨拶・スタッフ紹介 ── 顔が見えることで安心感が生まれる
  3. よくある質問(FAQ) ── 問い合わせ前の不安を解消し、コンバージョン率を向上させる
  4. ブログ・お知らせ ── SEO対策+会社の活動を発信する場
  5. 採用情報 ── 採用を行う企業には必須

ページ構成に迷った場合は、ホームページに載せるべきコンテンツの記事も参考にしてください。

トップページの構成テンプレート

制作者として推奨する、コーポレートサイトのトップページ構成です。

  1. メインビジュアル ── キャッチコピー+CTA(Swellのメインビジュアル機能)
  2. 事業内容の概要 ── 3カラムでサービスを簡潔に紹介(カラムブロック)
  3. 選ばれる理由 ── 3〜5つの強みを提示(フルワイドブロック+リストブロック)
  4. 実績・事例 ── 信頼の裏付け(投稿リストブロック)
  5. お客様の声 ── 第三者評価(Swellのふきだしブロック)
  6. 会社概要の抜粋 ── 基本情報を簡潔に(テーブルブロック)
  7. お問い合わせ誘導 ── CTAボタン(SWELLボタンブロック)
Swellテーマで作成されたWebサイトでトップページを構成する要素を列挙した概念図


Swellでコーポレートサイトを設計する5つのポイント

ポイント1. トップページは「固定ページ」で作る

Swellの初期設定では、トップページにブログ記事一覧が表示されます。コーポレートサイトでは、表示設定を「固定ページ」に変更することが必須です。

設定手順:

  1. 「設定」→「表示設定」を開く
  2. 「ホームページの表示」を「固定ページ」に変更
  3. ホームページに使用する固定ページを選択
  4. 投稿ページに使用する固定ページを選択(ブログ一覧用)
Swellのブロックエディタでコーポレートサイトのトップページを固定ページとして編集している画面
Swellではトップページを「固定ページ」として作成し、ブロックエディタでセクション
を組み立てる(自社サイトのトップページ編集画面)

ポイント2. フルワイドブロックでセクション分けする

Swellのフルワイドブロックは、コーポレートサイトのデザインに欠かせない機能です。

画面の横幅いっぱいに背景色を設定でき、セクションごとに視覚的な区切りを作れます。コーポレートサイトの「きちんとした印象」を出すには、このブロックを活用するのが鉄則です。

  • 白背景のセクション → 事業内容
  • グレー背景のセクション → 選ばれる理由
  • ブランドカラー背景のセクション → CTA

このように交互に配色を変えると、メリハリのあるデザインになります。

ポイント3. カラー設定はブランドカラーを最初に決める

Swellのカスタマイザーでは、サイト全体のカラーを一括で設定できます。

コーポレートサイトで設定すべき色は以下の3つです。

色の種類用途設定場所
メインカラーヘッダー、ボタン、見出しカスタマイザー → サイト全体設定
テキストカラー本文通常は #333 を推奨
アクセントカラーCTA、強調メインカラーの補色

正直に言うと、色の選び方一つでサイトの印象は大きく変わります。迷ったら、ロゴの色をメインカラーにするのが最も失敗しない方法です。

ポイント4. ヘッダー・フッターを整える

コーポレートサイトのヘッダーは、ロゴ+グローバルナビゲーション(サイト上部のメニュー)が基本です。

Swellでは、カスタマイザーの「ヘッダー」設定から以下をカスタマイズできます。

  • ロゴ画像の設置・サイズ調整
  • ヘッダーレイアウト(ロゴ位置:左寄せ/中央)
  • グローバルナビゲーションの表示スタイル
  • ヘッダーの追従設定(スクロール時に固定するか)

フッターには、サイトマップ的な役割を持たせましょう。主要ページへのリンク、会社住所、電話番号を配置します。

ポイント5. お問い合わせページは「導線」を設計する

コーポレートサイトの最終目標はお問い合わせの獲得です。

すべてのページからお問い合わせページへの導線が自然に存在するよう設計します。

  • ヘッダー ── 右端にお問い合わせボタン(Swellのヘッダーボタン機能)
  • 各ページ下部 ── CTAセクションを設置(ブログパーツで使い回し可能)
  • サイドバー ── お問い合わせバナー(Swellのウィジェット)
  • フッター直前 ── 最後のひと押し

この「導線設計」は、ホームページ制作の流れの中でも重要なフェーズの一つです。


Swellのカスタマイズ例 ── コーポレートサイト向け

カスタマイズ例1. ブログパーツでCTAを使い回す

Swellのブログパーツ機能は、コーポレートサイト制作で非常に重宝します。

CTAセクション(お問い合わせ誘導のパーツ)をブログパーツとして作成しておけば、ショートコード一つで全ページに同じCTAを配置できます。

修正が必要になった場合も、ブログパーツを1箇所編集するだけで全ページに反映されるため、運用効率が大幅に上がります。

カスタマイズ例2. 投稿リストブロックで実績を見せる

お知らせや実績紹介にはSwellの投稿リストブロックが便利です。

  • レイアウト:カード型/リスト型/テキスト型から選択
  • 表示件数の指定
  • カテゴリーでの絞り込み
  • 並び順の指定

「新着のお知らせ3件をカード型で表示」といった設定がノーコードで実現できます。

カスタマイズ例3. CSSカスタマイズで差別化する

Swellの標準機能だけでは足りない場合、追加CSSで微調整が可能です。

よくあるカスタマイズ例:

  • 見出しデザインの変更
  • ボタンのホバーアニメーション追加
  • 特定のページだけレイアウトを変更
  • フォントの変更

ただし、CSSカスタマイズは最小限に抑えるべきです。過度なカスタマイズはテーマのアップデート時に不具合の原因になります。


Swellと他の選択肢の比較 ── 何を基準に選ぶか

コーポレートサイト向けテーマとの比較

WordPressのコーポレートサイト向けテーマは数多くありますが、主要なものを比較してみます。

比較項目Swell無料テーマサブスク型有料テーマコーポレート特化テーマ
価格¥17,600(買い切り)無料年額¥10,000〜¥10,000〜20,000
操作性非常にわかりやすいテーマによるやや専門的限定的
デザイン自由度高い低い〜中高い中〜高
表示速度非常に速いテーマによる普通普通
ブログ運用得意テーマによる対応可不得意な場合も
複数サイト利用追加料金の場合ありテーマによる

Swellを選ぶ判断基準

Swellが向いているケース:

  • クライアントが自分で更新する必要がある
  • ブログ(SEO集客)も同時に行いたい
  • 表示速度を重視している
  • 制作コストを抑えたい(テーマ代¥17,600で済む)
  • 長期間メンテナンスする予定

Swellが向いていないケース:

  • 完全オリジナルのデザインが必要(デザインカンプ通りに再現する案件)
  • 高度なWebアプリケーション機能が必要
  • 海外向けの多言語サイト

正直に言うと、中小企業のコーポレートサイトであれば、ほとんどのケースでSwellで十分です。私がSwellを推奨するのは、制作時だけでなく納品後の運用まで見据えたときに、最もバランスが良いテーマだからです。

なお、WordPressではなくNext.jsなどのモダン技術で制作したほうが良いケースもあります。詳しくはWordPress vs Next.js 比較をご覧ください。

WordPressとNext.jsのPageSpeedスコア比較インフォグラフィック。左がWordPress(約85点)、右がNext.js(約95点)で、Next.jsの方が表示速度で有利なことを視覚化している。

コーポレートサイトに必須のプラグイン5選

Swellと相性の良いプラグイン

Swellは多機能テーマのため、必要なプラグインは最小限で済みます。

プラグイン用途必須度
SEO SIMPLE PACKSEO設定(meta情報、OGP)必須
Contact Form 7お問い合わせフォーム必須
XML Sitemap & Google Newsサイトマップ生成推奨
UpdraftPlusバックアップ必須
Wordfence Securityセキュリティ対策推奨

SEO SIMPLE PACKはSwellの開発者が制作したプラグインで、Swellとの相性が完璧です。他のSEOプラグインは不要です。詳しい設定方法はSwellのSEO設定完全ガイドで解説しています。

入れすぎ注意 ── プラグインの適正数

制作者としてお伝えしたいのは、プラグインは少ないほうが良いということです。

  • 表示速度が低下する
  • プラグイン同士の競合でエラーが発生する
  • セキュリティリスクが増加する
  • アップデート管理の手間が増える

私が制作するコーポレートサイトでは、プラグイン数を10個以内に抑えるよう意識しています。Swellは多くの機能をテーマ側で持っているため、プラグインに頼る必要が少ないのも大きなメリットです。



まとめ ── Swellでコーポレートサイトを作る手順

最後に、Swellでコーポレートサイトを作る全体の流れをまとめます。

  1. Swellを購入・インストール(¥17,600)
  2. サイト設計(ページ構成、ワイヤーフレーム作成)
  3. 初期設定(カラー、フォント、ヘッダー・フッター)
  4. トップページ制作(フルワイドブロックでセクション構成)
  5. 下層ページ制作(会社概要、サービス、お問い合わせ等)
  6. プラグイン設定(SEO、フォーム、セキュリティ)
  7. テスト・公開(表示確認、速度チェック、SEO確認)

Swellは素晴らしいテーマですが、設計なしにいきなり作り始めると、統一感のないサイトになりがちです。特にコーポレートサイトは「会社の顔」ですから、設計フェーズに最も時間をかけることをおすすめします。

ホームページ制作全体の流れを把握したい方は、ホームページ制作の流れと準備の記事もぜひご覧ください。また、制作費用の相場感を知りたい方はホームページ制作の費用相場も参考になります。

「自分で作る時間がない」「プロの設計で作りたい」という方は、Swellを使ったコーポレートサイト制作をお気軽にご相談ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次