コンセプト

• 温もり
• 川辺の静けさ
• 手仕事感

深い緑と落ち着いたブラウンを基調に、川沿いでゆっくりコーヒーを飲む時間を表現しました。写真を主役にしつつ、文字や余白を詰め込みすぎないことで、実店舗のカフェが持つ温かみをそのまま伝えるデザインを目指しました。

実装・工夫

• ファーストビューに3枚の写真をゆっくりズームさせながらクロスフェードするスライドショーを実装。単調にならないよう、フェードイン→保持→フェードアウトの多段階アニメーションで自然な切り替えにしました。
• スクロールに合わせて要素がふわっと現れるAOSライブラリを導入し、ページを読み進める体験に緩急をつけました。
• ハンバーガーメニューをPC・スマホ問わず共通の挙動にすることで、画面幅によってUIが変わる違和感をなくしました。
• ヘッダーに営業時間変更などのお知らせを表示し、＜＞ボタンで複数件を切り替えられる簡易お知らせ機能をJavaScriptで実装しました。
• お問い合わせフォームはlabelとinputを正しく紐づけ、入力欄の余白や幅をレスポンシブに保つことでスマホでも使いやすい設計にしました。

振り返り

CSSアニメーションのタイミング調整や、JavaScriptで配列とインデックスを使った状態管理など、動きのある実装を初めて自分の手で組み立てた制作でした。画面幅によってレイアウトが崩れる原因の切り分けに苦戦しましたが、box-sizingやpaddingの仕組みを理解を深める良い機会になりました。今後は、コードを書く前に設計や崩れやすい箇所を見積もる力をつけていきたいです。