定期的に更新中!

フッターの役割とレイアウト例

ワイヤーフレームやデザインを作る際、セクションごとに競合調査を行い、パーツごとにクライアントニーズに合ったものをセレクトします。そこで、サイトの改修やサイトの新規制作をする際に、時短でセレクトできるよう、ここにストックしていこうと思います。

又、調べる度に、新しいレイアウトを見つける機会も多いため、それらの情報もアイデアメモとして、残していきたいと思います。

今回は、フッターレイアウトについてのストックです。

フッターの役割

フッターは、サイトの構成を表示して回遊性を高めたり、デザインを引き締め・整える効果があります。又、レイアウト方法によっては、コンバージョンを高めるためのCTAセクションにできたり、SNSを設置することで認知・興味・拡散などを促すことができます。
企業や店舗の場合は、所在などを記載することもあり、様々な役割を果たすことが可能です。

  • サイトマップ・SNS
  • グローバルナビゲーション
  • グローバルナビゲーション以外のカテゴリ
  • CTA
  • 所在・MAP

フッター・例1|サイトマップ・SNS

フッターをサイトマップのようにレイアウトしたものです。
掲載する内容は、何と組み合わせて表示させるかによって、レイアウトが微妙に変わってきます。

1)サイトマップのみ

サイトマップのみバージョン。
掲載する内容は、グロバルナビゲーションと第2階層などです。

2)サイトマップ + SNS

サイトマップとSNSのロゴを表示させたバージョンです。

フッター・例2|グローバルナビゲーション

フッターに、グローバルナビゲーションを配置したものです。
シンプルなデザインに仕上がります。

1)グロバルナビゲーションなどの主要なカテゴリのみ

グロバルナビゲーションなどの主要なカテゴリのみバージョン。
シンプルなレイアウトのため、サイトのイメージを壊す事なく配置が可能です。

2)グロバルナビゲーション + SNS

サイトマップとSNSのロゴを表示させたバージョンです。
こらもシンプルに仕上がるため、スタイリッシュに仕上げたいサイトの場合はオススメです。

フッター・例3|グローバルナビゲーション

フッターに、グローバルナビゲーション以外のカテゴリを配置したものです。
ヘッダーにはおさめる必要はないけれど、ページのTOPに配置したいもの・しなければいけないものを掲載します。
例)利用規約、プライバシーポリシー、クッキーポリシー、お問い合わせ、採用情報など

フッター・例4|CTA

フッターに、CTAを設置したものです。
コンバージョンが欲しい時などに有効です。

フッター・例5|所在・MAP

フッターに、所在・MAPを配置したものです。
企業サイトや店舗サイトなどの場合には、設置する機会が多いです。

ワンポイントアドバイス!

上記へレイアウトをストックしましたが、どれか1つしか配置してはいけないのではありません。
サイトの用途やフッターの目的に応じて、上記を組み合わせて最適なフッターを作りましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA