HOME > CONTACT

CONTACT

contact_001

左右違いのブロックでFacebook pluginを表示

左の幅広側にロゴ、キャッチなどと一緒に「電話番号」と「問い合わせへのバナー」を並べています。電話番号とお問い合わせバナーはSiGNで作っており、パソコンでは幅50%、スマホでは幅100%に設定しています。
 
MORE

contact_002

ブロック自体のwidth指定をして中央配置にしたパターン

背景に色をつけるにはブロックのwidth指定が必要になります。パソコンでは任意のピクセル数で指定し、スマホではそのままだとデバイスの幅より大きくなってしまうのでスマホ用のCSSで指定しなおす必要があります。
 
MORE

contact_003

シンプルにロゴと会社情報を中央配置したパターン

非常にシンプルなレイアウトパターン。左右上下に余白をとってシンプルに見せたい時に。
 
MORE

contact_004

3つのアクションに誘導したい時に使えそうなすっきりレイアウト

1カラムの中央配置+3カラムの2ブロックの組み合わせ。
基本は大きく表示している電話での問い合わせを歓迎している想定。電話以外で3つのコンバージョンへ誘導したい時に使えそうです。
 
MORE

contact_005

ブロック自体のwidth指定をしたブロックで半分は余白なしで写真をレイアウト

ブロックの背景に色をつけてブロックを認識しやすいようにするために、CSSでブロック事態のwidth指定をしています。ブロックの余白設定はゼロに、そして2分割としています。右の文字情報はカラム2に対して設定したpaddingで上下左右に余白が入るようにしています。
 
MORE

contact_006

電話・メール・申し込みの3つをSiGNで作ったボタンで並べる

width指定したブロックにボーダーを設定。そして、3つ並べるボタンはwidth指定した画像です。基本となるボタンの色と、一つだけ色を変えて目立つようにしたい時を想定しました。
 
MORE

contact_007

GoogleMapとともに多くの情報を掲載したいときに使えそうなパターン

ロゴや住所、営業時間など掲載情報が多くても対応可能な大きなレイアウト。右にGoogleMapを表示しています。幅全体に色をつけています。
 
MORE