ページの構成について
このページはサンプル治療院のサイトのトップページと想定してますが、本来のトップページはこの本文の上部に「ヘッダー画像(スライドショー)」と「3つのPRエリア」が表示されます。
このサイトの【トップページ】が本来のトップページですので、トップページのみ、ヘッダー画像(スライドショー)、3つのPRエリア、本分…という表示順序になります。
ヘッダー画像(スライドショー)は、パソコンで閲覧してもスマホで閲覧しても、画面幅いっぱいの大きな画像として表示されます。
このサイトで使用しているテーマは治療院サイトに最適なテーマ「BizVektor」ですが、「BizVektor」は【トップページ】の『PRエリア』が特徴です。
その特徴のせいで、他の治療院と同じデザインになってしまうこともあります。
PRエリアの機能は欲しいけど、他の治療院とカブるのはイヤなので、このページでは画像の挿入でPRエリア風のデザインにしてあります。
オリジナルなデザインも可能ですので、自分の治療院に最も適した方法を考えていきましょう。
サイトのデザインと機能性
このサイトはワードプレスというブログ作成のツールを使用しています。
ワードプレスはブログを作成するものなんですが、使い方を少し変えると、きちんとしたホームページとしても利用できます。
また、ワードプレスには様々なサイト(ブログ)デザインのテーマ(テンプレート)が用意されており、テーマを変更するだけで簡単にホームページのデザインを変更することができます。
例えばこのサイトでは、『BizVektor』というテーマを使用しています。
BizVektorテーマは、企業・店舗向けのワードプレステーマですので、各ページの上部に「電話番号」が表示されるようになっていたり、サイト本文を読み終わった後に「電話番号」と「メールでお問合せ」というリンクが表示されるようになっています。
この表示は設定画面で電話番号や治療院所在地、受付時間などを入力するだけで、全てのページに自動で反映されるようになっています。
他にも、サンプル治療院ブログで使用しているワードプレステーマは、『Simplicity』といいますが、これはホームページ的なデザインではなく、いかにもブログというデザインになっています。
Simplicityでは、電話番号などの治療院の情報が表示される設定にはなっておりませんが、ブログとして検索結果に出てきやすいデザインで作成されています。
パソコンで閲覧した際のデザイン
パソコンでBizVektorテーマを閲覧すると、画面左上に画像が表示されます。
これも設定画面で画像を選択するだけなのですが、治療院のロゴなどを選択しておくと全てのページの左上に治療院のロゴが表示されるようになります。
画面の右上には電話番号と受付時間が表示されます。
これも設定画面で電話番号や受付時間を入力するだけで全てのページで表示されます。
その下に画面横幅いっぱいにリンクメニューが並びます。
ヘッダーメニューやグローバルメニューなどと呼ばれますが、これもメニューの設定で自分の想うように並び替えることができます。
通常はヘッダーメニュー部分の『【トップページ】』のように、そのメニューをクリックするとページに移動するという形式になりますが、ヘッダーメニュー部分の『▼サンプル治療院』のように、クリックはできませんが、マウスを合わせると、下にリンクメニューが現れるような設定にもできます。
ヘッダーメニューの下には、ヘッダー画像が表示されます。
このヘッダー画像も設定画面で画像を設定するだけで表示されます。
同じサイズの画像を複数枚設定すると、このサイトのトップページのようにヘッダー画像がフェイドイン・フェイドアウトしてスライドショーを表示することもできます。
※画像の表示時間も任意で設定が可能です。
※ヘッダー画像を非表示にしたり、全ページでヘッダー画像を表示することもできます。
ヘッダー画像の下には「PRエリア」が表示されています。
リンクページのイメージ画像と説明が横に3つ並んで表示されます。
PRエリアはトップページに飲み掲載できるもので、通常のヘッダーメニューのリンクとは別に、特別なページなど、PRしたいページを設定します。
治療院で使うとすれば、キャンペーン情報のページ、休業日のお知らせページ、メルマガ、お客様の声など、是非とも見てほしいページをPRエリアに設定すると、訪問者に閲覧されやすくなります。
PRエリアの下には本文が表示されています。
PRエリアを非表示にしたり、本分と順番を入れ替えたり、PRエリアと本文の間に最新のメルマガ一覧を表示したりなど、デザインは自由自在です。
本文欄の左側には、またリンクメニューが並んでいますが、リンクメニューを画面の右側にして、本文欄を左側にすることも可能です。
本分の下にはフッダーメニューとしてヘッダーメニューと同じようにリンクメニューが並びます。
フッダーメニューはヘッダーメニューと同じものを掲載することもできますし、ヘッダーメニューとは別のメニューを掲載することもできます。
サイト最下部左側には画像を挿入することができます。
画像が未設定なら治療院名などが表示され、その下に治療院の所在地を掲載することができます。
サイト最下部右側には、またメニューを表示できます。
これも、独自のメニューを掲載することができます。
大まかなデザインはこのようになっていますが、自分の好きなように表示順序を変えたりなど、お決まりのテンプレートデザインのままではなく、オリジナリティーを出すことも可能です。
スマホで閲覧した際のデザイン
スマホでこのサイトを閲覧すると、パソコンで閲覧した時と内容は同じですが、スマホで閲覧しやすいように自動でサイトデザインが変わります。
最上部には治療院ロゴ、その下に電話番号や営業時間などが表示されます。
スマホで閲覧すると、ページ上部の電話番号をタップするとそのまま電話がかけられるようになっています。
その下にヘッダーメニューが表示されますが、スマホではヘッダーメニューがプルダウン表示に変わり、メニューをタップすると垂れ幕のようにリンクメニューが表示されます。
メニューの下にはヘッダー画像、その下にPRエリアが表示されます。
パソコンでは横に3つ並んでいたPRエリアですが、スマホでは縦に3つ並ぶデザインになります。
PRエリアの下に本文が続き、パソコンでは本文欄の横にあったメニューが、スマホでは本文の下に表示されます。
その下にフッダーメニュー、画像、治療院所在地、リンクメニューと続き、ページの最後となります。