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

初心者

SWELLで作ったコーポレートサイトを見てみたいなぁ。
どんな感じのデザインになるの?
初心者でもオシャレに自分の会社HP作れる?

そんな疑問に答えます。

SWELLで制作したコーポレートのデモサイトと、難しいカスタマイズ抜きにSWELLでオシャレな企業サイトを作るテクニックを紹介します。

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

この記事を書いた人
  • IT業界21年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です
目次

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

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

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

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

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

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

かんた

とにかくページを編集するエディターが使いやすい。

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

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

デモサイトはクリックすると別ウィンドウで開きます。

キャンプ用品メーカー
歯科医院
SWELL企業デモサイト
旅館
茶葉農園
茶葉農園
SWELLデモサイト
企業サイト
企業サイト
SWELlデモサイト(飲食店)
カフェ
SWELLデモサイト(美容サロン)
美容サロン
アーティスト
不動産
バー
税理士事務所
スポーツクラブ
SWELLデモサイト学習塾
学習塾
SWELLデモサイト(企業サイト)
コーポレート
IT企業
フォトグラファー
クラブDJ
バレリーナ
カフェ
かんた

コーポレートデモサイト制作は1つあたり3時間~5時間程度かかりました。映えるようにプラグインも使ってます!

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

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

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

かんた

コーポレートサイト制作に便利なSWELLの機能を紹介します。

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

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

メインビジュアルの種類

  1. 画像
  2. スライダー(最大5枚の画像)
  3. 動画
かんた

ライバルサイトと差別化したいならインパクトのある「動画」がおすすめです。

メインビジュアルに「動画」を使ったサンプル

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

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

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

かんた

フルワイド機能を実装している国産テーマはほとんどありません。

テーマ名フルワイドブロック機能の有無
AFFIGNER 5
JIN
STORK19
SWELL
THE THOR
賢威
有料テーマのフルワイドブロック機能の有無

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

カラムボックス
リッチカラムブロック

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

SWELLのリッチカラムブロックのオプション

  • 一列に表示するカラムをデバイスごとに指定(PC、タブレット、スマホ)
  • カラムごとの横幅サイズを指定
  • カラムの枠線(ボーダー、シャドー)
  • カラム内の余白(前後左右を個別に指定できる)

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

SWELLの実用性の高い「FAQブロック」
SWELLオリジナル機能「FAQブロック」

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

かんた

編集画面からFAQコンテンツを編集できるスグレモノです。

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

順序を解説する「ステップブロック」
SWELLオリジナル機能「ステップブロック」

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

ステップブログを活用するコンテンツ例

  1. 問い合わせの流れ
  2. サービスの流れ
  3. 申込みの流れ
  4. 施術の流れ


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

SWELL投稿一覧の設定画面
お知らせを設定する画面

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

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

お知らせのオプション例

  1. 投稿のカテゴリー指定
  2. 表示する件数
  3. 表示する内容(公開日、PV数、)
  4. 投稿順序(新着順、ランダム)
初心者

難しくないの?

かんた

マウス操作で選ぶたけ。プログラムコードの編集は一切ないから初心者でも出来るよ!

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

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

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

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

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

  • サイトの構成を決める
  • 素材を用意する

サイトの構成を決める

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

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

コーポレートサイトの構成例

  1. トップページ
  2. お知らせ一覧
  3. 会社紹介
  4. サービスの内容
  5. お問い合わせ

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

かんた

コンテンツはコーポレートサイト公開後にも追加できます。まずはどんなページが必要になりそうかジャンジャン書き出していきましょう。

素材を用意する

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

素材の一例

  • テキスト
  • 画像
  • 映像

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

自分で撮影した画像を使う場合

撮った写真をそのまま使わず、画像編集ソフトで補正しましょう。

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

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

全体の流れ

  1. トップページを作る(空ページ)
  2. お知らせページを作る(空ページ)
  3. 下層ページを作る(空ページ)
  4. トップページ・お知らせページを設定する
  5. グロナビ設定
  6. ヘッダー設定
  7. フッター設定
  8. SWELL固有機能の設定
  9. プラグインのインストール
  10. トップページの作り込み
  11. 各ページの作り込み込み
かんた

各ステップを解説していきます。

トップページを作る(空ページ)

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

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

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

お知らせページを作る(空ページ)

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

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

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

下層ページを作る(空ページ)

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

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

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

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

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

  1. ホームページの表示で「固定ページ」を選択。
  2. ホームページ→先程作成したページを選択。
  3. 投稿ページ→先程作成したお知らせページを選択。

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

グロナビ設定

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

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

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

かんた

これでヘッダーに表示するグローバルナビゲーションの設定は完了です。

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

ヘッダー設定

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

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

ヘッダー設定のオプション

  • ロゴマークの設置
  • ロゴとメニューの配置
  • ヘッダーの追従
  • 検索ボタンの設置
  • スマホメニューボタンの表示
  • SNSアイコン
  • ヘッダーの透過
  • ヘッダーエリアの配色(背景色・フォントカラー)

フッター設定

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

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

