【SWELL】コーポレートサイトのデモ一覧。オシャレなデザインのコーポレートサイトの作り方を解説

そんな疑問に答えます。

SWELL公式サイトにはブログのデモサイトが紹介されていますが、コーポレートサイトのデモサイトはありません。デモサイトがないと、コーポレートサイト作りに利用できるかちょっと心配ですよね？

SWELLという名のWordPressテーマは複数存在します。この記事で紹介するのは当ブログでも使っている国産の「SWELL」です。

WordPressテーマ「SWELL」の基礎知識

まずはSWELLの基礎情報です。

SWELL
販売事業者	株式会社LOOS
テーマ料金	17,600円
販売日	2019年3月10日
エディター	ブロックエディター対応

SWELLはWordPress専用テーマです。デザイン性が高く、WordPress標準のブロックエディターに対応しているのが特徴です。

SWELLのエディターはオリジナル機能が追加されていて、通常のブロックエディターよりメチャクチャ便利。

SWELLで作ったコーポーレートサイトのデザイン例

WordPress有料テーマ「SWELL」で制作したコーポレートサイトを紹介します。

【簡単すぎる】SWELLはコーポレートサイトが作りやすい

SWELLは基本機能が充実しているテーマです。HTMLやPHPといったプログラムコードを使わず、オシャレなコーポレートサイトが制作できます。

コードの知識があった方が自由度はさらに高まります。

メインビジュアルに「スライド」「動画」

メインビジュアルはトップページの先頭に表示されるサイトの顔的な存在です。SWELLのメインビジュアルでは次の選択肢から好きなものを選ぶことができます。

単調なデザインに変化を付ける「フルワイドブロック」

SWELLオリジナル機能のフルワイドブロックは、画面の横幅を広げたエリアを作成することができます。フルワイドブロック機能では、広げたエリアの背景色・背景画像などを設定できます。

単調なデザインだなと感じる時こそ「フルワイドブロック」メリハリのついたキレのあるデザインにすることができます。

リッチカラムブロックで段組デザイン

横並びに情報をデザインするのに便利なのがリッチカラムブロックです。

実用性の高い「FAQブロック」

FAQは「よくある質問」のことです。コーポーレートサイトだと定番ですね。SWELLはFAQを簡単に作れるオリジナル機能としてFAQブロックがあります。

順序を解説する「ステップブロック」

企業サイトだとサービスの流れなどを解説する「○○のステップ」といったコンテンツを作るケースがあります。SELLにはそんなステップをオシャレに設置できるステップブロックが用意されています。

お知らせ一覧の表示スタイルが自由自在

WordPressにはお知らせを投稿できる機能があります。プレスリリース、スタッフブログといったコンテンツを運用する機能のことです。

SWELLはページ内の好きなところにお知らせの一覧を表示させることができます。他のテーマと比較して、表示するオプションが充実しています。

【サイト型デザイン】SWELLでコーポレートサイトを作る手順

SWELLを使ったコーポレートサイトの作り方と手順を解説していきます。デモサイトのようにサイト型デザインの仕方をステップごとに解説していきます。

コーポレートサイト制作前に準備しよう！

WordPressの操作前にどんなサイトを作るかの構成と掲載する素材を準備しましょう。

サイトの構成を決める

どんなページ構成にするかを決めましょう。

ブログのデザインだとトップページに新着情報一覧が表示されます。
サイト型のデザインにするには「トップページ」と投稿記事を表示する「お知らせページ」を別に設計します。

作成したいコーポレートサイトによってコンテンツは当然変わります。他のサイトを参考にどんなページがあったら良いかを考えましょう。

素材を用意する

それぞれのページに掲載する素材を用意します。

サイトに掲載する画像は重要です。画像のチグハグ感が出てしまうとサイトのオシャレ度がグッと落ちてしまいます。「縦横の幅を合わせる」「色味を合わせる」といった下処理をすることをお勧めします。

SWELLでサイト型デザインのコーポレートサイトを作る手順

コーポレートサイト制作の手順についてです。まずは全体の流れです。

トップページを作る（空ページ）

固定ページ機能を使ってトップページを作成します。

この段階ではトップページの中身は入力しなくてOKです。

サイト型のコーポレートデザインにするさい、サイドバー無しで作るのがポイントです！

お知らせページを作る（空ページ）

投稿した記事が表示されるページを作ります。

お知らせページも固定ページ機能で作成します。このページも中身は空のままでOKです。

パーマリンクで適当な設定をしましょう。例：news、information

