フッター · フッター
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
プレビュー
概要
フッターは、ページの中でもっとも軽視される場所です。多くのサイトでリンクと著作権表記を詰め込むだけの「物置」になっている。しかし、フッターは読者が最後に目にする画面でもある——映画のエンドロール、手紙の結び。最後の印象は、記憶への残り方を決定づけます。手描きスケッチを散りばめるのは、その別れ際に「人の手の温度」を残すための選択です。
「終わってもいい余韻」を作る
スクロールしきった読者は、すでにそのページの目的を果たしています。そこで畳みかけるように情報を羅列すると、別れ際が事務的な印象で終わってしまう。手描きの線、ラフな書き込み、紙質感のオフホワイト——こうした要素は「ここで読み終えても満足」という余韻を作ります。余韻があるからこそ、読者は「また来たい」と感じる。フッターは離脱の場所であると同時に、再訪の動機が芽生える場所でもあります。
手描きが効くブランド・効かないブランド
人の手の痕跡は、クラフトブランド、カフェ、絵本系メディア、個人作家——「作り手の顔が見えること」が価値になる業態で強く効きます。逆に、金融・法務・大企業のコーポレートサイトでは、手描きの不揃いさが信頼性の記号と衝突します。フッターのトーンは、サイト全体が約束しているブランド像と必ず一致させること。
崩れる形金融・法務・大企業
手描きの不揃いさが信頼性の記号と衝突します。正確さが価値の源になっている相手には、温かさが不注意のシグナルとして読まれます。
効く形クラフト・カフェ・個人作家
作り手の顔が見えることが価値になる業態では、人の手の痕跡がそのまま説得力になります。フッターのトーンはブランド像と必ず一致させてください。
仕上げの判断軸
手描きイラストは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 に変更。
よくある質問
手書きフォントは表示が遅くなりますか?
手描き調の装飾はAdSenseと相性が悪くありませんか。
モバイルでは装飾を減らすべき?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。