WIREFRAME
ONE BY KOSÉ ／ Maison KOSÉ
― サイト構成案（4入口・3層モデル）にもとづく主要7ページの画面設計 ―
GROUND RULES
構造と情報の優先順位を確認するための資料です。配色・書体・写真は決定稿ではありません。すべてのページで見出しレベル（h1／h2／h3）を明示しています。
各ブロックに h1h2h3 の指定を入れています。現行サイトの h1 が「PRODUCT」になっている問題への対応です。
見出し・説明・レビューはすべてHTMLテキストとして実装します。画像 と表記した箇所のみ画像です。
PC 1280px／タブレット 768〜1279px／スマートフォン 767px以下。コンテンツ幅は最大1080pxを想定しています。
各ページが担う役割と狙うキーワードを右側の注釈に記載しています。同じ語を複数ページで狙わない前提です。
COMMON MODULES
全ページで共通して使う部品です。これらを先に決めておくことで、ページごとの設計が軽くなります。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ セラムヴェール ＞ ディープリペア
WF-01
現行は商品一覧ページを兼ねています。世界観を伝え、4つの入口へ振り分ける役割に専念させます。
h1ONE BY KOSÉ
肌悩みにあわせて選べる12ライン。
コーセー独自の技術力を結集した高効能ブランド。
h2肌悩みから探す
気になることから、あなたに合うラインを。
/concern/… へ遷移。h212ラインから探す
12ラインすべてを見る ▸
h2ONE BY KOSÉ の技術
h2スキンケアを知る
WF-02
新設する階層です。6つの悩みで共通のテンプレートを使います。以下は「乾燥・うるおい不足」を例にした設計です。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ 肌悩みから探す ＞ 乾燥・うるおい不足
h1乾燥・うるおい不足のケア
「保湿しても、夕方には乾く」。くり返し保湿しても乾燥するのは、肌がうるおいを保つ力そのものが低下していることが一因です。
h2乾燥の原因は、うるおいを抱え込む力の低下
▸ 水分保持能改善について詳しく（成分・技術ページへ）
h2乾燥ケアにおすすめのライン
h2乾燥ケアのステップ
h2乾燥について知る
/guide/faq/ へ。WF-03
競合が構造的に書けない一次情報のハブです。AI検索の引用先として最も重要な階層になります。以下は「ライスパワー®No.11」を例にした設計です。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ 成分・技術 ＞ ライスパワー®No.11
h1ライスパワー®No.11とは
世の中にまったくなかった効能「肌の水分保持能改善」をもった、日本初※の有効成分です。
※日本初とは、肌の水分保持能改善が認められた有効成分において
| 成分名 | ライスパワー®No.11（米エキスNo.11） |
|---|---|
| 認められた効能 | 肌の水分保持能改善（医薬部外品の有効成分） |
| 由来 | お米を発酵させて生まれる成分。数十種類のアミノ酸・ペプチド・糖類を含む |
| 配合商品 | セラムヴェール ディープリペア ほか |
h2「保湿」と「水分保持能の改善」は違います
h2ライスパワー®No.11が生まれるまで
h2ライスパワー®No.11配合の商品
WF-04
現行にない階層です。ライン内の商品の関係と「ライン使い」の価値を説明し、各商品詳細へ振り分けます。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ 12ライン ＞ セラムヴェール
h1セラムヴェール
うるおい改善。肌がうるおいを保つ力そのものに働きかける、3品構成のライン。
h23品でうるおいバリアをつくる
h2このラインを支える技術
| 商品 | 容量 | 価格（税込） |
|---|---|---|
| ディープリペア | 10mL／60mL／120mL付けかえ | 990円／5,940円／9,900円 |
| ローション・エマルジョン | — | — |
※付けかえ用は現行品『セラムヴェール』の本体ポンプにはご使用いただけません
/site/p/ 直下にフラット配置され、ラインという単位が構造上存在しません。WF-05
現行のカテゴリページ（/c/c541020_dL/ 等）を置き換えます。並び順でURLが増えない設計にします。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ アイテムから探す ＞ 導入美容液・美容液
h1導入美容液・美容液
導入美容液は、洗顔後いちばん最初に使う美容液です。そのあとのスキンケアのなじみを高め、肌がうるおいを保つ力そのものに働きかけます。
並び替え：おすすめ ▾ ／ 表示：12件 ▾
?sort= のクエリパラメータで処理し、canonical を絞り込み前のURLに向けます。現行は c54_srd／c5410_dL_ssp のようにパスへ入り込み、同一内容のURLが増殖しています。h2美容液の選び方
| 気になること | おすすめのタイプ | 該当ライン |
|---|---|---|
| 乾燥・毛穴の印象 | 導入美容液 | セラムヴェール |
| シミ・くすみ | 美白美容液 | メラノショット |
| シワ・ハリ不足 | シワ改善美容液 | ザ リンクレス |
WF-06
一般キーワードの受け皿です。現行のスタッフコンテンツ（/staff/skincaredetail/c36203191/）をブランド階層に取り込み、拡充します。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ 知る・学ぶ ＞ 基礎知識 ＞ セラムとは
h1セラムとは？美容液との違いと選び方
公開日 2026.09.01 ／ 監修：コーセー研究所 ○○
h2セラムの意味と語源
h2美容液と化粧水の違い
| — | 化粧水 | 美容液（セラム） |
|---|---|---|
| 目的 | うるおいを与える | 有効成分を届ける |
| 使う順番 | 導入美容液のあと | 種類により異なる |
h2セラムの種類と選び方
h3導入美容液（ブースター）
h3美白美容液
WF-07
現行に存在しません。ブランド横断の疑問をまとめ、問い合わせ削減とAI検索での引用の両方を狙います。
Maison KOSÉ ＞ ONE BY KOSÉ ＞ 使い方 ＞ よくある質問
h1よくある質問
h2商品について
h2付けかえ・容量について
MOBILE
主要な流入はスマートフォンと想定されます。PCの構成をそのまま縦に積むのではなく、次の3点を変えます。
7項目のグローバルナビはハンバーガー内にアコーディオンで格納。ただし「購入する」だけは常時表示のままにします。
PCは上部に細く固定、スマートフォンは親指の届く画面下部に固定。容量セレクトと購入ボタンの2要素に絞ります。
商品カードの一覧・悩みタグ・関連記事は横スクロールのカルーセルに。縦の長さを抑え、スクロール量を減らします。
ブランドトップ（SP）
h1ONE BY KOSÉ
肌悩みにあわせて選べる12ライン
h2肌悩みから探す
h212ラインから探す
→ 横スクロールのカルーセル
以下：技術／コラム／診断／TOPICS／フッター
商品詳細（SP） ※別資料の構成に対応
h1セラムヴェール ディープリペア
薬用導入美容液［医薬部外品］
5,940円／60mL 税込
h2ひと目でわかる要約
| 有効成分 | ライスパワー®No.11 |
|---|---|
| 使うタイミング | 洗顔後いちばん最初 |
以下：悩み／3つのポイント／なぜ効くのか／使い方／お客さまの声／FAQ／価格表
画面下部に購入バーを固定します。
IMPLEMENTATION
ワイヤーフレームと合わせて決めておく事項です。
| ページ | h1 | title の型 | 構造化データ |
|---|---|---|---|
| ブランドトップ | ブランド名 | ONE BY KOSÉ【公式】｜Maison KOSÉ | Organization／Brand／BreadcrumbList |
| 肌悩み | {悩み}のケア | {悩み}のケア｜ONE BY KOSÉ【公式】 | BreadcrumbList／FAQPage |
| 成分・技術 | {成分名}とは | {成分名}とは｜ONE BY KOSÉ【公式】 | Article／BreadcrumbList |
| ライン紹介 | {ライン名} | {ライン名}｜ONE BY KOSÉ【公式】 | ItemList／BreadcrumbList |
| アイテム一覧 | {アイテム名} | {アイテム名}一覧｜ONE BY KOSÉ【公式】 | ItemList／BreadcrumbList |
| 商品詳細 | 商品名＋カテゴリ | {商品名}｜{有効成分}配合 {カテゴリ}【公式】 | Product／Offer／AggregateRating／Review／FAQPage |
| コラム記事 | 記事タイトル | {記事タイトル}｜ONE BY KOSÉ | Article／FAQPage／BreadcrumbList |
| よくある質問 | よくある質問 | よくある質問｜ONE BY KOSÉ【公式】 | FAQPage／BreadcrumbList |
全ページで必須項目とし、未入力での公開をできない仕様にします。現行はプレースホルダ（Maison KOSÉ description）がテンプレート単位で残っています。
見出し・説明・レビューは画像にしません。図解・製品写真のみ画像とし、alt に内容を記述します。本文の代替にはしません。
コラム→悩み・商品／商品→成分／悩み→ライン・コラム／成分→配合商品。テンプレート側で必須枠として用意します。