i-Power HOME / Style Guide v2 / D2 Warm Paper

機能を絞ったから、
もっと、削ぎ落とす。

β版22画面のミニマリスト設計指針。
アクセント色ゼロの完全モノクロ × 紙の温かみ。
MUJI・北欧家具の世界で、家とアプリを地続きに。

Direction
D2 Warm Paper
Palette
Mono
Confirmed
2026-05-20
01 / Colors

D2 Warm Paper. 紙の温かみで、語る。

アクセント色ゼロの完全モノクロ。紙の温度(クリーム)と、深い炭色のインクで、家の温かみとミニマルを両立。MUJI・北欧家具の世界。

Warm Ink
#262220

テキスト・線・基調。微かな茶味を含んだ、家具の黒。CTA・主役の色。

Soft Paper
#F7F4EE

背景の主役。和紙のような温かみのある白。アプリ全体の床。

Cream
#FFFCF6

カード背景。Soft Paper よりわずかに明るく、カードを浮かせる白。

Ink
#262220
Ink-2
#4A413B
Ink-3
#8A7F75
Ink-4
#C8BEB0
Ink-5
#ECE4D2
02 / Typography

数字で、語る。

Noto Sans JP(和文)と Marcellus(数字・英字)の二段構え。数字を主役に、テキストは静かに添える。

H1Noto Sans JP 900
56px / -2.5%
機能を絞ったから、
もっと、削ぎ落とす。
H2Noto Sans JP 800
32px / -1.5%
毎日3分、家のためのAIから。
NumberMarcellus
80px / -1%
¥1,820節電・今月
BodyNoto Sans JP 500
15px / 190%
i-Power HOME は、家のためのAIコンシェルジュ。天気予報の隣で、もう一つの予報として、毎朝3分、今日の運転計画をお届けします。
MetaMarcellus
12px / +36%
β Release Screens / Updated 2026-05-20
03 / Shape & Spacing

角丸は、12pxひとつ。

14〜28pxで混在していた角丸を統一。余白は8の倍数で5段階に。

SQUARE / 0px
CHIP / 6px
CARD / 12px
PILL / Full
XS8px
S16px
M24px
L40px
XL64px
2XL96px (section gap)
04 / Icons

細い線で、静かに。

emoji 全廃。stroke-width 1.5 の線画SVG に統一。基本サイズ 28px。

05 / Buttons

3つのCTAだけ。

Primary(Ink塗り)、Secondary(紙白 + Ink枠)、Ghost(透明 + Ink-4線)。アクセント色は使わず、コントラストと枠の有無で階層を伝える。

06 / Copy Tone

コンシェルジュトーンは、残す。

「気の利く相棒」風の言葉遣いは生かしつつ、テキスト量は半分に。余白で語る。

Before(β1)

おはようございます。今日は午後から雨ですね。発電が落ちる時間に備えて、蓄電池の充電タイミングを朝の早い時間に動かしておきます。お洗濯は、午前中にすませちゃうのがおすすめですよ。

After(β2 / Minimalist)

おはようございます。

午後から雨。
蓄電池を、朝のうちに。
お洗濯は午前中がおすすめです。

07 / Principles

3つの設計原則。

迷ったときに立ち返る、ミニマリスト設計の指針。

Principle 01

引き算で、立たせる。

要素を 足す前に、引く。色は2色、形は1つ、CTAは3階層。残るものほど強くなる。

Principle 02

数字に、語らせる。

¥1,820、自給率78%、CO₂ 4.2kg。説明より、数字を大きく。Marcellus の数字を画面の主役に。

Principle 03

余白で、伝える。

埋めない勇気。セクション間は 96px、段落間は 24px。余白がコンセプトを語る。