Landing PageJapanPicked 2026.09.28

肌グミ HADAGUMI｜資生堂

LPのWebデザイン参考 — 化粧品（洗顔料）

サイトを見るshiseido.co.jp

www.shiseido.co.jp/hadagumi開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

左右いっぱいに、グミの写真を敷き詰めてる。

資生堂の美容グミ洗顔「肌グミ HADAGUMI」のLPは、600px幅の中央カラムに商品情報をパステルで積み、両脇を半透明のグミ写真と固定カートに任せて、PCでも質感から伝える。

IrisColor & Brand

コーラル、ミント、レモンの3色が、そのままパッケージ3箱の色なのがすき。帯もナビもカードもこの3色で塗ってあって、駄菓子屋の棚に並んだ箱を順に手に取っていく感じがする。

1KVの主役は手描きの「ぷるちゅるんるん」。成分より先に、洗ったあとの感触を文字の形で見せる
2右下にカートボタンとロゴを固定。左右の写真を眺めている間も、購入への導線だけは切らさない
3セクションの境目は、溶けたグミが垂れるような波形。区切りのたびに商品の質感を思い出させる

Color

肌グミ HADAGUMI｜資生堂の配色

Typography

使用フォントと無料の代替

見出し・本文・ラベル

Aa あア

使用: ヒラギノ角ゴ ProN
代替: Noto Sans JP

KVの「洗うたび、ぷるちゅるんるん」・HADAGUMIロゴ

Aa あア

使用: 手描き風のキャッチ・ロゴタイプ（画像と思われる）
代替: Mochiy Pop One

実測タイプスケール1440px幅 · 2026-09-27 計測

見出しKatapick 型41.6px · 1.5 · 700
小見出しKatapick 型44.8px · — · 700
本文The quick brown fox — 参考を型にする28.8px · 1.5 · 400

Structure

ページ構成（上から順）

01
カラム外の背景と固定要素
1440px幅では中央600pxの外側に、半透明のレモン形・山形・ハート形のグミ写真を大きく敷き、右下にカラフルな縁取りのカートボタンと「肌グミ HADAGUMI」ロゴを置く。
02
ヘッダー・KV
白いヘッダーに右寄せのロゴ。その下にグミの写真を並べ、手描き文字の「洗うたび、ぷるちゅるんるん」と「美容グミ洗顔」の吹き出し、ロゴを重ねる。
03
ページ内ナビ
ミントの地に、サムネイル付きの黒枠ボタン「やみつきポイント」「選べる3種類」「HOW TO USE & FAQ」を3段で積む。
04
発売告知・商品概要
コーラルの帯に「2026年6月21日全国のマツキヨ・ココカラファインで限定販売開始」。続くピンクの面に日経トレンディ「2026年ヒット予測」入選のバッジ、3色のパッケージ写真、ロゴ、価格2,420円（税込）/60gを置く。
05
動画
YouTubeの縦型動画「美容液生まれ」篇（15秒）を埋め込む。
06
やみつきポイント
垂れる波形で白地に切り替わり、「一度使うとやみつき!?」の見出しと「94%が使用感が好きと回答」の円グラフ。01〜03の番号見出しで、グミのような感触・ぷるちゅるな洗いあがり・タイパ＆コスパ（約180回）を、黒枠の画像とピンクのピル型ラベルで説明する。
07
選べる3種類
グミ写真を背景に「なりたい肌や気分で選べる3種類」。ぷりぷりなどの3種類を色違いのカードにし、左右の丸い矢印で切り替える。
08
HOW TO USE・FAQ
ミントの地のセクションに、使い方とよくある質問をまとめる。
09
購入
「ご購入はこちら」と「店舗限定」の見出しで、購入先への導線を置いて締める。

Interaction

アニメーション・インタラクション

右下のカートボタンとロゴは position: fixed でカラムの外に常駐している（フルページキャプチャの各所に写り込んでいる）
選べる3種類は左右の矢印で送るカルーセルで、前後のカードの端をのぞかせている。抽出データにある Swiper によるものと思われる
抽出データに Lottie があり、グミやキラキラの装飾に軽いアニメーションが付いていると思われる
セクションの境目の垂れる波形は、SVGか画像を上下に重ねて再現できる

スクロールのコマ撮り150–2500ms

検出された技術:SwiperLottie

Reproduce

再現するときのポイント

01PCでは幅600pxのカラムを中央に置き、カラム外にはグミの写真を大きく敷いて画面に固定する
02右下にカートボタンとロゴを position: fixed で置き、カラム外でも購入導線を見せ続ける
03セクションの区切りは、溶けたグミが垂れるような波形で統一する
043種類のカードはパッケージと同じ色で塗り分け、前後のカードをのぞかせたカルーセルにする

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

shiseido-hadagumi.katapick.md

1---
2title: "肌グミ HADAGUMI｜資生堂 デザイン分析書"
3source: https://www.shiseido.co.jp/hadagumi/
4katapick: https://katapick.com/sites/shiseido-hadagumi
5category: LP
6region: 国内 (JP)
7tags: [写真主体, ライト, 手書き文字, カルーセル, 固定CTA, 角丸]
8launched: 2025-08
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 肌グミ HADAGUMI｜資生堂 — デザイン分析書
16 
17> 左右いっぱいに、グミの写真を敷き詰めてる。資生堂の美容グミ洗顔「肌グミ HADAGUMI」のLPは、600px幅の中央カラムに商品情報をパステルで積み、両脇を半透明のグミ写真と固定カートに任せて、PCでも質感から伝える。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22