Cafe-Site

2026年3月16日 2026年4月26日 hamada

学習ポイント
カフェのWebサイト制作を通して、hoverアニメーションの実装を学びました。
ボタンや画像にマウスを乗せた際に変化を加えることで、ユーザーが操作できる要素を直感的に理解できるよう意識しました。

工夫した点
カフェサイトらしい落ち着いた雰囲気を意識し、写真の見せ方や余白のバランスを調整しました。
また、hover時の動きが強すぎるとサイト全体の雰囲気を損ねるため、自然で控えめなアニメーションになるよう速度や変化量を調整しました。

hoverアニメーションの工夫
メニュー画像やボタンにhover効果を加えることで、ユーザーが「クリックできる場所」を分かりやすくしました。
CSSの transition を活用し、滑らかな動きになるよう調整しています。

コメント
デザイン性だけでなく、ユーザーが操作しやすいサイトを意識して制作しました。
hoverアニメーションを取り入れることで、静的なデザインに動きを加え、より印象に残るサイトに仕上げることができました。今後はレスポンシブ対応やJavaScriptを使った動きも取り入れていきたいです。