LP
WordPress
季ノ間 LPサイト
季ノ間 LP
サイトを見る
→
| サイト種別 | 単一LP(ランディングページ / WordPress) |
| 目的 | ①パッケージデザイン重視・見た目訴求 ②ページ遷移のない申込導線による、離脱の軽減 |
| ターゲットユーザー | 30代・管理職に昇進したばかり 今年から会社のお中元選びを任された層 任されたばかりで不安、でも見栄えのする一品を選びたい。「間違いのない」より「センスが伝わる」「他とは違う」を求めている |
| 制作環境 | WordPress(オリジナルテーマ自作)/Local by Flywheel(ローカル開発環境)/Claude Code(実装) |
| 対応デバイス | PC/SP両対応(PC版を主軸に演出を作り込み、SP版は表現を簡略化しつつ体験を維持) |
| 製作期間 | 約4日間 |
背景
今年から、会社のお中元選びを任された30代の管理職。 「誰に贈っても失礼のない、無難な一品」ではなく「じぶんの見立てが伝わる一品」を選びたい——そんな心理を起点に設計した、季節の詰め合わせ和菓子ギフトのLPです。
コンセプト
商品名の「季ノ間(きのま)」は、”間(ま)”という和の空間概念から。 贈り物そのものを、ひらいた瞬間に小さな季節がひろがる”小さな部屋”として捉え、パッケージ設計からコピー、中身紹介の見せ方まで一貫させました。
デザイン
藍色・墨色をベースに、金色と朱色をごく控えめな差し色として使用。書体はShippori Mincho(明朝体)とNoto Sans JPの組み合わせで、老舗が今風にリブランドしたような格式と余白を意識しています。
技術的な見せ場:スクロール連動の蛇腹アコーディオン
中身紹介セクションでは、詰め合わせの和菓子を1点ずつ、蛇腹(アコーディオン型スライダー)がひらく動きで見せています。 position: stickyでセクションを画面に固定し、縦スクロールの位置に応じてパネルのflex-grow(スマートフォンではheight)を変化させることで、タップやホバーといった能動的な操作を必要とせず、箱をひらくように指を動かすだけで中身があらわれる体験を作りました。
過去2作(発酵ノ雫のexperienceセクション/ネムノキ習慣の月齢バー)と同じ位置づけの、本作におけるハイライト。
過去作との違い
これまでの2作(発酵ノ雫/ネムノキ習慣)は、個人向け・単品リピート通販という文脈でした。本作は法人利用も絡む贈答シーンと、詰め合わせという複数点数の商材を扱うことで、客層とシーンを一歩広げています。また、ペルソナは”贈る側”の不安から出発しながら、コピー自体は”贈られる側が箱をひらく瞬間”を描くことで、両方の視点を橋渡ししました。