ウェブサイト / 眼科クリニック
陽和台眼科クリニック
見え方の不安を、
受診の一歩につなぐ。
駅前メディカルモールにある架空の眼科クリニックを題材にしたウェブサイトです。気になる症状から診療内容へたどり、初診の持ち物や診療時間まで確かめてから来院できる順序で組み立てました。
作品を開く架空の事業者を題材にした自主制作です。
受診の前に、
知りたいことから。
目の不調は自覚しにくく、受診をためらいやすいものです。そこで冒頭に診療時間と休診日を置き、症状・診療内容・初診の流れ・院内の設備という順に、来院前の確認事項をたどれる構成にしました。
トップの映像はスクロールに合わせて進み、診察室での対話、受付での出迎え、初めてのコンタクトへと場面が切り替わります。場面ごとに短い説明が添えられ、院内の日常を先に見せてから各ページへ振り分けています。
レンズの円で、
写真を切り抜く。
生成りの地に淡い緑を差し、見出しは明朝体、本文と操作はゴシック体に分けました。強い色は初診への導線だけに使っています。ヘッダーの下端は上まぶたのような弧にし、目のアイコンの「メニュー」を開くと、ナビが目の開くように上下へ現れます。
写真はすべて円形に切り抜いて細い輪と弧の目盛りを添え、PCでは本文が円の縁に沿って回り込みます。写真はぼけた状態からスクロールに合わせてピントが合い、節の境目では絞りの形の印が一度絞られてまた開きます。
気になる言葉から、
該当の診療を絞る。
診療案内には、キーワードで診療内容を絞り込む検索を置きました。入力するたびに該当する項目だけが残り、表示件数と「すべて表示」で元に戻せることを画面上で示しています。
よくあるご質問は開閉式にしました。予約や問い合わせの送信は行わず、掲載している電話番号・住所もすべて架空のものです。
小さな画面でも、
人物を画面いっぱいに。
スマートフォンでは映像を画面いっぱいに敷き、下から深緑へ暗くなる地にコピーとボタンを重ねます。場面ごとに映像の切り抜く位置を変え、人物が切れないようにしました。「メニュー」を開くと全ページが弧に沿って並び、診療時間と電話も一緒に出ます。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン