【保存版】BiNDupでできる、Webデザインの基本

デザイナーのオモトです。
ホームページ作成サービス「BiNDup」でWebサイトをデザインする人に向けて、「BiNDupの機能のみ」で、できるデザイン、できないデザインを画像付きで詳しく解説します。

今回はBiNDupが得意とする＜できるデザイン編＞です。実際にそれらの機能を使ったテンプレートを紹介していますので、サンプルサイトと一緒にみれば、より理解を深められると思います。ぜひカスタマイズの参考にしてください。

BiNDupでデザインする上での基本

BiNDupの機能のみで作成されたテンプレート（FAMARS）。赤線がブロック、緑がカラムを表しています。

BiNDupは、ブロックを積み上げるように、レスポンシブなWebサイトが作れるサービスです。なので、Webデザインもブロックを積み上げるようなイメージで作成する必要があります。またブロック内は、カラムで分割することができ、ブロックの種類によっては、最大5〜8分割できます。

とはいえ、ただ積み上げるだけではデザインが単調になりすぎてしまいます。
BiNDupでは、個々のブロックで、ブロックDress(cssのこと。以下はDressと呼びます。)を使うことで、そのブロックの枠組みを少し飛び越え、より自由な表現が可能になっています。

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

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

カスタムタグ

カスタムタグとは、HTMLソースをブロック内に追加できるパーツです。記述が長くなるのを避けたり、テンプレート的に使うことができます。比較的、使用頻度の高いカスタムタグは以下の記事をご覧ください。
https://bindup.jp/camp/bind/32024

HTMLタグ

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

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

前置きが長くなってしましましたが、早速BiNDupで「できるデザイン」から見ていきましょう。

コンテンツ全般でできる表現

まず最初に、文章や画像をレイアウトする際のコンテンツエリア全般でできるデザインを紹介していきます。

ずらすデザイン

Dressでは、marginやpaddingに対して、ネガティブマージンやz-indexを使用することができます。要素に対してネガティブマージンを指定する事で、ずらす表現が可能です。

サンプルサイトを見る

重ねるデザイン

前述と同じ要領で、要素同士を重ねるデザインも可能です。

左右違いブロックの幅狭カラムにネガティブマージンした例

サンプルサイトを見る

before・afterを使って表現する方法

サンプルサイトを見る

座布団を引いたエリア

座布団をひいた幅の狭いエリアも可能です。ただし、通常BiNDupでは、1カラムのデザインと2カラムのデザインをひとまとめのエリアとして表現するのはコツがいるので、構築の際に、画像のようなメリット・デメリットが発生します。

サンプルサイトを見る

このような座布団のデザインであれば、3分割のカラムで表現できます。BiNDup向きのデザインと言えるでしょう。
※目次ブロックを使用する事により、カラムの高さが揃い、背景をカラム全体に敷くことができます。

サンプルサイトを見る

ウィジェット

ページの上にポップアップで表示するウィジェットを使えば、CVボタンや登録フォーム、BiNDPressの最新記事や任意の記事を表示できるニュースエリアなどの設置が可能です。他のブロック同様カラム分割ができたりDressも使えるので、自由度が高いです。

背景でできる表現

次に、ページ全体を演出する背景でできるデザインを紹介します。

背景を繋げるデザイン

現在開発中で、まもなくのリリースを目指していますが、ブロックを跨いで背景を設定できるようになるので、このように

模様や背景が途切れないデザインが可能

です。

詳しくは、こちらの記事をご覧ください。
https://bindup.jp/camp/bind/news/30981

斜めの背景

セクションを斜めの背景で分割するようなデザインが可能です。

ブロックエリア外にはみ出た斜め背景は見切れるので、角度のつけすぎに注意

サンプルサイトを見る

ただし、BiNDupでは、背景画像と背景グラデーションは併用できない仕様なので、こういうデザインは難しいです。

背景をずらすデザイン

グラデーション背景の設定を工夫すれば、ネガティブマージンを使わずに、背景をずらした表現も可能です。
「グラデーションを指定」の数値は、背景色の割合を、「グラデーションの角度」は、背景の角度を表してます。

サンプルサイトを見る

カラムごとに背景色や背景画像を変える

現在開発中ですが、カラムごとに背景色や背景画像を変えるデザインが可能です。

詳しくは、こちらの記事をご覧ください。
https://bindup.jp/camp/bind/news/30981

リストやテーブルの奇数・偶数行の背景色を変える

リストやテーブルの奇数・偶数行の背景色を変えるデザインが可能です。

ただし、リストパーツやテーブルパーツでは2列目までしか表が作れず、セルの結合など複雑なデザインはできません。
その場合は、テーブルエディタという別機能を使用するか、カスタムパーツを使用する方法で実装することができます。

サンプルサイトを見る

半透明やグラデーション、乗算、スクリーンなどのエフェクトを加える

半透明や、グラデーション、ブレンドモードを使用した乗算、スクリーンなど様々な背景表現が可能です。サンプルは、紺色の背景色を乗算した例です。
※現在、ブレンドモードは背景のみに対応しており、文字には適用できません。
サンプルサイトを見る

文字でできる表現

続いて、文字でできるデザインを紹介します。

Webフォント

BiNDupでは、Googleの欧文フリーフォント841書体、日本語フリーフォント133書体のほか、国内の老舗フォントメーカーFONTPLUS提供の日本語＆欧文フォント405書体に対応しています。上記のようなWebデザイナーに人気のゴシック体のWebフォントはもちろん、明朝体や手書き風などのフォントも選択できます。
また、スクリプト詳細設定を使えば、Adobe Fontsや自作のフォントなど、BiNDupと連携外のフォントも使用することが可能です。

縦書き文字

縦書き文字も、左から右へ、中央寄せ、右寄せなど自由にデザイン可能です。

サンプルサイトを見る

以下の記事で、縦書き文字をメニューに対して設定する方法などを解説してるので、ご覧ください。
https://bindup.jp/camp/bind/24179

回転させる文字

また、文字を回転させる表現も可能です。

余談ですがdressではanimationを設定できないので、after要素を動かすには、スクリプト詳細設定に別途記述が必要です。

サンプルサイトを見る

豊富なメニュー表現

BiNDupでは、固定メニュー、メガメニューやゴーストメニューなど、多彩なメニュー表現が可能です。さらにスマホでは、難しい記述なしで、グローバルメニューがハンバーガーメニューに自動で変化します。
ただし、最近のWebデザインによく見かける、PCのメニューをハンバーガーメニューにすることは、現状できません。

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

いかがでしたでしょうか！なんとなくイメージできるようになっていただけたら幸いです。次回は、BiNDupの苦手なデザイン表現と裏技をご紹介します。

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