LAB

インタラクションブロック

INTERACTION BLOCKS

インタラクションブロック

スクロール・クリック・ホバーなど、動きのある体験を作るための10ブロックです。Interactivity API ベースで軽量に動作します。

accordion

クリックで開閉する折りたたみコンテンツです。exclusive モードでは同時に1つのアイテムのみ展開されます。faqSchema を有効にすると FAQPage JSON-LD が自動出力され、Google検索のリッチリザルト対象になる可能性があります。

デモ

Q. アコーディオンとは？

クリックで開閉できる折りたたみコンテンツです。exclusive モードでは同時に1つだけ開きます。

Q. FAQ構造化データに対応していますか？

faqSchema を ON にすると FAQPage JSON-LD が自動出力されます。Google検索結果にリッチリザルトとして表示される可能性があります。

Q. 複数同時に開くことはできますか？

exclusive を OFF にすると、複数のアイテムを同時に展開できるようになります。

カスタマイズ

true にすると同時に開けるアイテムが1つに制限されます。false では複数同時展開が可能です。

true にすると FAQPage 形式の JSON-LD 構造化データがページに出力されます。FAQ コンテンツに向いています。

こんなシーンで使える

  • FAQ・よくある質問のコーナー
  • 仕様詳細や注意事項の折りたたみ表示
  • 料金プランの補足説明

tabs

コンテンツを切り替えて表示するタブコンポーネントです。underline / pill / bordered の3スタイルを選べます。Interactivity API によるスムーズな切り替えアニメーション付きです。

デモ

underline スタイル

underline スタイルのタブです。選択中のタブに下線が表示されます。

pill スタイル

pill スタイルのタブです。選択中のタブが丸みを帯びたバッジ形状になります。

bordered スタイル

bordered スタイルのタブです。枠線付きのタブボタンが並ぶクラシックなデザインです。

カスタマイズ

underline / pill / bordered からタブのスタイルを選択できます。

こんなシーンで使える

  • 製品の概要・仕様・料金を切り替えて見せたい場合
  • 複数カテゴリのコンテンツを1箇所にまとめたい場合
  • 縦スクロールを減らしてコンパクトにまとめたいセクション

carousel

スライドショー形式のカルーセルです。type で slide / loop / fade を切り替えられ、autoScroll で自動スクロールにも対応しています。レスポンシブのブレークポイントごとに表示枚数を変更できます。

デモ

slide（1枚表示）

  • スライド 1

  • スライド 2

  • スライド 3

loop（3枚表示）

  • スライド 1

  • スライド 2

  • スライド 3

  • スライド 4

  • スライド 5

fade（自動再生）

  • スライド 1 — フェードトランジション

  • スライド 2 — フェードトランジション

  • スライド 3 — フェードトランジション

autoScroll（自動スクロール・ループ）

  • スライド 1

  • スライド 2

  • スライド 3

  • スライド 4

  • スライド 5

カスタマイズ

slide / loop / fade でトランジション方式を切り替えられます。

一度に表示するスライド枚数です。

前後ボタンの表示・非表示を切り替えます。

ドットページネーションの表示・非表示を切り替えます。

自動再生の有効・無効を切り替えます。

自動再生の間隔をミリ秒で指定します（例: 3000 = 3秒）。

スライド間の余白です。CSS の単位で指定できます。

true にすると矢印・ページネーションなしで自動横スクロールします。ロゴクラウドなどに向いています。

自動スクロールの速度です。数値が小さいほど速くなります。

中画面（タブレット）での表示枚数です。

小画面（スマートフォン）での表示枚数です。

こんなシーンで使える

  • ヒーローエリアのビジュアルスライドショー
  • パートナーロゴの自動スクロール表示
  • お客様の声やポートフォリオのカード一覧

before-after

スライダーを動かして2つのコンテンツを比較できるブロックです。mode で clip（スライド切り替え）と overlay（重ねて表示）を選べます。リニューアル前後やデザイン比較に向いています。

デモ

カスタマイズ

clip はスライダーで左右を切り取る方式、overlay は上下に重ねて比較する方式です。

Before 側に表示するラベルテキストです。

After 側に表示するラベルテキストです。

Before 側に画像を使う場合の URL です。インナーブロックの代わりに画像のみ表示されます。

After 側に画像を使う場合の URL です。

こんなシーンで使える

  • サイトリニューアル前後のビジュアル比較
  • 施術・サービスのビフォーアフター紹介
  • デザインの新旧比較やA/Bテスト結果の説明

counter

スクロールで数値がカウントアップするブロックです。実績数値やKPIの見せ方として使いやすく、視覚的なインパクトを与えられます。

デモ

0 +
完成サイト数
0 %
顧客満足度
0 年
運営年数
0 種
カスタムブロック数

カスタマイズ

カウントアップの目標値です。文字列で指定します。

数値の後ろに付けるテキストです（例: +、%、年）。

数値の前に付けるテキストです（例: ¥、約）。

