Overview
ネストクリニックは架空の医療クリニックを想定したWebサイトです。医療サイトに求められる清潔感・信頼感・見やすいレイアウトを重視し、設計段階から統一感のあるデザインとユーザー体験を目指しました。
Project Title
NEST Clinic – Medical Site (Concept)
Live Site
https://hondamasazumi.github.io/NESTClinic/
Source Code（GitHub）
https://github.com/HondaMasazumi/NESTClinic
Tech Stack
- ツール： フォトショップ
- 技術： HTML/CSS
My Role & Process
講義で用意された完成見本をもとに、Photoshopによるデザイン制作（レイアウト・配色・構成の調整）から、HTML/CSSによる実装までを一貫して担当しました。医療クリニックのサイトとして清潔感や信頼性が伝わるよう配色や余白を調整し、セマンティックなHTML構造を意識しながら、約3週間で完成させています。
Highlights
清潔感・信頼感を重視したUI設計
医療クリニックのサイトとして安心感が伝わるよう、白を基調とした配色と余白設計を重視しました。
ファーストビューでは情報を詰め込みすぎず、清潔感と落ち着きを感じられるレイアウトを意識しています。
余白とタイポグラフィによる読みやすい情報設計
診療案内やお知らせなど、情報量が多くなりやすい医療サイトでも読み疲れないよう、文字サイズ・行間・ブロック間の余白を細かく調整しました。
情報同士の関係性が視覚的に伝わるよう、余白で区切る設計を行っています。
セマンティックなHTML構造と導線設計
HTMLではheader・main・section などのセマンティックタグを用い、コンテンツの役割が明確になる構造を意識しました。
診療案内・アクセス・問い合わせまで、初見ユーザーでも迷わない導線設計を心がけています。
Insights
制作を通じて確立した設計のポイント：
- Photoshopで作成したデザインをHTML/CSSへ忠実に再現するには、セクションごとの役割を読み解き、余白・文字サイズ・行間を細かく調整することが重要であると理解した
- 医療サイトでは情報を詰め込みすぎず、診療案内・アクセス・問い合わせまでの視線を自然に誘導する余白設計が、安心感と使いやすさにつながると理解した
- リセットCSSを土台にクラス名やスタイルの共通ルールを整理することで、複雑なレイアウトでも管理しやすいCSS設計が可能になるとわかった。