本文へスキップ

Worksに戻る

Works — Landing Page(実案件)

複雑恋愛LP

広告用LP

Webメディアの記事から誘導する、電話占いウィルの広告用LP。依頼元の構成案をもとにデザインとコーディングを担当し、画像・フォントの軽量化と、納品先の制約に合わせたビルドの仕組みまで手がけました。

Role

デザイン・コーディング

Tools

Vite / HTML / SCSS / JavaScript

複雑恋愛LPのスマートフォン表示を3画面並べたもの。ファーストビュー、鑑定師の一覧、特典の案内

Purpose

制作の目的

女性向けWebメディア「女子SPA!」に出稿した記事から誘導する、電話占いウィルの広告用LPです。対象は複雑な恋愛に悩む30〜40代の女性で、ゴールは会員登録。依頼元からExcelで受け取った構成案(全12ブロックのラフ・注釈・素材)をもとに、デザインとコーディングを担当しました。

複雑恋愛LPのファーストビューと「こんなお悩みありませんか?」の節。スマートフォン表示を2画面並べたもの
ファーストビューとお悩みの節(SP表示)。登録への導線はページ内で6回くり返す

Coding

実装の工夫

支給素材は合計9.4MBあり、すべてWebPに変換・最適化して1.4MBまで軽くしました。Webフォントは、このページで実際に使う622字だけを含むサブセットを自前で配信し、Google Fontsから読み込んでいた1,713KBを533KBに抑えています。

納品先の社内システムが .svg と .woff2 を受け付けないことが、アップロード後の実測で分かりました。そこでビルドの出力時だけ、SVGはWebPへ、フォントは別の拡張子へ自動で変換する仕組みにし、受け付けない形式の参照が残っていればビルドを止める検査も入れました。開発中のソースはそのままで、納品物だけが制約に合う形になります。

鑑定師の紹介(鑑定タイプをスライダーで示す表)と、初回特典の節。スマートフォン表示を2画面並べたもの
鑑定師の紹介と特典の節(SP表示)

この作品の制作意図や工夫について、詳しくお話しできます。お気軽にご連絡ください。