【既存サイト改修事例】フッターの3カラム化とマップ横へのバナー追加実装｜レスポンシブ対応とUI/UXの最適化

2026年2月25日

1. 制作概要と目的

今回は、クライアント様が新たに導入された「地域住民の方も利用可能なAED」の存在をWebサイト上で周知するためのセクション追加・レイアウト改修を担当しました。単なる情報追加ではなく、地域貢献と安全管理という姿勢を伝え、企業イメージの向上に繋げることが最大の目的です。

使用技術: HTML5, CSS3 (Flexbox), メディアクエリ
主な実装内容: 会社概要ページのマップ周辺レイアウト変更、フッターの3カラム化とレスポンシブ対応

2. 実装上の課題：既存環境の維持とUI/UXの最適化

情報を追加するにあたり、以下の課題がありました。

配置場所の選定: ただ目立つ場所ではなく、「いざという時に探しやすい場所」であること。
既存コードとの競合回避: すでに完成している会社概要ページや、全ページ共通のフッター領域を改修するため、他の要素に影響を与えない（デグレードを起こさない）慎重なCSS設計が必要でした。

3. 解決策：導線を意識した配置とFlexboxによる安全なレイアウト調整

配置場所については、ユーザーが「場所」を確認するタイミングを考慮し、「会社概要ページのマップ横」と、全ページからアクセス可能な「フッターエリア」を選定しました。

フッターエリアは従来の2カラム（会社情報・お問い合わせ）から3カラムへ変更し、AEDバナーを追加しています。既存のCSSに干渉しないよう、独立したラッパークラスを用いてFlexboxでレイアウトを構築しました。

【コード例：フッターの3カラム化とレスポンシブ対応】

HTML

<footer class="site-footer">
  <div class="footer-inner flex-container">
    <div class="footer-col company-info">
      </div>
    <div class="footer-col contact-info">
      </div>
    <div class="footer-col aed-banner">
      <a href="#"><img src="aed-banner.jpg" alt="地域の方もご利用いただけるAEDを設置しています"></a>
    </div>
  </div>
</footer>

CSS

/* CSS（Flexboxとメディアクエリ） */
.site-footer .flex-container {
  display: flex;
  justify-content: space-between; /* 均等に配置 */
  align-items: center; /* 縦の中央揃え */
  gap: 20px; /* カラム間の余白 */
}

/* PC表示時の各カラムの幅調整 */
.site-footer .footer-col {
  flex: 1; 
}

/* スマートフォン表示時（例：768px以下）のレスポンシブ対応 */
@media screen and (max-width: 768px) {
  .site-footer .flex-container {
    flex-direction: column; /* 縦並びに変更 */
    align-items: stretch;
  }
  
  .site-footer .footer-col {
    margin-bottom: 20px; /* 縦並び時の余白 */
  }
  
  /* 最後の要素の余白を消す */
  .site-footer .footer-col:last-child {
    margin-bottom: 0;
  }
}