メインコンテンツにスキップ

UI / Micro Interaction

Cake Latest Card Stacking – UI Test

Cakeページの「Latest」エリアで使う予定のスタックカードのデザイン検証用ページです。 まずは1枚だけのカードレイアウトをここで整えます。

Single Card Variant

スタックのベースになる1枚だけのケーキカード。写真エリアは左右いっぱいに広げ、 ヘッダーはカード内にきちんと収めたバージョン。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

Fan Stack Preview

Cake Latest 用のカードスタック。ホバーすると扇形に開く UI のテストです。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
白金高輪

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
新宿

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
渋谷

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
銀座

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

Layout Variants (90% scale)

タイトル下にdescriptionを入れる / +ボタンを消す / 場所ラベルを写真右上に出す、の3パターンを比較。 2×2のグリッドで、いずれも約90%スケールで配置しています。

Base

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

1. With area badge

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

2. Without area badge

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

Color Tones

カード背景と価格ピルのカラーバリエーション。neutral / pink / brown / blue / yellow / green。

neutral

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

pink

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

brown

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

blue

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

yellow

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

green

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

Scale Check (20 / 40 / 80%)

採用した「+なし・場所バッジ・価格ピル」デザインが、縮小時にどう見えるかの確認用。 20% / 40% / 80% を下に並べています。

80%

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

40%

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

20%

シュークリーム　ラ・メゾン白金

¥1,540
シュークリーム　ラ・メゾン白金
二子玉川

パリ老舗ANGELINAの濃厚モンブラン。しっかり甘いけど、後味は意外と軽い。

Typography Playground

Title / Description / Area それぞれについて、英語・日本語を左右に並べて複数フォントを比較。 実カードと同じ縮尺でも崩れないかをざっくり見るためのテストです。

Title Font Candidates

Geist Sans (EN / JP)

Mont Blanc モンブラン

Outfit / Noto Sans JP

Mont Blanc モンブラン

System UI (San Francisco / ヒラギノ)

Mont Blanc モンブラン

Description Font Candidates

Geist Sans / Noto Sans JP

Light but rich chestnut cream with crisp meringue.

軽いけれどしっかり濃厚なマロンペーストと、さくっとしたメレンゲ。

Inter / Noto Sans JP

Balanced sweetness with a clean finish.

甘さはしっかりめだけど、後口は意外とすっきり。

System UI

Classic Parisian style mont blanc with modern balance.

パリの老舗らしさと、今っぽいバランス感のあるモンブラン。

Area Badge Font Candidates

Geist Sans (EN / JP)

GINZA 銀座

Outfit / Noto Sans JP

SHIBUYA 渋谷

System UI

SHINJUKU 新宿