BiNDism Block Design

BiNDism Block Design

HEADER

header_009

モーションメニュー「バルーン」でメニューを作ったパターン。メニューを線で囲い、マウスオーバーで色が変わる設定はDRESSで設定しています。

header_008

ヘッダー右側に電話番号や営業時間、住所などの表示を入れたい時に使えるレイアウト。メニューはブロックを別にして中央揃えで並べています。

header_007

ビルボード部に大きくレイアウトする画像の下にメニューのブロックを配置したレイアウト。スクロール時にはページの上部に固定されます。

header_006

背景に指定した画像に載せるメニューブロックと、スクロール時に表示されるゴーストヘッダーの組み合わせ。スマホでは画像のレイアウトも変わるため、別のブロックでスマホ用のヘッダーを作っています。

header_005

メニューをSiGNで作った画像で作成したパターン。

more　 demo

header_004

online storeへのリンクを右に独立して表示するために３分割したブロックにして、中央にはメニューを配置しています。スマホでは別ブロックとしてメニューの中にonline storeを入れています。

header_003

左にロゴ、右に電話番号の表示、お問い合わせフォームへのリンクとして、メニューはその下に別のブロックとして作成するパターン。スマホでは電話とフォームがアイコンで表示されるようにちょっと細工してあります。

header_002

左にロゴ、中央にメニュー、右にソーシャルアイコンの３段レイアウト。パソコン・スマホ共通のブロックで中央のメニューがハンバーガーメニューに入ります。

header_001

左にロゴ、右にメニューの基本的なレイアウトに、お問い合わせと申込みの２つのフォームへのリンクを合わせたパターン