下層ページを作る（空ページ）

トップ、お知らせ以外の下層ページを固定ページ機能で作ります。

パーマリンクで適当な設定をしましょう。例：service、company

トップページ・お知らせページを設定する

作成したトップページがサイトのトップページに表示する設定をします。

ダッシューボード上「設定」→「表示設定」をクリック。次の設定を行います。

この設定をすると、トップページを固定ページのエディターから編集できるようになります。

グロナビ設定

グロナビはページ上部に配置するメニューのことです。

設定手順は「外観」→「メニュー」と進み、「新しいメニュー」をクリック。メニューに追加したいページを左側の「メニュー項目を追加」から選択していきます。

メニューを選択したら、作成したメニューを表示する位置を指定します。「位置を管理」を選択。グローバルナビで作成したメニューを選択し変更を保存します。

メニューは複数作成し、ヘッダー用、フッター用、スマホ用と個別に変更できます。

ヘッダー設定

ヘッダーとはページ上部の共通パーツです。メニューの配置、ロゴマークの設定、お問い合わせボタンの設定などをおこないます。

ヘッダーは「外観」→「カスタマイズ」→「ヘッダー」から設定できます。

フッター設定

フッターはページの一番下の共通パーツのことです。

フッターは「外観」→「カスタマイズ」→「フッター」から設定できます。

フッターとは別に「フッター直前ウィジェット」というパーツあります。
その名の通り、フッターの直前（フッターの上）エリアにウィジェットを設置できる機能です。

設定は「外観」→「ウィジェット」をクリックし、利用したいウィジェットを設置すればOKです。

SWELL固有機能の設定

SWELL固有の機能を設定します。設定はダッシュボード上の「SWELL設定」です。

SWELL固有機能の代表的存在が「高速化オプション」です。SWELLは有料テーマの中でページ読み込みスピードはかなり早です。この機能を使わなくても十分なスピードですが、さらなるスピードアップを目指す人は高速化オプションを設定しましょう。

プラグインのインストール

このステップは必須ではありません。

プラグインのインストールと設定作業です。SWELL公式ページにある推奨プラグインと非推奨プラグインを参考にしましょう。

コーポレートサイト向けプラグインをこの記事の後半で紹介しています。
SWELLテーマには搭載されていない機能を補完するプラグインです。デモサイトのようなエフェクトを付けてコーポーレートサイトをオシャレに仕上げたい人はチェックしてください。

トップページの作り込み

トップページはページ上部のメインビジュアルエリアと、その下コンテンツエリアで構成しています。それぞれ別の場所から設定をします。

メインビジュアルの設定

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」と進んでください。メインビジュアルの設定画面でメインビジュアルの種類と表示形式を設定します。

SWELL公式サイトや当サイトのトップページのように全画面にメインビジュアルを表示したい場合はメインビジュアルの高さを「ウィンドウにフィットさせる」を選択します。

メインビジュアルの設定には「フィルタースタイル」「オーバーレイカラー」があるので、アップロード前にわざわざ加工しなくてもOK。

コンテンツエリアの設定

固定ページで作成したトップページが対象です。ブロックエディターでガツガツ編集していきましょう。

SWELLでオシャレなコーポレートサイトを作るテクニックはこの記事の後半で紹介しています。「どんな風にページを作っていいか悩んでいる」。そんな人はぜひチェックしてみてください。

下層ページの作り込み

下層ページの各ページの中身を入力していきます。トップページ同様に固定ページのブロックエディターから素材を貼り付けてページを完成させましょう。

コーポレートサイトをオシャレにするテクニック

コーポレートサイトの出来は会社のブランド力です。せっかく作るならオシャレに作りたいですよね？SWELLでコーポレートサイトを作るさいに使える実用的なテクニックを紹介します。

フルワイドブロックで背景画像を設定する

	評価
初心者向け
オシャレ度
おすすめ度

SWELLオリジナル機能の「フルワイドブロック」を活用するテクニックです。

フルワイドは横幅を広げる機能です。広げたエリアの背景を工夫するとメチャクチャ綺麗に見えます！

フルワイドブロックをオシャレにするポイントは次の3つだけ。

動画でインパクを！

	評価
初心者向け
オシャレ度
おすすめ度

コーポレートサイトはファーストビューが命！ここで「他とは違う」と思わせるのが大事です。SWELLはメインビジュアルに動画を指定できます。インパクトのある動画をメインビジュアルに設定してみましょう！

