4kake（シカケ）

1. 01

   ヘッダー

   罫線で区切ったマスの中に、左は「Objects for Discovery」とSNS、中央に太い線で組んだ巨大な「4K」ロゴ、右に Objects / About / Contact とアカウント・カート。左端の柱には1文字ずつ寝かせた「4kake」を縦に積む。

2. 02

   ヒーロー

   4枚の商品写真を切り替えるスライダーとドットナビ。写真の四隅から左右の端へ斜線を伸ばし、箱の中を覗き込むような枠にしている。

3. 03

   コンセプト

   「Discover the 4th State.」の大見出しと和英の紹介文を3マスに振り分け、SOLID → LIQUID → GAS → THE 4TH STATE のアイコン図解で締める。

4. 04

   OBJECT 01 TOREL

   黒い色帯に斜線を入れた左端の柱、商品名・ひとこと・星評価と VIEW DETAILS / SEE OBJECT のボタン、横に使用シーンの動画。続けて3連・2連の写真をグリッドのマスに収める。

5. 05

   OBJECT 02 珈琲牛乳のグラス

   同じ型を黄色の帯で。注ぐ飲み物によって文字が変わる様子を、3コマの写真で順に見せる。

6. 06

   OBJECT 03 Bakermee

   赤い帯に切り替え、パン柄のラッピングペーパーを平置き・包んだ箱・筒の写真で並べる。

7. 07

   OBJECT 04 aromatography

   4つ目の商品を同じ型で紹介するパート。

8. 08

   Objects List・フッター

   取り扱い商品の一覧「Objects List」を置き、フッターで締める。

• ヘッダーはスクロールしても画面上部に固定表示される。罫線のマスと位置を揃えているため、固定されてもグリッドが崩れない
• ヒーローはドット付きのスライダー。Swiper などのカルーセルか、CSS の scroll-snap で再現可能
• ページ全体の罫線は、CSS Grid のセルに border を付けるか、背景に repeating-linear-gradient で縦線を引くと再現できる
• ヒーロー左右の斜線は、SVG の line を画面端とスライダーの角に合わせて配置する方法が手軽と思われる
• 商品パートの動画には右下に小さな再生コントロールがあり、ミュート自動再生の video 要素と思われる

スクロールのコマ撮り250–900ms

検出された技術:ShopifyGoogle Fonts

• 01両端に細い柱、中央に3列のマスを持つグリッドを先に決め、ヘッダー・写真・テキストをすべてそのマスに収める
• 02罫線は #111111 の1pxで統一し、写真にも同じ線の枠を付けて“標本箱”の見え方にする
• 03商品ごとに1色だけアクセントを割り当て、左端の帯とボタンの色を揃えて切り替える
• 04見出しは Inter の太字で大きく、本文は Helvetica Neue 系で小さく組み、ジャンプ率を大きくとる

1---
2title: "4kake（シカケ） 再現用デザイン仕様書"
3source: https://4kake.com/
4katapick: https://katapick.com/sites/shikake-4kake
5category: EC
6region: 国内 (JP)
7tags: [グリッド, 写真主体, ライト, 大胆なタイポ, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# 4kake（シカケ） — 再現用デザイン仕様書
17 
18> 罫線のマス目に、商品を1コマずつ収めてる。プロダクトレーベル4kake（シカケ）のECサイトは、ページ全体を細い罫線のグリッドで区切り、商品ごとに色帯を差し替えて、雑貨を標本のように見比べさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22