架空の歯科医院である五反田歯科医院のホームページを作成しました。

スクールでの学習で、Figmaを使ってワイヤーフレーム作成、プロトタイプ作成、デザイン模写を行いました。その後は独自でコーディングを行い、デザインからコーディングまでを通じて制作しました。

特に、レスポンシブ対応や適切なHTML構造を意識し、実践的なスキルを習得することを目的としています。

地域に住む、この歯科医院の利用を考えている方、あるいは通っている方。

初めての利用でも安心感を持ちたいと思う方。

予約や診療内容をオンラインで確認したい方。

地域の患者に信頼感と安心感を与えるため、医院の特徴や診療科目をわかりやすく伝える。

初めての患者でも受診の流れをイメージしやすくし、来院の敷居を下げる。

オンライン予約やアクセス情報を提供し、利便性を向上させることで、患者のスムーズな来院をサポートする。

医院の親しみやすさを伝え、リピーターとしての定着を促す。

トップページ

医院の特徴や治療のポリシー、お知らせを簡潔にまとめ、医院の特色がわかるようなビジュアルとメッセージを配置しています。

診療案内ページ

診療科目ごとの詳細情報を掲載しています。ページトップには各診療内容にジャンプするボタンが設置されており、画面の右下にはトップへ戻るボタンがあるため、必要な情報が複数あってもスムーズに対応できるような構成にしています。

スタッフ紹介ページ

院長の経歴や所属学会などをわかりやすく提示することで、安心感や信頼感を与えることを意識したデザインとなっています。

アクセス・診療時間ページ

アクセス情報はGoogleMapを埋め込み、簡潔にわかりやすい構成になっています。

お知らせページ

新着情報を更新していくページです。こちらに入力した上部3つの内容が、トップページに自動で表示されるようにしています。

WEB予約ページ

フォームを用い、WEBで予約できるようにしています。

ワイヤーフレーム作成・プロトタイプ作成・デザイン（トレース）：3日

コーディング：1週間

Figma / Visual Studio Code

HTML5 / CSS3 / JavaScript（jQuery）