メインビジュアルの動画は、ファイルをサーバーにアップロードして読み込む形式です。Youtubeなどの外部プラットフォームに依存しないのがポイントです。

リッチカラムブロックを活用！

	評価
初心者向け
オシャレ度
おすすめ度

WordPressのデザインはノッペリとした「いかにもブログ」デザインになりがちです。脱ブログデザインを目指すならリッチカラムブロックを積極的に活用しましょう。

Font Awesomeを活用しよう

	評価
初心者向け
オシャレ度
おすすめ度

Font Awesomeはハイセンスなアイコンを無料で利用できるサービスです。面倒なユーザー登録はありません。Font Awesome公式サイトで好みのアイコンを見つけてサイトに貼るだけでサイトの見栄えが良くなります。

SWELLはFont Awesomeを読み込む機能が標準で搭載されています。

【5選】SWELLと相性の良いコーポレートサイト向けプラグイン

SWELLでのコーポレートサイト制作時に使える便利なプラグインを紹介します。

①SIMPLE SEO PACK

SIMPLE SEO PACKはSEO対策系のプラグインです。有効化するとmeta descriptionやindex設定オプションを設定できるようになります。

このプラグインはSWELLテーマ開発者さんが公開している無料プラグインです。

All in One SEO（旧All in One SEO Pack ）はメチャク有名ですよね？役割的に同等です。違いはAll in One SEOより機能と管理画面がシンプルといいう点です。「プラグインの開発者＝SWELLテーマの開発者」ということで、テーマと競合することなく使えます。

②Blocks Animation

Blocks Animationはアニメーション機能プラグインです。指定した要素にスライドイン、フェードインといったエフェクトを簡単に付けることができます。

サイトを下にスクロールしていくと、フワッとアイコンやボタンが表示するエフェクトになっています。このBlocks Animationプラグインで設定しているエフェクトです。似たようなプラグインは数多く出回っていますが、Blocks Animationは使い勝手もよくエフェクトの種類も豊富です。

このプラグインは一部の機能が有料です。
デモサイトは無料版で作っています。課金しなくても結構使えて便利です。

③Testimonial

Testimonialはお客様の声をデザインするプラグインです。お客様の声を作成するプラグインはかなりたくさんリリースされていますが、今回紹介するTestimonialは機能が最小で迷わず使えるタイプです。

顔写真、名前、職業、評価の☆、コメントを入力すると自動スライド付きでオシャレなお客様の声コンテンツが表示できます。

デモサイトもこのプラグインでお客様の声を作っています。

SWELLの記事スライダー機能と併用すると一部CSSが干渉します。SWELLの記事スライダーを使わないサイト上で利用するか、併用する場合は自分でCSSを調整しましょう。

④Image Hover Effects Block

Image Hover Effects Blockはオンマウスの時にエフェクトを付けることができるプラグインです。

エフェクトはデモサイトのように下からグワッと現れスライドアップの他、スライドイン、フェードインなどバラティー豊富です。エフェクト上のテキストもフォントスタイル、フォントサイズが設定できます。

エフェクト上にリンクを設置することができるので誘導したいページへの導線として活用もできるのでメチャクチャ便利です。

カフェデモサイトのフードメニュー部分を、このプラグインを使っています。

⑤Animated Number Counter

Animated Number Counterは数字にアニメーションエフェクトを加えるプラグインです。

「サイトにちょっとした仕掛けを付けたい」「実績を数字でPRしたい」そんなコーポーレートサイトに使えます。

学習塾デモサイト、美容サロンデモサイトで有効化しています。

⑥VK Filter Search Pro

VK Filter Search Proは複数条件で検索する「絞り込み検索機能」を実装するプラグインです。

SWELLには絞り込み検索機能はありませんので、絞り込み機能を実装するにはプラグインを使うかコードを書く必要があります。

ずばりそんな人向けです。

VK Filter Search Proは有料で31,900円。ちょっとお高く感じるかもしれませんが、買い切りタイプで複数サイトに利用できます。

金額的に「とりあえず買っておこう」とは思えないでしょうが、こんなプラグインもあるよと覚えておきましょう。

絞り込み検索機能はWordPressの標準機能ではありません。無料のプラグインもいくつか試しましたが、海外の開発会社が制作したものがほとんどでお試し的に購入しました。

VK Filter Search Proについては次の記事で解説しています。

⑦Gutenberg Block Editor Toolkit – EditorsKit

Gutenberg Block Editor Toolkit – EditorsKitプラグイン。

名前長いですよね。

