Case Study Case Study
Onomichi
Detail
- 制作範囲
- 静的コーディング
- 制作期間
- 30日
- 使用言語
- HTML / CSS（Sass） / JavaScript
- 使用ツール・CMS
- Figma
- Basic認証
- ユーザーID：demo / パスワード：demo
Point
”detail” と “summary”を使用したアコーディオンUI
- 先頭にあらかじめ “is-open” クラスを1つ付与し、開閉式コンテンツであることを明示。
- 開閉時に横の「＋」が「−」へスライドするよう、”translate” を用いたアニメーションを実装。
dialog タグを使用したモーダル表示
- 画像にホバーすると拡大し、あわせて枠線やボタンの色が変化することで、操作可能な要素であることを直感的に伝えている。
- 画像をクリックすると dialog タグを用いたモーダルが表示され、詳細情報をスムーズに確認できる。
バリデーションエラー時のユーザー補助設計
- エラー発生時にスムーススクロールでお問い合わせフォームの先頭へ自動遷移。
- border・タイトル・背景色を変更することで、未入力箇所が一目で分かるよう工夫。
Code
