カタチにしたもの
目指したこと
完成イメージを忠実に再現しながら、訪問者が直感的に操作できることを大切にしました。ページ内の動きや表示を丁寧に調整し、予約までスムーズに進める体験を実現することを目指しました。
つくる過程
-
ターゲット
仕事や家事、育児など日常で頑張る30〜50代の男女。
-
目的
操作性を高め、予約までの導線をスムーズに整えつつ、サイト全体にやさしく上品な印象を届ける。
-
課題
複数の動きや表示（メインビジュアル切替、モーダル表示、タブ切替、固定ヘッダー、ふんわりとした要素の表示など）をデザインの世界観を損なわず自然に体験できるように実装すること。
-
制作期間
3週間
-
制作ツール
VScode
ポイント
-
コーディング
メインビジュアルは完成イメージをもとに再現し、少しずつズームしながら切り替わる演出で柔らかな印象を届けています。 宿泊予約ボタンやタブ切替、スクロール時の固定ヘッダーも直感的に操作できるよう実装し、訪れる方が安心して予約まで進めるよう配慮しました。ページ内の要素はふんわりと現れ、上品なリズムでサイト全体にやさしい雰囲気を添えています。さらにパンくずには構造化マークアップを施し、訪れる方にも検索エンジンにもやさしい設計にしました。
ふり返り
-
次につながる気づき
複数の動きや操作を組み合わせる際、強弱や間隔を丁寧に調整することで、柔らかく心地よい体験を作れることを再確認しました。今後も、使いやすさと全体の印象のバランスを意識しながら、細部まで丁寧に形にしていきたいと思います。
