本文へスキップ
Footer

Footer Design:質の高いサイトフッターのデザイン参考ギャラリー

ウェブデザインフッターデザインデザインインスピレーションUIリファレンス

タイプとスタイルで分類されたサイトフッターのインスピレーション集。タイポグラフィ系からイラスト系、グリッド、カード、アニメーション系まで絞り込め、各項目にエディターズチョイスと元サイトへのリンクがあります。

★ 9 最終更新: 2026-11-08 footer.design
サイトを見る

詳細紹介

フッターだけを集めたギャラリー

フッターはデザインの流れで最後に手を付ける部分であり、最初に崩れる部分でもあります。リンクをひと山積んで、コピーライトを適当に置いて終わり。Footer Designは、うまく作られたフッターを一か所に集めて、他人のサイトの下までスクロールして探し回らずに済むようにしてくれます。

「地球上で唯一のフッターギャラリー」を名乗っていて、収録数はスタイル別にページ送りで見る形になっており、現在65ページ分のリストがあります。各項目にはサムネイルのプレビューと元サイトへのリンクがあり、実際のフォントサイズ、余白、インタラクションの処理まで確認できます。

絞り込みの軸

タイプとスタイルでタグ付けされていて、クライアントが要望を言葉にするときの言い方に近い分類です。

  • Typographic、Large Type、Bold —— 大きな文字の組版が主体のフッター
  • Small Type —— 情報密度の高い小さめの文字で構成されたフッター
  • Illustrative —— イラストを伴う表現型のフッター
  • Grid —— グリッドレイアウト
  • Flat —— 装飾のないフラットな構成
  • Animated —— 動きのあるもの
  • Cards —— カード型のブロック分け
  • Bright、Dark —— 明るい方向と暗い方向
  • Info、Newsletter —— 情報型と購読型

さらにEditor's Choiceのセレクト枠があるので、まずそこから見ていくと時間をかなり節約できます。

どういう場面で使うか

使いどころは大きく2つです。ひとつは新しいサイトのデザイン方向を固めるとき、フッターにどこまで情報を載せるのか、購読の入口を置くのかを決める場面。もうひとつは既存サイトのリニューアルで、奥行きを少し足したいときに、同じテイストの中から参考になるレイアウト構造を拾ってくる場面です。デザインチームとフロントエンドの間で「下部をどこまで作り込むか」を揃える材料としても使えます。

サイトはNOOONが制作していて、投稿も受け付けています。

Navbar Gallery:サイトのナビゲーションバーのデザイン事例を集めたギャラリー

優れたサイトナビゲーションバーのデザインを集めたインスピレーションギャラリー。Static、ドロップダウン、Mega Menu、サイドバー、検索バーなどの種類で絞り込め、各項目から元サイトの実際の実装へ飛べます。

ウェブデザインナビゲーションバーデザインインスピレーション

Variant - アイデアを一言入れれば、無限のデザイン案をスクロールで

アプリやサイトのアイデアを一言入力してスクロールするだけで、次々とデザインの方向性が現れます。キャンバスもプロンプトの書き直しも不要で、気に入った案が出たところで止めればOK。HTMLやReactコードとして書き出せます。

AIデザインインターフェース生成デザインインスピレーション

Scrolltide:スクロール連動のシネマティックなWebテンプレートとプロンプト集

スクロール連動のWebテンプレート、コンポーネント、シェーダーをプロンプト形式でまとめたライブラリ。プロンプトをコピーしてAIに貼れば、AIっぽさのない、ちゃんと動くサイトが作れます。

ウェブデザインプロンプトスクロールアニメーション

shadcn/ui: あなたのコンポーネントライブラリを構築

アプリにコピー&ペーストできる美しく設計されたコンポーネント。アクセシブル。カスタマイズ可能。オープンソース。

develop

Anime.js:軽量なJavaScriptアニメーションライブラリ

Anime.jsは、HTML、SVG、CSSなど様々な要素のアニメーションをサポートする効率的なJavaScriptアニメーションライブラリです。フロントエンド開発者やデザイナーがウェブアニメーション効果を迅速に実装し、ユーザー体験を向上させるのに適しています。

フロントエンド開発ウェブデザイン

Stockimg AI | AI写真ジェネレーター: ロゴ、アート、ストックイメージ、イラスト

Stockimgは、AIによって駆動されるオールインワンのデザインおよびコンテンツ作成ツールです。ロゴ、イラスト、壁紙、ポスターなどを簡単に生成できます。

ai