フッター

フッターに分類されるWeb表現技法12件。大型CTAフッター、多段サイトマップ・フッター、巨大タイポ・フッター、流れる文字のフッターバナー など。ライブデモとコピーできるコード付き。

初級

大型CTAフッター

グラデーション帯に特大の見出しとメール登録フォームを置き、その下にリンク列と著作権バーを重ねた「最後のひと押し」型フッター。SaaSやLPで離脱直前の行動喚起に効きます。

初級

多段サイトマップ・フッター

製品・会社・リソース・法務などを複数カラムで整理した情報量の多いダークフッター。右にニュースレター、下部に言語切替・SNS・著作権。大規模サイトやコーポレートの定番レイアウトです。

中級

巨大タイポ・フッター

下端いっぱいに置いた特大ブランドロゴが主役のフッター。ホバーでグラデーションが流れ、文字が塗り変わります。ポートフォリオやブランドサイトで強い余韻を残す Large Type 表現です。

初級

流れる文字のフッターバナー

「LET'S WORK TOGETHER」などの大文字が左へ流れ続けるマーキー型のお問い合わせ誘導。下にメール・SNSを添えた、制作会社やクリエイター系で人気の Animated フッターです。

中級

せり上がり・リビールフッター

本文を最後までスクロールすると、白いコンテンツがめくれ上がり、背後に隠れていたダークフッターがせり出します。奥行きを感じさせる演出で、近年のデザインサイトで多用される手法です。

初級

カード重ね・ニュースレターフッター

フッター上辺に浮かせた登録カードでニュースレターへ誘導し、下にリンク列と「トップへ戻る」を配置。カード型で視線を集める Cards 系フッターで、メディアやブログに向きます。

初級

ミニマル1行フッター

ロゴ・最小限のリンク・著作権を1行に収めた、引き算の効いたフッター。情報量を絞りたいポートフォリオやランディングページに。視覚的ノイズを減らし、本文の余韻を保ちます。

初級

地図+店舗情報フッター

左に地図、右に住所・営業時間・電話を並べた実店舗向けフッター。カフェ・クリニック・ショップなどローカルビジネスのサイトで、来店導線をまとめて見せられます。

初級

アプリDLフッター(バッジ+QR)

App Store / Google Play のバッジとQRコードを添えた、アプリ訴求フッター。PCではQRでスマホへ誘導、モバイルではバッジで直接ストアへ。アプリを持つサービスの定番です。

中級

モバイル折りたたみフッター

リンク群を見出しごとにアコーディオン化し、タップで開閉するフッター。リンクの多いサイトでも縦長になりすぎず、スマホで快適に畳めます。狭い画面のサイトマップに最適です。

中級

言語・地域セレクタ付きフッター

言語・地域・通貨を選べるセレクタを備えたフッター。グローバル展開のECやSaaSで、訪問者に合わせた表示へ切り替える導線を最下部に置けます。ドロップダウンで省スペースにまとめます。

中級

波形イラスト装飾フッター

上辺をなめらかな波で区切り、ゆったり揺れるSVGの波を重ねた装飾的なフッター。やわらかい世界観のブランドや子ども向け・自然派サービスで、親しみのある締めくくりになります。