Web制作

Webサイトのヘッダーをどう設計した？Noah Labの制作で考えたこと

PR

当サイトではアフィリエイト広告を利用しています。

Webサイトのヘッダーをどう設計した？Noah Labの制作で考えたことのアイキャッチ

はじめに

Webサイトを作り始めたころ、私はヘッダーを「ロゴとメニューを並べれば完成するもの」だと思っていました。

しかし、実際にNoah Labを制作してみると、ロゴをどこに置くか、検索機能をどこに配置するか、PCではナビゲーションをどう見せるか、スマートフォンではどうするかなど、考えることがたくさんあることに気づきました。

さらに、見た目だけではなく、スクロールしたときの動きや、ハンバーガーメニューの開閉、メニューを開いているときの表示まで考える必要がありました。

今回は、実際に制作しているNoah Labのヘッダーを例にしながら、どのように考えて設計したのかを紹介します。

また、記事の後半では、今回紹介する考え方を使ったヘッダーを、HTML・CSS・JavaScriptのコードをコピペするだけで作れるデモも用意しています。

Webサイトのヘッダーとは？

ヘッダーは、Webサイトの上部に配置される部分です。

一般的には、ロゴやサイト名、ナビゲーション、検索、メニューなどが入ります。

ただし、何を入れるかはWebサイトの目的によって変わります。

例えば、Noah LabはWeb制作について発信するブログなので、読者がサイト内を移動したり、記事を探したりしやすいことを意識しています。

そのため、Noah Labのヘッダーには主に次のような役割を持たせています。

要素役割
ロゴサイト名を伝える・Homeへ戻る
検索記事を探す
ナビゲーション主要ページへ移動する
ハンバーガーメニュースマートフォンでナビゲーションを表示する

Noah Labのヘッダーを見てみる

ここからは、実際に制作しているNoah Labのヘッダーを例にして説明します。

Noah Labでは、PCとスマートフォンでヘッダーの見せ方を変えています。

PCではロゴ・検索・ナビゲーションを配置

PCでは画面の横幅に余裕があるため、ロゴを左側に置き、検索を中央付近、ナビゲーションを右側に配置しています。

このようにすることで、サイト名を確認しながら検索やページ移動をすぐに行えるようにしています。

スマートフォンではハンバーガーメニューに変更

スマートフォンではPCほど横幅を使えないため、ナビゲーションをそのまま並べるのではなく、ハンバーガーメニューの中にまとめています。

そのため、スマートフォンではロゴ・検索・ハンバーガーメニューという、よりシンプルな構成になっています。

Noah Labのヘッダーで考えたこと

ヘッダーを作るときは、最初に「どんな見た目にしたいか」だけを考えるのではなく、「何のために置くのか」を考えるようにしました。

ロゴはサイトの名前を伝える

ロゴの大きな役割は、今どのWebサイトを見ているのかを分かりやすくすることです。

Noah Labでは、サイト名をヘッダーの左側に配置しています。

また、ロゴをクリックすればHomeへ戻れるようにしています。

そのため、ロゴは単なる飾りではなく、サイト内を移動するためのリンクとしても機能しています。

検索は記事を探すために使う

Noah Labはブログなので、記事数が増えるほど「読みたい記事を探すための機能」が重要になります。

そこで、ヘッダーから検索ページへ移動できるようにしています。

検索アイコンをクリックしたら検索ページへ移動するというように、アイコンの見た目だけではなく、その先のページまで考えて設計しました。

PCではナビゲーションを直接表示する

PCでは横幅が広いため、主要なページへのリンクを直接表示しています。

必要なページへすぐ移動できるため、メニューを毎回開く必要がありません。

スマートフォンではハンバーガーメニューにまとめる

スマートフォンでは、PCと同じ数のリンクを横に並べると窮屈になってしまいます。

そこで、ナビゲーションをハンバーガーメニューの中にまとめています。

これによって、ヘッダー自体をシンプルに保ちながら、必要なページへの移動もできるようにしています。

まずは基本のヘッダーを作ってみる

