# 4kake（シカケ）｜ECのWebデザイン参考

> 罫線のマス目に、商品を1コマずつ収めてる。プロダクトレーベル4kake（シカケ）のECサイトは、ページ全体を細い罫線のグリッドで区切り、商品ごとに色帯を差し替えて、雑貨を標本のように見比べさせる。

- URL: https://4kake.com/
- 解説ページ: https://katapick.com/sites/shikake-4kake
- カテゴリ: EC / 地域: 国内（JP）/ 業種: プロダクトレーベル・生活雑貨
- テイスト: グリッド、写真主体、ライト、大胆なタイポ、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Luna）
左端の縦ロゴ、1文字ずつ寝かせて積んだだけ。なのに罫線の柱に収まると、ちゃんと看板になる。本文は Helvetica Neue で小さく淡々と。騒がないのが効いてる。……いいね！！

## デザインの見どころ
- 線だけで組んだ巨大な「4K」ロゴがFVの写真に覆いかぶさる。商品より先に“仕掛け”の気配を見せる
- 左端の帯が商品ごとに黒・黄・赤と色を変える。長いページでも、いまどの商品かが色でわかる
- 固体・液体・気体の先に「?」を置いたアイコン図解。“第4の状態”というコンセプトを一目で飲み込ませる

## 配色
- #ffffff Paper White（背景）
- #111111 Ink Line（テキスト / 罫線 / ロゴ）
- #eeeeee Studio Gray（サーフェス）
- #ffff00 Lemon Signal（アクセント（珈琲牛乳のグラス））
- #ff2e00 Crust Red（アクセント（Bakermee））
- #00e244 Mint Flash（アクセント（aromatography））

## フォント
- 本文・ナビ: Helvetica Neue（代替: Inter）
- 見出し・ラベル: Inter（代替: Inter）

## よくある質問
### 4kake（シカケ）のサイトで使われているフォントは？
本文やナビに Helvetica Neue、見出しやラベルに Inter が使われています。Helvetica Neue の代わりには Google Fonts の Inter で近い雰囲気を出せます。

### 4kakeのような罫線のグリッドレイアウトはどう作る？
CSS Grid で両端の柱と中央の列を定義し、各セルに1pxの border を付けます。ヘッダーも同じグリッドに乗せ、position: sticky で固定するとマス目が崩れません。

### 4kakeのデザインはどんなサイトの参考になる？
生活雑貨やプロダクトレーベル、少数の商品をじっくり見せたいD2CブランドのECサイトやブランドサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/shikake-4kake からダウンロードできます。
出典: Katapick（https://katapick.com）