01 / LEVEL 01
JUNKBRANDING
Fragrance Landing Page
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
香りの魅力と商品情報を伝えるLP。
作品情報
- 想定業種
- Luxury Fragrance
- 技術スタック
- HTML / CSS / Vanilla JS
- デザインコンセプト
- 暗がりに差し込む光と縦組みのコピーで、香水「SHIJIMA」の静けさを表現。
- アニメーション
- 光が広がる導入、ラベルの印字、スクロールに合わせた画像表示。動きを減らす設定に対応。
主な実装機能
- 容量選択に連動する価格・品番・ラベル表示
- スマートフォン用メニューとキーボード操作
- 購入・サンプル申込のデモ説明ダイアログ
- AVIF・WebP・JPEGを使ったレスポンシブ画像
学習できる内容
- 香りの世界観から素材・容量・価格へと読み進められるよう、LPの見出しと情報の順序を組み立てる。
- 縦組みのコピーと商品写真をCSSで配置し、PCとスマートフォンで構図と文字の読みやすさを調整する。
- picture・srcsetで画像形式と解像度を切り替え、写真の見え方と読み込み量を両立させる。
- 容量の選択に価格・品番・ボトルのラベルを連動させ、JavaScriptのイベントと表示更新を実装する。
- メニューとデモ購入ダイアログをキーボードでも操作できるようにし、動きを減らす設定での表示を確認する。
ソースコードについて
HTML・CSS・Vanilla JavaScript（ES Modules）で構成した静的サイトです。容量の選択に応じて、価格・品番・ラベルの表示を更新します。
ポートフォリオ制作のポイント
- 架空ブランドの企画意図と、香りを視覚化した表現を説明する
- 容量変更の操作結果と、動きを減らす設定での表示を示す
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。