Common Parts Preview

【テスト】汎用スタイル

Section Heading Set

セクション見出しセット

内部ページで共通して使いやすい H2 見出し、H3 見出し、リード文の基本セットです。既存テーマの余白感や文字色のトーンを踏襲しつつ、説明文が読みやすいバランスで配置しています。

H3 見出しのサンプル

ページ内の中見出しとして自然に使えるよう、中央寄せ・緑色・ほどよい文字間で整えています。下に続く本文は少し狭い幅にして、可読性を優先しています。

Box Variations

枠付きボックスのバリエーション

通常ボックス

標準的な説明や補足文の表示に使えるボックスです。細い枠線と淡い影で、内部ページの情報整理に向いた見た目にしています。

注意ボックス

注意事項や受診前の案内など、少し強調したい内容向けのバリエーションです。背景色だけを軽く変えて、過度な装飾は避けています。

補足ボックス

制度説明や備考、追加の案内などをやわらかく区切るためのボックスです。通常ボックスよりさらに軽い印象で使えます。

Column Layout

カラムレイアウト

Image

2カラム 画像+本文

2カラムでは画像と文章、または文章同士の組み合わせを想定しています。スマホでは自動的に1カラムへ切り替わります。

2カラム 本文+本文

テキスト量に差がある場合でも並びが破綻しにくいよう、カード単位で整えています。情報比較や案内の分割に向いています。

Image

3カラム A

3つの特徴や案内を並べたい時に使える基本形です。

3カラム B

画像なしの本文カードとしても使えるシンプルな構成です。

3カラム C

スマホでは1カラム化し、情報の順番を保ったまま表示できます。

Image

4カラム 1

小さめの情報カード向けです。

4カラム 2

PCで4列、スマホでは2列です。

4カラム 3

同じ高さに揃えやすい設計にしています。

4カラム 4

補足情報や導線の整列に使えます。

Lists And Buttons

リストとボタン

リスト系

  • 通常リストの1行目です。
  • 通常リストの2行目です。
  • 通常リストの3行目です。
  • 注釈リストは少し控えめな文字サイズです。
  • 補足や備考の列挙を想定しています。
  • チェック付きリストのサンプルです。
  • メリットや対応内容の整理に向いています。

FAQ And Flow

FAQ とフロー

Q

初診でも予約できますか?

はい、予約可能です。診療内容や混雑状況に応じてご案内方法が変わる場合があるため、詳細は各ページで調整してお使いください。

Q

持ち物は何が必要ですか?

保険証や各種医療証、お薬手帳などの一般的な案内を、後からページごとに差し替えやすい形にしています。

  1. STEP 1

    内容を確認する

    最初に案内文や対象条件を確認します。

  2. STEP 2

    必要事項を準備する

    書類や持ち物などを整えます。

  3. STEP 3

    受診または相談する

    必要に応じて来院や問い合わせを行います。

  4. STEP 4

    次の案内へ進む

    結果や次回案内へ自然につなげられます。

Profile Components

医師紹介・スタッフ紹介

Doctor Photo

院長

原田 太郎

地域の皆様が安心して相談できる耳鼻咽喉科を目指し、症状だけでなく日々の不安にも丁寧に向き合う診療を心がけています。

経歴
〇〇大学医学部卒業/〇〇病院耳鼻咽喉科勤務/南福岡駅はら耳鼻咽喉科 開院
資格
日本耳鼻咽喉科頭頸部外科学会 専門医
所属学会
日本耳鼻咽喉科頭頸部外科学会/日本アレルギー学会

笑顔で安心してお帰りいただけるよう、受付から丁寧にご案内します。

受付スタッフ 山田 花子

小さなお子さまにも安心して受診していただけるよう、やさしい声かけを大切にしています。

看護スタッフ 佐藤 未来

First Visit Box

初診の持ち物ボックス

初診の方は受診時に下記をご用意ください。

  • マイナ保険証
  • お薬手帳
  • 各種受給者証(お持ちの方)

Table And CTA

テーブルとCTAボックス

