HOME > APPEAL

APPEAL

appeal_001

 

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

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

appeal_002


 

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

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

appeal_003


 

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

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

appeal_004


 

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

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

appeal_005


 

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

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

appeal_006


 

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

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

appeal_007


 

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

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

appeal_008


 

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

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