フッター · フッター
明朝体で組む老舗旅館のフッター
墨色の地に生成りの文字と金の細い罫線で組んだ、老舗旅館のフッター。縦書きの宿の名、季節を感じさせる挨拶文、電話と空室確認の入口、4つの案内の列を明朝体でまとめ、ページの最後まで品のある印象を保つ。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/ryokan-mincho-footer/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
明朝体で組む、老舗旅館のサイトのフッターを作ってください。 要件: - 地は墨色 #1c1915、文字は生成り #efe8da、補助の文字は #a79e8c、差し色は金 #b8975a。罫線は金を35%の不透明度にした細い線。 - 書体は明朝体（Hiragino Mincho ProN / Yu Mincho）。最下段の著作権の行だけゴシックにする。 - 上段は3列。左に縦書きの宿の名「月白荘」（writing-mode: vertical-rl、字間 0.4em）と小さな英字の読み、中央に2文の挨拶文と「明治二十四年 創業」、右に予約の入口。 - 予約の入口は、金の小さなラベル「ご予約・お問い合わせ」、大きめの電話番号（tel: リンク）、受付時間、金の枠線だけのボタン「空室を確かめる」。ボタンはホバーで金に塗る。 - 中段は4列の案内（お宿・ご案内・交通・所在地）。列の見出しは金の細字で字間を開ける。所在地は address 要素で書く。 - 下段は著作権と、個人情報の取り扱い・キャンセルの規定へのリンク。 - 段と段の間は金の細い罫線で区切る。影や角丸は使わない。 - 本文の字間は 0、行間は 1.85。見出しの字間を開けるのは短いラベルだけにする。 - 幅860px未満では案内を2列に、480px未満では1列に。予約の入口は宿の名と挨拶文の下に回す。
バリエーション
生成りの地の版
地を生成り #efe8da、文字を墨色 #1c1915 に反転する。金は #8c6d34 に濃くして、 明るい地でも罫線とラベルが読めるようにする。
料亭版
旅館を料亭に置き換える。客室と湯殿の列を「お献立」「個室」に変え、 予約の入口に「お席の予約」と、ご予算の目安を1行添える。
このプレビューのコード
HTMLとCSSの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 {
--ink: #1c1915;
--ink-2: #26221c;
--paper: #efe8da;
--muted: #a79e8c;
--gold: #b8975a;
--line: rgb(184 151 90 / 0.35);
--mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
--gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--mincho);
line-height: 1.85;
letter-spacing: 0;
color: var(--paper);
background: #f6f1e7;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
/* 本文の終わりを示すための、ページ側の仮の余白 */
.page-end {
min-height: 9rem;
display: grid;
place-items: center;
color: #736b59;
font-size: 0.9rem;
}
footer {
background: var(--ink);
padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) 2rem;
}
/* ---- 上段: 宿の名と、予約の入口 ---- */
.top {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(1.5rem, 5vw, 4rem);
align-items: start;
padding-bottom: clamp(2rem, 5vw, 3rem);
border-bottom: 1px solid var(--line);
}
/* 宿の名は縦書き。字間を開けて看板のように置く */
.name {
margin: 0;
writing-mode: vertical-rl;
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.4em;
}
.name small {
display: block;
margin-top: 1rem;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.3em;
color: var(--gold);
}
.greeting p {
margin: 0 0 1rem;
max-width: 30rem;
font-size: 0.95rem;
color: #d9d1c0;
}
.greeting .since {
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--muted);
}
.reserve {
display: grid;
gap: 0.75rem;
justify-items: start;
min-width: 15rem;
}
.reserve .label {
font-size: 0.75rem;
letter-spacing: 0.3em;
color: var(--gold);
}
.tel {
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
line-height: 1.3;
font-feature-settings: "palt" 0;
}
.hours { margin: 0; font-size: 0.8rem; color: var(--muted); }
.btn {
display: inline-block;
margin-top: 0.4rem;
padding: 0.8rem 1.6rem;
border: 1px solid var(--gold);
font-size: 0.9rem;
color: var(--gold);
transition: background 0.3s, color 0.3s;
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); }
/* ---- 中段: 案内の列。見出しは金の細字 ---- */
.links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
padding: clamp(2rem, 5vw, 3rem) 0;
border-bottom: 1px solid var(--line);
}
.links h2 {
margin: 0 0 0.9rem;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.3em;
line-height: 1.4;
color: var(--gold);
}
.links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.links li { font-size: 0.9rem; }
address {
font-style: normal;
font-size: 0.88rem;
color: #d9d1c0;
}
/* ---- 下段: 著作権と、小さな決まりごと ---- */
.bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-top: 1.5rem;
font-family: var(--gothic);
font-size: 0.72rem;
color: var(--muted);
}
.bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) {
.top { grid-template-columns: auto minmax(0, 1fr); }
.reserve { grid-column: 1 / -1; }
.links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}
.links a, .bottom a, .tel { display: inline-flex; align-items: center; min-height: 44px; }
.reserve { min-width: 0; }
.demo-note { margin: 1.5rem auto 0; color: var(--muted); }
a { min-width: 44px; }
a:focus-visible { outline-width: 2px; }
.demo-note h2 { color: var(--paper); }
@media (max-width: 360px) { .top { gap: 1rem; } }
.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-end">— ページの本文はここまで —</div>
<footer>
<div class="top">
<p class="name">月白荘<small>GEPPAKU-SO</small></p>
<div class="greeting">
<p>
川のせせらぎが届く九つの客室で、その日に揚がった魚と山の恵みをお出ししています。夕食のあとは、灯りを落とした庭をどうぞゆっくりお歩きください。
</p>
<p class="since">明治二十四年 創業</p>
</div>
<div class="reserve">
<span class="label">ご予約・お問い合わせ</span>
<a class="tel" href="#demo-reservation" aria-describedby="reservation-note">0000-00-0000</a>
<p class="hours" id="reservation-note">架空の電話番号です。発信・予約は行いません。<br />受付 9:00 — 20:00（水曜は休館）</p>
<a class="btn" href="#demo-reservation">空室を確かめる</a>
</div>
</div>
<nav class="links" aria-label="フッター">
<div>
<h2>お宿</h2>
<ul>
<li><a href="#demo-stay">客室</a></li>
<li><a href="#demo-stay">お食事</a></li>
<li><a href="#demo-stay">湯殿</a></li>
<li><a href="#demo-stay">お庭</a></li>
</ul>
</div>
<div>
<h2>ご案内</h2>
<ul>
<li><a href="#demo-policy">料金と宿泊の決まり</a></li>
<li><a href="#demo-reservation">よくあるお問い合わせ</a></li>
<li><a href="#demo-reservation">記念日のご相談</a></li>
</ul>
</div>
<div>
<h2>交通</h2>
<ul>
<li><a href="#demo-access">お車でお越しの方</a></li>
<li><a href="#demo-access">駅からの送迎</a></li>
</ul>
</div>
<div>
<h2>所在地</h2>
<address>
〒000-0000<br />
○○県○○市 川沿い一丁目<br />
最寄り駅より送迎で十分
</address>
</div>
</nav>
<div class="bottom">
<p>© 月白荘</p>
<ul>
<li><a href="#demo-policy">個人情報の取り扱い</a></li>
<li><a href="#demo-policy">キャンセルの規定</a></li>
</ul>
</div>
<aside class="demo-note" aria-labelledby="demo-title"><h2 id="demo-title">リンク先の説明（表示見本）</h2><p>架空の宿のデザイン例です。リンクはこのページ内の説明へ移動します。配布HTMLはCC0・利用料¥0です。</p><p id="demo-stay" tabindex="-1"><strong>お宿の案内</strong> — 客室・お食事・湯殿・お庭を案内する列の例です。宿名・客室数・創業年・料理は架空の設定です。</p>
<p id="demo-reservation" tabindex="-1"><strong>予約とお問い合わせ</strong> — 電話番号は表示見本です。発信・空室照会・予約・記念日の相談は受け付けていません。公開時は実際の連絡先と予約先へ置き換えます。</p>
<p id="demo-access" tabindex="-1"><strong>交通と所在地</strong> — 住所・所要時間・送迎は架空の設定です。経路検索や送迎の申込みは実装していません。</p>
<p id="demo-policy" tabindex="-1"><strong>宿泊条件と個人情報</strong> — 料金・キャンセル・個人情報の取り扱いを案内する入口の例です。実際の宿泊条件や規約は含まないため、公開時は正式な案内へのリンクに置き換えます。</p></aside>
</footer>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
旅館のサイトを見る人は、客室や料理の写真を眺めたあと、最後にフッターで電話番号や所在地を確かめます。予約を決める直前に見られる場所なのに、ここだけ汎用の細かい文字の並びになっているサイトは少なくありません。このフッターは、ページの最後まで宿の空気を途切れさせないことを目的にしています。
品は、書体と罫線で作る
上品さを出そうとして、装飾の模様や写真を足したくなるかもしれません。実際に印象を決めているのは、書体と線の細さです。
崩れる形ゴシックの小さな文字を詰めて並べる
情報は揃っていても、本文までの上品さがフッターで急に事務的になります。予約の直前で印象が切り替わります。
効く形明朝体と金の細い罫線で区切る
書体を本文と揃え、段の区切りを金の1本の線だけにすると、装飾を足さなくても格が保たれます。
宿の名は縦書きにしました。暖簾や看板と同じ向きの文字は、それだけで和の宿の入口として読まれます。
電話の入口を、いちばん目立たせる
格式のある宿ほど、電話で予約や相談をする人が多くいます。電話番号は案内の列に埋めず、右上に大きく置いて tel: のリンクにしています。
電話番号のすぐ下に受付時間を書くこと。かけてもつながらない時間帯を先に伝えるのが、いちばんの気遣いです。
仕上げの判断軸
4色墨・生成り・灰・金。金は線とラベルだけに使う
0.4em縦書きの宿の名の字間。短いラベルだけ開ける
1本段の区切り。金を35%にした細い線
金を広い面に使うと、上品さより派手さが勝ちます。塗るのはボタンのホバーだけにして、普段は線と小さな文字に留めてください。
フッターの構成要素
使いどころ
- 旅館・ホテル・料亭など、格式を大切にする宿泊施設や飲食店のサイト
- 老舗の和菓子店や工芸品店のブランドサイト
- 結婚式場や記念日のプランを扱うサービス
- 電話での予約が多く、番号を目立たせたい業種
このデザインの分類
背景と狙いどころ
よくある質問
フッターにここまで作り込む必要がありますか？
旅館のサイトでは、客室や料理を見終えた人がフッターで電話番号や所在地を探します。予約を決める直前に見られる場所なので、品のある見た目と、電話と空室確認の入口の分かりやすさの両方が要ります。
明朝体は画面で読みにくくないですか？
横線が細いので、小さな文字や薄い色にすると読みにくくなります。本文は0.9rem前後に保ち、生成りの文字を墨色の地に置いて明暗の差を大きく取っています。最下段の細かい文字だけはゴシックにしました。
宿の名を縦書きにするのはなぜですか？
暖簾や看板と同じ向きになり、それだけで和の宿だと伝わるからです。縦にするのは3〜5文字の名前だけにして、挨拶文や案内は横書きのまま読ませます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。