Figma | Car Rental

ヘッダー（ナビゲーション＋ハンバーガーメニュー）

PCでは横並びのナビゲーション、スマートフォンではハンバーガーメニューに切り替わるレスポンシブなヘッダーを実装しました。

JavaScriptを使用し、クリックに応じてナビゲーションとオーバーレイの表示・非表示を切り替えています。

また、aria-expanded や aria-label を使用し、メニューの開閉状態が伝わる構造を意識しています。

メインビジュアル（ページヒーロー）

各下層ページで共通して使用できるページヒーローセクションを実装しました。

• ページタイトル
• パンくずリスト
• レスポンシブ対応

共通化を意識したHTML構造で、複数ページで再利用しやすい設計にしています。

Booking Section（予約フォーム）

レンタカーサイトを想定した予約フォームを実装しました。

• 車種選択
• レンタル場所・返却場所の選択
• レンタル日・返却日の入力
• CTAボタン

select や input[type="date"] など、実際のWebフォームで使用されるUI要素を取り入れています。

また、フォームと画像をFlexboxで横並びにし、レスポンシブ時には縦積みに切り替えています。

Contact Information（お問い合わせ情報）

住所・メールアドレス・電話番号・営業時間をまとめたお問い合わせ情報セクションを実装しました。

HTMLのaddress要素やmailto:、tel:リンクなどを使用し、実際のWebサイトを意識したマークアップにしています。

Latest Blog Posts（ブログカード）

最新のブログ記事・ニュースをカード形式で表示するセクションを実装しました。

• CSS Gridによるカードレイアウト
• 画像＋タイトル＋カテゴリー＋日付の構成
• time要素を使用した日付情報のマークアップ

レスポンシブ時にはカードが縦方向に並ぶように調整しています。

Partners（パートナーロゴ）

レンタカーサービスの提携企業を想定したロゴ一覧セクションを実装しました。

Flexboxを使用してロゴを横並びに配置し、画面幅に応じてレイアウトが変化する構造にしています。

Mobile App（アプリ紹介セクション）

スマートフォンアプリを訴求するプロモーションセクションを実装しました。

画像とテキストを重ねるレイアウトを採用し、position と z-index を使用して背景・画像・コンテンツのレイヤーを調整しています。

レスポンシブ時にはスマートフォン画像のサイズやテキスト幅を調整し、画面幅に応じて見やすいレイアウトになるよう設計しています。

CTA Banner（お問い合わせ・登録促進）

背景色を活かしたCTAバナーを実装しました。

• キャッチコピー
• 説明文
• メールアドレス入力フォーム
• CTAボタン
• イメージ画像

Flexboxを使用してコンテンツと画像を配置し、スマートフォンでは縦積み＋中央揃えに切り替えています。

フッター（情報量の多い構成）

複数の情報を整理して表示するフッターを実装しました。

• 会社情報
• 住所・メール・電話番号
• SNSリンク
• Useful Links
• Vehicleカテゴリー
• アプリダウンロードボタン

Flexboxを使用して情報を整理し、レスポンシブ時には縦積みになるように設計しています。

ハンバーガーメニュー（JavaScript）

スマートフォン表示時のナビゲーションをJavaScriptで制御しています。

クリック時に、

• ナビゲーションの開閉
• ハンバーガーアイコン → ×への変化
• 背景オーバーレイの表示・非表示
• aria-expanded の状態変更
• aria-label の状態変更

を連動させています。

シンプルなUIだけでなく、JavaScriptによる状態管理とアクセシビリティも意識して実装しました。

レスポンシブ対応

@media (max-width: 767px) を使用し、スマートフォン表示に対応しました。

主な対応内容：

• PCナビゲーション → ハンバーガーメニュー化
• ハンバーガーメニュー → オーバーレイ表示
• 横並びレイアウト → 縦積みレイアウト
• フォーム・画像のサイズ調整
• テキストの中央揃え
• CTA・アプリ紹介セクションのレイアウト調整

PCとスマートフォンで単純に要素を縮小するのではなく、画面幅に応じてレイアウトそのものを変更することを意識しています。