スマホサイトのハンバーガーメニュー、本当に使いやすい？
スマホサイトでよく使われるハンバーガーメニュー。見た目スッキリで便利そうに見えますが、実は以下の様なマイナスな一面もあります。
- ●
- ●
- ●
また、スクロールしても画面に固定されるタイプは本文が隠れてストレスに感じる事も。
使いやすくするためには、メニュー内容を分かりやすく表示したり、クリック数を減らす工夫が必要です。
ユーザビリティを意識したグローバルメニュー構成
回遊率向上のために視認性の高いグローバルナビの設置は重要ですが、スマホ向けに作成する際は以下の点に注意が必要と考えます。
- ●
- ●
- ●
- ●
特にECサイトや企業サイトほど多くの情報量がない個人ブログ・サイトでは、モーダルウィンドウは離脱率を上げる原因にもなりかねません。
これらの留意点を踏まえ、今回はハンバーガーメニューに頼らず自力で設置、デザイン・レイアウトの変更も割と容易な設定方法を解説します（WordPressを例に解説）。
シンプルかつデザインの自由度が高いグローバルメニューの特徴
今回作成するスマホ向けグローバルメニューは以下の様な特長があります。- ●『index.php』『page.php』『single.php』などに設置すれば自動で全ページに適用される
- ●『』と併用する事で、見た目にもスマート。管理もしやすくなる
- ● メニュー設置の場所・内容の自由度が上がる
- ● PHPファイルを触りたくない方は、記事作成ページに直接設置も可能
- ● スクロール時も追随してこないので、ユーザーのストレスも軽減
- ● サイトの全体構成も容易に把握できる
- ● PC表示（601px以上）の場合は非表示。現在お使いのグローバルナビがそのまま表示される
- ● ハンバーガーメニューも非表示に設定
作成するサンプルは、デザイン的には決して洗練されたものではありません。
ただし初歩的なHTML+CSSの技術でデザインの変更ができる点や、アイデア次第で様々なスタイルにカスタムできるという点においては有益なものだと考えています。
紹介するスマホ向けグローバルナビのサンプルは以下のとおり。例として、2番目2×3配列のナビを作成していきます。
気になる方は、以下のトピックをご覧ください。
まずはシンプルな表スタイルのナビを作成
まずはリストタグを使用してシンプルな表を作成します。
MEMO
グローバルメニューにはリストタグの使用がベスト？
グローバルナビを作成する際、形成が容易な<table>タグなどを使いたくなる事もあるでしょう。ですがナビにはリストタグを使うのが一般的。
グローバルナビゲーションのリンク構造にリストタグを使う理由は、主に以下の3つが挙げられます。
- 1.
- リストタグは各項目を明確に区別し、階層構造を表現することができます。これはユーザーがナビゲーションメニューを理解しやすくするだけでなく、検索エンジンがページの内容を正確に把握するのにも役立ちます。
- 2.
- リストタグはスクリーンリーダーなどの支援技術で認識されやすく、視覚障碍者を含むすべてのユーザーにとって使いやすくする役割を果たします。
- 3.
- リストタグを使うと、複雑なナビゲーション構造をシンプルで分かりやすいコードで表現することができます。これはコードの保守性を向上させ、開発・メンテナンス作業を効率化します。
これらの要件は、少なからずSEOにも影響を及ぼす可能性があります。
作成の際、以下の点に注意します。
- ●
- グローバルメニューを<nav>タグで囲むことで、クローラーに『』と伝えることができます。
グローバルメニューは通常の内部リンクとは異なり、サイトの主要なページへのリンクを網羅、ユーザーのサイト内移動を促進する役割。ユーザーの回遊率向上だけでなく、SEO対策という観点からも重要です。 - ●
- 長いタイトルは視認性に欠けます。また、折り返してしまうと表が崩れる原因に。
- ●
- メニューに入れる項目（ボタン）が多すぎると、メイン画面が見づらくなってしまいます。
メイン画面までにスクロールが必要となるぐらい多い場合、項目を減らすかハンバーガーメニューを使った方が無難。項目数の目安は2～6程度がベストです。
これらの事を踏まえ、以下に2×3配列のサンプルコードを記載します。
なお、例としてですが、この数値はメディアクエリにて自由に変更できます。
※メディアクエリに関しては、以下の記事でも解説しています。参考にどうぞ。
画像を左右交互に配置してメリハリのあるページづくりに ブログやコーポレートサイトを作成時、画像を左右交互に並べたいと思ったことはありませんか？特にアパレルサイトなどでは、商品画像を交互に並べることで見やすくスタイリッシ …
※この段階では、設置場所は未指定です。テキストエディタないし記事ページにて作成して下さい。ナビへの設置手順については後述します。
CSSコード
<style>
.smart-phone {
display: none; /* PC画面ではスマホ用グローバルナビを表示しない */
}
@media only screen and (max-width : 600px) { /* 画面幅：600px以下の場合、以下のCSSに切り替わる （メディアクエリ） */
.smart-phone {
display: flex; /* flexboxを作成 */
}
.smart-nav-cont {
width: 90%; /* スマホ画面の90%幅に広げる */
margin: -0.5em auto 0; /* 表示内容全体の位置 */
}
.smart-nav-cont ul {
flex-wrap: wrap; /* 表示物がはみ出す場合、折り返して表示 */
padding: 0; /* リストマーク非表示で空いた余白を無くす */
justify-content: center; /* flexbox内での中央配置プロパティ */
display: inline-flex; /* flexbox内で指定して横並び */
}
.smart-nav-cont li {
list-style: none; /* リストマークを非表示 */
width: 46%; /* ナビボタンの横幅 */
border: 1px solid #9D9D9D; /* ナビボタン周りのボーダー */
box-shadow: 4px 4px 4px #C4C4C4; /* ナビボタンの影 */
margin: 0.2em; /* ナビボタン同士の距離 */
padding: 0.4em 0; /* ナビボタン内の余白 */
font-size: 0.8em; /* フォントサイズ */
text-align: center; /* ナビボタンを中央に配置 */
}
.link {
text-decoration: none; /* リンク文字の下線を非表示 */
color: #7B807E; /* リンクテキストの文字色 */
}
} /* メディアクエリの閉じカッコを忘れずに！ */
</style>HTMLコード
<nav> <!--- <nav>タグでナビゲーションメニューであることを宣言 --->
<div class="smart-phone">
<div class="smart-nav-cont">
<ul>
<li><a href="リンク先URL_01" class="link">サンプルメニュー_01</a></li>
<li><a href="リンク先URL_02" class="link">サンプルメニュー_02</a></li>
<li><a href="リンク先URL_03" class="link">サンプルメニュー_03</a></li>
<li><a href="リンク先URL_04" class="link">サンプルメニュー_04</a></li>
<li><a href="リンク先URL_05" class="link">サンプルメニュー_05</a></li>
<li><a href="リンク先URL_06" class="link">サンプルメニュー_06</a></li>
</ul>
</div>
</div>
</nav>以下の様に表示されればOKです。
※グローバルメニューへは未設置の状態です。現段階ではブラウザ上での表示確認のみになります。
ナビコードを設置する前に
前記で入力したナビコードは、以下の3つのファイルに好きな場所に配置することで、投稿記事や固定ページを編集せずに自動的にナビを表示できます。
- ● index.php：メインページのテーマファイル
- ● single.php：投稿ページのテーマファイル
- ● page.php：固定ページのテーマファイル
しかし、・・といった場合もあります。
そこで次より『カスタムフィールドテンプレート』プラグインを使って、コードをまとめやすくする方法を解説します。併せてコードを設置する場所を調べる方法も紹介しますので、しばらくお付き合いを。
この方法を使えばPHPファイルを編集する必要がほとんどなく、簡単にナビを設置できます。
カスタムフィールドテンプレートにコードを入力
コード入力の作業には、カスタムフィールドの操作が軽快に行えるプラグイン『カスタムフィールドテンプレート』を使用します。
インストールが未だの方は、以下のリンクを参照して先にインストール・初期設定を済ませて下さい。
WordPressで表作成をもっと簡単に！カスタムフィールドを活用しよう WordPressで表を頻繁に作成する方にとって、決まったフォーマットの表を簡単に作成できたら作業効率がグッと上がりますよね。 従来の方法では …
※今回は『カスタムフィールドテンプレートオプション』は使いません。『【cft】and【cftsearch】Shortcode Format』のみ使用するのでご留意下さい。
まずは前出の全コードを、そのまま【cft】and【cftsearch】Shortcode Formatに入力します。
この時CSSとHTML両方を同じ枠内に入力。上部『FORMAT #○○』 の番号を覚えておきましょう。
今回は例として『FORMAT #2』に入力します。
コードの入力が完了したら、ツール下部の『オプションを更新する』ボタンをクリックしてこちらは完了。続いて、作成したコードをテーマファイルに埋め込む場所を特定する工程に移ります。
テーマファイルに埋め込む場所を特定・設定する
グローバルナビを埋め込む場所は、・・の各上部を想定しています。その場所を特定できている方もいるかと思いますが、今回は配置場所を探すところから解説します。
Google Chromeの『検証』ツールを使う
まず、Google Chromeブラウザを使ってグローバルナビを埋め込む予定のページを開き、ブラウザ上の何もない場所でマウスを右クリック。
コンテキストメニュー下部に『検証』という項目がありますのでそちらを選択します。
するとサイト右部にサイトのHTML+CSS・Java Scriptコードが出現。
その後は、以下の手順でナビを配置する場所を探します。
- 1.
- 検証ツールでHTMLコードやCSSコードを表示している状態で、目的の要素と思われる部分にマウスを乗せてみましょう。プレビュー機能により、実際にWebページ上でどの部分に該当するのかがハイライト表示されます（プレビュー該当箇所の色が変わる）。
- 2.
- プレビュー機能で該当する要素がハイライトされたら、その周辺のコードを探します。コード行番号や要素名などを参考に、大体の場所を特定しましょう。
- 3.
- 大体の場所が特定できたら、該当する要素のリストマークをクリックします。リストマークは、コード行の左側にある三角形『▶』のアイコンです。
- 4.
- リストを開くと、子要素や関連するコードが詳細に表示されます。目的のコードを見つけるまで、リストを展開しながら探していきましょう。
今回は<div class="keni-main_inner">というボックスの下にトップ画像が配置されている事が分かりました。この<div>のすぐ下（画像の上）にグローバルナビを埋め込みます。
※筆者は『賢威8』テンプレートを使用してるのでこのクラス名が充てられています。各々使用しているテーマでクラス名は異なります。
グローバルナビの設置場所をメモし、テーマファイルに埋め込む工程に移ります。
テーマファイルを確認する
※ここから先はPHPファイルを上書きする作業が含まれます。難しいものではありませんが、念のため作業前にサイトのバックアップを行って下さい。バックアップについては以下の記事で解説しています。
ワードプレスの保守管理は基本的に自分で行う WordPressは、ブログやWebサイトを簡単に作成・運用できるCMS（コンテンツ管理システム）です。しかし一方でセキュリティの脆弱性高いシステムとも言われ、サーバー障害な …
まずは左側の『』⇒『』をクリック。開いたページの右下にある『index.php』『page.php』『single.php』を確認します。
それぞれのページには、ほぼ同じ位置に<div class="keni-main_inner">が記載されています。
この<div class="keni-main_inner">の直下にグローバルナビのコードを埋め込みます。
テーマファイルにグローバルナビのコードを埋め込む
ここから『index.php』『page.php』『single.php』に、先ほど作成したグローバルナビを埋め込む作業に入ります。
コードの埋め込みにはショートコードを使います。ショートコードとは、複雑なコードのまとまりを短い単語一つで呼び出せる機能。使用には半角の角カッコ（ [ ] ）を用います。
例えば今回の場合カスタムフィールドテンプレートにて作成した『FORMAT #2』を使いますので、ショートコードは『【cft format=2】』です。
※『cft format=2』を囲むカッコは、すみつきカッコ『【 】』では無く半角大カッコ『 [ ] 』です。上記テキストをコピペせずに手入力して下さい。
ショートコード内の名称は、使うプラグインによって変わりますのでご注意下さい。
ショートコードは『記事編集ページ』や『固定ページ』の記事内で使用する分には、そのまま入力するだけで機能します。しかし今回はテーマファイル（PHP）に入力するので少し形式が変わります。
今回は『index.php』『page.php』『single.php』の所定箇所に以下の様に入力します。
ここまでの作業で、すでにグローバルナビが表示されているはずです。
PC上で動作確認する際は、ブラウザ幅を動かし600px以下でグローバルナビが表示されていればOK。
うまく動作しない場合、PHPファイル編集後に『ファイルを更新』ボタンの押下を忘れている場合もあるのでご確認を。
次に、不要となったハンバーガーメニューを非表示にする工程を解説します。
ハンバーガーメニューを非表示にする
グローバルナビを設置する事により不要となったハンバーガーメニューを非表示にします。
ここでの工程は、先述『』の章で解説した方法とほぼ同様です。以下に手順を解説します。
- 1.
- 2.
- 3.
ハンバーガーメニューには、CSSのクラス名が充てられているはずです。クラス名に『display: none;』プロパティを加え、ナビコードのメディアクエリ内に追記します。
.ハンバーガーメニューのクラス名 {
display: none;
}
以下の様にハンバーガーメニューが消えていれば完了です。
後で再表示させたい場合、追記したCSSコードを削除すればいつでも戻ります。
お疲れさまでした！
グローバルナビを自由な発想でカスタマイズしよう
ハンバーガーメニュー以外にも、ユーザーの回遊率を上げる方法はたくさんあります。今回は例としてシンプルな構成のグローバルナビ設置方法を解説しました。
この方法を応用すれば、一般的なナビ設置方法より柔軟性が高いカスタマイズが可能になります。
- ●
- ●
- ●
- ●
- ●
他にも様々な施策を試みることができます。
今回作成したナビは非常にシンプルなものでしたが、表現方法は非常に多彩です。
ご自身でも色々試してみて回遊率を分析してみて下さい。
自由な発想でユーザーにとって使いやすい、そして回遊率向上に繋がるグローバルナビを作っていきましょう。
