フッター初級

ミニマル1行フッター

ロゴ・最小限のリンク・著作権を1行に収めた、引き算の効いたフッター。情報量を絞りたいポートフォリオやランディングページに。視覚的ノイズを減らし、本文の余韻を保ちます。

#footer#minimal#small-type#simple

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSのミニマル1行フッター -->
<footer class="fmn">
  <div class="fmn-row">
    <a class="fmn-logo" href="#" onclick="return false">◇ FlowDesk</a>
    <nav class="fmn-nav">
      <a href="#" onclick="return false">機能</a>
      <a href="#" onclick="return false">料金</a>
      <a href="#" onclick="return false">規約</a>
    </nav>
    <span class="fmn-copy">© 2026 FlowDesk Inc.</span>
  </div>
</footer>

CSS

/* FlowDesk（SaaS）：ミニマル1行フッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fmn { width: 100%; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; background: #0b1020; color: #d8def0; }
.fmn-row { width: 100%; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-top: 1px solid #1b2340; }
.fmn-logo { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; }
.fmn-nav { display: flex; gap: 18px; margin-left: auto; }
.fmn-nav a { color: #9aa3c8; text-decoration: none; font-size: 13px; font-weight: 600; transition: color .18s ease; }
.fmn-nav a:hover { color: #fff; }
.fmn-copy { font-size: 12px; color: #6b75a0; }
@media (max-width: 520px) { .fmn-nav { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .fmn-nav a { transition: none; } }

実装ガイド

使いどころ

ポートフォリオやLPなど、情報量を絞りたいサイトに。ロゴ・最小限のリンク・著作権を1行に収めた、引き算の効いたフッターです。

実装時の注意点

縦方向は flex の justify-content:flex-end で行を最下部へ。1行内は flex＋margin-left:auto でロゴ左／リンク右／著作権の配置に。余白を活かして“間”を作るのが要点です。

対応ブラウザ

flexbox のみで全モダンブラウザ対応。JS 不要で軽量です。

よくある失敗

狭い画面で1行に収まらない場合の折り返し（flex-wrap）を用意すること。リンクを詰め込みすぎるとミニマルさが損なわれるので3〜4個まで。コントラストは確保しつつ、装飾は最小限に。

応用例

中央寄せ版、上に細い区切り線＋大きめ余白、ダーク/ライト切替、言語切替リンクの追加などに展開できます。

コード

HTML

<!-- ミニマル1行フッター -->
<footer class="fmn">
  <div class="fmn-row">
    <a class="fmn-logo" href="#" onclick="return false">▲ studiolume</a>
    <nav class="fmn-nav">
      <a href="#" onclick="return false">Work</a>
      <a href="#" onclick="return false">About</a>
      <a href="#" onclick="return false">Contact</a>
    </nav>
    <span class="fmn-copy">© 2026 studiolume</span>
  </div>
</footer>

CSS

* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fmn {
  width: 100%; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #0e1014; color: #e7e8ec;
}
.fmn-row {
  width: 100%;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px;
  border-top: 1px solid #1c1f27;
}
.fmn-logo { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .01em; }
.fmn-nav { display: flex; gap: 18px; margin-left: auto; }
.fmn-nav a { color: #aeb2bd; text-decoration: none; font-size: 13px; font-weight: 600; transition: color .18s ease; }
.fmn-nav a:hover { color: #fff; }
.fmn-copy { font-size: 12px; color: #6c707b; }

@media (max-width: 520px) { .fmn-nav { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .fmn-nav a { transition: none; } }

🤖 AIエージェント用プロンプト

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「ミニマル1行フッター」の効果を追加してください。

# 追加してほしい効果
ミニマル1行フッター（フッター）
ロゴ・最小限のリンク・著作権を1行に収めた、引き算の効いたフッター。情報量を絞りたいポートフォリオやランディングページに。視覚的ノイズを減らし、本文の余韻を保ちます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ミニマル1行フッター -->
<footer class="fmn">
  <div class="fmn-row">
    <a class="fmn-logo" href="#" onclick="return false">▲ studiolume</a>
    <nav class="fmn-nav">
      <a href="#" onclick="return false">Work</a>
      <a href="#" onclick="return false">About</a>
      <a href="#" onclick="return false">Contact</a>
    </nav>
    <span class="fmn-copy">© 2026 studiolume</span>
  </div>
</footer>

【CSS】
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fmn {
  width: 100%; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #0e1014; color: #e7e8ec;
}
.fmn-row {
  width: 100%;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 26px 30px;
  border-top: 1px solid #1c1f27;
}
.fmn-logo { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .01em; }
.fmn-nav { display: flex; gap: 18px; margin-left: auto; }
.fmn-nav a { color: #aeb2bd; text-decoration: none; font-size: 13px; font-weight: 600; transition: color .18s ease; }
.fmn-nav a:hover { color: #fff; }
.fmn-copy { font-size: 12px; color: #6c707b; }

@media (max-width: 520px) { .fmn-nav { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .fmn-nav a { transition: none; } }

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。