Tomonari's
Portfolio

尾道のキャンペーンのLPです。 ファーストビューに多くの画像を配置しつつ、あらゆる画面サイズ（レスポンシブ）でデザインが崩れないようレイアウトの維持に配慮しました。 Aboutセクションの装飾画像は calc() 関数で中央からの距離を指定し、画面幅が変わっても背景に隠れないようレイアウトを最適化しました。 Prizesセクションではホバー時に画像が拡大するアニメーションを実装しました。ユーザーに対して『クリックできること』を直感的に伝え、 自然な流れでモーダルウィンドウの展開（詳細表示）へ誘導できるよう、UI/UXを意識して設計しました。 パーフェクトピクセルを目指しているためカード内の画像はすべてpictureタグで実装し、 画面幅が変わってもデザインの比率や位置にズレが出ないよう厳密に対応しました。