2つのスタバ風デザイン比較

Overview

一目でわかる比較

比較項目	スタバ風グリーンLP starbucks-green-brand-lp	スタバ風ライトデザイン starbucks-light-editorial
ひとことで	深緑で押すブランド訴求LP	白で読ませる記事・ガイドページ
主役の色	深緑 `#006241`	白 `#ffffff`
グリーンの使い方	背景・セクション色として大胆に使う	リンク・ラベルのアクセントのみ
ヒーロー	深緑ベタ塗り全幅ぼかしオーブ + ピル型日付	なしパンくず + ページタイトルのみ
レイアウト型	縦長LP 番号付き大セクション	記事型 2カラム本文グリッド
番号表現	巨大番号 (40〜72px) ゴールドまたは白	なし
ゴールド	星・アクセントに使用	使わない
まとめ要素	Key Lesson カード (ゴールド左ボーダー)	まとめボックス (クリーム地)
セクション区切り	白/深緑/クリームを交互に	薄いグレー横線 + 余白
ファーストインプレッション	インパクト・特別感	落ち着き・信頼感
確定状態	✅ 確定・実例あり	登録済み・実例なし

Preset 01

深緑を主役に、クリームと白を交互に使う本格的なブランドLP。ぼかしオーブ装飾のヒーロー、巨大な番号、ゴールドのアクセントが「特別感」を演出する。

#006241 — メイン緑

#173f32 — 深緑 (CTA・フッター)

#0f6b4d — ソフト緑

#d9a441 — ゴールド

#f3f0e7 — クリーム

#ffffff — 白

実装確認済み

公開済みの実例があります

Preset 02

白を主役に、グリーンはリンクやラベルのアクセントにとどめた落ち着いた編集記事型レイアウト。読み物・ガイド・説明ページに適している。ヒーローなし、2カラムグリッドで情報を整理する。

#ffffff — 白 (主役)

#006241 — 緑 (アクセントのみ)

#f3f0e7 — クリーム (ボックス)

#faf8f3 — クリームソフト

#1e1e1e — テキスト

#d4e4dc — 薄緑 (バナー帯)

このページ自体がサンプル

今読んでいるこのページがスタバ風ライトデザインで作られています

Guide

スタバ風グリーンLP を使う

スタバ風ライトを使う

一言で迷ったら

「見せる」か「読ませる」か