appeal｜appeal

appeal_018

appeal_012の背景で、文字側から一定幅まで背景に色が入る設定にしたアレンジ版。背景色はDRESSで背景グラデーションに指定しているので、色の変更はもちろん色の範囲（横幅に対する割合）の変更も簡単です。

appeal_017

BiNDupのテンプレート「Site Box vol.45#2 TSUKIKUMI Dental clinic」トップページのブロック
画像を２枚重ねたり、文字側の上部に余白を設定するなど、最近っぽいレイアウト。クリニック系に限らず使えそうなレイアウトなのでappealのブロックデザインとして作成してみました。

appeal_016

テンプレート「Birdie Clinic」の施術内容をアレンジ
幅いっぱいのレイアウトのとき、文字が来る側のみブロック内コンテンツの幅よりも外に広がらないレイアウトをDRESSで作っています。
テンプレート「Birdie Clinic」は画像が右にあるブロックはスマホのとき文字の下に画像がきますが、スマホでは画像が上・文字が下に統一されるようにアレンジしました。

appeal_015

片側に寄せた大きな画像と、逆側に背景付きで下にずらした位置に文字がくる設定
幅いっぱいのレイアウトのとき、文字が来る側には余白を設けています。
文字数に関わらず画像に対して下にずらした位置になるように設定していますが、収まりのよい文字数を考慮することでデザインを保てます。

appeal_014

片側に寄せた大きな画像と、逆側に背景付きで上下中央位置に文字がくる設定
幅いっぱいのレイアウトのとき、文字が来る側には余白を設けています。
文字数に関わらず画像に対して上下中央位置になるように設定していますが、収まりのよい文字数を考慮することでデザインを保てます。

appeal_013

写真を配置した逆側のカラムで、縦位置下配置になるようにDRESSを作りました。
BiNDでブロックを分割したカラムで縦位置中央配置はそのままではできません。文字のカラムにdivを入れてCSSで設定することで、縦位置下配置を実現したブロックデザイン。文字のカラムは「ブロック内コンテンツの横幅」よりも広がらない設定になっています。

appeal_012

写真を配置した逆側のカラムで、縦位置中央配置になるようにDRESSを作りました。
BiNDでブロックを分割したカラムで縦位置中央配置はそのままではできません。文字のカラムにdivを入れてCSSで設定することで、縦位置中央配置を実現したブロックデザイン。文字のカラムは「ブロック内コンテンツの横幅」よりも広がらない設定になっています。

appeal_011

カラム背景いっぱいに画像を入れて、もう一方のカラムに余白を設けて文字情報
ウィンドウ幅いっぱいに使った時のポピュラーなレイアウト。一方のカラムには背景に画像を指定し、見出しを載せます。もう一方のカラムにはゆとりある余白を設けて文字情報を入れるというパターン。
ブロックを繰り返す時、画像の位置が互い違いになるように、反転のバリエーションとセットになります。

appeal_010

画像と文字を左右に並べる時の画像を２枚にしたバリエーション

appeal_009

チェックマークの画像をリストマークに設定し、マークが左にはみ出したような設定で大きくアピール項目などを表示
目立つ位置に、大きくアピールしたい項目を箇条書き（リスト表示）に配置したい時、単純な黒丸（・）でのリスト表示ではなくチェックマークの画像にしたデザインです。

appeal_008

ナンバリングを大きく左にずらして画像に重ねたデザイン
ナンバー付きでいくつかの項目を説明するような時、右カラムにあるナンバーをCSSで大きく左にずらし画像と重ねたデザイン。更にナンバーの背景に色を入れていますが、平行四辺形になるようにしています。

appeal_007

ブロック背景の色が斜めに入る印象的なブロック
ブロックの積み重ねでページを構成していくBiNDではレイアウトが単調になりがちです。そんな時、斜めに背景の色が入ることでアクセントになるブロックデザインです。
ブロックの左上が基準に斜めにしています。上下にブロックが隣接する時はmarginなどで調整します。

appeal_006

縦書きが印象的なブロック
一部のブロックで縦書きを使うことで印象的になり、特徴やコンセプトをアピールするブロックに使えそうです。
スマホでは縦書きの調整が難しいため、スマホでは通常の横書きで対応。画像との混在でブロックを左右分割するよりもCSSがシンプルになるため、ブロック背景として画像を配置しています。