初心者SWELLで心理カウンセラーのサイトって作れるの？
どんなデザインになるの？
サンプルを見てみたい….
そんな疑問に答えます。
WordPressテーマ「SWELL」で心理カウンセラーのホームページを作ってみました。
【デモサイト】SWELLで作った心理カウンセラーのホームページ
SWELLで作成した心理カウンセラーのデモサイトを紹介します。
心理カウンセラーHP
かんたなるべく余計な要素を入れずにスッキリ仕上げました。
【作ってみた感想】デザインの自由度について
| デザインの自由度 | |
|---|---|
| 評価 | 4.5 / 5 |
かなり自由度が高い
SWELLはWordPress標準エディター対応しているテーマです。くわえてオリジナルの装飾機能が使えるのでデザインの自由度はかなり高いです。
画像やテキスト以外にも動画を背景に設置することもできます。
有料テーマの中にはものすごく自由度が低いものがあります。決まったフォーマットがあり、その中身だけを変更してサイトを作るといったタイプです。
テーマ販売サイトで紹介しているデザインとまったく同じデザインにするだけなら簡単なんですが、ちょっとしたアレンジができないことがよくあります。
SWELLはWordPressの標準エディターがベースです。デザインの自由度はかなり高めです。
かんた以下はSWELL公式動画です。ページを作っている様子を見ることができます。
【作ってみた感想】オシャレ度
| デザインのオシャレ度 | |
|---|---|
| 評価 | 5.0 / 5 |
オシャレな装飾機能が多い
SWELLならではのオリジナル機能を紹介します。
装飾機能の一例
- ブロークングリッド
- ステップブロック
- FAQブロック
ブロークングリッド
デモサイトではここ数年Web業界で流行している「ブロークンなレイアウト」を取り入れてみました。
ブロークンレイアウトとは少しレイアウトを崩したデザインのことです。上記画像のように、画像の上に少しだけテキストをずらして載せるのがブロークンレイアウトの一例です。
SWELLには「ブロークングリッド」という機能があります。この機能を使うとデモサイトのようなブロークンデザインをアレンジできます。
かんたデモサイトではメインビジュアル部分をブロークングリッドで作り込みました。
メインビジュアル部分以外のコンテンツエリアでもブロークングリッドを使えます。デモサイトでは単調にならないよう画像とテキストを逆にした要素を配置しています。
SWELLのブロークングリッドはスマホにも対応しています。自力でブロークンなデザイン作るときって、レスポンシブコードを書くのが面倒なのでかなり便利だなと感じます。
ステップブロック
プロフィールページには「心理カウンセラーの経歴」といったコンテンツを作りました。この経歴部分はSWELLオリジナルの装飾「ステップブロック」を使っています↓
ステップブロックはデモサイトで使ったデザインだけでなく、合計で3種類から選べます。
心理カウンセラーのサイトだと、経歴以外にも「サービスの流れ」といったコンテンツ制作にも活用できます。
FAQブロック
FAQブロックは「よくあるお問い合わせ」用の装飾機能です。デモサイトのよくあるご質問ページでは「タブブロック」と併用してコンテンツを作りました。
心理カウンセラーのホームページだと、お支払いやキャンセルの方法などをFAQブロックで案内すると良いでしょうね。
デモサイトの構成データ
心理カウンセラーのホームページ作成に使った「無料素材」、「便利な拡張プラグイン」などを紹介します。
WordPressテーマ
デモサイトのテーマはSWELLです。
記事執筆時の最新バージョン（2.5.6.5）で作成しました。
無料プラグイン
カウンセラーのデモサイト制作に使ったプラグインの一部を紹介します。
プラグイン
- Blocks Animation
- Counter Number Showcase
- SEO SIMPLE PACK
- 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公式サイトで推奨プラグインとして紹介されています。
レンタルサーバー
デモサイトのレンタルサーバーは、エックスサーバーの「スタンダードプラン」です。
仕事がら色んなレンタルサーバーを試していますが自分が試した限り、一番SWELLと相性の良いレンタルサーバーです。
「相性ってなんだ？」っ話ですが、WAFとキャッシュまわりの仕様がWordPressサイト運営で大事なポイントです。
かんた詳しくは次の記事で紹介しています。
画像などの素材
デモサイトの画像は全て「AC写真」の無料素材です。おそらく国内で一番大きめの無料素材サイトではないでしょうか？
海外の素材サイトだとどうしても日本人っぽい素材が見つかりませんが、AC写真は日本人のモデルを含む素材が豊富です。
かんたAC写真は系列にACイラスト、AC動画といった系列サイトがあります。アカウントを作っておくと、系列サイト共通で使えます。
独自カスタマイズ
ページ上のグロナビ部分をテーマファイルを編集しない程度で独自カスタマイズしました。
スマホ用のハンバーガーメニューをPCサイトで常時表示させています。
かんたこのカスタマイズは次の記事で紹介しています。
まとめ
WordPressテーマSWELLで作成した心理カウンセラーのサイトを紹介しました。
プログラムのコードに関する知識がなくても、かなりオシャレなサイトが作れます。
かんたぜひSWELLでのサイト制作にチャレンジしてみてください。
