contact_008

クリニック、歯科医、鍼灸院などに便利な診療時間の表が入ったコンタクトブロック
クリニックなどに便利な1週間の曜日別診療予定表をテーブルで組み込みました。テーブルで作っていますので、文字として編集可能です。時間の区分変更や診療・休診の設定も簡単です。
MORE

contact_007

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

contact_006

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

contact_005

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

contact_004

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


contact_002

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

contact_001

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