ここからは、Noah Labの考え方を参考にしたシンプルなヘッダーを作ってみます。

まずは、ロゴとナビゲーションだけを使った基本形です。

HTML

<header class="demo-header-basic">
    <div class="demo-header-basic-inner">

        <a href="#" class="demo-header-basic-logo">
            My Website
        </a>

        <nav
            class="demo-header-basic-nav"
            aria-label="メインナビゲーション"
        >
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
        </nav>

    </div>
</header>

CSS

.demo-header-basic,
.demo-header-basic * {
    box-sizing: border-box !important;
}

.demo-header-basic {
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E8E1D8 !important;
}

.demo-header-basic-inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    padding: 16px 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

.demo-header-basic-logo {
    color: #5E5A57 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.demo-header-basic-nav {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.demo-header-basic-nav a {
    color: #5E5A57 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.demo-header-basic-nav a:hover {
    opacity: 0.7 !important;
}

この段階では、ヘッダーの基本的な構造だけを作っています。

ロゴとナビゲーションをそれぞれの要素として分け、その中にあるリンクをFlexboxで横並びにしています。

レスポンシブ対応してみる

次に、スマートフォンでも使いやすいように変更します。

ここでは、PCではナビゲーションを表示し、スマートフォンではナビゲーションを非表示にしてハンバーガーボタンを表示します。

HTML

<header class="demo-header-responsive">

    <div class="demo-header-responsive-inner">

        <a href="#" class="demo-header-responsive-logo">
            My Website
        </a>

        <nav
            class="demo-header-responsive-nav"
            aria-label="メインナビゲーション"
        >
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
        </nav>

        <button
            type="button"
            class="demo-header-responsive-menu"
            aria-label="メニューを開く"
            aria-expanded="false"
        >
            <span></span>
            <span></span>
            <span></span>
        </button>

    </div>

</header>

CSS

.demo-header-responsive,
.demo-header-responsive * {
    box-sizing: border-box !important;
}

.demo-header-responsive {
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E8E1D8 !important;
}

