はじめに
本記事では、ホンダ社労士事務所のウェブサイトにおける「お問い合わせページ」のHTML構成とデザイン意図について解説します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
閲覧者が迷わず連絡できるように設計された、シンプルかつ機能的なページとなっています。
書こうと思ったきっかけ
ウェブサイトの構築・運用を進める中で、「問い合わせフォームを使わず、メールと電話のみにしたい」という要望がありました。
特に個人経営の事務所や小規模な法人にとって、フォームの管理やスパム対応の手間を省くため、連絡先を明記するシンプルな構成が理にかなっていると思います。
このHTML構成はそのニーズに応える実例として記録に残しておこうと思い、記事化しました。
ページ構成の概要
1. ヘッダー
- ロゴエリア：クリックでトップページ（index.html）に戻れる仕組み。
- ハンバーガーメニュー：スマホ表示など小画面対応のためのナビ開閉UI。
-
ナビゲーションメニュー：
- HOME
- 事務所案内
- サービス案内
- お問い合わせ
- 就労支援A型
2. メインコンテンツ
-
タイトル：
<h2>お問い合わせ</h2> - 案内文：「お問い合わせがある方は、以下のメールアドレスまたは電話番号までご連絡ください。」
-
連絡先情報（箇条書き）：
- 📧 メール：xxx@gmail.com
- 📞 電話番号：xxx
3. フッター
-
著作権表示：
- 「© ホンダ社労士事務所」
4. JavaScript（補足機能）
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
navMenu.classList.toggle('active');
});
ナビメニューの開閉をコントロールするスクリプトで、レスポンシブ対応がされています。
実際のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ホンダ社労士事務所</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<header>
<div class="header-title">
<a href="index.html">
<img src="images/logo.png" alt="ロゴ" style="height: 50px;">
</a>
</div>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav-menu" id="nav-menu">
<a href="index.html">HOME</a>
<a href="office.html">事務所案内</a>
<a href="services.html">サービス案内</a>
<a href="contact.html">お問い合わせ</a>
<a href="support-a.html">就労支援A型</a>
</nav>
</header>
<main class="container">
<section>
<h2>お問い合わせ</h2>
<p>お問い合わせがある方は、以下の電話番号までご連絡ください（平日：9:30〜17:30）。</p>
<ul>
<li>📞 電話番号：xxx</li>
</ul>
</section>
</main>
<footer>
<p>© ホンダ社労士事務所</p>
</footer>
<script>
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
navMenu.classList.toggle('active');
});
</script>
</body>
</html>
まとめ
このHTML構成は、「必要最低限の情報提供で問い合わせ導線を確保したい」というケースにおいて理想的な形です。
問い合わせフォームを用意する代わりに、メールアドレスと電話番号を明記するだけというシンプルな仕様により、運用負担を最小限に抑えています。
事務所運営において、まずは「気軽に連絡してもらう」ことを重視したい方にとって、有効な設計例だと考えています！