メインコンテンツへ
電ガススイッチ

内部資料 — denryoku-gas.jp

デザインシステム

このサイト固有のBladeコンポーネント一覧です。プレビューとコードスニペットで使い方を確認できます。

アコーディオン

<x-accordion>

:itemsプロップでリストモード。:schema="true"でFAQ構造化データ（SEO）を自動出力。

通常3〜10営業日程度です。引越しの場合は早めの手続きをおすすめします。
多くの新電力では解約手数料は発生しません。ただし一部のプランでは違約金が発生する場合があるため、契約前にご確認ください。
電力自由化により、賃貸住宅でも自由に電力会社を選べます。ただし集合住宅の一括受電サービスを利用している場合は切り替えできないことがあります。
コードを見る 
<x-accordion :items="[
    ['title' => '質問1', 'content' => '回答1'],
    ['title' => '質問2', 'content' => '回答2'],
]" />


<x-accordion :items="$faqItems" :schema="true" />

オファーバッジ

<x-offer-badge>

プラン情報やエリアなどを示すインラインバッジ。variantプロップで色とアイコンが変わる： default · green · fixed · indexed · variable · trv · energy · rank · scope · market

規制料金 再エネ100% 固定単価 市場連動 変動型 従量課金 電力 おすすめ 関東エリア 市場価格
コードを見る 
<x-offer-badge>規制料金</x-offer-badge>
<x-offer-badge variant="green">再エネ100%</x-offer-badge>
<x-offer-badge variant="fixed">固定単価</x-offer-badge>
<x-offer-badge variant="indexed">市場連動</x-offer-badge>
<x-offer-badge variant="variable">変動型</x-offer-badge>
<x-offer-badge variant="rank">おすすめ</x-offer-badge>
<x-offer-badge variant="scope">関東エリア</x-offer-badge>
<x-offer-badge variant="energy">電力</x-offer-badge>

吹き出し

<x-speech-bubble>

ユーザーアバターアイコン＋吹き出しテキストのセット。スロットに内容を渡すだけ、プロップなし。

利用シーンの例：

  • 読者が抱きがちな素朴な疑問を会話形式で立ち上げ、回答へつなげたいとき
  • 編集者の一言・個人的な感想をカジュアルなトーンで記事に差し込みたいとき
電気とガスを一緒に申し込むとお得になると聞きましたが、実際のところどうなのでしょうか？
引越し先で電力会社をどうやって選べばいいですか？
コードを見る 
<x-speech-bubble>
    ユーザーの質問や疑問のテキスト
</x-speech-bubble>

アイコン

<x-icon>

CDN（images.denryoku-gas.jp/icons/）からSVGを取得してインライン展開。 iconプロップにアイコン名を指定。classプロップでサイズ・色をTailwindで制御（デフォルト: w-5 h-5）。 利用可能な全アイコン名は アイコンライブラリページ で確認できます。

icon-electricity
icon-gas
icon-home
icon-check
icon-arrow-right
icon-phone
icon-calendar
icon-star

サイズバリエーション

w-4 h-4
w-5 h-5
w-6 h-6
w-8 h-8
w-10 h-10
w-12 h-12
コードを見る 
<x-icon icon="icon-electricity" class="w-6 h-6 text-primary" />
<x-icon icon="icon-gas" class="w-5 h-5 text-accent" />


<span class="inline-flex items-center gap-1.5">
    <x-icon icon="icon-check" class="w-4 h-4 text-accent" />
    <span>チェック済み</span>
</span>

スティッキーCTA

<x-sticky-cta>

モバイルのみ表示（md:以上は非表示）。画面下部に固定されるCTAバー。 type="affiliate": 常時表示の申し込みボタン。 type="phone": 営業時間中は電話ボタン、時間外は別CTAに自動切替（Alpine.js + businessHours()関数使用）。 openTextAbove・closeTextAboveで上部のキャプションテキストを追加可能。

affiliate タイプ（インラインプレビュー — 実機はモバイル固定表示）

キャンペーン実施中（openTextAbove）

