フッター · フッター

手描きスケッチを散りばめた温度のあるフッター

プレビュー

vibe.itlibra.com/preview/handcrafted-footer/

概要

フッターは、ページの中でもっとも軽視される場所です。多くのサイトでリンクと著作権表記を詰め込むだけの「物置」になっている。しかし、フッターは読者が最後に目にする画面でもある——映画のエンドロール、手紙の結び。最後の印象は、記憶への残り方を決定づけます。手描きスケッチを散りばめるのは、その別れ際に「人の手の温度」を残すための選択です。

「終わってもいい余韻」を作る

スクロールしきった読者は、すでにそのページの目的を果たしています。そこで畳みかけるように情報を羅列すると、別れ際が事務的な印象で終わってしまう。手描きの線、ラフな書き込み、紙質感のオフホワイト——こうした要素は「ここで読み終えても満足」という余韻を作ります。余韻があるからこそ、読者は「また来たい」と感じる。フッターは離脱の場所であると同時に、再訪の動機が芽生える場所でもあるのです。

手描きが効くブランド・効かないブランド

人の手の痕跡は、クラフトブランド、カフェ、絵本系メディア、個人作家——「作り手の顔が見えること」が価値になる業態で強く効きます。逆に、金融・法務・大企業のコーポレートサイトでは、手描きの不揃いさが信頼性の記号と衝突します。フッターのトーンは、サイト全体が約束しているブランド像と必ず一致させること。

仕上げの判断軸

手描きイラストは2〜4点に抑え、余白を十分に取ること。要素を詰めすぎると「温かみ」が「散らかり」に転びます。ニュースレター登録やSNSへの導線は、押し付けがましくない控えめなトーンで添える——別れ際だからこそ、次に会う約束はそっと差し出すのが品です。

使いどころ

  • クラフトビール・コーヒー・小規模食品ブランド
  • ハンドメイド・雑貨ECサイト
  • カフェ・ベーカリー・パティスリー
  • 絵本・児童書・教育コンテンツ

このデザインの分類

カテゴリ
フッター
スタイル
ハンドクラフト / ソフト / ウォーム / エレガント

背景と狙いどころ

AIへの指示文

クラフトブランド向けの、手描き感のあるフッターを作ってください。

要件:
- 配色: オフホワイト #f5efe1 + 墨黒 #2a221a + アクセント soft red #d2654d。
- 上部に薄い波型 SVG セパレーター(手描き感)。
- 4 カラム構成(モバイル 2x2): ブランド署名 / Shop / About / Newsletter。
- ブランド署名カラム: 手書き風筆記体ロゴ(Caveat / Patrick Hand 等の web font フォールバックでも可)+ 短いタグライン + 小さなインスタ・メールアイコン(線画SVG)。
- 各カテゴリ見出しは小さめのオールキャップス、リンクは縦並び、hover で左に小さな矢印が現れる。
- Newsletter カラムには丸みのある入力フォーム(角丸 24px、太めのアウトライン)。
- 下部にコピーライト + 手描きアイコン3つ(コーヒー・葉・星)+ "Made with ♡ in Tokyo" 風の署名。
- 全体に紙質感(薄いノイズ texture)を SVG で乗せる。
- フォント: 本文 Inter + Noto Sans JP、ロゴ・装飾は丸ゴ系または web font(任意)。

バリエーション

イラスト中央配置版

コラム上部に小さな共通イラスト(バッジ風の丸い手描きシンボル)を中央配置。
署名カラムはなくし、3カラム + 中央イラストのバランス型に変更。

クリスマス装飾版

装飾を雪の結晶・ヒイラギ等の季節モチーフに差し替え。
配色は同じ温度感を保ちつつ accent を deep green #2d5a3d に変更。

よくある質問

手書きフォントは表示が遅くなりますか?
1フォントだけなら問題ありません。Web フォントは subset(Latin のみ)を使い、display=swap を必ず指定。日本語の手書き感は SVG の手描きアイコンで補うと軽量です。
AdSense と相性が悪い気がします
フッターはサイト最下部で広告との接触が少ないので問題は出にくいです。むしろ署名としての差別化に効きます。
モバイルでは装飾を減らすべき?
はい。手描き要素はディスプレイ面積に対する比率で印象が変わるので、モバイルでは1-2点に絞ると締まります。