Published on

クリニック風のHPを開設・制作したい方のためのサンプルテーマ

目次

ふとクリニック系のデザインを作ってみようと思い、実際に使えそうなWordPressのテーマ(子テーマ)を作ってみました。クリニック風のものをつくってみました。

既存サイトのリニューアルやとりあえずホームページを制作したい方など、よければ使ってみてください。

クリニック系のキーワードだとメンタルクリニックの検索が多いみたいだったので今回はメンタルクリニックにしました。

サンプルサイト

https://testweb.dev/mentalsitetheme00/

パソコンでみた場合

スマホでみた場合

念の為パフォーマンスのスコアもチェックしましたが特に問題はないでしょう。

ペルソナ・カスタマージャニー

ターゲット層を大まかに想定、誰にみてもらいたいか。

  • 10代20代の男女
  • 心を病んでる人
  • SNSなどで人間関係に疲れた人

病んでいる人にポップで元気なものを見せるのはどうかと思ったのでシンプルでわかりやすさを優先。結果年代は特に問わないデザインになった。

悩みはあるけど相談すべきかどうか、だれに相談すればいいのかわからない。
といった状況の人がサイトをみたときに短時間で内容を把握でき、相談するまでのフローを簡単にすることを目的にしました。

ただでさえ悩んでいるのにサイトの説明をじっくりみないといけなかったり構造を理解させ負担をかけるのは避けたいですね。

実際はもっと細かいほうがいいと思いますが今回はこれで。

どんなデザインにするか

レイアウトはF型の視線移動を意識して、配色は落ち着いた印象にするためにキーカラーは緑、青あたりに。ツールでベースカラーなどと見比べて青よりの色に決定。

文字のジャンプ率もなるべくつけるようにしました。

各セクションをシンプルに余白を意識しつつ、すっきりさせました。

視線の流れに沿って導線をつくる

ざっくりとした流れ

  • ユーザーを惹きつける
  • 特徴をしっかり伝え、興味をもってもらう
  • 詳しい情報をつたえる
  • お問い合わせへと繋げる

まず目に止めてもらう必要があるので、ページ上部のヒーローイメージとキャッチコピーでインパクトを出す。

次に、クリニックの特徴をいくつかピックアップして特に伝えたいアピールポイントを大きな見出しにする。(サイトの離脱を極力回避するのが目的)。

次に、クリニックの特徴を知ってもらったら、クリニックについてより詳しく知ってもらうため、写真を交えて紹介をします。(他のページなど)
ごちゃごちゃしないようなるべくシンプルに3つにしました。

そして、ここまでで行ってみたい相談してみようかなといったユーザーもいるかと思うので、クリニックについての最新情報、場所の情報を伝えます。

最後に、相談するための具体的な方法として、お問い合わせページへのリンクを設置します。

すべてのページをみなくてもTOPページだけでおおよそのことが伝わり、お問い合わせまでもスムーズに行えるのでユーザビリティもいいのではないと思います。

ちょっとした特徴

お問い合わせにつながるようにTOPページ以外もページ下部にお問い合わせへのリンクエリアが表示されるようにしています。

このテーマについて

このテーマはWordPressがベースでCocoonというテーマの子テーマです。なのでCocoonのテーマをインストールしたあと、この記事のテーマをインストールすることでご利用できます。
すべて無料です。

ダウンロード

https://github.com/melo22/clinic_childtheme

カスタマイズについて

カスタマイズは自由に行っていただいて問題ありません。

クリニック風テーマとしていますが、特にジャンル問わずご自由にどうぞ。
色や見出し、テキストの変更は子テーマのfront-page.phpやstyle.cssで変更可能です。
PC表示の画像は管理画面の「Cocoon設定」「ヘッダー」「ヘッダー背景画像」の項目で変更できます。

サイト制作やカスタマイズのご依頼はご連絡いただけると喜びます。
このテーマいじれる?といったリクエストなども大歓迎です。