内部資料 — denryoku-gas.jp

デザインガイド

このサイトで使えるカラー・タイポグラフィ・デザイン原則のリファレンスです。コンポーネントの使い方はデザインシステムを参照してください。

デザイン原則

コンポーネントやレイアウトを組む際に守る考え方。迷ったときはこの原則に立ち戻る。

シンプルさを優先する

余計な装飾・色・コンポーネントは加えない。「これは読者に必要か？」を問い、答えが曖昧なら削る。装飾が増えるほど重要な要素が埋もれる。

新着期間限定残り3日

✨ 東京電力エナジーパートナー ⚡

🌿 エコ 💰 節約 📱 アプリ 🎁 ポイント

キャンペーン中！

東京電力エナジーパートナー

電気とガスのセット契約でポイント還元

公式サイトで申し込む

コントラストを確保する

テキストと背景のコントラスト比はWCAG AA以上（本文 4.5:1、大見出し 3:1）を守る。薄いグレーに薄いグレーのテキストは禁止。

電気料金プランの選び方

申し込み前に現在の契約内容を確認しましょう。検針票の「契約種別」欄をご覧ください。

コントラスト比 1.8:1 — WCAG AA 不合格

電気料金プランの選び方

申し込み前に現在の契約内容を確認しましょう。検針票の「契約種別」欄をご覧ください。

コントラスト比 12.6:1 — WCAG AA 合格

色の意味を守る

Primary（青）= 信頼・主要行動。Accent（緑）= 肯定・エコ。Warning = 注意。Error = 危険。意味から外れた使い方をするとユーザーが混乱する。

⚠️ この操作は取り消せません（青 = 信頼のはずが警告に使用）

⚠️ この操作は取り消せません（warning色で警告を表現）

余白のリズムを守る

セクションの縦余白は py-10 md:py-14 で統一する。セクションごとに違う余白を設定するとページ全体がバラバラに見える。

pt-1 pb-10

セクションA

pt-8 pb-1

セクションB

pt-4 pb-14

セクションC

py-10

セクションA

py-10

セクションB

py-10

セクションC

情報の階層を明確にする

H1 → H2 → H3 の順を守る。H2 の下に H3 が1つだけの構造は禁止 — 2つ未満のサブ見出しは階層を成立させない。見出しは装飾として使わない。

電力会社を選ぶ

プランを比較する方法

→ H3が1つだけ（構造エラー）

手続きを進める

申し込み方法

→ H3が1つだけ（構造エラー）

電力会社を選ぶ

プランを比較する方法

エリアで絞り込む

手続きを進める

申し込み方法

切り替え後の確認

→ 各H2の下にH3が2つ以上

モバイルでもデスクトップでも明解で機能的なページを

ユーザーの大半はスマートフォン。レイアウトはまずモバイルで確認し、その後デスクトップで検証する。どちらの画面でも情報が読めて、ボタンが押せる状態であること。

電力自由化により家庭や商店などの全ての消費者が電力会社を自由に選択できるようになりました→はみ出し

小さすぎて読めない、タップ領域が不十分

電力自由化により、家庭や商店などの消費者が電力会社を自由に選択できるようになりました。

読みやすいフォントサイズ、タップしやすいボタン

カラーパレット

すべての色は css/app.css の @theme で定義されたトークンを使う。 トークン外のTailwind色（bg-blue-500 など）は原則使用禁止。

Global Color Assets

ブランドアイデンティティを構成するコアカラー。ページの骨格・主要アクション・ブランドタッチポイントに使う。これらは常にデザインの中心にある色。

Primary

bg-primary / text-primary

#004791

Primary Dark

bg-primary-dark

#003366

Primary Light

bg-primary-light

#f9fafe

Accent

bg-accent / text-accent

#4caf50

Accent Dark

bg-accent-dark

#388e3c

Accent Light

bg-accent-light

#e8f5e9

Secondary

bg-secondary

#005472

Secondary Light

bg-secondary-light

#e6f0f5

どの場面で使うか

Primary を使う場面

ナビゲーション・ヘッダー
主要CTAボタン
リンクテキスト
強調したい数値・見出し
アイコン（text-primary）

Accent を使う場面

チェックマーク・成功アイコン
エコ・再エネのラベル
メリット・ポジティブな強調
リストマーカー（自動適用）
「節約」「お得」の視覚表現

Secondary を使う場面

ガス関連セクションの差別化
セカンダリーボタン
サポート情報の背景
Primaryとの対比が必要な時

サイト内での色の使用割合（目安）

Primary系 60% Accent 20% Secondary 5% Neutral 15%

Accentは使いすぎると「肯定・エコ」の意味が薄れる。ページ内で2〜3箇所を目安にする。Primaryが骨格を作り、Accentが重要ポイントをひと押しするイメージ。

Extended Color Assets

状態・意味の表現とUIの骨格に使う拡張色。Global Colorと組み合わせて使うが、それ自体がブランドカラーにはならない。

Semantic — 状態表現

Success

text-success

#0a8023

Warning

text-warning

#f5a623

Error

text-error

#d0021b

Neutral — テキスト・ボーダー・背景

見出し

text-slate-900

#0f172a

本文

.article-body 自動適用

#2d2d2d

補足テキスト

text-slate-600

#475569

非アクティブ

text-slate-400

#94a3b8

ボーダー

border-slate-200

#e2e8f0

薄い背景

bg-slate-50

#f8fafc

タイポグラフィ

フォントは Noto Sans JP（Google Fonts CDN経由）。 .article-body 内の見出し・本文サイズはCSSが自動適用するため、Tailwindの text-* をむやみに上書きしない。

H1 電気代を賢く節約する方法

H2 電力会社を比較する前に

H3 申し込みから切り替えまでの流れ

H4 必要な書類を揃える

本文電力自由化により、家庭や商店などの低圧需要家も含めた全ての消費者が、電力会社や料金メニューを自由に選択できるようになりました。

補足 ※申し込み後、切り替え完了まで通常3〜10営業日かかります。

余白・レイアウト

ページ構造の基本ルール。

セクションの縦余白

py-10 md:py-14

<section> タグに必ず対称の py-X を設定する。非対称（pt-X pb-Y）は禁止。

コンテンツ幅

max-w-content mx-auto px-4

<section> ではなく内側の <div> に設定する。セクション自体をフル幅にして背景色を端まで伸ばせるようにするため。

記事本文の幅

.article-body で max-width: 680px を自動適用

x-layouts.article レイアウトを使えば自動的に適切な幅になる。手動で幅を指定しない。

見出し1つにつきセクション1つ

<section> 内に H2 は1つだけ

H3 以下は同じ <section> 内に置く。複数の H2 を1つのセクションにまとめない。

やってはいけないこと — 早見表

上の原則セクションのNG例をまとめた早見表。

やってはいけないこと	正しい代替
NG`bg-blue-500` など@theme外の色	OK`bg-primary`・`text-accent` などトークンを使う
NG`pt-8 pb-2` のような非対称パディング	OK`py-10 md:py-14` で統一
NGH2 の下に H3 が1つだけ	OKH3 を2つ以上、または H2 に統合
NGグレー背景に `text-slate-400` のテキスト	OK`text-slate-700` 以上でコントラスト 4.5:1 を確保
NGAccentカラーを破壊的操作ボタンに使う	OK解約・削除は `text-error`（赤）を使う
NG装飾アイコンや色を5種類以上一画面に並べる	OK必要最小限にとどめ、余計な装飾は削る