初診料 3,000円前後 保険診療・3割負担の目安です。
再診料 1,500円前後 診療内容により変動します。
補聴器相談 お問い合わせください 完全予約制でご案内しています。

Contact / Reservation

お問い合わせ・ご予約はこちら

診療内容や受診方法について不明な点がある場合は、お電話またはWEB予約をご利用ください。

Access Information

アクセス・駐車場案内

車でのアクセス方法

県道沿いの医院前駐車場をご利用いただけます。カーナビでは「南福岡駅はら耳鼻咽喉科」で検索してください。

電車でのアクセス方法

JR南福岡駅から徒歩約3分です。駅を出てロータリーを右手に進み、県道沿いをまっすぐお越しください。

Parking Map

駐車場案内

提携駐車場をご利用の際は、受付で駐車券をご提示ください。サービス券をお渡しします。満車時は近隣コインパーキングをご案内する場合があります。

  • 受付で駐車券をご提示ください。
  • サービス券をお渡しします。
  • 場所が分かりにくい場合はお電話でご案内します。

Doctor Variations

医師紹介スタイル 追加パターン

Doctor Photo

院長

原田 太郎

大きめの写真を主役にした紹介パターンです。ごあいさつ文を自然に読ませながら、医院の雰囲気や先生の印象をしっかり見せたい時に使えます。

経歴
〇〇大学医学部卒業/〇〇病院耳鼻咽喉科勤務/南福岡駅はら耳鼻咽喉科 開院
資格
日本耳鼻咽喉科頭頸部外科学会 専門医
Doctor Photo

副院長

原田 花

写真を右側に配置した差分パターンです。本文の流れに変化を付けたい時や、ページ内で紹介ブロックが続く時の見え方にメリハリを出したい場合に使えます。

経歴
〇〇大学医学部卒業/〇〇病院勤務/南福岡駅はら耳鼻咽喉科 副院長
資格
日本耳鼻咽喉科頭頸部外科学会 専門医

Facility Gallery

院内紹介スタイル

Main Photo 1
Main Photo 2
Main Photo 3

Web Reservation Guide

初診のためのWEB診療予約案内

予約システムのご利用可能時間

午前 8:30~12:00 / 午後 14:30~18:30

※土曜のみ 8:00~12:00

※※土曜午後・日祝は休診日です。

ご注意事項

  • 診療時間内であっても受付時間をすぎた場合、受診できない可能性があります。
  • 極力ご来院いただいた患者様は診察したいと思っていますが、受付時間外の場合その時点での待ち人数によってはお受けできないこともあります。大変ご迷惑をおかけいたしますが、ご理解の程よろしくお願いいたします。
  • オンライン受付をされて順番通りに来られない場合はキャンセル扱いとなる可能性がありますので、十分にご注意ください。
  • オンライン受付後にキャンセルされる場合は、マイページにログインしてキャンセルしてください。

Animation Preview

出現アニメーションの確認

fade-up

少し下から自然に浮かび上がる動き

見出しやカードなど、基本の出現演出として使いやすい控えめなパターンです。

fade-in

移動量を持たないフェード表示

本文や補助要素など、静かに見せたい要素向けのパターンです。

fade-left

右側から滑り込むような表示

横並びのブロックや説明カードの導入に合わせやすい動きです。

fade-right

左側から入る軽いスライド表示

レイアウトの流れを崩さずに、視線をやわらかく誘導できます。

Interactive Components

汎用JSコンポーネントの確認

アコーディオン

初めてご来院の方には、受付後の流れや必要なお持ち物をご案内します。院内で迷わないよう、できるだけ分かりやすい導線を意識した説明文を入れる想定です。

タブ切替

みみの症状

中耳炎や外耳炎、耳鳴り、聞こえにくさなどの説明を切り替えて表示するためのタブです。一覧ページの分類切替や診療内容の整理にも使えます。

カルーセル

モーダルウィンドウ

お知らせ詳細や受診前の注意事項など、画面を離れず確認したい情報に向いたモーダルです。本文量が多い場合でも内部だけスクロールできるようにしています。