眼科 HP

ユーザー層の状況を意識し、構築面でもストレスのかからないサイトへ

デザインは別のデザイナーが担当し、私はフロントエンド実装を担当しました。Adobe XDデータを元に、デザインの意図や雰囲気を正確に表現できるよう、要素の余白・フォントサイズ・レスポンシブ時のバランスに特に注意しました。
また、CSSアニメーションやJavaScriptによる動きも取り入れ、ブランドの世界観をより引き立てる実装を心がけています。

治療案内ページには、目に関する病気の症状とその治療法など、多くの説明が記載してあります。そのページを訪れる方は特定の病気に関する情報を得たくて訪れることが多いと想定し、ページスクロールに合わせて、小見出しが画面に固定されるようにし、ユーザーがストレスなく見たい情報へ辿り着けるようにしています。

また、サロンなどのまったりした雰囲気とは少し違い、少しでも早く病院へ掛かりたい方が見ることも多いと考えたため、表示に時間のかかるような余計なアニメーションはあえて付けないようにしています。