フッター · フッター
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/handcrafted-footer/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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 に変更。
このプレビューのコード
HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。紙の質感と図をCSS・埋込みSVGで描く架空のショップです。メール形式の確認だけを試せ、登録・配信・購入・問い合わせ送信は行いません。外部素材やライブラリは不要です。
コードを表示
<!doctype html>
<!-- Vibehaus — CC0。CSS・埋込みSVGの1ファイル版。会社・店舗・宿と権利表記は架空の表示見本です。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>手描きスケッチを散りばめた温度のあるフッター — Vibehaus プレビュー</title>
<style>
:root {
--bg: #f5efe1;
--bg-deep: #ebe2cd;
--ink: #2a221a;
--muted: #6e5e47;
--quiet: #9a8b73;
--accent: #d2654d;
--accent-deep: #a44a36;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Maru Gothic ProN",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.85;
-webkit-font-smoothing: antialiased;
}
/* Page filler so the footer sits at the bottom and looks like a real footer */
.page-fill {
height: clamp(120px, 18vh, 200px);
background: var(--bg);
}
/* Hand-drawn wavy separator */
.wave {
display: block;
width: 100%;
height: 36px;
color: var(--ink);
}
/* Paper-grain texture */
.grain {
position: relative;
}
.grain::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.07;
mix-blend-mode: multiply;
}
footer {
background: var(--bg);
padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
position: relative;
overflow: hidden;
}
.cols {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
.cols { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 2.5rem; }
}
/* Brand col */
.brand-row { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.5rem; }
.brand-row .logo {
font-family: "Caveat", "Patrick Hand", "Hiragino Maru Gothic ProN", cursive;
font-size: 2.4rem;
line-height: 1;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
}
.brand-row .est {
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.brand-tag {
margin: 0 0 1.25rem;
font-size: 0.92rem;
line-height: 1.7;
color: var(--muted);
max-width: 32ch;
}
.socials { display: flex; gap: 0.75rem; }
.socials a {
display: inline-grid;
place-items: center;
width: 38px; height: 38px;
border: 1.5px solid var(--ink);
border-radius: 50%;
color: var(--ink);
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.socials a:hover { background: var(--ink); color: var(--bg); }
/* Link cols */
.col h4 {
margin: 0 0 1rem;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-deep);
font-weight: 700;
position: relative;
padding-bottom: 0.4rem;
}
.col h4::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 24px; height: 2px;
background: var(--accent);
border-radius: 2px;
}
.col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.95rem;
}
.col ul a {
text-decoration: none;
color: var(--ink);
position: relative;
padding-left: 0;
transition: padding-left 0.2s ease, color 0.2s;
display: inline-flex;
align-items: baseline;
}
.col ul a::before {
content: "→";
opacity: 0;
transform: translateX(-4px);
margin-right: 0;
color: var(--accent);
transition: opacity 0.2s, transform 0.2s, margin-right 0.2s;
font-family: "Caveat", cursive;
font-weight: 700;
}
.col ul a:hover {
color: var(--accent-deep);
}
.col ul a:hover::before {
opacity: 1;
transform: translateX(0);
margin-right: 0.5rem;
}
/* Newsletter */
.news h4::after { background: var(--accent); }
.news p {
margin: 0 0 0.85rem;
font-size: 0.92rem;
color: var(--muted);
}
.news form {
display: flex;
gap: 0.5rem;
background: #fff;
padding: 0.4rem 0.5rem 0.4rem 1.1rem;
border-radius: 999px;
border: 2px solid var(--ink);
}
.news input {
flex: 1;
background: transparent;
border: 0;
font-family: inherit;
font-size: 0.9rem;
color: var(--ink);
outline: none;
}
.news input::placeholder { color: var(--muted); }
.news button {
background: var(--ink);
color: var(--bg);
border: 0;
padding: 0.5rem 1rem;
border-radius: 999px;
font-family: inherit;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s;
}
.news button:hover { background: var(--accent-deep); }
/* Bottom row */
.bottom {
max-width: 1200px;
margin: 2.5rem auto 0;
padding-top: 1.25rem;
border-top: 1px dashed var(--quiet);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
justify-content: space-between;
font-size: 0.84rem;
color: var(--muted);
}
.bottom .icons {
display: inline-flex;
gap: 0.85rem;
align-items: center;
color: var(--accent-deep);
}
.bottom .icons svg { width: 22px; height: 22px; display: block; }
.signature {
font-family: "Caveat", "Patrick Hand", "Hiragino Maru Gothic ProN", cursive;
font-size: 1.15rem;
color: var(--ink);
}
.signature .heart { color: var(--accent); }
.cols { grid-template-columns: minmax(0, 1fr); }
.cols > * { min-width: 0; }
.brand-row { flex-wrap: wrap; }
.socials a { width: 44px; height: 44px; }
.col ul a { min-height: 44px; align-items: center; }
.news input { min-width: 0; width: 100%; min-height: 44px; }
.news button { min-height: 44px; flex-shrink: 0; white-space: nowrap; }
.news form:focus-within { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
a { min-width: 44px; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.demo-result { margin-top: 0.75rem; min-height: 3.6em; color: var(--muted); line-height: 1.8; }
.demo-note { max-width: 1200px; margin: 1.5rem auto 0; color: var(--muted); }
@media (min-width: 600px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } }
@media (prefers-reduced-motion: reduce) { a, a::before, button { transition: none !important; } }
.demo-note { font-size: 0.85rem; line-height: 1.8; letter-spacing: 0; border-top: 1px solid currentColor; }
.demo-note h2 { margin: 1rem 0; font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
.demo-note p { scroll-margin-top: 1.5rem; }
.demo-note a { min-height: 44px; display: inline-flex; align-items: center; }
</style>
</head>
<body>
<div class="page-fill"></div>
<svg class="wave" viewBox="0 0 1440 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="none">
<path d="M0 24 Q 60 4, 140 22 T 320 22 T 500 22 T 680 22 T 860 22 T 1040 22 T 1220 22 T 1440 22 V 36 H 0 Z" fill="currentColor"/>
</svg>
<footer class="grain" style="background:var(--ink); color:var(--bg);">
<div style="background:var(--bg); color:var(--ink); margin: -2.5rem clamp(-1.25rem,-4vw,-3rem) 0; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem; border-top-left-radius: 0; border-top-right-radius: 0;">
<div class="cols">
<div>
<div class="brand-row">
<span class="logo">Mille & Co.</span>
<span class="est">Est. 2018</span>
</div>
<p class="brand-tag">毎日の暮らしに、ほんの少しの贅沢を。手仕事で淹れたコーヒーと、選んだ豆をお届けしています。</p>
<div class="socials">
<a href="#demo-social" aria-label="Instagram">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
</a>
<a href="#demo-contact" aria-label="Email">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</a>
<a href="#demo-social" aria-label="X">
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><text x="12" y="17" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" font-weight="700" fill="currentColor">X</text></svg>
</a>
</div>
</div>
<div class="col">
<h4>Shop</h4>
<ul>
<li><a href="#demo-shop">サブスクリプション</a></li>
<li><a href="#demo-shop">単品の豆</a></li>
<li><a href="#demo-shop">道具・ギフト</a></li>
<li><a href="#demo-shop">サンプルセット</a></li>
</ul>
</div>
<div class="col">
<h4>About</h4>
<ul>
<li><a href="#demo-about">わたしたち</a></li>
<li><a href="#demo-about">店舗一覧</a></li>
<li><a href="#demo-contact">お問い合わせ</a></li>
<li><a href="#demo-about">ジャーナル</a></li>
</ul>
</div>
<div class="col news">
<h4>Newsletter</h4>
<p>季節の豆と、月一の手紙を。</p>
<form data-demo-form onsubmit="event.preventDefault();">
<input type="email" placeholder="メールアドレス" id="newsletter-email" aria-label="メールアドレス" aria-describedby="newsletter-note newsletter-result" autocomplete="email" required />
<button type="submit" disabled>登録</button>
</form>
<p class="demo-result" id="newsletter-result" role="status" aria-live="polite"></p>
<p id="newsletter-note">表示見本です。購読登録・メール配信は行いません。</p>
</div>
</div>
<div class="bottom">
<span>© 2026 Mille & Co. All rights reserved.</span>
<span class="icons" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 11h11a4 4 0 0 1 4 4v1a4 4 0 0 1-4 4H7a2 2 0 0 1-2-2V11Z"/><path d="M16 11v-1a4 4 0 0 0-4-4H8.5"/><path d="M16 14h2a2 2 0 0 1 0 4h-2"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><path d="M12 2 L 14 9 L 21 9 L 15.5 13.5 L 17.5 21 L 12 16.5 L 6.5 21 L 8.5 13.5 L 3 9 L 10 9 Z"/></svg>
</span>
<span class="signature">Made with <span class="heart">♡</span> in Tokyo</span>
</div>
<aside class="demo-note" aria-labelledby="demo-title"><h2 id="demo-title">リンク先の説明（表示見本）</h2><p>架空のショップのデザイン例です。リンクはこのページ内の説明へ移動します。配布HTMLはCC0・利用料¥0です。</p><p id="demo-shop" tabindex="-1"><strong>商品の案内</strong> — 定期便・単品の豆・道具やギフト・サンプルセットへつなぐ構成例です。架空のショップのため注文・決済・発送は行いません。</p>
<p id="demo-about" tabindex="-1"><strong>お店の案内</strong> — わたしたち・店舗一覧・ジャーナルへの入口の例です。店名・創業年・所在地・権利表記は架空の設定です。</p>
<p id="demo-contact" tabindex="-1"><strong>お問い合わせ</strong> — お問い合わせとメールのアイコンの行き先の例です。この見本には連絡先や送信機能を含みません。</p>
<p id="demo-social" tabindex="-1"><strong>SNSの案内</strong> — Instagram・Xへの入口の例です。実際の公式アカウントへは移動しません。</p></aside>
</div>
</footer>
<noscript><p style="padding:1rem">JavaScriptが無効のためメール形式の確認は使えません。購読登録・送信は行われません。</p></noscript>
<script>
// このデモは入力確認だけ。通信・保存・配信はしない。
document.querySelectorAll('[data-demo-form]').forEach(form => {
const input = form.querySelector('input');
const result = document.getElementById('newsletter-result');
const check = () => {
result.textContent = '';
if (!form.reportValidity()) return;
result.textContent = '形式を確認しました。表示見本のため、購読登録・送信は行っていません。';
};
form.querySelector('button').addEventListener('click', event => { event.preventDefault(); check(); });
form.addEventListener('submit', event => { event.preventDefault(); check(); });
form.addEventListener('keydown', event => {
if (event.key === 'Enter' && !event.isComposing && event.keyCode !== 229) { event.preventDefault(); check(); }
});
input.addEventListener('input', () => { result.textContent = ''; });
form.querySelector('button').disabled = false;
});
</script>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
フッターは、ページの中でもっとも軽視される場所です。多くのサイトでリンクと著作権表記を詰め込むだけの「物置」になっている。しかし、フッターは読者が最後に目にする画面でもある——映画のエンドロール、手紙の結び。最後の印象は、記憶への残り方を決定づけます。手描きスケッチを散りばめるのは、その別れ際に「人の手の温度」を残すための選択です。
「終わってもいい余韻」を作る
スクロールしきった読者は、すでにそのページの目的を果たしています。そこで畳みかけるように情報を羅列すると、別れ際が事務的な印象で終わってしまう。手描きの線、ラフな書き込み、紙質感のオフホワイト——こうした要素は「ここで読み終えても満足」という余韻を作ります。余韻があるからこそ、読者は「また来たい」と感じる。フッターは離脱の場所であると同時に、再訪の動機が芽生える場所でもあります。
手描きが効くブランド・効かないブランド
人の手の痕跡は、クラフトブランド、カフェ、絵本系メディア、個人作家——「作り手の顔が見えること」が価値になる業態で強く効きます。逆に、金融・法務・大企業のコーポレートサイトでは、手描きの不揃いさが信頼性の記号と衝突します。フッターのトーンは、サイト全体が約束しているブランド像と必ず一致させること。
崩れる形金融・法務・大企業
手描きの不揃いさが信頼性の記号と衝突します。正確さが価値の源になっている相手には、温かさが不注意のシグナルとして読まれます。
効く形クラフト・カフェ・個人作家
作り手の顔が見えることが価値になる業態では、人の手の痕跡がそのまま説得力になります。フッターのトーンはブランド像と必ず一致させてください。
仕上げの判断軸
手描きイラストは2〜4点まで。詰めすぎると、温かみがそのまま散らかりに転びます。
ニュースレター登録やSNSへの導線は、押し付けがましくない控えめなトーンで添える——別れ際だからこそ、次に会う約束はそっと差し出すのが品です。
フッターの構成要素
使いどころ
- クラフトビール・コーヒー・小規模食品ブランド
- ハンドメイド・雑貨ECサイト
- カフェ・ベーカリー・パティスリー
- 絵本・児童書・教育コンテンツ
このデザインの分類
背景と狙いどころ
よくある質問
手書きフォントは表示が遅くなりますか？
1フォントだけなら問題ありません。Web フォントは subset（Latin のみ）を使い、display=swap を必ず指定。日本語の手書き感は SVG の手描きアイコンで補うと軽量です。
手描き調の装飾はAdSenseと相性が悪くありませんか。
フッターはサイト最下部で広告との接触が少ないので問題は出にくいです。むしろ署名としての差別化に効きます。
モバイルでは装飾を減らすべき？
はい。手描き要素はディスプレイ面積に対する比率で印象が変わるので、モバイルでは1-2点に絞ると締まります。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
明朝体で組む老舗旅館のフッター
墨色の地に生成りの文字と金の細い罫線で組んだ、老舗旅館のフッター。縦書きの宿の名、季節を感じさせる挨拶文、電話と空室確認の入口、4つの案内の列を明朝体でまとめ、ページの最後まで品のある印象を保つ。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。