HOME > APPEAL

APPEAL

appeal_019


 

カラムの背景画像や余白・見出しの装飾などを細かくCSSで設定したデザイン

2つに分けたカラムで左に画像、右に文字情報というよくあるレイアウトです。
左の画像はカラムいっぱいに背景として指定。右の文字情報は余白を設けたカラムで各要素に装飾の設定をしています。

福岡の英会話教室「グラッティ」のサイトにあるブロックをBiNDupで再現したものです。写真は素材サイトのものに変更してます。

 
MORE

appeal_018


 

大きめの写真と文字を左右に互い違いに配置。スマホでは写真が上にくるようにちょっとした細工をしています。

[ appeal_003のCSS改良バージョン ]
アピールしたい項目を大きめの写真で詳細に誘導するようなブロック。左:写真+右:文字の繰り返しだと単調になりがちなので、写真位置を左右互い違いにできるように2つのバリエーションで用意しました。
 
MORE

appeal_017


 

写真を配置した逆側のカラムで、縦位置中央配置になるようにCSSを作りました。

BiNDでブロックを分割したカラムで縦位置中央配置はそのままではできません。文字のカラムに<div>を入れてCSSで設定することで、縦位置中央配置を実現したブロックデザイン。
 
MORE

appeal_016


 

英語に重ねたタイトルと、カルーセル設定の写真のブロックも上に少しずらした組み合わせ

コンセプトやサービス紹介、会社案内などのページへのリンク項目としてトップページに作るブロックに使えそうなブロックデザイン。
よく見るずらしと重ねを使った組み合わせですが、単調になりがちなレイアウトにちょっと一工夫ほしい時には使えそうです。
 
MORE

appeal_015


 

番号を薄い色で大きな太いフォントで文字の下に敷くレイアウト

片側に画像、逆側に文字情報というレイアウト。
画像をカラム幅いっぱいにせず、あえて数字の色と同色の背景が左右のいずれかに出るようにしています。
文字側のカラムは、数字を極太フォント(Anton)で大きい文字にし、さらに薄い色で文字の下になるように重ねています。
 
MORE

appeal_014


 

カラム背景いっぱいに画像を入れて、もう一方のカラムに余白を設けて文字情報

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

appeal_013


 

縦横写真と見出しのインデックスに使えそうな変化あるレイアウト

見出しと写真数枚の組み合わせで変化ある印象のレイアウト。写真をあえて縦長・横長の組み合わせとして、縦長写真を見出しのある上側にずらしています。
縦長写真を左、横長写真を右としたレイアウトで、横長写真側の上に見出しをレイアウトし、若干縦長写真に重なるように設定しています。
 
MORE

appeal_012


 

チェックマークの画像をリストマークのように配置し、マークが左にはみ出したような設定で大きくアピール項目などを表示

画像を頭に入れてリストのように表示したいとき、改行されると画像が文字の中に一緒にならないようにtext-indentで調整しています。
左右違いのブロックの右側に人物の写真などを入れていることで、人物が特徴などを説明しているような雰囲気でアクセントになっています。
 
MORE

appeal_011


 

ナンバリングを大きく左にずらして画像に重ねたデザイン

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

appeal_010


 

ブロックの背景を斜めにするCSS

ブロックの積み重ねでページを構成していくBiNDではレイアウトが単調になりがちです。そんな時、斜めに背景の色が入ることでアクセントになるブロックデザインです。
 
MORE

appeal_009


 

縦書きが印象的なブロック

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

appeal_008


 

BiNDテンプレート「CHISATO Plant」 にあるブロックを再現しました
CSSで再現しているのでカスタマイズも簡単にできます。

サービス紹介などに使えそうなブロックレイアウト。テンプレートなしからCSSで作っていますので、中央部の文字背景色はもちろん、文字色や余白寸法など自由に変更可能です。
 
MORE

appeal_007


 

上にはみ出した1つの写真と、下に4つ並ぶ写真の構成。
はみ出した画像はCSSで影を設定しています。

左の影付きの画像と右に見出しと本文でなるブロックと、正方形の画像が4枚並ぶブロックブロックをセットで1つとなる構成。
 
MORE

appeal_006


 

階段状に変化をつけて3分割レイアウト

3等分の基本的なレイアウトですが、階段状に縦方向にずれるようにCSSで設定しています。各カラムの背景色とブロックの背景色で区別がつくようにしていて、画像は上下左右の余白なしで、また、見出し・本文はカラム内に余白をもってレイアウトされるように設定しています。
 
MORE

appeal_005


 

左右均等割のオーソドックスなレイアウト
右が写真になる時のスマホ表示で画像が上になるようにしています。

ブロックレイアウト「プレーン」で2分割している基本的なレイアウト。カラムのwidth指定もなく、画像もSiGNのシェイプに読み込むことなく直接画像データを配置しています。
 
MORE

appeal_004


 

BiNDテンプレート「SPECTORE」にあるブロックを再現
単調にならないように左右違いのパターンを用意しました

画像と文字で別のブロックになっています。CSSはなくブロックの余白設定とブロックアニメーションによる設定です。
 
MORE

appeal_003


 

大きめの写真と文字を左右に互い違いに配置。スマホでは写真が上にくるようにちょっとした細工をしています。

アピールしたい項目を大きめの写真で詳細に誘導するようなブロック。左:写真+右:文字の繰り返しだと単調になりがちなので、写真位置を左右互い違いにできるように2つのバリエーションで用意しました。
 
MORE

appeal_002


 

コンセプトやオーナー挨拶などに使えそうなブロックデザイン。

要約だけを完結に書いて詳細はリンクで誘導するほうがスマート。
 
MORE

appeal_001

 

背景に画像を指定し、タイトルとリードの組み合わせ

大見出しとリード、本文の組み合わせ。ブロック背景に画像を入れてブロックを目立たせる設定。見栄えのインパクトが大切なブロックなので、CSSでパソコンとスマホでの改行位置の調整をしています。
 
MORE