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

サンプルサイト

パソコンでみた場合

スマホでみた場合

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

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

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

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

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

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

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

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

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

ざっくりとした流れ

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

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

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

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

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

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

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

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

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

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

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