タブ・アコーディオンで高さを抑えて見せるおすすめ表現方法 [動画あり]

ホームページ作成サービスBiNDupでサイト編集の要となるブロックエディタの機能が改善されて、「タブ・アコーディオン」ブロックもこの改善によって新しい表現が可能となりました。

高さを抑えつつ情報をしっかり見せたい場合や、動きを利用して見せたいときに有効な表現なので、参考にしてください。

タブ・アコーディオンブロック内でカラム分割が可能に

デザインパターンや操作手順を動画でもチェックしてみてください。

タブ・アコーディオンを使うメリット

タブ・アコーディオンブロックは元々、限られた範囲で複数の情報を並列して見せるのに適したレイアウトです。コンテンツを折り畳んだり、画面を切り替えてみせることができます。
BiNDupでは、新たにタブ・アコーディオン内のコンテンツをカラム分割できるようになったことで、より情報をすっきり見せらるようになりました。

タブ・アコーディオンを有効に使った参考デザイン

BiNDupのテンプレートをアレンジし、いくつかサンプルを用意してみましたので参考にしてみてください。

タブブロックのインタビュー風レイアウト

テンプレート「MARKSMAN Building Maintenance Recruit」をベースにカスタマイズしました。

タブを画像にしクリックしたくなるデザインに

タブを切り替えた場合

アコーディオンブロックのNews風レイアウト

一見テキスト情報だけのシンプルなニュースですが、クリックすることで概要を展開するデザイン。
普段はコンテンツの高さを抑え控えめにしつつも、ある程度情報を見せたい時におすすめです。
※BiND Pressの記事インデックスはタブ・アコーディオンブロックが使用できません。

アコーディオンを展開する前

アコーディオンを展開した場合

タブブロックのスライド風デザイン

単純に元々分割ブロックだったものをタブブロックに置き換えてみるのもありかもしれません。
また違った印象になるかと思います。内容に合わせて検討してみてください。

元のデザイン（プレーンブロック３カラム）｜テンプレートMADELYN Dinerより

タブブロックに置き換えた場合

スライドの動き

あまりインパクトのある機能ではないかもしれませんが、今までとは違う見せ方ができるようになったかと思います。

BiNDupでのカラム分割の設定方法

設定方法はとても簡単。
タブ・アコーディオンブロックのコンテンツ内で、普段カラムを分割しているのと同じようにカラム分割パーツを挿入してください。
ただし分割数は２分割までになります。
※編集はエディタモードで行なってください。

タブ・アコーディオンブロックのコンテンツ内に分割パーツを挿入するだけ

Dressの設定方法

コンテンツ内で分割されたカラムは余白などDressの設定が可能です。
タブブロックであればブロックスタイルを「タブブロック」に選択後、「タブリスト」＞「タブコンテンツ内カラム」から、アコーディオンであればブロックスタイルを「アコーディオンブロック」に選択後、「パーツを指定」＞「アコーディオンバー」＞「アコーディオンコンテンツ内カラム」から調整ができます。

タブ・アコーディオン内コンテンツのDress設定

このほかにも、新しいブロックエディタでは余白やカラム設定が便利になっていますので是非ご活用ください。

余白やカラム設定が便利に。動画で見るブロックエディタ〈設定画面編〉

BiNDupはノーコードでサイトのデザイン、制作が可能なサービスです。最大30日間無料でトライアルできます。

無料でBiNDupを使ってみるBiNDの制作事例を見る