株式会社COC（Creative Okashi Company）

1. 01

   ヘッダー

   左にロゴ「COC CREATIVE OKASHI COMPANY」、右にセリフ体の ABOUT / NEWS / RECRUIT↗。スクロール後は白い角丸の横長バーにまとまり、画面上部中央に固定される。

2. 02

   ヒーロー（ブランドKV）

   4ブランドの商品映像を全画面で切り替える。ブランド色の背景に麺や具材、焼き菓子が宙に弾け、下に円形の台座。背面に半透明の巨大なセリフ体でブランド名を敷き、下部中央にドットのページャー、右下に「scroll」。

3. 03

   ABOUT

   クリーム色のグラデーションの中央に、明朝体のステートメント7行と「About COC →」。左右に各ブランドの菓子や箱が散らばるように浮かぶ。

4. 04

   OUR BRAND

   グレージュの地に大きな「OUR BRAND」と一行の紹介文。SNOWS（青）・CHEESE WONDER（緑）・RAMEN CLUB（赤）・FONDAN（黄）の角丸パネルが続き、各パネルは大きなブランド名、左に商品写真、右に説明文と「brand site ↗」。

5. 05

   NEWS

   大きな「NEWS」の下に、日付とタイトルの3行を罫線で区切って並べ、行末に丸い矢印。最後に「View All」。

6. 06

   Recruit

   濃いグレーの角丸パネル中央に「Recruit」とリード文、「View More ↗」。周囲に仕事風景や社員の写真7枚を大小ばらばらに散らす。

7. 07

   フッター

   濃いグレーの角丸パネルに白抜きのロゴ、Company と Brands の2列リンク、縦向きの「Page Top」、右下に「北海道コンフェクトグループ」のロゴ。

• KVはブランドごとのPC用 mp4 を4本読み込み、スライダーで切り替えている。SP表示では左端にブランド色の縦ストライプが写っており、色の帯でワイプする切り替えと思われる
• ブランドパネルは position: sticky で積み重なる。各パネルに fixed の影要素（TopBrand-shadow）があり、重なりの段差を影で強調していると思われる
• ヘッダーはKV上では透明な横並び、スクロール後に白い角丸バーへ切り替わる（SiteHeader--kv クラスの付け外しと思われる）
• Lenis による慣性スクロール。KVのステージと ABOUT は fixed で、次のセクションがその上に被さってくる構成と思われる
• Recruit の背景とSPメニューの背景に mix-blend-mode: multiply をかけ、写真や地の色になじませている

スクロールのコマ撮りLenis · 300–1800ms

検出された技術:LenisWordPressAdobe Fonts

• 01ブランドごとにテーマ色を1色決め、KVの背景・台座・ブランドパネルまで同じ色で通す
• 02ブランド名は大きなセリフ体を半透明にして映像の背面に敷き、読ませる文字ではなく模様として扱う
• 03パネルは position: sticky で重ね、外側にグレージュの余白を残して角丸のカードとして見せる
• 04和文は明朝体で字間を広め（letter-spacing: 0.1em 前後）にとり、映像の賑やかさと対比させる

1---
2title: "株式会社COC（Creative Okashi Company） デザイン分析書"
3source: https://companycoc.com/
4katapick: https://katapick.com/sites/coc-creative-okashi
5category: コーポレート
6region: 国内 (JP)
7tags: [映像主体, ビビッド, セリフ体, スクロール演出, 角丸, 固定ナビ]
8launched: 2026-09
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 株式会社COC（Creative Okashi Company） — デザイン分析書
16 
17> お菓子の会社なのに、FVはまるで商品CM。お菓子ブランドを企画・運営する株式会社COCのコーポレートサイトは、ブランドが替わるたびに背景色ごと塗り替え、宙に弾ける商品映像で社名より先にお菓子を覚えさせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22