BiNDupの小さな改善点。ブロックテンプレートもリニューアルします。

皆さんBiNDのサイト作りでブロックテンプレートは利用していただいていますでしょうか?
今までのブロックテンプレートでも問題なかったのですが、レイアウトが使いにくかったり、バリエーションが乏しかったりで、かゆいところに届かないシチュエーションもあったのではないかと思います。結局エディタモードに変換してレイアウトしなおしたり・・・。
そんなことが今回のBiNDuopから減ると良いなと思い、より簡単にレイアウトを組んでいけるように、ブロックテンプレートの改善も行いました。

早速、良くなった点をご紹介します。

使いやすさを重点に、レイアウトを刷新

「使いやすさ」といっても感じ方は色々で難しいところですが、具体的にはこちらを意識して調整しています。

  1. 汎用的なレイアウトに集約
  2. 不要な要素をON/OFF可能
  3. 基本的にはスマートモードで用意。デザイン崩れを防止

特に3つ目は、エディタモードで編集して「よくわからない隙間が空いてしまった」、とか「要素の構造がよくわからない・戻せない」といった悩みを緩和できるのではないかと思います。
また1、2も相まって、特殊なレイアウトでない限りはブロックテンプレートをそのまま利用していただくことでよりスピーディな構築を期待できるように意識しています。

例をいくつかご紹介。

2段ブロック

まず初めにシンプルな2段のブロック。左右でブロックの中身が異なります。ブロックテンプレートでは「ヨコ並び」という表現にしています。

記事ブロックとして用意したテンプレートは、左右入れ替えも合わせて4パターンですが、中身の要素のON/OFFも合わせると同じブロックテンプレートを使用していても、ブロック毎に構成を調整できるので色んなパターンを表現できると思います。

ヨコ並びブロックのパターン(サムネイル)

また画像の他に、動画・地図バージョンも用意しています。

複数段ブロック

ブロックテンプレートで「(1〜5段)」(最大8段)となっているものは、段(カラム)を複数追加できます。
上記「ヨコ並び」ブロックとは違い、同じ構成を複数繰り返したい場合は、こちらのテンプレートを利用してください。

複数段ブロックのパターン(サムネイル)

要素の配置違いで4パターン。
こちらも動画・地図バージョンを用意しています。

見出し

見出しについてもちょこっと改修。

今までは見出し単独のブロックでしたが、
今回からは、見出し+リード+本文のセットブロックにさせていただきました。
これらはセットで利用することが多いであろうという理由によるものです。

また、エディタモードのように要素毎や部分的に、中央寄せ・色変え(従来の本文と同等の設定)などもできます。(本当はドレスで調整していただくのがベストですが・・・)

もちろん、リードや本文が不要な場合は非表示にできるので、従来と同じ使い方も可能です。

扱いやすいテキストボタン

さらに、今まで画像ボタンだった「詳しくはこちら」のボタンパーツも、扱いやすいテキストボタンに刷新されました。

テキストの修正はもちろん、デザイン変更などがラクになります。

ブロックテンプレートの使いどころ

今回ブロックテンプレートを調整した目的として、ブロックテンプレートだけでwebに必要な構成を作成できると良いなと思っています。

2段の例

例えば参考サイトを探していて、このような気になるレイアウトがあった時、先ほど紹介した「ヨコ並び」のテンプレートがそのまま使えそうです。
参考:日本ガイシグループ – GLOBAL

参考レイアウトに近いブロックテンプレート

複数段の例

参考:ピッキオ

参考レイアウトに近いブロックテンプレート(段数は2段、リンクは非表示にするなど)


こんな感じで、普通によく見るレイアウトも、素敵なレイアウトもブロックテンプレートをそのまま使うだけ再現できますので、これからはぜひご利用ください。

BiNDupについて詳しくみる