数値の下に表示するラベルテキストです。

カウントアップのアニメーション時間（ミリ秒）です。

こんなシーンで使える

  • 会社・サービスの実績数値のアピール
  • LP の信頼性指標（顧客数・満足度・実績年数）
  • ポートフォリオでの制作実績の見せ方

marquee

テキストが流れ続けるマーキーブロックです。direction で左右どちらへも流せ、speed で速度を調整できます。pauseOnHover を有効にするとホバー時に停止します。

デモ

ONEsta Plugin ● カスタムブロック ● WordPress ● デザインシステム ●
ブランドロゴやパートナー名の流れる表示に ● お知らせティッカーとしても ●

カスタマイズ

流れるテキストの内容です。区切り文字（● など）を挟んで繰り返しテキストを書くと見栄えが良くなります。

slow / normal / fast からスクロール速度を選べます。

left（右から左）/ right（左から右）でスクロール方向を指定します。

true にするとマウスホバー時にスクロールが一時停止します。

こんなシーンで使える

  • パートナー・クライアントのブランドロゴの流れる表示
  • お知らせ・キャンペーン情報のティッカー
  • キャッチコピーやタグラインの装飾的な演出

scroll-video

スクロール量に連動して動画が再生されるブロックです。Apple風のプロダクトページ演出に向いています。

実際のデモには動画ファイルが必要です。サイドバーから MP4 を設定してください。

カスタマイズ

video（動画スクロール連動）/ image（画像シーケンス）を選べます。

使用する MP4 ファイルの URL です。

スクロールトリガー領域の最小高さです（例: 300vh）。

動画下部にフェードマスクを付けるかどうかです。

動画に重ねるオーバーレイカラーです。

オーバーレイの不透明度（0〜100）です。

こんなシーンで使える

  • プロダクト紹介ページのハイライトムービー演出
  • ポートフォリオのメインビジュアルとして
  • ランディングページのインパクトあるファーストビュー

text-reveal

スクロールに合わせてテキストが暗い状態から徐々に明るくなるリビールエフェクトブロックです。印象的なキャッチコピーや大切なメッセージを演出するのに向いています。

デモ

スクロールに合わせてテキストが徐々に明るくなるエフェクトです。印象的なキャッチコピーや大切なメッセージの演出に向いています。

カスタマイズ

表示するテキスト内容です。

p / h2 / h3 / blockquote からHTMLタグを選べます。

リビール前（暗い状態）の不透明度です（0〜100）。小さいほど暗くなります。

テキストの揃え方です（left / center / right）。

こんなシーンで使える

  • LP のメインキャッチコピーの印象的な見せ方
  • ミッション・ビジョン・バリューの宣言文
  • ストーリーテリング型コンテンツの節目に置くフレーズ

steps

ステップ形式でプロセスを表示するブロックです。variant で4種類のデザインを切り替えられ、animated を有効にするとスクロール時にアニメーションが入ります。

デモ

default スタイル

  1. お問い合わせ

    フォームからお気軽にお問い合わせください。

  2. ヒアリング

    ご要望を詳しくお聞きします。

  3. お見積り

    最適なプランをご提案します。

card スタイル

  1. お問い合わせ

    フォームからお気軽にお問い合わせください。

  2. ヒアリング

    ご要望を詳しくお聞きします。

  3. お見積り

    最適なプランをご提案します。

minimal スタイル

  1. お問い合わせ

    フォームからお気軽にお問い合わせください。

  2. ヒアリング

    ご要望を詳しくお聞きします。

  3. お見積り

    最適なプランをご提案します。

icon-lg スタイル

  1. お問い合わせ

    フォームからお気軽にお問い合わせください。

  2. ヒアリング

    ご要望を詳しくお聞きします。

  3. お見積り

    最適なプランをご提案します。

カスタマイズ

vertical（縦並び）/ horizontal（横並び）でレイアウトを切り替えられます。

default / card / minimal / icon-lg からデザインスタイルを選べます。

true にするとスクロールで各ステップが順にフェードインします。

こんなシーンで使える

  • サービスの申し込みフローや導入ステップの説明
  • 製品の使い方・セットアップ手順のガイド
  • プロジェクト進行やロードマップの可視化

timeline

時系列で出来事を並べるタイムラインブロックです。会社沿革やプロジェクトの歴史を時系列で伝えるのに向いています。

デモ

2020年4月
会社設立

Webサイト制作事業を開始しました。

2022年3月
テーマ開発開始

汎用WordPressテーマの開発に着手しました。

2023年9月
プラグイン公開

コンパニオンプラグインをリリースしました。

2025年〜
継続的アップデート

機能追加・改善を継続中です。

カスタマイズ

各アイテムに表示する日付・時期のテキストです。

各アイテムの見出しテキストです。

こんなシーンで使える

  • 会社・ブランドの沿革・歴史のページ
  • プロジェクトのマイルストーンや開発ロードマップ
  • 個人ポートフォリオのキャリア経歴