公式サイトで申し込む
コードを見る 
<x-sticky-cta
    type="affiliate"
    openButtonText="公式サイトで申し込む"
    openLink="{{ $affiliateUrl }}"
/>


<x-sticky-cta
    type="affiliate"
    openTextAbove="キャンペーン実施中"
    openButtonText="公式サイトで申し込む"
    openLink="{{ $affiliateUrl }}"
/>


<x-sticky-cta
    type="phone"
    openTextAbove="今すぐ無料相談"
    openButtonText="電話で相談する"
    openLink="tel:0120000000"
    closeTextAbove="受付時間外です"
    closeButtonText="公式サイトで申し込む"
    closeLink="{{ $affiliateUrl }}"
/>

テキストボックス

<x-textbox>

アイコン付きの色帯ボックス。titleプロップで見出しを追加。

type 色 使いどき
info 青 具体例・補足情報・読者の理解を助ける追加説明
success 緑 ユーザーにとってのメリット・節約効果・お得な情報
warning 黄 注意喚起・見落としやすい条件・手続き上の注意点
danger 赤 後戻りできない操作・解約・削除など取り消し不可の行為
具体例
東京都在住・月300kWh使用の場合：東京電力の従量電灯Bから新電力Aプランに乗り換えると、年間約6,000円〜12,000円の節約が見込めます。手続きはオンラインで10分程度。
ポイント
申し込みから切り替えまで最短1週間。工事不要で電気が止まることはありません。
注意
解約違約金が発生するプランもあります。契約前に必ず確認してください。
注意が必要
一括受電マンションでは個別の乗り換えができない場合があります。
コードを見る 
<x-textbox title="具体例">
    本文テキストをここに。
</x-textbox>

<x-textbox type="success" title="ポイント">...</x-textbox>
<x-textbox type="warning" title="注意">...</x-textbox>
<x-textbox type="danger" title="注意が必要">...</x-textbox>


<x-textbox>短いメモや補足テキスト。</x-textbox>

プロバイダーカード

<x-provider-card>

電力・ガス会社などのカード。ロゴ・説明文・ボタンをデスクトップでは横1列に表示。 logoプロップにロゴURL、nameはalt兼フォールバックテキスト。

電ガススイッチ

電気・都市ガス・プロパンガスの料金プランを比較して最適なプランを見つけましょう。無料で簡単に乗り換え手続きが可能です。

公式サイトで申し込む
コードを見る 
<x-provider-card
    name="東京電力エナジーパートナー"
    logo="/images/providers/tepco.svg"
    description="スタンダードSプランをはじめ、ライフスタイルに合わせたプランが選べる。"
    primaryText="公式サイトで申し込む"
    primaryHref="{{ $affiliateUrl }}"
/>


<x-provider-card
    name="東京ガス"
    logo="/images/providers/tokyogas.svg"
    description="電気とガスのセット契約でポイントが貯まるMyTOKYOGASが人気。"
    primaryText="公式サイトで申し込む"
    primaryHref="{{ $affiliateUrl }}"
    secondaryText="料金シミュレーション"
    secondaryHref="/hikaku/tokyogas"
/>

引用

<x-quotation>

白背景＋角のブラケット装飾の引用ブロック。プライマリカラーのダブルクオートアイコン付き。 sourceで引用元名、sourceUrlでリンクを付与（「出典：」プレフィックスを自動付加）。

2016年4月の電力小売全面自由化により、家庭や商店などの低圧需要家も含めた全ての消費者が、電力会社や料金メニューを自由に選択できるようになりました。
出典：資源エネルギー庁
コードを見る 
<x-quotation source="資源エネルギー庁" sourceUrl="https://www.enecho.meti.go.jp/...">
    引用テキストをここに。
</x-quotation>


<x-quotation source="経済産業省（2024年調査）">
    引用テキストをここに。
</x-quotation>

ブロック

<x-block>

CMSブロックをIDで呼び出す。idプロップにcms.blocks.{id}のキーを指定。 ブロックが存在しない場合は何も表示されない。:dataプロップで追加変数をBladeテンプレート内に渡せる。

コードを見る 
<x-block id="promo-banner" />


<x-block id="provider-cta" :data="['provider' => $provider]" />