# 肌グミ HADAGUMI｜資生堂｜LPのWebデザイン参考

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

- URL: https://www.shiseido.co.jp/hadagumi/
- 解説ページ: https://katapick.com/sites/shiseido-hadagumi
- カテゴリ: LP / 地域: 国内（JP）/ 業種: 化粧品（洗顔料）
- テイスト: 写真主体、ライト、手書き文字、カルーセル、固定CTA、角丸
- 公開・リニューアル: 2025-08 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 3/5

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

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

## 配色
- #f4aea4 Gummy Coral（発売告知の帯・カード・数字の見出し）
- #cce4dd Mint（ページ内ナビ・HOW TO USEの背景）
- #fbe1de Blush Pink（商品概要・動画エリアの背景）
- #69c9c1 Soda Teal（3種類のカード・装飾）
- #f3ce70 Lemon Yellow（3種類のカード・装飾）
- #000000 Black（テキスト・ボタンの枠線）

## フォント
- 見出し・本文・ラベル: ヒラギノ角ゴ ProN（代替: Noto Sans JP）
- KVの「洗うたび、ぷるちゅるんるん」・HADAGUMIロゴ: 手描き風のキャッチ・ロゴタイプ（画像と思われる）（代替: Mochiy Pop One）

## よくある質問
### 肌グミ HADAGUMI のLPはPCでどう見える？
PCでも幅600pxのスマホ幅カラムを画面中央に置き、左右には半透明のグミ写真を大きく敷く構成です。カラム外にはカートボタンとロゴだけを固定し、商品情報はすべて中央のカラムで読ませています。

### 商品の質感をWebで伝えるには？
グミの写真を背景とKVの両方に使い、手描きの擬音「ぷるちゅるんるん」を主役に据えています。セクションの区切りも垂れる波形にして、触ったときの感触を繰り返し連想させています。

### 複数の種類を比べて選ばせるには？
3種類を商品色で塗り分けたカードにし、左右の矢印で切り替えるカルーセルにしています。前後のカードの端を見せることで、ほかの種類があることにも気づけます。

### サイト内のグミやパッケージの写真を使ってもいい？
商品写真・パッケージ・ロゴの権利は資生堂に帰属します。参考にするのはカラム構成や配色、区切りの形にとどめ、画像は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/shiseido-hadagumi からダウンロードできます。
出典: Katapick（https://katapick.com）