Case

ユーザーの興味を引きつける、新商品フォーカスのランディングページ

エクセン株式会社様

Issue

新商品の魅力をPC、スマホどんなデバイスでも最大限に表現する

ランディングページの作成では、一枚のページで新商品に対するユーザーの興味関心を促すことが重要になっています。このプロジェクトの最終的な目標は、提供されたデザインデータをベースに、離脱率を低減させつつ、新商品の印象をより一層強調するためのランディングページを構築することです。

提供されたPCデザインデータを基に、スマホデザインとそのコーディングを行いました。PCデザインのトンマナを維持しつつ、レスポンシブに対応させたランディングページを作成しました。

Solution

新商品の魅力を際立たせる、洗練されたランディングページ

新商品の印象をより一層強く残すため、メインビジュアルでは高品質な写真を使用し、画面全体に広がる迫力ある表現を作成。ランディングページ内ではスクロール時に洗練されたフェード効果のアニメーションを導入し、ユーザーがページをスムーズに移動する際も視覚的な魅力を保つようにしました。

その他にも、レスポンシブデザインに対応させ、異なるデバイスや画面サイズに一貫性をもたせるために、余白の統一化や背景デザインの調整を行っています。特にスマートフォンでの閲覧時には、PCのデザインのトンマナを崩さず適切な余白やスクロールを設置しました。これらの施策を組み合わせ、ランディングページ全体が新商品の魅力を際立たせることができています。

Design Concept

スタイリッシュで洗練されたアニメーション

ランディングページ内で使用される動画は非常に高いクオリティと素晴らしいデザインが施されています。新商品をより際立たせるために、動画内で使用されているモーショングラフィックスの魅力に焦点を当てました。高いクオリティとデザインを継承し、さらなる魅力を引き出すために、スタイリッシュで洗練されたアニメーションをコーディングしました。