contact_008
![](../_src/10732/img20181227193600310141.jpg?v=1626934564938)
クリニック、歯科医、鍼灸院などに便利な診療時間の表が入ったコンタクトブロック
クリニックなどに便利な1週間の曜日別診療予定表をテーブルで組み込みました。テーブルで作っていますので、文字として編集可能です。時間の区分変更や診療・休診の設定も簡単です。
MORE
![](../_src/10734/contact_008sp.jpg?v=1626934564938)
contact_007
![](../_src/10490/img20180826070503894749.jpg?v=1626934564938)
GoogleMapとともに多くの情報を掲載したいときに使えそうなパターン
ロゴや住所、営業時間など掲載情報が多くても対応可能な大きなレイアウト。右にGoogleMapを表示しています。幅全体に色をつけています。
MORE
![](../_src/10492/contact_007.jpg?v=1626934564938)
contact_006
![](../_src/10486/img20180826070328424056.jpg?v=1626934564938)
電話・メール・申し込みの3つをSiGNで作ったボタンで並べる
width指定したブロックにボーダーを設定。そして、3つ並べるボタンはwidth指定した画像です。基本となるボタンの色と、一つだけ色を変えて目立つようにしたい時を想定しました。
MORE
![](../_src/10488/img20180826070328429211.jpg?v=1626934564938)
contact_005
![](../_src/10482/img20180826070121823670.jpg?v=1626934564938)
ブロック自体のwidth指定をしたブロックで半分は余白なしで写真をレイアウト
ブロックの背景に色をつけてブロックを認識しやすいようにするために、CSSでブロック事態のwidth指定をしています。ブロックの余白設定はゼロに、そして2分割としています。右の文字情報はカラム2に対して設定したpaddingで上下左右に余白が入るようにしています。
MORE
![](../_src/10484/img20180826070121827744.jpg?v=1626934564938)
contact_004
![](../_src/10478/img20180826065946632117.jpg?v=1626934564938)
3つのアクションに誘導したい時に使えそうなすっきりレイアウト
1カラムの中央配置+3カラムの2ブロックの組み合わせ。
基本は大きく表示している電話での問い合わせを歓迎している想定。電話以外で3つのコンバージョンへ誘導したい時に使えそうです。
MORE
![](../_src/10480/img20180826065946636452.jpg?v=1626934564938)
![](../_src/10476/img20180826065820477198.jpg?v=1626934564938)
contact_002
![](../_src/10470/img20180826065652569322.jpg?v=1626934564938)
ブロック自体のwidth指定をして中央配置にしたパターン
背景に色をつけるにはブロックのwidth指定が必要になります。パソコンでは任意のピクセル数で指定し、スマホではそのままだとデバイスの幅より大きくなってしまうのでスマホ用のCSSで指定しなおす必要があります。
MORE
![](../_src/10472/img20180826065652574722.jpg?v=1626934564938)
contact_001
![](../_src/10466/img20180826065431917721.jpg?v=1626934564938)
左右違いのブロックでFacebook pluginを表示
左の幅広側にロゴ、キャッチなどと一緒に「電話番号」と「問い合わせへのバナー」を並べています。電話番号とお問い合わせバナーはSiGNで作っており、パソコンでは幅50%、スマホでは幅100%に設定しています。
MORE
![](../_src/10468/img20180826065446079923.jpg?v=1626934564938)