Site-3
コピーする
パスワード兼ユーザーID :
概要
石井花壇という
「架空の温泉旅館のホームページ」
を制作しました。
「デザインカンプからのコーディング」
が私の担当範囲です。ただ、1366pxサイズのみのデザインカンプからコーディングしたため、それ以外の画面サイズでのデザイン,レイアウト調整に関しては私が担当しております。
※実在しない事業のサイトで検索結果が汚染されるのを防ぐため、サイトにはアクセス制限をかけています。アクセスの際は上記の「パスワード兼ユーザーID」をご使用ください。
使用スキル
- ・HTML
- ・CSS
- ・jQuery
工夫した点
ズームしながら画像が切り替わる
ファーストビューアニメーション
3パターンあるファーストビューが、少しずつズームしながら切り替わっていく仕様にしています。温泉旅館の落ち着いていてリラックスできる雰囲気を印象づけるために、ファーストビューの切り替え時間は長めにし、ズームの比率も大きくなりすぎないように設定しました。
日付選択機能がついた
予約モーダル
宿泊予約ボタンを押すとモーダルが出現するようにしました。予約画面には、プラン選択など以外に、宿泊日の日付選択ができる機能を実装しました。プラグインはFlatpickrを使用し、現在日より前の日は選択不可、複数日時選択ができるようにしています。
デザインが
スクロール位置によって変化するヘッダー
ファーストビュー専用のヘッダーとそれ以外のヘッダーでデザインが変化するようにしました。ファーストビュー専用のヘッダーを作成することで、よりファーストビューが効果的に表示されます。
下層ページで現在位置が把握しやすくなる
パンくずナビ
パンくずナビを実装することで、閲覧者がサイト内のどこにいるかを視覚的にわかりやすくし、ユーザビリティを向上を狙いました。
各デバイスサイズに適応した
レスポンシブデザイン
スマホやタブレット、ノートパソコンはもちろんのこと、表示崩れが多い1920px以上の大画面サイズにも対応しているサイトです。サイトのレイアウト崩れによって、ページ閲覧者が直帰することを防ぎます。