# デジタルグリッド株式会社｜コーポレートのWebデザイン参考

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

- URL: https://www.digitalgrid.com/
- 解説ページ: https://katapick.com/sites/digitalgrid
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: エネルギー（電力取引プラットフォーム）
- テイスト: ブルー基調、ライト、イラスト、角丸、固定ナビ、スクロール演出
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

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

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

## 配色
- #ffffff White（背景）
- #2b2b2b Graphite（テキスト / メニューボタン）
- #009cea Grid Blue（ブランドカラー / Our Strengths の背景）
- #0bd99f Energy Green（アクセント / 再エネ事業のカード）
- #3a65ed Royal Blue（アクセント / 調整力事業のカード）
- #474747 Dark Gray（Recruit セクションの背景）

## フォント
- 和文見出し・本文: Noto Sans JP（代替: Noto Sans JP）
- 英字見出し・ナビ・日付・ボタン: Zalando Sans（代替: Zalando Sans）

## よくある質問
### デジタルグリッドのサイトで使われているフォントは？
抽出データでは和文に Noto Sans JP、英字に Zalando Sans と思われる書体（登録名は zalando）が使われています。どちらも Google Fonts で入手できます。

### デジタルグリッドのような流れるラインの演出はどう作る？
太いSVGの path を用意し、stroke-dasharray に全長を指定して、GSAP ScrollTrigger などでスクロール進捗に合わせて stroke-dashoffset を0に近づけると、線が伸びていくように見えます。

### デジタルグリッドのデザインはどんな業種の参考になる？
エネルギー、インフラ、脱炭素関連など、目に見えない仕組みを図解とイラストで伝えたいBtoB企業のコーポレートサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/digitalgrid からダウンロードできます。
出典: Katapick（https://katapick.com）