気になる課題を選んでみよう。スマホで意見を伝える「レビュー」と、PCでデザインを直す「画面修正」があるよ。
うちの主力プロダクト「Crunch Munch」の資料だよ。サービスの仕組みや運用、画面のデザインルール、公開中の実画面（LPやマイページなど）をここでまとめて確認できるよ！
サービス概要
いろいろなナッツを、いろいろな味つけで、月2回お届けする定期便です。
運営は Den & Forest です。会員が使う画面は、UIデザイナーのリスが担当しています。
お客さま(ペルソナ)
| お客さま | ウサギさん一家 |
|---|---|
| プロフィール | 共働きのパパとママと、小学3年生の娘(赤いランドセル)。平日は娘が学童や習いごとで、帰ってくる時間がまちまち |
| ひとこと | 「おやつ、またこれ？って言われるんですよね」 |
| ゴール | 子どもが喜ぶおやつを、買いに行く手間なく切らさずに置いておきたい |
| 悩み・不満 | いつものおやつがマンネリ。子どもがすぐ飽きる。毎週おやつを買いに行くのが面倒 |
| ふだんの行動 | 週末にまとめ買い。おやつは家に買い置きして、娘が帰ってきたら食べる。新しい商品はSNSやママ友の話で知る |
| 使う場面 | 学校から帰った娘が「今日はどの味かな？」と袋を開ける。週末に家族で「これ何味？」と当てっこする |
| 期待すること | 届くたびに違う味で、家族で楽しめること。お得なこと |
| 見せ方 | ナッツを「ちょっと意外で楽しいおやつ」として、元気に、ポップに |
お届けの決まり
| お届けの回数 | 月2回 |
|---|---|
| 1回の量 | 3袋 |
| 味 | 12種類から3つ(選び方は下の「味えらび」) |
| 申し込み | 最初の1回だけ。そのあとは毎回自動で届き、購入ボタンを押すことはない |
味えらび
味の選び方は、次の2つから会員が選びます。
| 選び方 | 届くもの |
|---|---|
| 毎回自分で選ぶ | お届けごとに、12種類から3つ選ぶ。味を変えなかった回は、前回と同じ3つが届く |
| 全部おまかせ | 好みに合わせて、毎回ちがう3つが届く |
味を変える締め切りは、お届けの5日前の0時(前日の23:59まで)です。
料金と支払い
| 1回のお届け | 通常 1,480円 → 定期便価格 1,258円(15%OFF・送料込み) |
|---|---|
| 引き落とし | お届けの5日前に、その回の分を1回ずつ |
| ふつうの月 | 1,258円 × 2回。月の定額ではない |
| お休みした回 | 引き落としなし |
引き落としの日とお届けの日は、5日ずれます。
定期便の特典
- 新フレーバーを先行でお届け
- 味の組み合わせを、いつでも変更できる
- 毎回15%OFF
お休みと解約
- お休みは、マイページから1回ずつできる。締め切りは、お届けの5日前の0時(前日の23:59まで)
- 解約は、マイページからいつでもできる。費用はかからない
- 解約すると、お届けも特典もすべて終わる
ストア
気に入った味は、ストアで1袋から買えます。定期便をはじめる前に試したい人も使えます。
会員でなくても買えます。1袋680円で、マカダミアとピスタチオの味はプレミアムの980円です。定期便の会員は1割引(612円・882円)です。定期便をやめると、一般の値段にもどります。
送料は一律600円で、5,000円以上なら無料です。会員は、次の定期便と一緒に届けることもでき、そのときは送料がかかりません。
12種類の味
ナッツは7種類です(アーモンド、カシュー、くるみ、ピスタチオ、ピーカン、マカダミア、ピーナッツ)。
| 系統 | 味 | ナッツ | ひとこと |
|---|---|---|---|
| あまい | はちみつくるみ | くるみ | はちみつをうすくからめて |
| メープルピーカン | ピーカン | メープルのやさしい甘さ | |
| 塩キャラメルアーモンド | アーモンド | ほろ苦いキャラメルにひとつまみの塩 | |
| シナモンくるみ | くるみ | シナモンの香りを軽く | |
| 和の味 | ほうじ茶アーモンド | アーモンド | 香ばしいお茶の風味 |
| ゆず塩ピスタチオ | ピスタチオ | ゆずの皮と、ほんのりの塩 | |
| 梅しそカシュー | カシュー | さっぱりした梅としそ | |
| しょうゆ焼きアーモンド | アーモンド | しょうゆを塗って焼きあげて | |
| ぴりっと | わさびピーナッツ | ピーナッツ | 鼻にぬける辛さ |
| 黒こしょうカシュー | カシュー | 粗びきの黒こしょう | |
| カレーカシュー | カシュー | スパイスの香り | |
| スモークマカダミア | マカダミア | 桜のチップでいぶして |
よくある問い合わせ
- 引き落としが月に2回あるのはなぜ？
- お届けごとに、その回の分をお届けの5日前に引き落としているからです。
- お休みした回の支払いは？
- 引き落としはありません。
- 味を変えなかったら？
- 「毎回自分で選ぶ」なら、前回と同じ3つが届きます。「全部おまかせ」なら、毎回ちがう3つが届きます。
- 解約に費用はかかる？
- かかりません。マイページから、いつでも解約できます。
- アレルギーが心配です
- 味ごとの原材料は、ストアの商品ページに書いてあります。ナッツ類・落花生・乳・小麦などを含む味があります。
考え方
ロゴの元気さは、色と書体で出します。帯・影・太い枠のような飾りの部品は足しません。画面の主役は、お客さんが読む情報です。
灰色は使いません。薄い文字や線も、茶色の仲間で作ります。
ロゴ
ロゴはこげ茶一色（#5a2a18）です。商品パッケージやLP・マイページでも共通で使用しています。
イメージ写真
いまの LP やプロダクトで使われているメインの商品写真です。袋の色は、こげ茶・オレンジ・緑の3つです。
色
| 色見本 | 名前 | 使うところ | 文字との対比 |
|---|---|---|---|
オレンジ#c4520f |
画面の見出し。主役のボタンの地(白い文字) | 白地で 4.6:1 | |
強調のオレンジ#b84a0c |
短く強調したい文字(お届け日、選んでいる味、締め切りなど) | 白地で 5.2:1 | |
こげ茶#5a2a18 |
本文の文字。控えめなボタンの文字 | 白地で 11.8:1 | |
茶#7a5a48 |
補足の文字、注記 | 白地で 6.2:1 | |
緑#5f7d3a |
味の色ドットの「和の味」だけ。文字には使わない | 白地で 4.7:1 | |
ベージュ#f3e8dc |
控えめなボタンの地 | こげ茶の文字で 9.8:1 | |
薄いオレンジ#fff4ec |
選んでいるものの地 | 強調のオレンジの文字で 4.8:1 | |
線#e6ddd3 |
区切り線、カードの枠 | — | |
ボタンの枠#e2d3c4 |
控えめなボタン・無効の部品の枠 | — | |
白#ffffff |
画面の地 | — | |
入力欄の枠#c9b5a5 |
入力欄・チェックボックス・ラジオの枠 | 白地で 2.0:1 | |
まちがいの赤#b3261e |
入力のまちがいの文字と枠だけ | 白地で 6.5:1 |
ロゴのオレンジ(#e0661c)は、ロゴの中だけで使います。白い文字を乗せると対比が 3.5:1 で足りないため、画面では一段暗いオレンジ(#c4520f)を使います。
書体
書体は LINE Seed JP です。太さは 400(ふつう)と 700(太字)の2つだけを使います。強調するものは全部700、本文と補足は400です。
見出し 24px・700はじめての味えらび
大きな日付 40px・700(スマホ28px)10月20日(火)
本文 14〜16px・400好きな味を3つ選んでください
ボタン 13〜16px・高/中700・低400この3つで決定
補足・注記 12〜13px・400お届けは毎月5日と20日ごろです
12px より小さい文字は使いません。
言葉
画面の言葉は、同じことをいつも同じ言葉で書きます。お客さんが読み比べて迷わないようにするためです。
用語
| 使う言葉 | 使わない言葉 | 意味 |
|---|---|---|
| お届け | 配送、配達 | 袋がお客さんに届くこと。日付には「ごろ」をつける |
| 発送 | 出荷 | お店が袋を送り出すこと。お届けの5日前に準備を始める |
| お休み | スキップ、休止 | 1回分だけ届けないこと。お休みした回は引き落としなし |
| 取り消す | 元に戻す、キャンセル | お休みを取り消して、届くように戻すこと |
| 解約 | 退会、停止 | 定期便をやめること。お届けも特典もすべて終わる |
| 締め切り | 期限、受付終了 | 味を変える・お休みする手続きができる最後の時刻 |
| 引き落とし | 決済、請求 | お支払いの方法から、1回分の代金を引くこと |
| お支払い | 料金、代金 | 金額のこと(「この回のお支払い 1,258円」) |
| 味を変える | 味変更、選び直す | 届く3袋の味を、別の味に入れかえること |
| 定期便 | サブスク、会員プラン | このサービスの申し込みの形 |
日付・時刻・数字
| 書くもの | 書き方 | 例 |
|---|---|---|
| 日付 | 月と日、半角の括弧で曜日。年は書かない(「今日」の表示だけ年も書く) | 10月20日(火) |
| お届けの日 | 日付のあとに「ごろ」 | 10月20日(火)ごろ |
| 締め切り | 前の日の23:59で書く。「0時」と書かない(その日いっぱいと読み違えるため) | 10月14日(水)23:59 |
| 金額 | 3けたごとにカンマ、後ろに「円」 | 1,258円 |
| 割引 | 半角の数字と「%OFF」 | 15%OFF |
| 数 | 数字と単位 | 3袋、12種類、月2回 |
| 括弧 | 半角 | (デモ会員) |
文とボタン
- 文は「です・ます」で、短く言い切ります。
- ボタンは、押すと起きることを動詞で書きます(「味を変える」「お休みする」)。「OK」「はい」だけにしません。
- 手続きをやめるボタンは「やめる」と書きます。
- 意味の伝わらない記号だけのボタンにしません(「？」ではなく「詳細」)。
- 詳細を開くボタンは「詳細」と書きます。短くて並べても目立ちすぎず、ボタンの形で押せることが伝わるためです(動詞で書く決まりの例外)。
- 部品の名前は、一般的な呼び方を使います(バッジ、カード、チップ)。
- 年代を言葉に出しません。意味のない英語の飾り文句(「MY NUTS」など)を入れません。
余白と幅
余白は4の倍数で決めます。ふだんは8の倍数を使い、細かいところだけ4を使います。
| 名前 | 値 | 使うところ |
|---|---|---|
--cm-space-1 | 4px | 部品の中の細かい間(バッジの上下など) |
--cm-space-2 | 8px | 部品の中の間(アイコンと文字など) |
--cm-space-3 | 12px | 部品の中の余白(小さい部品) |
--cm-space-4 | 16px | 部品の中の余白(ふつう)、スマホの画面の左右 |
--cm-space-5 | 20px | カードの中の余白(小さいカード) |
--cm-space-6 | 24px | カードの中の余白、部品と部品のあいだ、PCの画面の左右 |
--cm-space-8 | 32px | まとまりとまとまりのあいだ |
--cm-space-10 | 40px | 大きな区切り(節と節のあいだ) |
--cm-space-12 | 48px | 大きな区切り(節と節のあいだ) |
--cm-space-14 | 56px | ページの上下 |
--cm-space-16 | 64px | ページの上下 |
幅と切り替わり
画面の最大幅 1120px。画面の左右の余白は PC 24px、スマホ 16px。スマホの形に切り替わるのは幅600px以下、2列が1列になるのは900px以下。
例外
枠の太さが変わるときに中身をずらさないための1pxの打ち消しだけ。
ボタン
ボタン
| 優先度 | 大 | 中 | 小 | 無効 |
|---|---|---|---|---|
| 高 | 定期便をつづける | 定期便をつづける | 定期便をつづける | 定期便をつづける |
| 中 | 味を変える | 味を変える | 味を変える | 味を変える |
| 低 | 詳細を見る | 詳細を見る | 詳細を見る | 詳細を見る |
- いつ使う
- 押して操作するときに使います。優先度は「高」が画面の主役で1つの画面に1つだけ、「中」が主役の次に大事な操作、「低」が詳細を見る・戻る・購入画面のログインなど。大きさは「大」が画面の最後の決定、「中」がふつう、「小」が一覧の行の中など狭いところ。
- HTML
button(別の画面へ移るものはa)。押せないときはdisabledをつけ、押せない理由をボタンの近くに文字で書きます。- 見た目
- 高・中は太さ700、低は400。低は薄いベージュの地
#f3e8dc、1pxの枠#e2d3c4、文字#5a2a18。大 高さ56px・文字16px・角丸12px／中 48px・14px・10px／小 44px・13px・8px。無効はどの優先度も地#eeeeee、文字#9e9e9e。
入力の部品
文字を入れる・選ぶ部品です。
テキスト入力
お名前必須
例: 森田 くるみ
通常。プレースホルダーは薄い茶色
お名前
森田 くるみ
入力済み
お名前
森田 くるみ
入力中。枠はオレンジの2px
郵便番号
123-45
7桁で入力してください(例: 1230045)
お名前
森田 くるみ
無効
ご意見
気になったことがあれば書いてください
テキストエリア
- いつ使う
- 名前や住所など、文字を入れてもらうときに使います。長い文はテキストエリア。まちがいは欄のすぐ下に、直し方まで書きます。
- HTML
labelとinput(長い文はtextarea)。まちがいの文はaria-describedbyで欄とつなぎます。- 見た目
- 高さ44px、角丸8px、枠
#c9b5a51px。入力中はオレンジ2px、まちがいは赤#b3261e、プレースホルダー#bc977c、無効は地#eeeeee。
セレクトボックス
お届けの間隔
月2回
セレクトボックス
- いつ使う
- 決まった選択肢が多いとき(5つ以上が目安)に使います。少ないならラジオ。
- HTML
labelとselect。- 見た目
- テキスト入力と同じ形に、右に下向きの印。
チェックボックス
苦手な味
わさび
カレー
しょうゆ(品切れ)
- いつ使う
- いくつでも選べるときに使います。写真や説明を見比べて選ぶなら選択カード。
- HTML
input type="checkbox"とlabel。- 見た目
- 22px、角丸6px、枠
#c9b5a52px。選ぶとオレンジの地に白い印。
ラジオ
味の選び方
毎回自分で選ぶ
全部おまかせ
- いつ使う
- 1つだけ選ぶときに使います。
- HTML
input type="radio"とlabel。同じ問いのものは同じname。- 見た目
- 22pxの丸、枠
#c9b5a52px。選ぶとオレンジの丸。カード全体が押せる範囲のときは.cm-radio-inline(チェックボックスは.cm-check-inline)で、印を文の1行目にそろえる。
入力の部品の色
| 部分 | 色 | 対比 |
|---|---|---|
| 見出し(ラベル) | こげ茶 #5a2a18、13px・太さ700 | 白地で 11.8:1 |
| 枠 | #c9b5a5 1px | 白地で 2.0:1 |
| 入力した文字 | こげ茶 #5a2a18、16px | 白地で 11.8:1 |
| プレースホルダー | #bc977c | 白地で 2.7:1(入力済みと見分けるため、わざと薄い) |
| 入力中の枠 | オレンジ #c4520f 2px | 白地で 4.6:1 |
| まちがい | 枠と文字を赤 #b3261e、文字は欄のすぐ下に13px | 白地で 6.5:1 |
| 選んでいる印(チェック・ラジオ) | オレンジ #c4520f の地に白 | 白地で 4.6:1 |
| 無効 | 地 #eeeeee、文字 #9e9e9e、枠 #e2d3c4 | 対比の決まりから外す |
選ぶ
写真や説明つきの選択肢から選ぶときの部品です。選んだものを一覧にするチップと組み合わせて使います。
はちみつくるみ
あと1つ選べます
✓ はちみつくるみ
メープルピーカン
チップ
- いつ使う
- 選んだものの一覧です。選択肢が多くて、選んだものが一度に見えない画面で使います。押すと外せます。
- HTML
button(読み上げ用に「〇〇を外す」と名前をつける)。状態は持ちません。空きは押せない文字(span)。- 見た目
- 薄いオレンジの地にオレンジの枠2px、文字は強調の色。角丸は丸。外す「×」つき。空きは線の色の点線。
選択カード
- いつ使う
- 写真や説明を見比べて選ぶときに使います。文字だけで選べるなら、入力の部品のチェックボックス・ラジオを使います。
- HTML
input type="checkbox"(1つだけ選ぶならradio)とlabel。選んでいる／いないの状態を持ちます。- 見た目
- 白い地に線の色の枠1px、角丸12px。選んでいるときは、薄いオレンジの地に、オレンジの枠2pxと「✓」。選んでいるときは、中の控えめなボタンを白い地にします。
情報を見せる
日付・金額・状態など、読む情報を見せる部品です。どれも押せません。
ステップ
- 1味を選ぶ
- 2お届け先
- 3お支払い
- 4確認
- 1味を選ぶ
- 2お届け先
- 3お支払い
- 4確認
- いつ使う
- 申し込みのような何段階かの手続きで、いまどこか・あと何があるかを見せます。
- HTML
ol class="cm-steps"とli。いまの段にaria-current="step"、番号にcm-steps-numberを付けます。幅いっぱいに広げずに置くときはcm-steps-compactを追加します。- 見た目
- いまの番号はオレンジの丸に白、文字はこげ茶の700。まだの番号は白い丸に線の枠、文字は補助色の400。段の間を細い線でつなぎ、面や枠で囲みません。600px以下は段の数だけ同じ幅の列にし、番号の丸の下に段の名前を中央そろえ・12pxで折り返さず表示します。線は丸と丸の間につなぎます。コンパクトの形は内容に合う幅で、段の間の線は40pxです。600px以下は通常の形と段の数だけ同じ幅の列に戻ります。
項目と値
- お届け
- 10月20日
- お支払い
- 1,258円
- 締め切り
- 10月14日(水)23:59
- 引き落とし
- 10月15日
- いつ使う
- 「締め切り 10月14日」のように、名前と中身の組を並べるときに使います。
- HTML
dl・dt・dd。- 見た目
- 左揃えの2列。確認ダイアログでは、区切り線と枠つきの形を使います。
大きい数字
10月20日(火)ごろ
あと2日
11月5日(木)ごろ
- いつ使う
- 画面でいちばん先に見てほしい日付や残り日数に使います。1つの画面に1〜2個まで。
- HTML
p(見出しではないので)。- 見た目
- 大40px(スマホ28px)・中34px・小22px。
バッジ
お届け予定 あまい 選択中
- いつ使う
- 「お届け予定」「お休み」など、いまの状態を短く示します。塗りのバッジは、選んでいる・状態を強く示すときに使い、白い地のバッジ(分類など)と役割を分けます。押せないので、押せそうに見せません。
- HTML
span。塗りの小さい形はclass="cm-badge cm-badge-s cm-badge-filled"。- 見た目
- 白い地にオレンジの枠と文字、頭に点。小さいバッジは点なしで12px。塗りの形はオレンジの地と枠に白い文字(太さ400)、ピル型、頭の点なし。
味の色ドット
甘め 和の味 スパイス
- いつ使う
- 味の名前の前につけて、甘め・和の味・スパイスの分類を示します。色だけに頼らず、分類の名前も画面のどこかに書きます。
- HTML
span(読み上げでは読ませない)。- 見た目
- 12pxの丸。甘めはオレンジ、和の味は緑(
--cm-flavor-wa)、スパイスはこげ茶。
知らせる
状態や操作の結果を伝える部品です。
お知らせ
この回はお休みです。引き落としはありません
お支払いの手続きが止まっています
- いつ使う
- 読み飛ばしてほしくないことを知らせるとき(注意の帯)。ふだんの状態の知らせは、文字だけのお知らせ(お休み中など)。異常な状態(手続きが止まっているなど)は赤い文字で示します。
- HTML
p。注意の帯は、.cm-noticeのdivに.cm-notice-bannerを足し、中にp。- 見た目
- 地も枠もつけません。異常は赤い文字。注意の帯は、淡い地(#fdfbf9)に線の色の枠1px・角丸12px・内側の余白16px。頭に補助の色の「i」のアイコン(文の1行目にそろえる)。選んでいる印の薄いオレンジは使わない(取り違えるため)。文字はこげ茶のまま。注意の帯は読み飛ばしてほしい知らせにだけ使い、説明文をなんでも帯にしません。
トースト
味を変更しました
- いつ使う
- 操作のあと、結果を画面の下に数秒だけ出します。取り消しボタンをつけてもかまいません。消えてしまうので、大事なことはトーストだけで伝えません。
- HTML
divにrole="status"。- 見た目
- こげ茶の地に白い文字。
ダイアログ
お届けの確認
選んだ3袋をお届けします。
- いつ使う
- 決める前の確認(「お休みしますか？」)や、いまの画面を離れずに済ませる作業(味えらび)に使います。ダイアログの上にダイアログを重ねません。
- HTML
dialog。- 見た目
- 白い地、角丸18px、上と下に区切り線。見本は縮小しています。
まとめる
情報のかたまりを分ける部品です。カードや線を増やす前に、まず余白と文字の強弱で分けます。
カード
お届けの情報
- いつ使う
- 画面の中の大きなまとまり(次のお届け、ご契約の内容など)を1つずつ包みます。カードの中にカードを重ねません。
- HTML
sectionかdiv。- 見た目
- 白い地、線の色の枠1px、角丸14px。
区切り線
- いつ使う
- 余白だけでは分かれにくいところ(ダイアログの上と下など)に使います。
- HTML
hr、または枠線。- 見た目
- 線の色で1px。
決まり
- 新しい部品は、選ぶ・情報を見せる・知らせる・まとめるのどれに入るかを決めてから足します
- 画面は
parts.cssを読み込み、部品のクラスで組み立てます。色や部品の見た目を画面ごとに書き直しません - 文字の太さは 400 と 700 の2つだけにします。
- 文字は、地に対して 4.5:1 以上の対比にします(大きな見出しは 3:1 以上)
- 余白は4の倍数(ふだんは8の倍数)にします
- 押せるもの(ボタンや入力欄)は、縦も横も 44px 以上にします。いちばん小さいボタンも 44px です
- 見出しのオレンジは、1つの画面の題名だけに使います
- 飾りの部品(帯・影・太い枠・地を敷く四角)は足しません
公開中の実画面
Crunch Munch で実際に動いているWebページや操作画面です。課題に寄せられたみなさんの修正を参考に、AIが画面を自動生成していきます。サービスの世界観やUIの触り心地を体験できます。
はじめての味えらび
操作画面定期便の申し込みの1ページ目です。味の決め方(全部おまかせ・毎回自分で選ぶ)を選び、自分で選ぶ場合は12種類から最初に届く3袋を決めます。最初のお届け日と金額もここで確かめられます。
申し込み完了
操作画面申し込みの最後のページです。最初のお届け日とお休みの締め切りを伝え、よければ Crunch Munch をどこで知ったかを答えてもらってから、マイページへ進みます。
ログイン
操作画面会員がマイページに入るためのログイン画面です。入れた文字は送られず、ログインするとそのままマイページに進みます。はじめての人は、ここから定期便の申し込みへ進めます。
会員マイページ
操作画面定期便を契約している会員向けの操作画面です。次回お届け日や金額の確認、12種類のナッツから届く3袋の味を変える機能、回のお休み（スキップ）やその取り消しを実際にブラウザ上で操作・体験できます。
Crunch Munch は、Den & Forest の中の架空のサービスです。実際に申し込んだり、購入したりすることはできません。