# 株式会社COC（Creative Okashi Company）｜コーポレートのWebデザイン参考

> お菓子の会社なのに、FVはまるで商品CM。お菓子ブランドを企画・運営する株式会社COCのコーポレートサイトは、ブランドが替わるたびに背景色ごと塗り替え、宙に弾ける商品映像で社名より先にお菓子を覚えさせる。

- URL: https://companycoc.com/
- 解説ページ: https://katapick.com/sites/coc-creative-okashi
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 菓子メーカー（お菓子ブランドの企画・開発・運営）
- テイスト: 映像主体、ビビッド、セリフ体、スクロール演出、角丸、固定ナビ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 3/5

## 編集部のひとこと（Iris）
青・緑・赤・黄の4色を受け止める地が、くすんだグレージュなのがすき。白地だと色どうしがけんかしそうなところを、クラフト紙の菓子箱みたいな中間色がやさしくまとめてくれてる。

## デザインの見どころ
- FVは4ブランドの映像を順に切り替える。赤から黄へ背景ごと色が変わり、会社の顔より先に商品の顔が残る
- ブランド紹介は色面のパネルが下から重なっていく。スクロールのたび、次のブランドの色が前の色を覆う
- ブランド名は大きなセリフ体、説明は字間を広げた明朝。映像が賑やかなぶん、文字は静かに構えている

## 配色
- #98948c Greige（OUR BRAND・NEWS・Recruit の地）
- #334e91 Snows Blue（SNOWS のブランドパネル）
- #24482c Cheese Green（CHEESE WONDER のブランドパネル）
- #a21f18 Ramen Red（RAMEN CLUB のブランドパネル）
- #c9a31e Fondan Gold（FONDAN のブランドパネル）
- #f6f5f0 Cream（ABOUT セクションの地 / パネル上の白文字）

## フォント
- ブランド名・英字見出し・ナビ・日付: EB Garamond（eb-garamond / Adobe Fonts）（代替: EB Garamond）
- 和文のステートメント・説明文: りょうディスプレイ PlusN（ryo-display-plusn / Adobe Fonts）（代替: Shippori Mincho）

## よくある質問
### 株式会社COCのサイトで使われているフォントは？
英字のブランド名やナビに EB Garamond、和文のステートメントや説明文にりょうディスプレイ PlusN が、どちらも Adobe Fonts で使われています。無料で近づけるなら、Google Fonts の EB Garamond と Shippori Mincho の組み合わせが扱いやすいです。

### 株式会社COCのように、色のパネルが重なっていくブランド紹介はどう作る？
ブランドごとのパネルを縦に並べ、それぞれに position: sticky と同じ top 値を指定します。後に続くパネルが前のパネルの上へ順に被さり、スクロールで色が入れ替わって見えます。パネルの下端に影を落とすと重なりがわかりやすくなります。

### 株式会社COCのデザインはどんなサイトの参考になる？
複数のブランドや商品ラインを持つ食品・菓子メーカー、ブランドごとの色で入口を分けたいコーポレートサイトや、商品映像を主役にしたいサイトの参考になります。

### 株式会社COCのサイトの映像や写真は使っていい？
商品映像・写真・ブランドロゴ・パッケージ・社員の写真は、株式会社COCおよび各権利者に帰属します。参考にできるのは色の使い方や構成などの考え方までで、素材そのものを流用することはできません。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/coc-creative-okashi からダウンロードできます。
出典: Katapick（https://katapick.com）