CorporateJapanPicked 2026.09.26

株式会社ADDICT

コーポレートのWebデザイン参考 — 美容特化マーケティング

出典: ad-dict.co.jp

Editor's note — 編集部の視点

モノクロの画面に、巨大な「執着」をぶつけてくる。

日韓の美容領域に特化したマーケティング会社ADDICTのコーポレートサイトは、細いセリフ体の英字と画面いっぱいの漢字のジャンプ率で、「執着を創れ。」を体感させる。

LeoMotion & Direction

WHAT WE DOで「美容に、狂気と論理を。」を黒地に白でポンと置くだけ。映画でタイトルが出る直前の暗転みたいな静けさ！ FVで殴られた直後だから、この“間”がめちゃくちゃ効いてる！

1FVは数字が並ぶダッシュボードをモノクロでぼかす。データの会社であることを、背景で匂わせる
2英字はCormorantの細いセリフ、和文は明朝。黒と灰色の画面に、美容ブランドらしい艶を足す
3赤はSCROLLの菱形や図解の細線だけ。モノクロの中で、視線を引く場所を一点ずつ指定する

Color

株式会社ADDICTの配色

Typography

使用フォントと無料の代替

英字見出し

Aa あア

使用: Cormorant Infant
代替: Cormorant Infant

和文見出し

Aa あア

使用: AddictMincho
代替: Shippori Mincho

本文・ナビ

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型26.7px · 1.3 · 400
見出しKatapick 型11.7px · 1.3 · 400
本文The quick brown fox — 参考を型にする15px · 1.75 · 400
ボタンKatapick 型11.7px · 1.3 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にADDICTのセリフロゴ、右に黒い帯の中にABOUT・SERVICE・WORKS・NEWS・oneviewと、白いCONTACT・RECRUITボタン、メニュー。
02
ヒーロー
モノクロのダッシュボード画面や赤い床のオフィス通路の画像に、「CREATE OBSESSION」「執着を創れ。」と巨大な「執着」の文字を重ねる。左下に最新ニュースの帯、右下にSCROLL DOWNと赤い菱形。
03
WHAT WE DO
黒地に「美容に、狂気と論理を。市場に、抗えない熱狂を。」と会社紹介の文章、会社概要へのボタン。
04
ワードマーク・実績紹介
石目調のライトグレーの地に画面幅いっぱいのADDICTのワードマークを置き、実績紹介のパートへつなぐ。
05
ブランドロゴ
美容ブランドのロゴを2段で横に並べて流す。
06
OUR SOLUTION（執着の2要素）
グレーの地に、赤い細線の図形で2つの要素を示す。
07
NUMBERS・サービス
数字で見るADDICTと、サービス紹介のパート。
08
ONEVIEW・ニュース・フッター
自社プロダクション「ONEVIEW」の紹介と、ニュース一覧で締める。

Interaction

アニメーション・インタラクション

Lenis の慣性スクロール。ページ高は約1.7万pxあり、スクロールに合わせて要素が現れるピン留め演出が続くと思われる
ヒーローはダッシュボードやオフィス通路などの画像が切り替わり、巨大な漢字が重なる構成
ブランドロゴは2段の無限マーキーで、@keyframes の translateX で再現可能
「執着の2要素」の赤い線は、SVGの stroke-dashoffset でスクロールに合わせて描く演出と思われる

スクロールのコマ撮りLenis · 200–900ms

検出された技術:LenisWordPress

Reproduce

再現するときのポイント

01黒は #121212 と #4a4a4a の2段で使い分け、純黒はヘッダー帯などに限定する
02英字は細いセリフ（Cormorant 系）を大きく、和文見出しは明朝で組む
03赤 #e81c3c は面積を極小にし、菱形や細線など記号として使う
04FVの背景画像はモノクロにし、コピーの白を画面でいちばん明るい要素にする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

addict.katapick.md

1---
2title: "株式会社ADDICT 再現用デザイン仕様書"
3source: https://ad-dict.co.jp/
4katapick: https://katapick.com/sites/addict
5category: コーポレート
6region: 国内 (JP)
7tags: [ダーク, モノクロ, セリフ体, 大胆なタイポ, マーキー, ロングページ]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# 株式会社ADDICT — 再現用デザイン仕様書
17 
18> モノクロの画面に、巨大な「執着」をぶつけてくる。日韓の美容領域に特化したマーケティング会社ADDICTのコーポレートサイトは、細いセリフ体の英字と画面いっぱいの漢字のジャンプ率で、「執着を創れ。」を体感させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22