BiNDupの苦手なデザインと解決法

デザイナーのオモトです。
ホームページ作成サービス「BiNDup」でWebサイトをデザインする人に向けて、「BiNDupの機能のみ」で、できるデザイン、できないデザインを紹介する記事の後編です。
今回はBiNDupがちょっと苦手な＜できないデザイン編＞です。実現するための裏技も紹介しますので、詳しくみたい方はサンプルデータを活用しながらチェックしてください。

日々のアップデートによって、だいぶできるようになって来ていますが、まだ少し不得手な部分があるので、それらを把握した上でぜひ参考にしてください。

前編のBiNDupが得意とするデザインはこちらから
https://bindup.jp/camp/bind/howto/31221

プロデザイナー・コーダーの救世主！カスタムタグ・HTMLタグとは

前回の記事でも紹介しましたが、
この企画ではBiNDupの機能のみで作成する事を前提に解説しているので、できないデザインとあえて表現していますが、サポート対象外ではあるもののHTMLを直接記述できる機能や方法が多数あるので、コードが書ければ、「できない」と分類されているものも表現が可能です。
代表的なHTMLの記述方法は、以下の2つです。

カスタムタグ

カスタムタグとは、HTMLソースをブロック内に追加できるパーツです。記述が長くなるのを避けたり、テンプレート的に使うことができます。

HTMLタグ

HTMLタグは、HTMLソースをブロック内に直接記述できるタグです。短い文章を記述するのに最適です。ただし、divを追加する時は、ちゃんと記述しないと大崩壊が起きるので、注意が必要です。

他にも直接cssやスクリプトを記述する方法がありますので、詳しくは以下の記事をご覧ください。
https://bindup.jp/camp/bind/11049

できないデザイン：スライドショー

BiNDupの機能だけではできないデザイン表現の例を紹介していきます。

コンテンツカルーセル

最近のWebサイトでは、ページへの導線などに頻繁に使用するコンテンツカルーセルですが、現在BiNDupでは提供しているのは1種類のみです。
スライドショー機能である「SHiFT」のカルーセルのカードを使えば簡単にテキストやリンク設定が行えますが、ニュース（ブログ機能のBiND Press）と連動することやレイアウトの変更はできません。

Dressを使って多少余白等を調整することはできますが、自由度がかなり低いという意味でできないデザインに分類しました。今後、バリエーションを増やしていきたい所です。

解決策

カスタムパーツを使うことで、BiNDupでも自由なデザインのカルーセルを表示できます。

BiNDupでの記述方法

使用する画像は、「メニュー」の「リソースエディタ」からuserdataフォルダにアップロードします。
userdataフォルダ内の画像は、ブロックエディタ内に
<img src="[BD:path_userdata]/img/img.png">
と記述することで表示できます。
サンプルでは、CSSだけで動くカルーセルをBiNDupで表示させてみました。
詳しいコードは、サンプルデータをご確認ください。

サンプルサイトを見る

ちなみに直接記述する場合でも、BiNDupで使われているクラスタグを追加すると、Dressで編集できるようになります。サンプルではpタグに対して、BiNDup上で本文という意味になる「class="c-body"」を入れています。
※Dressとは、BiNDupで設定できるCSSの設定・管理機能です。

できないデザイン：ブログ

ブログのカテゴリごとにメインカラーを変える

ブログのカテゴリごとに色を変更するデザインはできません。

" width=

こちらは、残念ながら裏技はありません…。BiND Pressを使わず手動でやるにしても、カラムごとに色を変えることしかできないので、「カテゴリごと」に紐づいたデザインはできません。

できないデザイン：SVGの画像を扱う

SVGの画像を利用・トリミングする

高解像度のデバイスで見たり拡大表示したりても、画像が粗くならずにきれいに表示されるのがメリットのSVG形式の画像ですが、現在BiNDupの画像パーツはSVG形式に対応していません。代わりにカスタムタグを使用すれば可能です。
SVG形式の画像の読み込み方はこちらをご覧ください。
https://bindup.jp/camp/bind/14954

できないデザイン：メニュー

自由なハンバーガーメニューのデザイン

BiNDupでは、スマホメニューのデザインは、ドロワー（ハンバーガーメニュー）とタイルの2種類から選べます。

さらにタイルは、「タイル」のレイアウトは横に並べる形式か、積み重ねる形式の2種類から選択できます。

ただし、ハンバーガーメニューは、通常上記のデザインにアレンジを加える程度にしかできず、あまり自由度がありません。かなり試行錯誤が必要ですが、以下のようなカスタマイズが可能です。
https://bindup.jp/camp/bind/12837

タイルに関して、詳しくは以下の記事をご覧ください。
https://bindup.jp/camp/developers/25060

レイアウトの凝ったスマホメニュー

BiNDupでは、レイアウトの凝ったスマホメニューはできません。画像は、再現例です。細かい部分の表現はできないので、こんな感じなります。

サンプルサイトを見る
こちらのサンプルサイトのサイトデータは、前編からダウンロードできます。

できないデザイン：カラム内の分割

ここまでに何度か出てきましたが、カラム内をさらに分割するには、コツが必要です。
ニュースリストを利用した２カラムが限界ですので、それ以上の細かいデザインは、before要素やafter要素を使って表現したり、カスタムパーツを使う必要があるでしょう。

解決策

HTMLタグなどを使い、display:flexなどのコードを記述する事で、分割する表現ができます。


ざっくりですが、参考サイトに似せてみました。詳しいコードは、サンプルデータをご確認ください。

サンプルサイトを見る

できないデザイン：エリア全体をボタンに

エリア全体をリンク化するには少しコツが必要です。
リンクパーツに開始タグ・終了タグの機能はありますが、範囲内の要素それぞれにリンクを付与する機能のため、画像は画像、文字は文字でリンクに変化します。

解決策

HTMLタグを使い、aタグで要素を囲むことで実装可能です。

また囲ったaタグは、ブロックDressで編集する事ができます。リンクの表示形式をflex（display:flex）、リンクのマウスオーバーにボックスシャドウを設定する事で、マウスオーバー時にフワッとしたエフェクトを加えることができます。

サンプルサイトを見る

まとめ

いかがでしたでしょうか？
BiNDupの得意なデザイン、苦手なデザインをまとめてみました。カスタマイズするときの参考にしていただければと思います。

現在実現できないことでも、機能をこれからもアップデートしたり、こちらのBiND CAMPで裏技を紹介していきたいと思っていますのでご期待ください。

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

サンプルのサイトデータの配布

今回作成したサンプルのサイトデータを以下より配布しますので、サンプルサイトを実際に開いて確認してみてくださいね。