学校の課題として、提供されたデザインカンプの「見た目の印象」をブラウザ上でいかに正確に再現するかに注力して制作しました。単に数値をなぞるだけでなく、余白感やフォントの佇まいなど、デザインが意図する清潔感と信頼性を損なわないコーディングを追求しています。

医療機関のサイトとして、情報の「見つけやすさ」と「安心感」を重視したマークアップを行いました。診療設備紹介に定義リストを使用するなど、HTMLの文書構造を適切に整理することで、情報の重要度が正しく伝わる、誠実な実装を心がけています。

実装においては、Sass（SCSS）を活用してデザインルールを厳密にコードへ落とし込み、サイト全体の視覚的な統一感を追求しました。具体的には、タイトル（%ttl）やサブタイトル（%subTtl）などの共通パーツをプレースホルダーとして定義し、文字組みには独自のミックスインを用いることで、カンプが持つ独特の空気感や「見た目の印象」をブラウザ上で寸分違わず再現することに注力しています。 また、単なる静的な再現にとどまらず、JavaScriptを用いてメインビジュアルの通過に合わせてヘッダーの表示を切り替えるなど、スクロール体験に連動した機能的な演出を取り入れました。さらに、CSSの擬似要素を駆使した矢印の動的な表現やホバー時の滑らかなアクションなど、ユーザーが直感的に「心地よい」と感じる微細なインタラクションにもこだわり、細部まで妥協せずに作り抜いています。