フッター · フッター
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/corporate-footer/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
B2B SaaS / コーポレートサイト向けに、情報密度の高いフッターブロックを作ってください。
キャンバス:
- フッター本体は深めのネイビー (#0e1a2b → #19263c)、文字は (#e6edf7) のオフホワイト、ミュート (#9aa8bf) とクワイエット (#6a7690) の2段階。
- アクセントは空色系ブルー (#4faaff)。リンクhoverとCTAボタンのみ使用。
- サンセリフ (Inter) で統一。見出しの letter-spacing と weight で階層を作る。
フッター構造 (上から):
1. ニュースレター帯 (`nl`):
- 2カラム: 左にコピー (H2 + 1段落)、右にメール入力フォーム。
- H2: "Quarterly notes from the team." clamp(1.5rem, 2.5vw, 2rem)、weight 600、letter-spacing -0.02em。
- コピー: ミュート色、最大 48ch、"Product updates, the occasional engineering write-up..." 具体的な内容と頻度 ("Four emails a year, never more") を明示する。
- フォーム: input (email, flex 1 1 240px) + submit ボタン。input は半透明白背景、focus でアクセントボーダー。ボタンは青アクセント。
- フォーム下に fine print: "We'll never share your address. <Privacy policy>"。
- 下辺に半透明の1px罫線。
2. メインの5カラム (`cols`):
- `1.25fr 1fr 1fr 1fr 1fr` の比率で、最初のカラムがブランド列。
- ブランド列:
- ロゴ: 28px の角丸正方形 (青グラデーション) + ブランド名。
- ミッションステートメント: 最大 28ch、ミュート色、1段落。
- 認証バッジ群: SOC 2 / ISO 27001 / GDPR のような小さなピル (0.72rem, 1pxボーダー, 半透明背景)。
- リンク列 x 4 (Product / Company / Resources / Legal):
- H3: 0.78rem, uppercase, letter-spacing 0.12em, ミュート色。
- ul: 5項目ずつ、0.45remの行間、hover でアクセント色に。
- 新機能には "NEW" の小さな青バッジを span で付与できる構造にする。
3. 下段バー (`bottom`):
- 上辺に半透明の1px罫線。
- 左: コピーライト、Sitemap リンク、"All systems normal" のステータスバッジ (緑の点 + 緑テキスト + 緑枠のピル)。
- 右: 言語スイッチャー (世界アイコンSVG + "English (US)" ピル)、SNSアイコン群 (X / GitHub / LinkedIn / YouTube)。アイコンは 32x32 の角丸正方形に14px SVG、hoverでアクセント色。
- 小さいギャップと flex-wrap で縦積みにも耐える。
レスポンシブ:
- 960px 以下: 5カラムを3カラムに、brand列は全幅に。nl は1カラム積み。
- 560px 以下: 3カラムを2カラムに。
JSは送信ハンドリング以外不要。レイアウトはすべてCSS。
バリエーション
ライトテーマ版
フッター背景を (#f4f6fa)、メインテキストを (#0f172a) に。 ネイビーの濃淡 (nl・cols・bottomの背景差) を1段階ずつ明るく寄せる。 アクセントの青はそのまま。
コンプライアンス重視版
ブランド列のミッションを削除し、代わりに認証バッジを拡張 (8個程度): SOC 2 II / ISO 27001 / HIPAA / GDPR / CCPA / PCI DSS 等。 新たに "Trust Center" リンクを Legal 列のトップに昇格。 ニュースレター帯にも "Compliance updates" のチェックボックスを追加。
このプレビューのコード
HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空の企業のフッターです。メール形式をページ内で確認し、購読されていないことを表示します。外部送信・登録・メール配信・認証・稼働監視はなく、各リンクは構成の説明へ移動します。
コードを表示
<!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: #f4f6fa;
--panel: #0e1a2b;
--panel-2: #19263c;
--fg: #e6edf7;
--fg-muted: #9aa8bf;
--fg-quiet: #6a7690;
--accent: #4faaff;
--rule: rgba(230, 237, 247, 0.08);
--sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
"Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--sans);
background: var(--bg);
color: #0f172a;
min-height: 100dvh;
display: grid;
grid-template-rows: 1fr auto;
}
/* Filler content so the footer is visibly the footer */
.page-filler {
max-width: 1200px;
margin-inline: auto;
padding: 4rem clamp(1.5rem, 4vw, 3rem);
color: #626d84;
}
.page-filler h1 {
color: #0f172a;
font-size: clamp(1.6rem, 3vw, 2.2rem);
margin: 0 0 0.75rem;
letter-spacing: 0;
line-height: 1.4;
}
.page-filler p { max-width: 58ch; line-height: 1.8; }
/* Footer */
footer.site {
background: var(--panel);
color: var(--fg);
}
/* Newsletter band */
.nl {
background:
linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
border-bottom: 1px solid var(--rule);
}
.nl-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
}
.nl-copy h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
letter-spacing: 0;
margin: 0 0 0.4rem;
line-height: 1.4;
}
.nl-copy p {
color: var(--fg-muted);
font-size: 0.95rem;
margin: 0;
max-width: 48ch;
}
.nl-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.nl-form input[type="email"] {
flex: 1 1 240px;
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--rule);
border-radius: 8px;
color: var(--fg);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.15s, background 0.15s;
}
.nl-form input[type="email"]::placeholder { color: var(--fg-muted); }
.nl-form input[type="email"]:focus {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-color: var(--accent);
background: rgba(79, 170, 255, 0.05);
}
.nl-form button {
padding: 0.85rem 1.4rem;
border: 0;
border-radius: 8px;
background: var(--accent);
color: #0b1220;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.nl-form button:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.nl-fineprint {
margin-top: 0.8rem;
font-size: 0.78rem;
color: var(--fg-quiet);
}
.nl-fineprint a { color: var(--fg-muted); }
/* Main footer grid */
.cols {
max-width: 1200px;
margin: 0 auto;
padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 3vw, 2.5rem);
display: grid;
grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.brand-col .logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0;
margin-bottom: 1rem;
}
.brand-col .logo-mark {
width: 28px;
height: 28px;
border-radius: 6px;
background: linear-gradient(135deg, var(--accent) 0%, #2d6bff 100%);
display: inline-grid;
place-items: center;
color: #0b1220;
font-weight: 900;
}
.brand-col p.mission {
color: var(--fg-muted);
font-size: 0.92rem;
line-height: 1.55;
max-width: 28ch;
margin: 0 0 1.25rem;
}
.brand-col .badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.brand-col .badge {
padding: 0.3rem 0.6rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--rule);
border-radius: 6px;
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--fg-muted);
}
.link-col h3 {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 0.9rem; line-height: 1.4;
}
.link-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.link-col a {
color: var(--fg);
text-decoration: none;
font-size: 0.92rem;
transition: color 0.15s;
}
.link-col a:hover { color: var(--accent); }
.link-col .new {
display: inline-block;
padding: 0 0.3rem;
margin-left: 0.35rem;
background: var(--accent);
color: #0b1220;
font-size: 0.65rem;
border-radius: 3px;
font-weight: 700;
vertical-align: middle;
}
/* Bottom bar */
.bottom {
border-top: 1px solid var(--rule);
}
.bottom-inner {
max-width: 1200px;
margin: 0 auto;
padding: 1.25rem clamp(1.5rem, 4vw, 3rem);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
font-size: 0.82rem;
color: var(--fg-muted);
}
.bottom-left { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.bottom-left a { color: inherit; text-decoration: none; }
.bottom-left a:hover { color: var(--fg); }
.locale-switch {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--rule);
border-radius: 999px;
color: var(--fg);
font-size: 0.82rem;
}
.locale-switch svg { color: var(--fg-muted); }
.socials {
display: inline-flex;
gap: 0.5rem;
}
.socials a {
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--rule);
color: var(--fg-muted);
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); }
/* Status indicator */
.status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.6rem;
background: rgba(32, 190, 110, 0.12);
color: #56d88a;
border: 1px solid rgba(32, 190, 110, 0.3);
border-radius: 999px;
font-size: 0.78rem;
}
.status .dot {
width: 7px;
height: 7px;
background: #56d88a;
border-radius: 999px;
}
@media (max-width: 960px) {
.cols { grid-template-columns: 1fr 1fr 1fr; }
.brand-col { grid-column: 1 / -1; }
.nl-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.cols { grid-template-columns: 1fr 1fr; }
}
.cols > *, .nl-inner > * { min-width: 0; }
.link-col a, .bottom-left a, .nl-fineprint a { display: inline-flex; align-items: center; min-height: 44px; }
.socials a { width: 44px; height: 44px; }
.nl-form input { min-width: 0; min-height: 44px; max-width: 100%; }
.nl-form button { min-height: 44px; white-space: nowrap; }
a { min-width: 44px; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nl-fineprint { color: var(--fg-muted); }
.demo-result { flex-basis: 100%; min-height: 1.8em; margin: 0.5rem 0 0; color: var(--fg); line-height: 1.8; }
.demo-note { max-width: 1200px; margin: 0 auto; padding: 1.5rem clamp(1.5rem, 4vw, 3rem); color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { a, button, input { 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>
<main class="page-filler">
<h1>ページ本文はここに入ります。</h1>
<p>
このプレビューはフッター部分に焦点を当てています。下にスクロールすると、デザインされたフッターが見えます。上の埋め草は、実際のマーケティングページのファーストビュー相当を再現するためのダミーです。
</p>
</main>
<footer class="site">
<section class="nl">
<div class="nl-inner">
<div class="nl-copy">
<h2>チームからの、四半期レポート。</h2>
<p>
プロダクトのアップデート、たまの技術記事、そして変更履歴を素直な日本語で。年4通、それ以上は送りません。
</p>
</div>
<div>
<form class="nl-form" data-demo-form onsubmit="event.preventDefault()">
<input id="newsletter-email" type="email" placeholder="you@company.com" aria-label="メールアドレス" aria-describedby="newsletter-note newsletter-result" autocomplete="email" required />
<button type="submit" disabled>購読する →</button>
<p class="demo-result" id="newsletter-result" role="status" aria-live="polite"></p>
</form>
<p class="nl-fineprint" id="newsletter-note">表示見本です。購読登録・メール配信は行いません。アドレスを他社と共有することはありません。<a href="#demo-policy">プライバシーポリシー</a>。
</p>
</div>
</div>
</section>
<div class="cols" id="footer-navigation" tabindex="-1">
<div class="brand-col">
<div class="logo">
<span class="logo-mark">M</span>
Meridian
</div>
<p class="mission">
直感を信じる分析プロダクト。東京・ベルリン・SF の小さなチームで作っています。
</p>
<div class="badges">
<span class="badge">SOC 2 Type II</span>
<span class="badge">ISO 27001</span>
<span class="badge">GDPR</span>
</div>
</div>
<div class="link-col">
<h3>プロダクト</h3>
<ul>
<li><a href="#demo-product">機能</a></li>
<li><a href="#demo-product">料金</a></li>
<li><a href="#demo-product">更新履歴 <span class="new">NEW</span></a></li>
<li><a href="#demo-product">連携</a></li>
<li><a href="#demo-product">ロードマップ</a></li>
</ul>
</div>
<div class="link-col">
<h3>会社</h3>
<ul>
<li><a href="#demo-company">会社概要</a></li>
<li><a href="#demo-company">採用情報</a></li>
<li><a href="#demo-company">プレス</a></li>
<li><a href="#demo-company">お問い合わせ</a></li>
<li><a href="#demo-company">パートナー</a></li>
</ul>
</div>
<div class="link-col">
<h3>リソース</h3>
<ul>
<li><a href="#demo-resources">ドキュメント</a></li>
<li><a href="#demo-resources">API リファレンス</a></li>
<li><a href="#demo-resources">セキュリティ</a></li>
<li><a href="#demo-resources">稼働状況</a></li>
<li><a href="#demo-resources">コミュニティ</a></li>
</ul>
</div>
<div class="link-col">
<h3>規約</h3>
<ul>
<li><a href="#demo-policy">利用規約</a></li>
<li><a href="#demo-policy">プライバシー</a></li>
<li><a href="#demo-policy">Cookie</a></li>
<li><a href="#demo-policy">DPA</a></li>
<li><a href="#demo-policy">信頼センター</a></li>
</ul>
</div>
</div>
<div class="bottom">
<div class="bottom-inner">
<div class="bottom-left">
<span>© 2026 Meridian Analytics, Inc.</span>
<a href="#footer-navigation">サイトマップ</a>
<span class="status"><span class="dot"></span>稼働状況の表示例</span>
</div>
<div style="display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap">
<span class="locale-switch">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>
日本語
</span>
<div class="socials">
<a href="#demo-social" aria-label="X / Twitter"><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>
<a href="#demo-social" aria-label="GitHub"><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">GH</text></svg></a>
<a href="#demo-social" aria-label="LinkedIn"><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">in</text></svg></a>
<a href="#demo-social" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="4"/><path d="m10 9 6 3-6 3Z"/></svg></a>
</div>
</div>
</div>
</div>
<aside class="demo-note" aria-labelledby="demo-title"><h2 id="demo-title">リンク先の説明（表示見本）</h2><p>架空の企業のデザイン例です。リンクはこのページ内の説明へ移動します。配布HTMLはCC0・利用料¥0です。</p><p id="demo-product" tabindex="-1"><strong>プロダクトの案内</strong> — 機能・料金・更新履歴・連携・ロードマップをまとめる列の例です。実際の製品・料金プラン・外部連携は含みません。</p>
<p id="demo-company" tabindex="-1"><strong>会社の案内</strong> — 会社概要・採用・プレス・お問い合わせ・パートナーへつなぐ構成例です。会社名・拠点・権利表記は架空で、応募や問い合わせは送信しません。</p>
<p id="demo-resources" tabindex="-1"><strong>資料と稼働状況</strong> — ドキュメント・API・セキュリティ・稼働状況・コミュニティの入口の例です。認証バッジや稼働表示は見本であり、取得実績や実際の監視結果ではありません。</p>
<p id="demo-policy" tabindex="-1"><strong>規約と個人情報の案内</strong> — 利用規約・プライバシー・Cookie・DPA・信頼センターのリンクを置く例です。実際に公開する際は、運営の正式な案内へのリンクに置き換えます。このHTMLから入力情報は送信しません。</p>
<p id="demo-social" tabindex="-1"><strong>外部サービスの案内</strong> — X・GitHub・LinkedIn・YouTubeへの入口の例です。架空の企業のため公式アカウントへは移動しません。</p></aside>
</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の描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
フッターは、訪問者が離脱する直前に目にする場所です。多くのサイトでは「サイトマップ・著作権・プライバシー」の最小構成で済まされる。しかしB2B SaaSやコーポレートサイトでは、この最下部こそちゃんとした会社であるという印象を固める最後のチャンスです。
情報量を、信頼に変える
多段フッターは、一見すると要素が多くゴチャついて見えそうです。しかし、ニュースレター・認証バッジ・稼働ステータス・言語切替・SNS——これらを色彩トーンと余白の統一のもとに整然と並べると、情報量はそのまま「この会社は多面的にきちんと運営されている」という信頼の厚みに変わります。一つひとつの要素は小さくても、組み合わせの総和が効きます。
別れ際の安心感
離脱直前の訪問者は、無意識に「この会社と関わって大丈夫か」を最終判断しています。稼働ステータスの「全システム正常」、第三者認証のバッジ、正直な発行頻度を書いたニュースレター欄——これらは派手ではありませんが、別れ際の不安を静かに打ち消します。
フッターは事務的な物置ではありません。信頼を締めくくる場所です。
仕上げの判断軸
構成はブランド列（1.25fr）＋リンク列×4（1fr）の5カラムが扱いやすい比率。各列の見出しは小さな大文字ラベルに固定すると、どの列も同じ「棚」に見えて整います。
1.25frブランド列の比率。ここだけ少し広く取る
1fr × 4リンク列。合計5カラムがいちばん扱いやすい
Changelogなど見てほしいリンクには小さなNEWバッジを。稼働ステータスや言語切替は実サービスと連動させると、演出が実用を兼ねます。SNSアイコンは角丸正方形で統一し、hoverでアクセント色に反応させます。
フッターの構成要素
使いどころ
- B2B SaaS・フィンテック・ヘルステックなど、信頼感と情報量の両立が必要なコーポレート／プロダクトサイト
- グローバル展開済みで言語切替・認証バッジの表示が必要なサイト
- ニュースレター登録を主要CTA の一つとして扱いたい製品
このデザインの分類
背景と狙いどころ
よくある質問
5カラムは多すぎませんか？
デスクトップでは丁度良い密度ですが、960pxで3カラム、560pxで2カラムに折り畳むので問題ありません。コンテンツ数が少ない場合は 4カラム (Product / Company / Resources / Legal) に減らしてOKです。ブランド列は常に1つ。
ニュースレター登録率を上げるコツは？
発行頻度と内容を正直に書くこと。"Weekly product updates" より "Four emails a year, never more" の方が購読率が高い傾向があります。また、購読で得られるものを具体的に (changelog, engineering writeups など) 列挙するのも効果的です。
ステータスバッジは必須？
必須ではないですが、B2B SaaSでは「稼働しています」のシグナルが信頼感に繋がります。外部サービス (status.io, instatus) と連携して、実際のステータスを反映するとなお良し。実装時は aria-live="polite" でスクリーンリーダー対応も。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
明朝体で組む老舗旅館のフッター
墨色の地に生成りの文字と金の細い罫線で組んだ、老舗旅館のフッター。縦書きの宿の名、季節を感じさせる挨拶文、電話と空室確認の入口、4つの案内の列を明朝体でまとめ、ページの最後まで品のある印象を保つ。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
選択肢で絞り込む右下のサポートチャット
Webサイトの右下に常駐する問い合わせ用のチャットウィジェット。用件を選択肢で絞り込む自動応答、営業時間に応じて約束を変える表示、時間外はメールで引き取る導線、閉じている間の未読数までを備える。