このプラグインはカバーブロックや、カラムブロックなど本来リンクを設定できないアウター系ブロックにリンクを設定可能にするプラグインです。

通常だとカラムの中に画像やテキストを入れてそれらにリンクを設置しますよね？でもスマホユーザー向けの表示だと、数行のテキストだとタップしずらかったりします。カラムブロックごとリンクエリアにしてしまえば、スマホユーザーもタップしやすくなります。

Gutenberg Block Editor Toolkit – EditorsKitプラグインの使い方は次の記事で解説しています。

⑧WP Rocket

WP Rocket（WPロケット）プラグインはサイトを高速化させるプラグインです。

企業サイトの場合、魅力的なデザインに仕上げるために動画や高解像度の画像を使うのは普通のことです。サイトに解像度不足の不鮮明な画像があったら印象わるいですよね？企業サイトはどうしても読み込みデータ量が増えて遅くなりがちです。

サイトの表示スピードはSEOに関係しているとグーグルが公言しているので、サイトのスピードは重要な要素。

ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。

Google：ページの読み込み速度をモバイル検索のランキング要素に使用します

SWELLのテーマにも高速化機能がありますが、さらなるスピードアップが必要な場合にはWPロケットプラグインを導入しましょう。WPロケットプラグインは有料です。購入する前に効果があるのか知りたい人は次の記事をご覧ください。

ヘッダーに電話番号や問い合わせボタンを追加するカスタマイズ

受注制作で企業サイトを作っていると、かなりの頻度で「こうして欲しい」という要望を受けるデザインがあります。

ヘッダーに電話番号をつけて

クライアントのイメージはコレ

以下の画像のようなイメージです。

「電話番号」「営業時間」「問い合わせボタン」のセット。企業サイトを作るとなると、このレイアウトにして欲しいというリクエストが結構あります。

SWELLの機能だと、ちょっと無理なんで独自カスタマイズが必要です。

独自カスタマイズを実装したデモサイト

「クライアントに頼まれたけど、やり方がわからん！」って人向けに独自カスタマイズの方法をnote（ノート）で有料販売しています。

デモサイトのようにグロナビのメニューをグワッと開くメガメニュー形式にする独自カスタマイズ方法は、次のnoteで紹介しています。

無料テーマでコーポレート制作するのと何が違うのか？

有料テーマのSWELLでコーポレートを作るメリットについてです。無料テーマで作る場合と比較していきます。

	SWELL	無料テーマ
サポートの有無
ネットの情報量
デザイン性

【軽視されがち】サポートの有無

SWELLを導入するメリットの１つがサポートです。「使い方が分からない」「不具合かもしれない」「レイアウトがおかしくなった」。そんな時にSWELL開発者にサポートをお願いすることができます。

私はWordPress利用歴が10年以上です。それなりに経験があるユーザーの僕でも自己解決できないトラブルが発生します。

レイアウトの一部がおかしくなりSWELLのサポートに相談したことがありました。SWELLテーマ本体にバグが見つかりサポート依頼から１時間42分後に解決したことがあります（参考：SWELLサポートを利用した実体験）。

無料テーマにはサポートがありません

当然ですよね。まれに善意で回答してくれる開発者さんがいますが、それを期待しては健全なサイト運営はできません。「無料テーマを使う＝サポートがない」。

これが基本です。何かしらトラブルが発生したら自己解決しなければいけません。

WordPressのアップデートに対応してくれる

SWELLは最新バージョンのWorPressで利用できるようテーマ本体のバージョンアップがされています。ちなみにこのバージョンアップは無料です。

アップデートは無料ですか？
はい、もちろん無料です。

一度購入いただければ、常に最新版へのアップデートは無料で行うことが可能です。

SWELLに関するよくある質問

無料のテーマはアップデートされない可能性がある

WordPressのバージョンが4.9から5.0にアップデートされたタイミングでサイトの一部がおかしくなった経験があります。これって無料テーマでも有料テーマでもよくある話です。

有料テーマの場合はテーマ販売元が最新のWordPressで使えるようテーマをアップデートしてくれます。無料のテーマの場合、そういった保証は一切ありません。

SWELLのライセンスは企業サイト制作に向いている

WordPress有料テーマの利用規約・ライセンスは販売している事業者ごとに異なります。他の有料テーマと比較してSWELLのライセンスは超お得です。

使いまわしできるよ！

SWELLは１つテーマを購入するだけで、何サイトにも利用できるライセンスです。自分の会社のHPを作って、その後なんらからのサービスサイト、オウンドメディアを作成しても利用規約違反にはなりません。

