誠実さと先進性を追求するデジタル・クリエイティブスタジオのウェブサイト。
Sun*のウェブサイトは、動画背景やアニメーションを多用し、動的で先進的なブランドイメージを表現しています。ブランドカラーの赤を効果的に使用し、全体的にクリーンでプロフェッショナルな印象を与えつつ、情報構造も明確に整理されています。
先進的ダイナミック明瞭信頼感プロフェッショナル
カラー・フィンガープリント — 観測された色の使用面積比
13カラートークン
14タイプスケール
5コンポーネント
基盤スタイル
レンダリング実測（getComputedStyle）と配信CSSの実データから抽出したトークン。役割（ロール）別に整理しています。
Color
| トークン | 値 | 用途（実測） | 出現 | ||
|---|---|---|---|---|---|
| BRAND — Sun Red（Primitive） | |||||
| red-500 ★基準 / brand-primary | #FF2200 | ブランド基準色。CTA・ホバー・選択状態・矢印面・::selection | 250× | ||
| red-800 | #AD0C00 | 濃色。本文サイズの赤文字（text-brand）・pressed状態 | 6× | ||
| red-100 | #FFDDD8 | 淡色背景（bg-brand-subtle） | 2× | ||
| TEXT | |||||
| text-primary | #333333 | 本文・見出しの基本テキスト（body指定値） | 112× | ||
| text-secondary | #707070 | 補足・メタ情報（日付・カテゴリ等） | 33× | ||
| text-tertiary | #A5A5A5 | プレースホルダー等。本文サイズでは使用不可（コントラスト2.46:1） | 22× | ||
| BACKGROUND | |||||
| bg-default | #FFFFFF | ページ基本背景。赤面上の文字色としても使用 | 216× | ||
| bg-subtle | #F5F5F5 | セクション交互背景 | 82× | ||
| bg-muted | #ECECEC | 面の区切り・メディアプレースホルダー | 40× | ||
| gray-50 | #F7F7F7 | パネル・キャプション背景 | 2× | ||
| BORDER | |||||
| border-default | #CCCCCC | 入力枠・明確な境界線 | 14× | ||
| border-subtle | #E0E0E0 | 区切り罫線・カード枠線 | 6× | ||
Typography
display-xl
90px · 700 · lh 1.0 · ls 1.44px · Eina03Make Awesome things that matter.
display-l
64px · 700 · lh 1.0 · Eina03Make Awesome things that matter.
display
50px · 700 · lh 1.0 · Eina03 — セクション英字見出しWhat we do
display-s
40px · 700 · lh 1.0 · Eina03Our Works
title-l
32px · 700 · lh 1.4 · ls 0.88px共に創るデジタルの未来
title
26px · 700 · lh 1.4共に創るデジタルの未来
heading-l
24px · 700 · lh 1.4共に創るデジタルの未来
heading
20px · 700 · lh 1.4共に創るデジタルの未来
heading-s
18px · 700 · lh 1.4共に創るデジタルの未来
body-l
16px · 500 · lh 1.875共に創るデジタルの未来
body ★基準
14px · 500 · lh 1.875 · ls 0.5px — body指定値共に創るデジタルの未来
body-s
13px · 500 · lh 1.7共に創るデジタルの未来
caption
12px · 500 · lh 1.7共に創るデジタルの未来
caption-s
10px · 500 · lh 1.4共に創るデジタルの未来
英字: Eina03（要ライセンス・本ページはArialフォールバック表示） / 本文: Noto Sans JP（読込は500・700のみ。400は使わない）。実測85スタイルは本14ロールに集約。font-size頻度は 16px(107)・14px(90)・12px(66) の本文系と 50px(31)・40px(27)・90px(12) のディスプレイ系に二極化。
Spacingbase = 8px（補助 4px）
4px8px16px24px32px実測頻出40px実測頻出64px実測頻出・セクション区切り80px120px実測頻出値（32 / 40 / 64px 等）を8px基数＋補助4pxのスケールに体系化。端数の実測値（2/3/7/11/23px等）はコンポーネント固有値としてスケールから除外。目安: 要素内 8–24 / 要素間 24–40 / セクション間 64以上。
Breakpoints / Elevation / Motion
BREAKPOINTS（配信CSS実測 → 主分岐 800px・501箇所）
600 · sp-narrow800 ★ sp（主分岐）1000 · content1100 · widecontainer 87.8%
ELEVATION（3段のみ・境界は余白と罫線を優先）
elevation-1elevation-2elevation-3
MOTION（実測キーフレームをduration/easingトークンに正規化）
duration-fast · 0.2sduration-base · 0.3sduration-reveal · 0.7–0.8sease-signature · cubic-bezier(.89,.04,.13,1.1)ease-standard · ease-outprefers-reduced-motion 対応
デモはここまでです
コンポーネント
DOM構造・実測スタイル・AI解析のハイブリッドで検出。バリアントはクラス名ではなくスタイル実測値のクラスタリングによる分類です。
観測されたコンポーネント
Button
css×39- Variants
- color-orange（全面赤・基準）color-black（全面黒）color-white（白・赤枠）size 80px / 下層55・60px
- States
- default（単色ピル）hover（くびれ分離モーフ）focusdisabled
- CSS
- 本体::before width:calc(100%-60px) + 矢印面80px が同色で一体化。:hoverで本体:before{border-radius:0 40px 40px 0}と矢印面{40px 0 0 40px}が同時に丸まり、__hover の白円（計40px＝白28px+ボタン色6px枠・上下から進入）が凹みフィレットとなってメタボール型のくびれを形成。シェブロンは scale(1.3) translate3d(8px,0,0) + 角丸0 7px 0 0。transition:.3s cubic-bezier(.89,.04,.13,1.1)
- evidence
- .c-button / .c-button__arrow / .c-button__hover（ラベルは __en 12px Eina03 + __jp 14px の2段）
Section Title
css- Variants
- display 50pxdisplay-xl 90px
- States
- defaultreveal（スタッガー出現）
- CSS
- font-family:Eina03; line-height:1; 日本語ラベル color:#FF2200
- evidence
- .titleEN / .title-jp（What we do 等全セクションで一貫使用）
Card
css×4- Variants
- media（16:9画像・radius 4px）
- States
- defaulthover（画像スローズーム。面は不動）
- CSS
- 面・枠線なし（画像+テキストのみ）。:hover img相当要素{transform:scale(1.5) rotate(8deg);transition:transform 5s ease-out} 戻りは 1s cubic-bezier(.7,.3,.3,.9)。カード面への影・移動はなし
- evidence
- .c-worksCard / .c-projectCard（__img/__thumb 内の span がズーム。overflow:hiddenでクリップ）
Tag
css- Variants
- default（gray地×白文字）white（白地・画像上/行頭用）
- States
- default のみ（非インタラクティブ・ホバーなし）
- CSS
- border-radius:3px; padding:2px 12px（gray）/ 2px 7px（white）; font-size:12px。実測 #adadaa は gray-500 に正規化
- evidence
- .c-prCard__tag-item（#adadaa地）/ .c-newsList__tag（白地）
Text Link
css×50- Variants
- default（下線なし）underline（提案・a11y補正）standalone（太字）
- States
- defaulthover（#FF2200 / 0.2s）focus
- CSS
- 実測: 全リンク下線なし（リセットで除去）。a:hover{color:#FF2200} transition:color .2s。下線は色のみに依存しないための提案（補正）
- evidence
- .l-footer a:hover / .c-newsList:hover / a.l-nav__item__target
デモはここまでです
サイト構成 解析済 7 / 発見 422
sitemap.xml とページ内リンクから発見したページ群。追加ページを解析するとトークンの「コア / ページ固有」判定の精度が上がります。
310Blog
77Other
20Gallery
9Service
3Contact
3About
デザイン資産として持ち帰る
抽出結果を開発・デザインの各ワークフローで使える形式に変換します。