ウェブサイト / 歯科クリニック
月白デンタルクリニック
治療の中身を、
落ち着いて選べるサイト。
審美・自費診療を中心にした架空の歯科クリニックのウェブサイトです。診療内容とリスク、費用の目安を同じ流れで読み、そのままWEB予約まで進める7ページで構成しました。
作品を開く架空の事業者を題材にした自主制作です。
不安より先に、
診療の中身を伝える。
自費診療は費用も判断も患者にゆだねられます。トップは人物の映像と短いコピーで印象を伝え、その先に診療内容・費用・院内の順で具体的な情報を置きました。
診療案内では治療ごとに主なリスク・副作用を本文のすぐ下に置き、そこから費用の目安へ直接たどれます。良い面だけを並べない構成にしています。
小さな写真を、
余白の中に掛ける。
淡い青みの白と濃紺を基調に、見出しは細い明朝体。トップは診療室の映像を全面に置き、三本の白い帯に縦組みのコピーを分けて重ねています。映像はスクロールの量に合わせて進み、最後はスタッフが並ぶ場面と横書きのコピーに変わります。
ヘッダーの細い帯にはロゴとWEB予約だけを置き、右上の月形のボタンを押すと、大きな明朝のナビが並ぶシートが右から滑り出ます。本文は小さめの写真を大きさ・高さ・左右をずらして掛け、大きな余白で組みました。スクロールに合わせて新月から満月へ並ぶ月の帯や月形のボタンが満ちていき、写真には真珠のような光沢が斜めに流れます。
メニューと日付から、
空いた時間を選ぶ。
WEB予約はメニュー・日付・時間・確認の四段階。所要時間の違う四つのメニューから選ぶと、休診日は選べない状態で日付が並び、選んだ日の枠だけが表示されます。
時間は午前と午後の枠が30分刻みで並び、枠ごとの残り数も出ます。予約の確認と取消も同じ画面から行えます。実際の予約・決済・メール送信は行わないデモです。
小さな画面では、
映像に帯を重ねる。
スマートフォンでは映像をヘッダーの下から画面の下端まで敷き、院長の顔が切れない位置に合わせました。コピーは縦組みをやめて横書きにし、白い帯に載せて映像の下寄りに重ねています。予約と診療案内のボタンは下にそろえ、ナビは右上の月形のボタンにまとめました。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- Astro / GSAP
Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン