概要
観光地の特集を想定して制作したキャンペーン LP のサンプルサイトです（仮想案件）。
担当はコーディングで、Figma
の支給デザインから忠実に実装しました。キャンペーンサイトに求められる訴求力と、写真やスライダーを生かしたリッチな見せ方を両立させています。
制作会社さまの視点では、インタラクションの多い
LP を、PC・スマートフォンの双方で快適に動かす実装力を確認いただける一例です。
課題
キャンペーンサイトには、訪れた人を引き込む訴求力が求められます。
同時に、スライダーやモーダルといったインタラクションを、スマートフォンでもストレスなく操作できることが欠かせません。見栄えと操作性を両立させる実装が、想定した課題でした。
解決アプローチ
操作性への配慮： Swiper を用いた無限ループのスライダーを実装し、フリックとボタンの両方に対応させました。PC ではボタン操作、スマートフォンではフリック操作と、デバイスに応じた自然な操作感を確保しています。
軽快さへの配慮： モーダル画面にはブラウザ標準の dialog タグを採用しました。専用ライブラリに頼らずネイティブ要素を活用することで、軽量かつアクセシブルな実装としています。
デザイン再現性への配慮： デザインカンプに忠実なコーディングを行い、レスポンシブでも崩れない適切な画像配置を徹底しました。観光地の魅力を伝える写真を、どの画面サイズでも見栄えよく表示しています。
工夫したポイント / 想定効果
モーダルにネイティブの dialog を採用したことで、ライブラリ依存を減らしつつ軽量・アクセシブルなインタラクションを実現した点が工夫です。
フリックとボタンの両対応により、スマートフォンでの操作離脱を抑え、キャンペーン情報を最後まで見てもらえる導線が期待できます。