.demo-header-responsive-inner {
    width: 100% !important;
    max-width: 1200px !important;
    min-height: 64px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

.demo-header-responsive-logo {
    color: #5E5A57 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.demo-header-responsive-nav {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.demo-header-responsive-nav a {
    color: #5E5A57 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.demo-header-responsive-nav a:hover {
    opacity: 0.7 !important;
}

.demo-header-responsive-menu {
    display: none !important;

    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    cursor: pointer !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.demo-header-responsive-menu span {
    display: block !important;

    width: 22px !important;
    height: 2px !important;

    background-color: #5E5A57 !important;
}

@media (max-width: 767px) {

    .demo-header-responsive-nav {
        display: none !important;
    }

    .demo-header-responsive-menu {
        display: flex !important;
    }

}

@mediaを使うことで、画面幅が767px以下になったときに表示を切り替えています。

このように、PCではナビゲーション、スマートフォンではハンバーガーボタンというように、同じヘッダーでも画面サイズに合わせて構成を変えられます。

ハンバーガーメニューを実際に動かしてみる

ここからは、ハンバーガーボタンをクリックするとメニューが開き、閉じるボタンをクリックすると元に戻るデモを作ります。

単に三本線を表示するだけではなく、メニューを開いた状態まで作ってみます。

HTML

<header class="demo-header-menu">

    <div class="demo-header-menu-bar">

        <a href="#" class="demo-header-menu-logo">
            My Website
        </a>

        <button
            type="button"
            class="demo-header-menu-button"
            aria-label="メニューを開く"
            aria-expanded="false"
        >
            <span></span>
            <span></span>
            <span></span>
        </button>

    </div>

    <div class="demo-header-menu-overlay">

        <button
            type="button"
            class="demo-header-menu-close"
            aria-label="メニューを閉じる"
        >
            ×
        </button>

        <nav
            class="demo-header-menu-nav"
            aria-label="メインナビゲーション"
        >
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
        </nav>

    </div>

</header>

CSS

.demo-header-menu,
.demo-header-menu * {
    box-sizing: border-box !important;
}

.demo-header-menu {
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E8E1D8 !important;
}

.demo-header-menu-bar {
    width: 100% !important;
    max-width: 1200px !important;
    min-height: 64px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.demo-header-menu-logo {
    color: #5E5A57 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.demo-header-menu-button {
    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    cursor: pointer !important;
}

.demo-header-menu-button span {
    display: block !important;

    width: 22px !important;
    height: 2px !important;

    background-color: #5E5A57 !important;
}

.demo-header-menu-overlay {
    position: fixed !important;
    inset: 0 !important;

    z-index: 9999 !important;

    padding: 24px !important;

    background-color: #FFFDF8 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease !important;
}

.demo-header-menu.is-open .demo-header-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.demo-header-menu-close {
    display: block !important;

    width: 44px !important;
    height: 44px !important;

    margin-left: auto !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #5E5A57 !important;

    font-size: 36px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.demo-header-menu-nav {
    margin-top: 60px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 28px !important;
}

.demo-header-menu-nav a {
    color: #5E5A57 !important;
    font-size: 20px !important;
    text-decoration: none !important;
}

.demo-header-menu-nav a:hover {
    opacity: 0.7 !important;
}

@media (min-width: 768px) {

    .demo-header-menu-button {
        display: none !important;
    }

    .demo-header-menu-overlay {
        display: none !important;
    }

}

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    const header = document.querySelector('.demo-header-menu');

    if (!header) {
        return;
    }

    const openButton = header.querySelector('.demo-header-menu-button');
    const closeButton = header.querySelector('.demo-header-menu-close');

    if (!openButton || !closeButton) {
        return;
    }

    openButton.addEventListener('click', function () {

        header.classList.add('is-open');

        openButton.setAttribute('aria-expanded', 'true');
        openButton.setAttribute('aria-label', 'メニューを閉じる');

    });

    closeButton.addEventListener('click', function () {

        header.classList.remove('is-open');

        openButton.setAttribute('aria-expanded', 'false');
        openButton.setAttribute('aria-label', 'メニューを開く');

    });

});

このJavaScriptでは、ハンバーガーボタンをクリックしたときにis-openというクラスを追加しています。

そして、そのクラスが付いているときだけメニューを表示するようにCSSで指定しています。

閉じるボタンをクリックするとis-openを削除し、メニューを閉じます。

stickyヘッダーにしてみる

さらに、ページをスクロールしてもヘッダーを画面上部に残したい場合は、position: sticky;を使えます。

CSS

.demo-header-menu {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

これによって、ページをスクロールしてもヘッダーが上部に残るようになります。

ブログでは、記事を読みながら検索やメニューを使いたい場合もあるため、ヘッダーを固定しておくと操作しやすくなります。

Noah Labと今回のデモを比べてみる

ここまで作ったデモとNoah Labを比べてみると、サイトのデザインは違っていても、基本的な考え方には共通する部分があります。

項目Noah Lab今回のデモ
ロゴ左側左側
検索ヘッダーから検索ページへ必要に応じて追加可能
PCナビゲーション表示表示
スマホハンバーガーメニューハンバーガーメニュー
メニュー開閉JavaScriptで制御JavaScriptで制御
ヘッダー固定stickystickyに変更可能

このように、Webサイトの色やロゴが違っていても、ヘッダーの基本的な設計方法は応用できます。

自分のサイト用に変更する方法

今回のデモは、そのまま使うだけでなく、自分のサイトに合わせて変更することもできます。

サイト名を変更する

HTMLの「My Website」を、自分のサイト名に変更します。

<a href="#" class="demo-header-responsive-logo">
    My Website
</a>

例えば、

<a href="/" class="demo-header-responsive-logo">
    Noah Lab
</a>

のように変更できます。

ナビゲーションを変更する

自分のサイトにあるページに合わせて、リンク名とURLを変更します。

<a href="/articles/">Articles</a>
<a href="/profile/">Profile</a>
<a href="/contact/">Contact</a>

ページのURLは、自分のWordPressサイトのURLに合わせて変更してください。

色を変更する

CSSの色を変更すれば、サイト全体の雰囲気に合わせることができます。

background-color: #FFFDF8;
color: #5E5A57;
border-color: #E8E1D8;

色を変更するだけでも、同じレイアウトから大きく印象を変えられます。

ブレークポイントを変更する

今回のデモでは767px以下をスマートフォン向けとして扱っています。

@media (max-width: 767px) {
    ...
}

ただし、すべてのWebサイトで同じ数値にする必要はありません。

自分のサイトでナビゲーションが狭くなったり、レイアウトが崩れ始めたりする位置を確認しながら決めることが大切です。

実際にNoah Labのヘッダーを作って困ったこと

ハンバーガーメニューを開いたあと、×が見えなくなった

ハンバーガーメニューを制作しているとき、メニューを開いたあとに閉じるための「×」が見えなくなってしまったことがありました。

最初は単純にボタンのコードだけを確認していましたが、実際にはメニューの重なり順や表示位置なども関係していました。

そこで、positionやz-index、表示状態などを一つずつ確認しました。

この経験から、画面上の要素が見えないときは、その要素だけではなく、他の要素との重なり方まで確認する必要があると分かりました。

メニューを開いたときに後ろのページが気になった

ハンバーガーメニューを開いたとき、メニューだけでなく、後ろ側にあるページの内容まで見えてしまうと、どこを操作しているのか分かりにくくなることがあります。

そこで、メニューを画面全体に表示し、開いているときはメニューに集中できるような構成にしました。

このように、ヘッダーは「開けば完成」ではなく、開いた状態まで考える必要があります。

PCではちょうどよくてもスマートフォンでは窮屈になった

PCではロゴ・検索・ナビゲーションを横に並べても十分なスペースがあります。

しかし、スマートフォンでは同じ構成にすると、それぞれの幅が狭くなってしまいます。

そのため、スマートフォンではナビゲーションをハンバーガーメニューに変更しました。

検索アイコンの見た目だけでは意味がない

ヘッダーに検索アイコンを置くだけではなく、クリックした先に検索ページが必要です。

そのため、ヘッダーを作るときは、見た目だけではなく、クリックした後にどこへ移動するのかまで考える必要がありました。

ヘッダーを作るときのチェック項目

ヘッダーを制作したら、見た目だけではなく、実際の操作も確認します。

  • ロゴが見やすいか
  • ロゴをクリックしてHomeへ戻れるか
  • 検索ボタンが分かりやすいか
  • 検索リンクが正しいか
  • PCのナビゲーションが操作できるか
  • スマートフォンのハンバーガーメニューが開くか
  • ×ボタンでメニューを閉じられるか
  • メニューを開いたときに表示が崩れないか
  • スクロールしてもヘッダーが正常に表示されるか
  • ヘッダーが本文に重なっていないか
  • スマートフォンでも使いやすいか
  • 横スクロールが発生していないか

まとめ

Webサイトのヘッダーは、ロゴとメニューを並べるだけではありません。

どんな情報を置くのか、それぞれにどんな役割を持たせるのか、PCではどう表示するのか、スマートフォンではどうするのかまで考えて設計する必要があります。

Noah Labでは、ロゴ・検索・ナビゲーション・ハンバーガーメニューをそれぞれの役割に分け、PCとスマートフォンで表示方法を変えています。

また、stickyでヘッダーを固定したり、ハンバーガーメニューをJavaScriptで開閉したりすることで、見た目だけではなく実際の操作も考えながら制作しました。

私自身、最初からすべてをうまく設計できたわけではありません。作ってみて初めて気づいた問題も多く、修正しながらヘッダーの役割やUIについて少しずつ理解していきました。

これからWeb制作を始める方は、「何を置くか」だけではなく、「なぜ置くのか」「スマートフォンではどうするのか」「クリックしたらどうなるのか」まで考えながらヘッダーを作ってみると、Webサイトの設計について理解しやすくなると思います。

Recommended

おすすめサービス

この記事に関連するおすすめのサービスを紹介しています。

Related

関連記事