FOOT-003 公開  更新

会社情報型 フッター

店舗や事務所のサイトで、所在地と連絡先、受付時間、地図をフッターにまとめる設計です。
住所と行き方はテキストで書き、受付時間は曜日ごとの表にして、臨時のお知らせを出せる場所も用意します。
地図は簡単な図と地図アプリへのリンクにとどめ、表示を重くせずに、来院や来店に必要な情報をどのページからでも確かめられるようにします。

ワイヤーフレーム(PC)

会社情報型 フッター PC版ワイヤーフレーム

ワイヤーフレーム(SP)

会社情報型 フッター SP版ワイヤーフレーム

SP版の特徴

  1. 縦に並べる:所在地、受付時間、地図の順に並べ、来院や来店の前に確かめる順番にそろえています。
  2. 電話は横いっぱいのボタン:指で押しやすい大きさにし、発信できる端末ではそのまま電話をかけられるようにしています。
  3. 受付時間の表はそのまま:曜日と時間を左右に並べたまま、狭い画面でも読める文字の大きさを保っています。
  4. 地図は横長に:地図の図で画面が埋まらないよう高さを抑え、地図アプリへのボタンを押しやすくしています。

採用前の判断ポイント

向いているケース

  • 来院・来店してもらうことが、サイトの主な目的になっている
  • 住所・電話番号・受付時間を探しにフッターまで来る人が多い
  • 曜日によって受付時間や休みの日が違う
  • 整骨院・クリニック、美容室、飲食店、士業の事務所、地域の店舗など

向かないケース

  • 来店を受け付けていない、またはオンラインでのやりとりが中心(まとまりごとにリンクを並べるリンク集型が向きます)
  • 拠点が多い、または拠点ごとの情報が多く、フッターに並べきれない(代表の連絡先と拠点一覧へのリンクにまとめます)
  • ページの最後で、相談や予約の入口を強く案内したい(CTA併設型と組み合わせます)

このワイヤーの特徴

来院や来店に必要な情報が、ひとつの場所にまとまる

店舗や事務所のサイトでは、住所・電話・営業時間を探しにフッターまで来る人が多くいます。所在地と連絡先、受付時間、地図の3つのまとまりに分けて、フッターに並べています。

住所と行き方を、文字で確かめられる

住所が画像や地図の中にしかないと、コピーしたり読み上げたりできません。住所は郵便番号からテキストで書き、最寄り駅からの道のりと駐車場の有無も添えています。

受付時間と休みの日が、表で分かる

曜日ごとに時間が違う場合、文章で書くと読み取りにくくなります。受付時間を曜日ごとの表にし、受付の締め切りや長期休みの案内先も添えています。

臨時休業などのお知らせを、受付時間のそばに出せる

臨時休業や時間の変更は、受付時間を見る人が知りたい情報です。受付時間の表の上に、臨時のお知らせを出せる場所を用意しています。
デモ上部の切り替えで確認できます。

地図は、地図アプリで開く

フッターに地図を埋め込むと、すべてのページで重い地図を読み込むことになります。地図は簡単な図にとどめ、「地図アプリで開く」から詳しい地図へ移れるようにしています。
新しいタブで開くことも添えています。

制作時のよくある失敗

住所や電話番号を、画像の中にだけ書く

画像の中の住所は、コピーも読み上げもできず、検索エンジンにも伝わりにくくなります。
住所・電話番号・受付時間はテキストで書きます。
会社や店舗の連絡先情報として扱う場合は、address 要素を使います。

店名や住所の表記が、ほかの場所と違う

サイト内や、地図サービスの店舗情報などで、店名・住所・電話番号の書き方がばらばらだと、同じお店だと伝わりにくくなります。
店名・住所・電話番号など主要な情報が一貫している状態を保ち、変わったときはまとめて直します。

共通のフッターで、すべてのページに地図を埋め込む

フッターに地図を埋め込むと、どのページでも地図の読み込みが走り、表示が遅くなります。
共通のフッターでは地図アプリへのリンクや簡単な図を基本とし、埋め込みの地図はアクセスのページなど必要な場所に限ります。

臨時休業や時間の変更が、フッターに反映されない

フッターの受付時間が古いままだと、来院や来店した人が困ります。
臨時のお知らせを出す場所を決め、終わったら消す運用にします。
祝日や年末年始の扱いも書いておきます。
臨時の変更は、お知らせや営業日カレンダー(臨時休業表示型 営業日カレンダー)の情報を正とし、フッターは通常の情報を表示したうえで、そこへ案内する形にすると食い違いにくくなります。

電話番号だけで、受付時間が分からない

電話番号だけでは、今かけてよいかが分かりません。
受付時間をそばに置き、発信できる環境では tel: のリンクにします。

よくある質問

フッターに地図を埋め込んではいけませんか?

埋め込み自体は問題ありませんが、フッターはすべてのページに表示されるため、どのページでも地図を読み込むことになり、表示が遅くなりがちです。
フッターではリンクや簡単な図にとどめ、地図の埋め込みはアクセスのページに置く方法が扱いやすいです。

拠点が複数ある場合は、どうすればよいですか?

2〜3拠点程度をひとつの目安に、拠点ごとに名前・住所・電話・受付時間をまとめて並べます。
拠点の数が少なくても、拠点ごとに受付時間や電話番号が違って情報が多くなる場合は、フッターには代表の連絡先と「拠点一覧」へのリンクを置き、詳しい情報は拠点一覧のページにまとめます。

受付時間は、表にしたほうがよいですか?

曜日によって時間が違う場合は、表にすると読み取りやすくなります。
表にする場合は、曜日を行の見出しにして、読み上げでも曜日と時間の対応が伝わるようにします。
毎日同じ時間なら、1行の文章でも十分です。

店名や住所の表記は、どこまでそろえればよいですか?

サイト内のフッター・会社概要・アクセスのページと、地図サービスや口コミサイトなど外部の店舗情報で、店名・住所・電話番号など主要な情報が一貫している状態を保ちます。
住所の書き方の細かな揺れは避けにくいこともあるため、まずは主要な情報が食い違わないことを優先し、ビル名や階数の有無なども、できる範囲でそろえます。

同じパーツのPattern

フッターの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開