【サンプル事例付き】SWELLで心理カウンセラーのホームページを作ってみた

【事例と作り方】WP有料会員サイト|SWELLとWP-Membersプラグインで定額課金のデモサイトを自作してみた
初心者

SWELLで心理カウンセラーのサイトって作れるの?
どんなデザインになるの?
サンプルを見てみたい….

そんな疑問に答えます。

WordPressテーマ「SWELL」で心理カウンセラーのホームページを作ってみました。

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

【デモサイト】SWELLで作った心理カウンセラーのホームページ

【デモサイト】SWELLで作った心理カウンセラーのホームページ

SWELLで作成した心理カウンセラーのデモサイトを紹介します。

心理カウンセラーHP

かんた

なるべく余計な要素を入れずにスッキリ仕上げました。

【作ってみた感想】デザインの自由度について

デザインの自由度
評価 4.5 / 5
デザインの自由度についての感想

かなり自由度が高い

SWELLはWordPress標準エディター対応しているテーマです。くわえてオリジナルの装飾機能が使えるのでデザインの自由度はかなり高いです。

画像やテキスト以外にも動画を背景に設置することもできます。

有料テーマの中にはものすごく自由度が低いものがあります。決まったフォーマットがあり、その中身だけを変更してサイトを作るといったタイプです。

テーマ販売サイトで紹介しているデザインとまったく同じデザインにするだけなら簡単なんですが、ちょっとしたアレンジができないことがよくあります。

SWELLはWordPressの標準エディターがベースです。デザインの自由度はかなり高めです。

かんた

以下はSWELL公式動画です。ページを作っている様子を見ることができます。

【作ってみた感想】オシャレ度

デザインのオシャレ度
評価 5.0 / 5
デザインのオシャレ度についての感想

オシャレな装飾機能が多い

SWELLならではのオリジナル機能を紹介します。

装飾機能の一例

  1. ブロークングリッド
  2. ステップブロック
  3. FAQブロック

ブロークングリッド

デモサイトではここ数年Web業界で流行している「ブロークンなレイアウト」を取り入れてみました。

SWELLのブロークングリッド

ブロークンレイアウトとは少しレイアウトを崩したデザインのことです。上記画像のように、画像の上に少しだけテキストをずらして載せるのがブロークンレイアウトの一例です。

SWELLには「ブロークングリッド」という機能があります。この機能を使うとデモサイトのようなブロークンデザインをアレンジできます。

かんた

デモサイトではメインビジュアル部分をブロークングリッドで作り込みました。

メインビジュアル部分以外のコンテンツエリアでもブロークングリッドを使えます。デモサイトでは単調にならないよう画像とテキストを逆にした要素を配置しています。

ブロークングリッドデザイン
左に画像を配置したブロークングリッド

SWELLのブロークングリッドはスマホにも対応しています。自力でブロークンなデザイン作るときって、レスポンシブコードを書くのが面倒なのでかなり便利だなと感じます。

ステップブロック

プロフィールページには「心理カウンセラーの経歴」といったコンテンツを作りました。この経歴部分はSWELLオリジナルの装飾「ステップブロック」を使っています↓

SWELLのステップブロック

ステップブロックはデモサイトで使ったデザインだけでなく、合計で3種類から選べます。

心理カウンセラーのサイトだと、経歴以外にも「サービスの流れ」といったコンテンツ制作にも活用できます。

STEP
STEP

FAQブロック

SWELLのFAQブロック

FAQブロックは「よくあるお問い合わせ」用の装飾機能です。デモサイトのよくあるご質問ページでは「タブブロック」と併用してコンテンツを作りました。

心理カウンセラーのホームページだと、お支払いやキャンセルの方法などをFAQブロックで案内すると良いでしょうね。

デモサイトの構成データ

デモサイトの構成データ

心理カウンセラーのホームページ作成に使った「無料素材」、「便利な拡張プラグイン」などを紹介します。

WordPressテーマ

デモサイトのテーマはSWELLです。

記事執筆時の最新バージョン(2.5.6.5)で作成しました。

無料プラグイン

カウンセラーのデモサイト制作に使ったプラグインの一部を紹介します。

プラグイン

  1. Blocks Animation
  2. Counter Number Showcase
  3. SEO SIMPLE PACK
  4. WP Forms Lite

【プラグイン①】Blocks Animation

Blocks Animationプラグインはアニメーションのエフェクトをつけるプラグインです。

デモサイトではあんまり派手に使っていませんが、各要素がフワッと表示されるよう設定しています。アニメーション系のプラグインは多々ありますが、このプラグインには次の特徴があります。

特徴

  • エフェクトの種類がたくさんある
  • 設定が簡単
かんた

個人的にエフェクト系プラグインでナンバー1

【プラグイン②】Counter Number Showcase

Counter Number Showcaseプラグインは数字をグワーと動すカウンター系のプラグインです。

有料バージョンもありますが、カウンセラーのデモサイトでは無料版の機能だけを使っています。このプラグインは海外のプラグインで日本語に対応していません。

かんた

すこし設定に戸惑うかもしれません。

【プラグイン③】SEO SIMPLE PACK


SEO SIMPLE PACKプラグインはMetaまわりの設定を行うプラグインです。

各ぺージの「meta description」、「SNSでシェアされた時に表示される表示」の設定をするさいに使います。

デモサイトだと不要なんでしょうが、じっさいのサイト運営時にはあったほうが良いプラグインです。アクセス数解説ツールの定番「グーグルアナリティクス」のコードもこのプラグインで設定できます。

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

かんた

SWELLとの相性もバッチリです。

【プラグイン④】WP Forms Lite

WP Forms Liteプラグインは問い合わせフォームを作るプラグインです。

日本開発者の提供しているContact Form7も定番ですが、このプラグインも日本語対応しているので使いやすいと感じました。

かんた

SWELL公式サイトで推奨プラグインとして紹介されています。

レンタルサーバー

デモサイトのレンタルサーバーは、エックスサーバーの「スタンダードプランです。

スタンダードプラン(旧X10プラン)の月額料金はザックリ1,000円です。

仕事がら色んなレンタルサーバーを試していますが自分が試した限り、一番SWELLと相性の良いレンタルサーバーです。

相性ってなんだ?」っ話ですが、WAFとキャッシュまわりの仕様がWordPressサイト運営で大事なポイントです。

かんた

詳しくは次の記事で紹介しています。

画像などの素材

デモサイトの画像は全て「AC写真の無料素材です。おそらく国内で一番大きめの無料素材サイトではないでしょうか?

海外の素材サイトだとどうしても日本人っぽい素材が見つかりませんが、AC写真は日本人のモデルを含む素材が豊富です。

かんた

AC写真は系列にACイラスト、AC動画といった系列サイトがあります。アカウントを作っておくと、系列サイト共通で使えます。

公式サイト

独自カスタマイズ

SWELLのハンバーガーメニューをPCサイトに表示

ページ上のグロナビ部分をテーマファイルを編集しない程度で独自カスタマイズしました。

スマホ用のハンバーガーメニューをPCサイトで常時表示させています。

かんた

このカスタマイズは次の記事で紹介しています。

まとめ

WordPressテーマSWELLで作成した心理カウンセラーのサイトを紹介しました。

プログラムのコードに関する知識がなくても、かなりオシャレなサイトが作れます。

かんた

ぜひSWELLでのサイト制作にチャレンジしてみてください。

公式 WordPressテーマ「SWELL公式サイト」

よかったらシェアしてね!
  • URLをコピーしました!
もくじ
先頭へ
目次
閉じる