SWELLのブロックパターン（コピペ用）

WordPressテーマSWELLのブロックエディターに貼り付けて使える、ブロックパターンの見本です。このページの見本は、SWELLのブロックでそのまま表示しています。

SWELLのブロックパターンは、見出し・表・ボタンなどのブロックを組み合わせた、コピーして貼り付けられる見本です。コピーして編集画面に貼ると、見本と同じ形のブロックが入ります。

SWELLに最初から入っているブロックだけで組んでいるため、追加のCSSは必要ありません。色はSWELLのカラーパレットを使っているので、貼ったサイトのメインカラーに合わせて変わります。

使い方

貼り付けの方法は、見本のコピーのボタンを押し、WordPressの編集画面に貼り付けます。ブロックにならずにタグの文字のまま入るときは、右上の「︙」から「コードエディター」に切り替えて貼り付け、ビジュアルエディターに戻します。

見本の金額・店名・プラン名は例です。貼り付けたあとに、文字と金額を書き換えて使います。ボタンのリンク先は # のため、ブロックの設定で実際のURLに変更します。

スマートフォンで幅の足りない表は、SWELLの標準の動きで横にスクロールします。

料金表

店舗・教室・士業・サロン・制作会社など、使う場面ごとの料金表です。表の形が2つ、列を並べた形が1つ、カードの形が1つあります。

コース料金の3列表（飲食店・宿）

コース料金を3列に並べた表。ランチ・ディナー・特別のように、金額・内容・予約ボタンを縦に読めます。真ん中のおすすめの列だけ、薄い色を敷きます。

お店のメニュー表や宿のプラン表に使います。金額と内容は、書き換えるだけで別の店に合わせられます。

教室の月謝表（教室・スクール）

通う回数ごとの月謝を、列を回数・行を項目にして並べた表。月謝・1回あたり・入会金・教材費を1枚で見比べられます。表の下に注記と申し込みのボタンを置きます。

習い事やスクールの月謝の案内に使います。回数の列や項目の行は、表の編集画面で増やせます。

サービス別の報酬一覧（士業・事務所）

依頼の種類ごとに、内容と報酬の目安を3列で並べた表。左の列に項目名、右の列に金額を置きます。注記を表の下に付け、問い合わせのボタンで終わります。

士業や事務所の報酬の案内に使います。金額が決まらない項目は「○円から」のように書きます。

メニュー別の料金（2列）（美容室・サロン）

カットとカラー・パーマのように、メニューの種類ごとに料金の表を2つ並べた形。スマートフォンでは上下に並びます。表の下に注記と予約のボタンを置きます。

美容室やサロンのメニュー表に使います。メニューの種類が増えたときは、列のブロックを複製して並べます。

3プランのカード（制作会社・サービス）

プランごとにカードを並べ、金額・含まれる内容・相談のボタンを置いた形。真ん中のおすすめのプランだけ、見出しをメインカラーで塗ります。スマートフォンでは縦に並びます。

制作会社やサービスのプランの案内に使います。含まれる内容の行数をそろえると、カードの高さがそろいます。

月額プランの比較表（保守・サブスクリプション）

月額のプランを列に並べ、含まれる内容を「◯」と「−」で比べる表。おすすめの列だけ、薄い色を敷きます。最後の行に申し込みのボタンを置きます。

保守や会員制のサービスの月額プランの比較に使います。行を足すと、比べる項目を増やせます。

よくある質問

SWELLのよくある質問ブロックと、アコーディオンのブロックで作った形です。見た目の種類が4つと、開いて読む形、分類つきの形があります。

よくある質問の基本形（飲食店）

質問と答えを Q と A のアイコンで並べる、SWELLのよくある質問ブロックの基本形です。

予約・駐車場・支払い方法など、来店前に聞かれることをまとめるのに使います。

箱で囲むよくある質問（教室）

質問ごとに箱で囲んだ形です。1問ずつの区切りがはっきりします。

体験・振替・持ち物など、入会前の質問をまとめるのに使います。

線で区切るよくある質問（士業）

質問の間を線で区切った、落ち着いた見た目の形です。

相談料・対応時間・守秘義務など、問い合わせ前の不安に答えるのに使います。

しま模様のよくある質問（サロン）

