matsuyama clinic

概要

オンラインスクールHello Mentorの課題として制作した、架空クリニック「MATSUYAMA CLINIC」のWebサイトです。

スクール方針に沿い、サイズ指定は rem を中心に実装しています。

デザインカンプをもとに、HTML / CSS のコーディング、JavaScript によるインタラクション実装（ハンバーガーメニュー、ヘッダー制御、アニメーション）を担当しました。

本課題では、デザインカンプの再現に加えて、ユーザー体験を高めるためのインタラクションを自ら設計・実装することを目的に制作しました。課題要件に含まれていないJavaScript実装にも挑戦し、実務に近い思考でのコーディングを意識しています。

dialog要素の表示方式の選定

ハンバーガーメニューの開閉操作をヘッダーの同一ボタンで行う設計のため、モーダル表示ではなく通常表示となる dialog.show() を採用しました。これにより、メニュー表示中でもヘッダー操作が可能となり、レイヤー構造や操作性が破綻しないようにしています。
背景スクロールの制御

メニュー表示中に背面コンテンツがスクロールしないよう、 body・html に対してスクロール制御を行いました。特に iOS Safari で起きやすいスクロール問題にも配慮し、モバイル環境でも安定した操作感になるよう実装しています。
誤操作を防ぐUI制御

メニューの背景部分をクリックした際に閉じる挙動を実装しつつ、ナビゲーションリンクやボタン操作時には意図せず閉じないよう判定処理を加えました。ユーザーの誤操作を防ぎ、安心して操作できるUIを意識しています。
Intersection Observerを用いたヘッダー制御

ファーストビューが画面外に出たタイミングでヘッダーを固定し、視認性に応じてロゴの表示を切り替える実装を行いました。また、メニュー表示中は監視処理を停止し、状態が競合しないように制御しています。

dialog要素の扱い、モバイル環境でのスクロール制御、Intersection Observerを用いた実装を学びました。

見た目の実装だけであれば動作するケースでも、モーダル表示中の操作制限や、iOS Safari 特有の挙動などを考慮しないと、実際のユーザー体験としては不十分になることを実感しました。