フッター設定のオプション

  • フッターエリアの配色(背景色・フォントカラー)
  • フッター内ウィジェットの配色(背景色・フォントカラー)
  • コピーライトのテキスト
  • SNSアイコン

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

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

かんた

各ページに表示させるエリアなので「問い合わせ」などを設置すると良いでしょう。

SWELL固有機能の設定

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

機能の一例

  • キャッシュ機能
  • 遅延読み込み機能
  • jQueryの読み込み
  • Font Awesomeの読み込み

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

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

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

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

かんた

相性の悪い非推奨プラグインはサイトが表示されないなどの不具合が発生することがあります。

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

トップページの作り込み

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

メインビジュアルの設定

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

かんた

個人的には動画を大きく表示するのがオススメ!

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

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

コンテンツエリアの設定

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

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

PHP・CSSのコードの知識不要。誰でもオシャレにコーポレートサイトが作れます。

下層ページの作り込み

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

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

コーポレートサイトのオシャレ度をワンランクあげるテクニック!

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

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

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

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

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

フルワイドブロックのサンプル
フルワイドブロックのサンプル
フルワイドブロックのサンプル

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

  • 背景画像を設定する
  • メインカラーを背景色にする(透明度を調整)
  • FIXEDを使う
かんた

たったコレだけでコーポレートサイトのデザインがオシャレ度があがります!

初心者

なんだか難しそうなだ。初心者のボクにも出来るかな?

かんた

プログラムコードはノータッチ。
感覚的に操作できるから、誰でもできるよ。
↓次の画像が背景をアレンジしている操作の様子。マウス操作だけで色を指定したり、画像を設定できるんだ!

フルブロックで背景を設定する様子

動画でインパクを!

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

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

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

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

評価
初心者向け
オシャレ度
おすすめ度
カラムブロックを活用!
リッチカラムブロック


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

Font Awesomeを活用しよう

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

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

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

Font Awsomeの使い所

  • グローバルメニューに組み込む
  • コンテンツにアイコンを組み込む
かんた

文字ばかりで単調なデザインになっていると感じう場所にFont Aswsomeを配置すればOK!

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

【5選】コーポレート制作向けの無料プラグイン

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は機能が最小で迷わず使えるタイプです。

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

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

かんた

美容サロン・飲食店・整体院など、サービス業のサイトにオススメなプラグインです。

④Image Hover Effects Block

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

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

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

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

⑤Animated Number Counter

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

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

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

⑥VK Filter Search Pro

VK Filter Search Proは絞り込み検索機能プラグインです。カタログ系のコンテンツ、地域ポータル、不動産サイトなどで定番の複数条件で該当の情報を探すコンテンツを作る時に便利。

VK Filter Search Proは有料で29,700円。買い切りタイプで複数サイトに利用できます。

WordPressテーマLightningを開発した株式会社ベクトルの商品ということで日本語のマニュアル付きです。

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

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

かんた

SWELLでも試しましたが問題なく動作します。

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

⑦Gutenberg Block Editor Toolkit – EditorsKit

Gutenberg Block Editor Toolkit – EditorsKitプラグイン

名前長いですよね。

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

カラムブロックにリンクを設置するオプション
カラムブロックにリンクを設置するオプション

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

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

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

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

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

SWELL無料テーマ
サポートの有無
WordPressのアップデート保証
ネットの情報量
デザイン性
SWELLと無料テーマの比較
かんた

個人的に一番大きな違いはサポート。その他の点についても比較していきます。

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

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

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

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

かんた

もしサポートがなかったら、ひたすら時間をムダにしていました。


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

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

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

かんた

自分で対応できない場合は外注先を探し、有料で対応してもらうことになります。

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

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

かんた

公式サイトの情報です↓

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

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

SWELLに関するよくある質問

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

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

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

かんた

趣味のブログならともなく、コーポレートサイト運営でサイトが表示されなくなるリスクは避けたいところです。

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

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

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

SWELLのライセンスがお得な理由

  • 会社、サービスサイトなど何個でもサイト制作してOK
  • クライアントのサイト制作代行をしてもOK
かんた

SWELLのライセンスはサイト自分で作る場合だけでなく、Web制作事業者が制作代行することもできます!

使いまわしできるよ!

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

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

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

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

かんた

これって有料テーマではかなり珍しい利用規約です。

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

ライセンスを比較

テーマ名サイト制作代行時のライセンス
AFFINGER5クライアントごとにテーマ1つ追加(テーマ代のみ追加)
DIVER特別ライセンス契約が必要(特別ライセンス代+テーマ代追加)
SANGOクライアントごとにテーマ1つ追加(テーマ代のみ追加)
STORK19サイトごとにテーマを1つ追加
SWELL制限なし
TCDテーマごとに特別ライセンス契約が必要
THE THOR特別ライセンス契約が必要(特別ライセンス代+テーマ代追加)
有料テーマのライセンスについて
かんた

一覧比較するとSWELLのライセンスがいかにコスパが良いか分かりますね。

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

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

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

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

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

こんな場合のレンタルサーバー

  • コーポレートサイトを自作する(自社用)
  • クライアントのコーポレートサイトをリニューアルする(制作代行)

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

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