質問の背景に色を敷いた形です。質問がたくさんあっても読み分けやすくなります。

当日予約・施術時間・キャンセルなど、予約前の質問をまとめるのに使います。

開いて読むよくある質問（制作会社）

質問を押すと答えが開く、アコーディオンの形です。答えが長くても縦に伸びません。

制作期間・支払い・更新の方法など、答えが長くなる質問に使います。

分類つきのよくある質問（サブスクリプション）

見出しで「契約」「サポート」に分けたよくある質問です。検索エンジン向けのFAQの構造化データを出す設定にしています。

質問が多いサービスで、種類ごとに分けて見せるのに使います。

お問い合わせ・申し込みの導線

ページの最後に置いて、問い合わせや予約につなげる形です。色の帯・2つのボタン・見出しつきの枠・流れ・店舗情報・体験の申し込みがあります。

相談をうながす色の帯

薄い色の帯に、一言と短い説明とボタンを中央にそろえて置いた形です。

記事やページの最後に置き、問い合わせへつなげるのに使います。

電話とネット予約の2つのボタン（飲食店）

電話とネット予約を2列に並べ、受付時間を添えた形です。スマートフォンでは上下に並びます。

予約の方法が2つあるお店の、ページの最後に使います。

見出しつきの枠で問い合わせへ

「お問い合わせ」の見出しがついた枠に、説明・安心できる3つの点・ボタンを入れた形です。

問い合わせの前のためらいを減らしたいときに使います。

相談の流れとボタン

問い合わせから契約までを3つの段階で見せ、最後にボタンを置いた形です。

初めての人に、頼んだあとの流れを先に伝えたいときに使います。

店舗情報と予約ボタン

住所・電話番号・営業時間・定休日を表の形で並べ、予約のボタンを添えた形です。

店舗のページの最後や、アクセスの節に使います。

無料体験の申し込み（教室）

薄い色の枠に、体験の内容を3つのチェックで並べ、申し込みボタンを置いた形です。

教室やスクールの、体験レッスンへの申し込みに使います。

会社概要・店舗情報

会社や店舗の基本情報を、見やすく整理して並べる形です。説明リストが3つ、表が3つあります。線の引き方や色の敷き方で印象が変わります。

線で区切る会社概要（制作会社）

項目名と内容を横に並べ、行の間に線を引いた説明リストです。会社名・所在地・事業内容などを上から順に読めます。

会社概要ページの基本の形として使います。項目を足したり消したりするだけで、ほかの会社にも合わせられます。

縞模様の表の会社概要（税理士事務所）

1行おきに薄い色を敷いた表です。行が多くても、どこを読んでいるか迷いません。

事務所の概要や、所属資格・対応エリアなど項目の多い案内に使います。

項目名を色で塗った店舗案内（整体院）

項目名のセルに色を敷き、内容と並べた説明リストです。表のような見た目で、スマートフォンでは縦に並びます。

店舗の基本情報をひと目で伝えたいときに使います。住所・休診日・予約方法をまとめて載せられます。

二重線の表の会社概要（工務店）

表の下に二重線を引いた、落ち着いた印象の表です。項目名の列に色が付きます。

会社の歴史や許可番号など、堅実な印象を出したい会社概要に使います。

左右に並べた営業案内（カフェ）

項目名を左、内容を右に並べた説明リストです。右にお知らせの枠を添えて、営業時間の変更も伝えられます。

お店のトップページや案内ページで、営業日・席数・アクセスをまとめて見せます。

罫線だけの表の会社概要（学習塾）

罫線だけで区切った、飾りの少ない表です。ほかの文章と並べても浮きません。

教室の概要や、受付時間を静かな見た目で載せたいときに使います。

このページについての質問

SWELL以外のテーマに貼ってもいいですか。

見本は、SWELLのブロック（フルワイド・列・ボタン）とSWELLの表の色の仕組みを使っています。SWELL以外のテーマでは、ブロックが無いか、色や見た目が変わります。

色を変えるには、どうしますか。

貼ったブロックは、SWELLのカラーパレットのメインカラーを使っています。WordPressの管理画面の外観のカスタマイズで、サイトのメインカラーを変えると、表の見出しやボタンの色もそろって変わります。