費用はテーマ代の17,600円。追加料金はありません。

【Web事業者も安心】クライアントワークも制限なしのライセンス

SWELLは自分用に1つテーマを購入すれば、クライアントサイト制作を行う事が可能なライセンスです。追加ライセンスは必須ではありません。

SWELL以外の有料テーマの場合、通常ライセンスでは制作代行が禁止されていたり、クライアントごとにテーマの追加購入が必要という利用規約がほとんどです。

ライセンスを比較

テーマ名	サイト制作代行時のライセンス
AFFINGER5	クライアントごとにテーマ１つ追加（テーマ代のみ追加）
DIVER	特別ライセンス契約が必要（特別ライセンス代＋テーマ代追加）
SANGO	クライアントごとにテーマ１つ追加（テーマ代のみ追加）
STORK19	サイトごとにテーマを１つ追加
SWELL	100％GPL
TCD	テーマごとに3万円の特別ライセンス契約が必要
THE THOR	特別ライセンス契約が必要（特別ライセンス代＋テーマ代追加）

SWELLのライセンスと他の有料テーマのライセンスの比較について次の記事で説明しています。

WordPressテーマ「SWELL」と他の有料テーマのライセンスの違い

【知らないと損する】SWELL向け共有レンタルサーバー

次のような場合に最適なレンタルサーバーについてです。

結論：エックスサーバーのX10が最適なレンタルサーバー

WordPressで有料テーマのSWELLを使うなら「エックスサーバー」が損をしない選択です。

理由はズバリ「WAF」との相性です。

WAFは共有レンタルサーバーのセキュリティー機能のです。ハッキングなどの攻撃からサイトを守ってくれるありがたい存在なのですが、一部のレンタルサーバーとWordPressは非常に相性が悪いのが現状です。

レンタルサーバーによってはWordPressの設定を「外部からの攻撃」と誤検知してしまい、エラーが出ることがあります。

SWELL公式サイトやSWELLユーザーがトラブルを報告する会員フォーラムにWAF誤検知情報が掲載されています。

エックスサーバーに関してはSWELLユーザーからのWAF誤検知情報はありません。僕はエックスサーバーのスタンダードプランを利用していますが、WAFのトラブルは一度も経験したことがありません。

【参考】レンタルサーバーをエックスサーバーに変更する手順

コーポレートサイトをすでに公開している人向けの手順です。

以上で引っ越し作業は完了です。

【受注制作】コーポレートサイト案件でのSWELLの売り方

Web制作会社、フリーランスでサイト制作をしている人向けです！

クライアントのサイト制作にSWELLを提案する場合についてです。事業者がサイトをリニュアールしたい理由はおおむね次のいずれかです。

WordPressが苦手な人は独自カスタマイズするな

「実はあんまりWordPressは得意じゃないんです…」そんな人は独自カスタマイズが発生する売り方は避けましょう。

デモサイトをいくつか用意し、その中からクライアントに好みのものを選んでもらうようなシステムが無難です。

レイアウトを変更するような作業や、機能の追加は別料金だと事前に伝えておけばトラブルを避けることができます。クライアント目線でのちょっとした変更はWordPressビギナーの制作者にとっては重労働だったりします。

プラグインに依存したサイトを作るな

ECサイトなどが典型的な例です。なんらかの理由でプラグインが利用できなくなった場合、サイト運営ができなくなるようなサイト設計は避けましょう。

問い合わせプラグインなどは仮に使えなくなったとしても別のプラグインに即置き換え可能です。そういったプラグインはサイトのパフォーマンスが悪くならない限りそれほど気にする必要はありません。

会員フォーラムを利用したいなら追加ライセンスが必要

SWELL購入者限定の「SWELL会員コミュニティー」と「会員フォーラム」についてです。SWELLのライセンスはGPLです。1つSWELLテーマを購入すれば、コーポレートサイトの制作代行時に追加ライセンス購入の必要はありません。

ですが、もしクライアントが会員フォーラムに参加したい場合は追加ライセンスが必要になります。

FAQ

まとめ

WordPressテーマ「SWELL」で制作するコーポレートサイトのデモサイト紹介、特徴などを紹介しました。

他のWordPress有料テーマと比較して、かなりコーポーレートサイト制作に向いているテーマ。SWELLは士業系サイトのようなカッチリとした企業系サイト、エステや美容サロンのような柔らかいサイト、レストランやカフェといった飲食店のサイトなど幅広いジャンルでサイトを作ることができます。