初心者

なんでエックスサーバーなの?

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

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

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

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

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

かんた

共有サーバーはどこを選んでも月額がザックリ千円程。
100円をケチってトラブルが発生するサーバーを使うのはコスパが良いとは言えません。

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

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

かんた

レンタルサーバーをエックスサーバーに変更する流れについて解説します。

STEP
エックスサーバーに申し込む

エックスサーバー公式ページからX10プランに申し込みます。

今使っているものドメインはそのまま使えます。

ドメインを持ち込む場合、ドメインの追加申し込みは不要です。サーバーだけ申し込みましょう

STEP
ドメイン設定

エックスサーバーの管理画面上で、移行予定のドメインを設定します。

STEP
データ移行作業

Webサーバー上にあるデータを、エックスサーバーにコピーします。

かんた

エックスサーバーには「WordPress簡単移行」機能があるので楽ちんです。ちなみにこの機能は無料です。

STEP
ネームサーバー変更

ドメイン管理をしている管理会社上での設定です。

使っているレンタルサーバー上でネームサーバーを次のように変更します。

ネームサーバーIPアドレス
ns1.xserver.jp219.94.200.246
ns2.xserver.jp210.188.201.246
ns3.xserver.jp219.94.200.247
ns4.xserver.jp219.94.203.247
ns5.xserver.jp210.188.201.247
ネームサーバーの設定

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

かんた

ネームサーバーの反映には数時間から数日かかりますので、反映を待ちましょう。

メールアカウントについて

独自ドメインに紐付いたメールアカウントを持っている場合は、ネームサーバーの設定をする前にエックスサーバー側でメールアカウントの設定をしましょう。

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

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

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

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

事業者がサイトをリニューアルしたい理由

  • サイトからの問い合わせがない
  • サイトがダサい
  • PCでしか見れない
  • 表示が遅い
  • 検索結果の先頭に表示されない
  • 自分で更新ができない
  • 保守会社に毎月お金を払いたくない(少額に抑えたい)
  • 保守会社との関係が良くない
かんた

直接クライアントと話ができる関係なら直接ヒアリングしましょう。

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

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

初心者

「独自カスタマイズ」って何?

かんた

SWELLに搭載されていない機能やデザインの調整をすることだよ。
PHPファイルを変更したり、CSSを書いたりすること。

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

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

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

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

例:プラグインに依存すると危険なサイト

  • ECサイト
  • 会員限定サイト
  • ギャラリーサイト
  • 口コミ投稿サイト
  • 定期課金サイト

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

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

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

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

初心者

「会員フォーラム」ってなに?

かんた

SWELLを購入した人だけが参加できる会員サイトのこと!

SWELL会員フォーラムでSWELL開発者さんライセンスについて返信しています。

質問内容:複数でのサイト使用について

現在、コンサルタント業をしておりまして、コンサルタントの業務内容として、コンサルタント先のウェブ管理・運営をしているのですが、コンサルタント先のウェブサイトを制作する際に、SWELLのテーマを使用したいのですが、そのような場合も、複数サイトでの使用に含まれるのでしょうか?

SWELL会員フォーラム

返信

はい、自由にご利用いただいて大丈夫です。
ただ、当フォーラムへの参加に必要なパスワードや、Slackコミュニティへの参加リンクを第3者に公開することは利用規約違反になりますので、ご注意くださいませ。クライアント様ご自身でSWELLに関する質問などをフォーラムなどで行えるようにする必要がある場合は、そのクライアント様ごとに購入していただくようにお願いいたします…!

SWELL会員フォーラム

返信の要点

  • サイト制作代行時に追加ライセスは不要
  • クライアントがフォーラムに参加する場合は別途ライセンスが必要
  • パスワードは共有・公開しちゃだめ

テーマのバージョンアップに認証が追加される?

SWELLの有効化やテーマのアップデートにライセンス登録といった工程はありません。一般的な無料テーマ同様に、ワードプレスにアップロードして有効化すれば制限なく使えます。

バージョンアップに関しても無料テーマと同じく管理画面に更新通知が届きます。テーマのアップデートに事前の登録作業や認証といったものはありません。

クライアント用にライセンスを購入すべきか?

ライセンスは必須ではないけど、どうすればいいの?」そんな場合、僕ならクライアントにそのまま伝えます。

伝える内容

  • ライセンスは買わなくても違反ではない
  • ライセンスがなくてもテーマのバージョンアップはできる(今後は変わるかも)
  • ライセンスを購入すると会員フォーラムでサポートを受けることができる
  • ライセンスを購しないと、テーマのバージョンアップができなくなるかも

制作代行者との保守契約を希望しない場合は事前に伝えておくのが無難。クライアント自身に判断してもらいます。ライセンスが必要だと感じれば、直接ライセンスを購入してもらいます。

「直接」というのがポイントです。テーマ購入時の利用規約に同意してもらうのが重要です。

まとめ

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

他のWordPress有料テーマと比較して、かなりコーポーレートサイト制作に向いているテーマです。

かんた

ぜひ自社サイトの制作やクライアントワークにSWELLを導入してみてください!

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
目次
閉じる