MARKETING BLOCKS
マーケティングブロック
ボタン・比較表・価格プラン・お客様の声など、コンバージョン設計に使いやすい7ブロックをまとめています。
button
5種類のスタイルと3サイズを組み合わせられるボタンブロックです。アイコンの前後配置やマイクロコピーにも対応しています。
デモ
5スタイル
3サイズ
アイコン付き
カスタマイズ
ボタンに表示するラベルテキストです。
リンク先の URL です。
primary / secondary / ghost / text-link / danger からスタイルを選べます。
sm / md / lg からボタンのサイズを選べます。
表示するアイコン名です（例: arrow-right、download）。
before（テキスト前）/ after（テキスト後）でアイコンの位置を指定します。
true にすると新しいタブで開きます。
left / center / right でボタンの横位置を指定します。
true にするとボタンが幅いっぱいに広がります。モバイルでのスタック表示などに便利です。
こんなシーンで使える
button-pair
メインCTAとサブCTAを横並びで配置できるブロックです。stackOnMobile を有効にするとスマートフォンでは縦積みになります。
デモ
カスタマイズ
メインボタンのラベルテキストです。
メインボタンのリンク先 URL です。
サブボタンのラベルテキストです。
サブボタンのリンク先 URL です。
left / center / right でボタン群の横位置を指定します。
sm / md / lg でボタンのサイズを揃えられます。
true にするとスマートフォンでボタンが縦積みになります。
こんなシーンで使える
comparison
自社サービスと競合他社を横に並べて比較できるテーブルブロックです。ハイライト列を設定すると、注目させたいプランを視覚的に強調できます。
デモ
| 比較項目 | ONEstaプラン | 他社プラン |
|---|---|---|
| 月額費用 | ¥9,800 | ¥15,000 |
| サポート | 24時間対応 | 平日のみ |
| 初期費用 | 無料 | ¥50,000 |
| カスタマイズ | 自由 | 制限あり |
| 契約期間 | 縛りなし | 1年 |
カスタマイズ
列の定義を配列で指定します。label（見出し）/isHeader（項目名列か）/isHighlight（強調列か）を含むオブジェクトの配列です。
各行のデータを配列で指定します。cells に列数分のテキストを並べます。
こんなシーンで使える
limited-time
設定した期間内のみコンテンツを表示するブロックです。startDate と endDate を指定すると、期間外は自動的に非表示になります。キャンペーンや季節限定情報の出し分けに便利です。
デモ
カスタマイズ
表示開始日時です（形式: YYYY-MM-DD）。
表示終了日時です（形式: YYYY-MM-DD）。この日を過ぎるとインナーコンテンツが非表示になります。
こんなシーンで使える
pricing
料金プランを見やすく表示するブロックです。highlighted で注目プランを強調でき、badge でラベルを付けられます。grid ブロックと組み合わせて複数プランを横並びにするのに向いています。
デモ
カスタマイズ
プラン名です（例: ライト、スタンダード、プロ）。
価格テキストです（例: ¥9,800）。
価格の単位・期間テキストです（例: /月、/年）。
ボタンのラベルテキストです。
ボタンのリンク先 URL です。
true にするとプランカードが強調スタイルになります。推奨プランに向いています。
プランカードの上部に表示するバッジテキストです（例: 人気、おすすめ）。
こんなシーンで使える
pickup-banners
複数のバナーリンクをグリッド状に並べるブロックです。style で card / overlay / simple の3スタイルから選べます。カテゴリナビやおすすめコンテンツの一覧表示に向いています。
デモ
card スタイル
overlay スタイル
simple スタイル
カスタマイズ
バナーデータの配列です。各要素に image（画像URL）/title/url/description を指定します。
デスクトップでの列数です。
スマートフォンでの列数です。
card（画像+テキスト分離）/ overlay（画像にテキスト重ね）/ simple（テキストのみ）を選べます。
バナー四隅の丸みを CSS 値で指定します（例: 8px）。
こんなシーンで使える
testimonial
お客様の声・推薦コメントを表示するブロックです。星評価とアバター画像に対応しています。grid ブロックと組み合わせて複数の声を並べて表示するのに向いています。
デモ
制作効率が大幅に向上しました。ブロックが豊富で、デザインの幅が広がります。
クライアントへの提案がスムーズになりました。サポートも丁寧で安心です。
カスタマイズ
お客様の声・引用テキストです。
投稿者の名前です。
投稿者の役職・肩書きです。
星評価です（1〜5）。0 を指定すると星が非表示になります。
投稿者のアバター画像 URL です。未設定の場合はデフォルトアイコンが表示されます。