CorporateJapanPicked 2026.09.26

デジタルグリッド株式会社

コーポレートのWebデザイン参考 — エネルギー（電力取引プラットフォーム）

出典: digitalgrid.com

Editor's note — 編集部の視点

見えない電気の流れを、色のリボンで見せちゃってる。

電力取引プラットフォームのデジタルグリッドのサイトは、青・緑・黄のリボンでセクションをつなぎ、目に見えない電力の行き来をページの骨格に据えている。

BrunoStructure & IA

章の並びがWhy、Approach、Services、Strengthsなんだよね。理由から入って、手段、中身、強みへ降りていく。事業が多い会社ほど、この順じゃないとただの羅列になる。これはうまい。

1FVの淡い水色のフレームを、ロゴと見出しの形に切り欠く。枠と文字が噛み合い、画面が1つの図になる
2Our Approachは課題の吹き出しの下に3事業のカード。問いと答えを上下で対応させ、事業の必然を示す
3FV直下に4つのサービスロゴを縦罫で区切って並べる。各事業への入口を、最初のスクロールで一覧させる

Color

デジタルグリッド株式会社の配色

Typography

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

和文見出し・本文

Aa あア

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

英字見出し・ナビ・日付・ボタン

Aa あア

使用: Zalando Sans
代替: Zalando Sans

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

特大見出しKatapick 型50px · 1.5 · 700
見出しKatapick 型64px · 1.3 · 500
小見出しKatapick 型40px · 1.2 · 700
本文The quick brown fox — 参考を型にする16px · 1.6 · 700
ボタンKatapick 型14px · 1.5 · 700

Structure

ページ構成（上から順）

01
ヘッダー
左に鳥のシンボルとロゴ、右に英字ナビ6項目、青枠の EN ボタンと黒いメールボタン。スクロール後は角丸の白いバー状にまとまって画面上部に固定される。
02
ヒーロー
淡い水色の角丸フレームを全幅に置き、左上と左下をロゴ・見出しの形に切り欠く。フレーム内で色帯と都市のイラストが動き、左下に英字の小見出しと大きな和文見出し、右下に閉じられるお知らせカード。
03
サービスロゴ帯
「Services」の見出しと4つのサービスロゴを縦罫で区切って横一列に並べ、各ロゴに外部リンクのアイコンを添える。
04
Our Why
左に英字の大見出しと和文の小見出し、右に理念の文章を置く2カラム。左下に都市のイラスト、右下に黒いピル型ボタン。
05
Our Approach
3つの課題を色付きラベルの吹き出しにし、その下に青・緑・紫のカードで対応する3事業をイラスト付きで並べる。
06
Our Services
3事業を、左に色付きラベル・番号付きの事業名・大きな見出し・説明・関連サービスのロゴ、右に写真の2カラムで縦に積む。
07
Our Strengths・導入企業
青い大きなパネルに3つの強みを円のダイアグラムで示し、下に導入企業のロゴを並べる。
08
News・Recruit
日付・カテゴリ・タイトルの一覧のあと、濃いグレーの地に社員の写真をタイル状に敷き、青いリボンが横切る採用セクション。
09
IR・Contact Us
IRの見出しまではキャプチャで確認できる。フルページが9000pxで切れているため、以降のIRの中身とフッター（Contact Us）は抽出データの見出しのみで確認。

Interaction

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

抽出データに Lottie があり、FVの色帯から都市のイラストへ変化するアニメーションに使われていると思われる（PCとフルページのキャプチャで画面が異なる）
リボン状のラインはスクロールに合わせて伸びる演出と思われる。SVGの path に stroke-dasharray / stroke-dashoffset を設定し、スクロール量に応じて offset を減らすと再現できる
ヘッダーはスクロール後に角丸の白いバーへ変わって固定される。スクロール量でクラスを切り替え、position: fixed と border-radius で実装できる
右下に円形のページトップボタンが固定表示され、FVのお知らせカードは×ボタンで閉じられる

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

検出された技術:Next.jsLottie

Reproduce

再現するときのポイント

01FVのフレームは、角丸の矩形から見出しやロゴの領域を切り欠いた形にする（白い角丸の要素を重ねるか、SVGの clip-path で作る）
02ブランドの青（#009cea）に緑（#0bd99f）とロイヤルブルー（#3a65ed）を加え、3事業を色で塗り分ける
03英字の大見出し＋和文の小見出し＋「[ 事業内容 ]」のような角括弧ラベルの組み合わせを全セクションで揃える
04リボン状のラインを複数セクションにまたがって配置し、ページ全体の流れをつくる

再現MDに含まれるもの

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

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

digitalgrid.katapick.md

1---
2title: "デジタルグリッド株式会社 再現用デザイン仕様書"
3source: https://www.digitalgrid.com/
4katapick: https://katapick.com/sites/digitalgrid
5category: コーポレート
6region: 国内 (JP)
7tags: [ブルー基調, ライト, イラスト, 角丸, 固定ナビ, スクロール演出]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# デジタルグリッド株式会社 — 再現用デザイン仕様書
17 
18> 見えない電気の流れを、色のリボンで見せちゃってる。電力取引プラットフォームのデジタルグリッドのサイトは、青・緑・黄のリボンでセクションをつなぎ、目に見えない電力の行き来をページの骨格に据えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22