制作実績 WORK

観光キャンペーンLP

サイト情報

事業ジャンル 観光・旅行
ユーザー名、パスワード ID:demo PW:demo
サイトタイプ HTML

制作概要

尾道観光をテーマにしたキャンペーンLPのコーディングサンプルです。提供されたデザインデータをもとに構築を行いました。

スマートフォン、タブレット、パソコンのどのデバイスからも快適に閲覧できるレスポンシブデザインで、複数のアニメーションを実装した動きのあるWebサイトです。

コードを1px単位で調整してデザインを忠実に再現する、ピクセルパーフェクトを実施しています。

制作のポイント

用途に合わせた2種類のスライド表示

画像を横にスライドして閲覧できる機能を2パターン実装しています。「写真ギャラリー」は自動でゆっくりと流れる仕組み、「おすすめスポット」は矢印ボタンを使って手動でめくる仕組みになっています。

よくあるご質問(折りたたみ表示)

質問をクリックすると回答が表示される仕組み(アコーディオン)を実装しています。情報量が多くてもページが長くなりすぎず、知りたい情報をスッキリと探せます。

キャンペーン特典(ポップアップ表示)

気になる特典をクリックすると、その場でウィンドウが開く機能(モーダル)を実装しています。ページを切り替える手間がなく、今の画面のままで詳細を詳しく確認できます。

スクロール・ホバー演出

ページをスクロールすると文字が下からフワッと浮き上がるフェードインアニメーションや、PCで画像にカーソルを乗せた際に画像が少し拡大するズームアップアニメーションを実装し、LPに動きを加えています。

お問い合わせフォーム

入力に不備がある際、メッセージを表示するだけでなく、入力枠や項目名の色を変化させるエラー表示を実装しています。どこを修正すればよいかが直感的に伝わるため、スムーズに入力作業を行えます。

次の実績へ 介護派遣サービス
制作実績一覧へ

Webサイト制作・Web集客に 関するご相談はお気軽に

お見積もりやご相談は無料です。まずはお気軽にお問い合わせください。