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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タブを切り替えた場合

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

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

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

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

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

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

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

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

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

元のデザイン(プレーンブロック3カラム)|テンプレートMADELYN Dinerより

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

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

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

スライドの動き

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

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

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

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

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

Dressの設定方法

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

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

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

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

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

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

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

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • タブ・アコーディオンのコンテンツ内で2カラムまで分割が可能に
  • コンテンツの高さを抑えつつも、ある程度情報を見せたいときに有効
  • タブブロックを活用してスライドのように切り替えて見せるアイディアも

RECOMMEND ARTICLE