壁はネガティブに語られることがある。その、イメージそのものを変えてみよう。意味を再構築しよう。ひとつの壁が、世界を変えるきっかけになることだってあるのだから。
UI は無彩色に徹し、商品写真とテクスチャに色を譲る。ブランドの無彩色は温かみのあるグレー #727171(純グレーではない)。BtoB 導線だけ紺青 #185f98。多色になるのはお知らせ・IR のカテゴリタグのみで、純赤 #ff0000 は「重要なお知らせ」専用。
コーポレートフォントは AXIS Std(タイププロジェクト)。行間 2.0 が本文の基準で、見出しにも原則 2.0 が乗る。リード文と淡い見出しのみ 1.7。letter-spacing / font-feature-settings はともに normal、ウェイトは 400 と 700 の二極。
壁はネガティブに語られることがあります。立ち塞がるもの、隔てるもの、乗り越えるべきもの。けれどその意味は、少しの工夫で組み替えられるはずです。
壁紙、床材、カーテン、椅子生地。空間を構成しているのは、結局のところ「面」です。面の色と手ざわりが変わるだけで、同じ間取りの部屋がまったく違う表情になります。だからこそ素材の選択肢は多い方がいい、と私たちは考えています。
行間を広く取り、色数を絞る。UI の側が静かであるほど、素材そのものの色柄が前に出てきます。商品を探す。
BtoB 導線は紺青 #185f98、企業・IR 導線はブランドグレー #727171。副次は白地+#cccccc の枠、または薄グレー面 #efefef。border-radius は 0 で、角丸やピルは使わない。
カードは radius 0、罫は #cccccc。お知らせリストは日付・カテゴリタグ・見出しの 3 要素で、タグの色が情報種別を示す。
デフォルト / フォーカス / エラーの3状態。radius 0、フォーカスは紺青 #185f98、エラーは #ff0000。
オフセットを持たない「全方位に淡く広がる影」が特徴。0 4px 12px のような落ち影は使わない。奥行きは白 × #f4f4f4 / #efefef の面の差で表現する。
5 / 10 / 16 / 24 / 40 / 64 / 96px。コンテナは最大 1200px、KV と写真セクションは全幅ブリード。