サイトマップ型フッター
4カラムのリンク群・言語切替・SNS アイコン・法務リンクをまとめたフッター。320px では2カラムに畳まれ、法務リンクは横に流れます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
デザインの要点
- カラム見出しは「製品／リソース／会社／法務」の4つまで。5つ以上はサイト構造の整理が先
- 言語切替は select で。旗のアイコンは言語と国が一致しないので使わない
- 法務リンクと © は最下段に小さく。目立たせる必要はないが、探せば必ずある位置に置く
- SNS アイコンにはラベルを付ける（aria-label）。図形だけのリンクは読み上げで「リンク」としか聞こえない
コード（コピーして使えます）
<footer class="fsm">
<div class="fsm-top">
<div class="fsm-brand">
<p class="fsm-logo"><svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true"><rect x="2" y="2" width="18" height="18" rx="5" fill="#1a1a1a"/><path d="M7 15V7l8 8V7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>Kestrel</p>
<p class="fsm-tag">チームの仕事を、ひとつの場所に。</p>
<label class="fsm-lang">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4" fill="none"/><path d="M1.5 8h13M8 1.5c2.5 2.5 2.5 10.5 0 13M8 1.5c-2.5 2.5-2.5 10.5 0 13" stroke="currentColor" stroke-width="1.4" fill="none"/></svg>
<span class="fsm-sr">言語</span>
<select><option>日本語</option><option>English</option><option>繁體中文</option><option>한국어</option></select>
</label>
</div>
<nav class="fsm-cols" aria-label="サイトマップ">
<div><h3>製品</h3><ul><li><a href="#">機能</a></li><li><a href="#">料金</a></li><li><a href="#">導入事例</a></li><li><a href="#">更新履歴</a></li><li><a href="#">ロードマップ</a></li></ul></div>
<div><h3>リソース</h3><ul><li><a href="#">ドキュメント</a></li><li><a href="#">API リファレンス</a></li><li><a href="#">ヘルプセンター</a></li><li><a href="#">ブログ</a></li><li><a href="#">コミュニティ</a></li></ul></div>
<div><h3>会社</h3><ul><li><a href="#">会社概要</a></li><li><a href="#">採用情報</a></li><li><a href="#">お問い合わせ</a></li><li><a href="#">パートナー</a></li></ul></div>
<div><h3>法務</h3><ul><li><a href="#">利用規約</a></li><li><a href="#">プライバシー</a></li><li><a href="#">セキュリティ</a></li><li><a href="#">特定商取引法に基づく表記</a></li></ul></div>
</nav>
</div>
<div class="fsm-bottom">
<ul class="fsm-sns" aria-label="SNS・コミュニティ">
<li><a href="#" aria-label="コミュニティ"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5A2.5 2.5 0 015.5 3h9A2.5 2.5 0 0117 5.5v6a2.5 2.5 0 01-2.5 2.5H8l-4 3v-3A2.5 2.5 0 013 11.5v-6z" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linejoin="round"/></svg></a></li>
<li><a href="#" aria-label="動画チャンネル"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="3" stroke="currentColor" stroke-width="1.6" fill="none"/><path d="M8.5 7.5v5l4-2.5z" fill="currentColor"/></svg></a></li>
<li><a href="#" aria-label="開発者向けリポジトリ"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M7 5l-4 5 4 5M13 5l4 5-4 5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></a></li>
<li><a href="#" aria-label="ニュースレター"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.6" fill="none"/><path d="M3 6l7 5 7-5" stroke="currentColor" stroke-width="1.6" fill="none"/></svg></a></li>
</ul>
<p class="fsm-copy">© 2026 Kestrel, Inc.</p>
<ul class="fsm-legal"><li><a href="#">Cookie 設定</a></li><li><a href="#">サイトマップ</a></li><li><a href="#">ステータス</a></li></ul>
</div>
</footer>