サクッとMockup向けAppBarを作成してみた

MUIで実装するAppBarの基本と実践的Tips

React + MUI を使って Web アプリケーションのヘッダー（AppBar）を構築する方法と、実装時に気をつけたいポイントについてまとめました。プロジェクト名や変数名は仮のものですが、技術的な知見の共有を目的とした記事です。

🔧 使用技術

• React 18+
• TypeScript
• MUI（@mui/material, @mui/icons-material）
• React Router DOM（v6以降）

🎯 実装するAppBarの要件

• 左側にロゴ（クリックでトップページに遷移）
• 右側にアイコンボタンを並べる（検索 / 記事生成 / 通知 / プロフィール）
• MUIのAppBarとToolbarをベースに構成
• 見た目の統一性（アイコンの背景色、ホバーなど）

🧱 実装コード全体（Header.tsx）

import React from "react";
import {
  AppBar,
  Toolbar,
  IconButton,
  Box,
  Button,
} from "@mui/material";
import { useNavigate } from "react-router-dom";

import SearchIcon from "@mui/icons-material/Search";
import AutoStoriesIcon from "@mui/icons-material/AutoStories";
import NotificationsIcon from "@mui/icons-material/Notifications";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";

const HEADER_HEIGHT = 64;
const HEADER_COLOR = "#f5f5f5";
const ICON_BG = "#e0e0e0";

export default function Header() {
  const navigate = useNavigate();

  return (
    <AppBar
      position="fixed"
      style={{ height: HEADER_HEIGHT, backgroundColor: HEADER_COLOR }}
      elevation={1}
    >
      <Toolbar style={{ display: "flex", justifyContent: "space-between" }}>
        {/* ロゴエリア */}
        <Button onClick={() => navigate("/")}>
          <img
            src="/logo.svg"
            alt="logo"
            style={{ width: "50px", height: "auto" }}
          />
        </Button>

        {/* アイコン群 */}
        <Box display="flex" gap="8px">
          <IconButton style={{ backgroundColor: ICON_BG }}>
            <SearchIcon />
          </IconButton>
          <IconButton style={{ backgroundColor: ICON_BG }}>
            <AutoStoriesIcon />
          </IconButton>
          <IconButton style={{ backgroundColor: ICON_BG }}>
            <NotificationsIcon />
          </IconButton>
          <IconButton style={{ backgroundColor: ICON_BG }}>
            <AccountCircleIcon />
          </IconButton>
        </Box>
      </Toolbar>
    </AppBar>
  );
}

---

✅ 実装時のポイント

1. 背景色・高さ・ホバーのスタイル設計

AppBar はデフォルトで濃い色なので、アプリのデザインに合わせて明るくすることが多いです。高さや影（elevation）も調整すると印象が変わります。

2. ロゴをクリックしてトップに戻る導線は必須

ユーザーが直感的に戻れるよう、ロゴクリックでnavigate('/')できるようにします。

3. アイコンボタンに共通スタイルをつける

アイコンが目立たない場合は背景色で補完します。IconButton に style={{ backgroundColor: '#e0e0e0' }} を指定することで全体の統一感が出ます。

4. アクセシビリティへの配慮

各ボタンに aria-label をつけることで、スクリーンリーダー対応も可能です。

<IconButton aria-label="search" style={{ backgroundColor: ICON_BG }}>
  <SearchIcon />
</IconButton>

5. 各ボタン処理は専用ファイルへ切り出し可能にする設計

ボタンが増えてロジックが複雑になる場合は、以下のように責務を分離して整理しましょう。

src/
├── components/
│   └── presentation/
│       ├── HeaderSearch.tsx
│       ├── HeaderGenerate.tsx
│       ├── HeaderNotification.tsx
│       └── HeaderAccount.tsx

---

💡 応用アイデア

• ダークモード切り替えボタン
• ログイン状態で表示内容を切り替える
• モバイル表示ではドロワー（Drawer）に変換
• AppBar をページ毎に出し分けたい場合はルート階層で制御

---

📌 まとめ

AppBar はアプリの「顔」となる重要な UI パーツです。シンプルに見えて、ロジックやデザイン性、ユーザー体験など様々な工夫が詰め込まれます。共通レイアウトとして何度も目にする場所だからこそ、整っていて、押しやすく、迷わない作りを意識しましょう。