モバイル対応レスポンシブWordPressメニューの作成方法

ウェブサイトのトラフィックの半数以上はモバイルデバイスから来ています。ナビゲーションメニューがスマートフォンやタブレットでうまく機能しない場合、多くの読者がサイト内を移動するのに苦労する可能性があります。

WordPressサイト構築における長年の経験から、サイトをモバイル対応にすることの重要性を理解しています。WPBeginnerでは、常にこれを優先し、どのデバイスでも簡単に操作できるサイトを確保しています。

実際、私たちは、スマートフォンやタブレットでのユーザーエクスペリエンスを向上させ、ごちゃごちゃした感じなく、小さな画面にぴったり収まるモバイル対応メニューを設計しました。

このガイドでは、モバイル対応のレスポンシブWordPressメニューを簡単に作成する方法を説明します。

モバイル対応のレスポンシブWordPressメニューを作成する理由

適切に設計されたナビゲーションメニューは、訪問者がウェブサイト内を移動するのに役立ちます。ただし、メニューがデスクトップコンピュータで見栄えが良いからといって、モバイル画面やタブレットでも自動的に見栄えが良くなるとは限りません。

モバイルユーザーは、インターネットトラフィック全体の約58%を占めています。そのため、メニューがモバイルデバイスで見栄えが悪かったり、正しく機能しなかったりすると、ユーザーエクスペリエンスの悪さから読者の半数を失うリスクがあります。

これにより、メールリストの拡大、販売促進、ビジネスの成長といった重要な目標の達成が困難になります。

それでは、スマートフォンやタブレットで美しく表示される、モバイル対応のレスポンシブメニューを作成する方法を見ていきましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

方法1：モバイル対応のレスポンシブスライドパネルメニューを作成する

レスポンシブスライドパネルとは、訪問者がトグルをタップまたはクリックすると画面にスライドして表示されるナビゲーションメニューのことです。

このように、メニューは常に簡単にアクセスできますが、デフォルトでは画面スペースを占有しません。

これは、スマートフォンやタブレットはデスクトップコンピューターと比較して画面がはるかに小さいため、特に重要です。

メニューが常に展開されていると、モバイルユーザーがデバイスのタッチスクリーンを使用して誤ってリンクをトリガーする可能性があります。そのため、スライドパネルはモバイル対応メニューに適した選択肢となります。

モバイル対応のスライドパネルを追加する最も簡単な方法は、Responsive Menuを使用することです。

まず、Responsive Menuプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

有効化したら、以前に作成したWordPressメニューをカスタマイズするためにプラグインを使用できます。新しいメニューを作成する必要がある場合は、WordPressでナビゲーションメニューを追加する方法に関する初心者向けガイドを参照してください。

一方、WordPressテーマにすでに組み込みのモバイルメニューがある場合は、それを非表示にするためにそのメニューのCSSクラスを知る必要があります。

この手順をスキップすると、モバイルユーザーはウェブサイト上で2つのメニューが重なって表示されます。手順については、WordPressでモバイルメニューを非表示にする方法に関するガイドを参照してください。

これが完了したら、WordPress管理画面のサイドバーにある「レスポンシブメニュー » メニュー」ページに移動し、「新しいメニューを作成」ボタンをクリックします。

ここで、メニューに使用できるいくつかの異なるモバイル対応テーマが表示されます。

画像では「デフォルトテーマ」を使用していますが、お好みのテーマを使用できます。決定したら、「次へ」をクリックします。

ここでメニューの名前を入力できます。これは参照用なので、好きな名前を付けられます。

これが完了したら、「WordPressメニューをリンク」をクリックし、使用したいメニューを選択します。

前述のとおり、テーマにすでに組み込みのモバイルメニューがある場合は、そのCSSクラスを「テーマメニューを非表示」フィールドに追加する必要があります。

プレミアムプラグインにアップグレードすると、いくつかの追加設定が利用できるようになります。たとえば、Proユーザーは特定のページやデバイスでメニューを非表示にできます。

メニューの設定が完了したら、「メニューを作成」をクリックします。

画面の右側にWordPressウェブサイトのプレビューが表示され、左側にいくつかの設定が表示されます。

モバイルでサイトがどのように表示されるかを確認するには、画面左下にあるモバイルまたはタブレットのアイコンのいずれかをクリックします。

モバイルデバイスでのメニューの表示方法や動作をカスタマイズするには、「モバイルメニュー」を選択します。

次に、「コンテナ」をクリックします。

ここには、さまざまな設定がたくさんあります。

変更を加えると、ライブプレビューが自動的に更新されることがよくあります。これを念頭に置いて、モバイルメニューがどのように表示されるかを確認できるようにメニューを展開することをお勧めします。これを行うには、メニューのトグルボタンをクリックするだけです。

デフォルトでは、プラグインはタイトルと「コンテンツを追加…」というテキストを追加します。

これを独自のメッセージに置き換えたり、テキストを完全に削除したりすることもできます。タイトルを編集するには、「タイトル」セクションをクリックして展開します。

タイトルテキスト」フィールドに、独自のメッセージを入力できるようになりました。

タイトルのリンクを追加したり、アイコンフォントや画像を追加したりすることもできます。

タイトルの見た目をカスタマイズするには、「スタイル」タブをクリックします。

ここで、背景色、テキストの色、フォントサイズなどを変更できます。

タイトルテキストを表示したくない場合は、「タイトル」の横にあるトグルをクリックして無効にします。

タイトルが必須でない場合は、削除することでモバイルナビゲーションメニューのリンクやその他のコンテンツのスペースを増やすことができます。

「ここにコンテンツを追加…」というテキストを独自のメッセージに置き換えるには、「追加コンテンツ」エリアをクリックして展開します。

これで、左側のメニューの設定を使用して、独自のテキストを入力したり、テキストの色を変更したり、テキストの配置を変更したりできます。

テキストを完全に削除するには、トグルをクリックして無効にするだけです。

これにより、メニューの他のコンテンツのためのスペースをさらに増やすことができます。これは、画面が一般的に小さいスマートフォンやタブレットで特に役立ちます。

デフォルトでは、Responsive Menu はすべてのメニュー項目を単一のリストとして表示します。ただし、これらのリンクを複数の列で表示することもできます。

メニューラベルが短い場合、メニューが乱雑に見えることなく、より少ないスペースでより多くの項目を表示できるため、これはうまく機能します。

異なるカラムレイアウトを試すには、「メニュー」セクションをクリックして展開してください。

「メニューコンテナカラム」のドロップダウンを開き、使用したいカラム数を選択できるようになりました。

この時点で、「更新が必要です」というテキストが表示される場合があります。このメッセージが表示された場合は、クリックして新しい列設定でライブプレビューを更新してください。

デフォルトでは、プラグインはWordPressメニューに検索バーを追加します。これは、訪問者が興味深いコンテンツを見つけるのに役立ちますが、貴重な画面スペースを占有する可能性もあります。

必要に応じて、「検索」の横にあるトグルを無効にすることで、モバイルユーザー向けの検索バーを削除できます。

設定できる他の設定もたくさんあるため、他のオプションをじっくり確認することをお勧めします。ただし、これだけで十分にデザインされたモバイル対応メニューを作成できます。

ナビゲーションメニューの設定が完了したら、「更新」をクリックします。

これで、モバイルデバイスを使用してWordPressブログにアクセスすると、新しいメニューが機能していることがわかります。デスクトップからWordPressサイトのモバイルバージョンを表示することもできます。

方法2：モバイル対応のフルスクリーンレスポンシブメニューを作成する

別のオプションとして、全画面レスポンシブメニューを追加することもできます。これは、さまざまな画面サイズに自動的に調整されるメニューであり、訪問者が使用するデバイスに関係なく、ナビゲーションメニューは常に適切に見えます。

メニューが利用可能なすべてのスペースを占有するため、スマートフォンの画面サイズが小さい場合でも、スマートフォンやタブレットでのナビゲーションが容易になります。

全画面メニューを作成する最も簡単な方法は、FullScreen Menuを使用することです。このプラグインを使用すると、モバイルデバイス専用の全画面メニューを作成したり、スマートフォン、タブレット、デスクトップコンピュータ全体で同じメニューを表示したりできるため、すべての訪問者が同じエクスペリエンスを得られます。

最初に行う必要があるのは、FullScreen Menuプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを確認してください。

有効化したら、WordPress メニューから Fullscreen Menu Options ページにアクセスし、次のチェックボックスにチェックを入れます。「Activate Animated Fullscreen Menu」です。

また、「Show the menu only for Admin users」ボックスにチェックを入れることをお勧めします。これにより、メニューを設定中に変更を確認できますが、公開するまで訪問者はモバイルメニューを見ることができません。

デフォルトでは、プラグインはすべてのデバイスでフルスクリーンメニューを表示します。スマートフォンとタブレットのみでフルスクリーンメニューを表示したい場合は、「Mobile only」の横にあるボックスにチェックを入れます。

その後、「Design / Appearance」タブをクリックして、メニューの外観を微調整できます。

ここで、フルスクリーンメニューの配色、フォント、アニメーション設定を選択できます。

これらの変更を行う際は、「Initial Background Menu」がメニューのトグルアイコンであることを意識してください。一方、「Opened Background Menu」は、展開されたフルスクリーンモバイルメニューの色です。

メニューの色を選択したら、「Menu Appearance」セクションまでスクロールします。ここで、メニューのフォントの色、フォントファミリー、フォントサイズを変更できます。

追加のフォントを読み込むと、WordPressサイトのパフォーマンスと速度に影響を与える可能性があることに注意してください。これは、デスクトップコンピュータと比較して処理能力が低いことが多いモバイルデバイスには常に良い選択とは限りません。一部の訪問者はモバイルインターネット接続が遅い場合もあり、サイトの読み込みがさらに遅くなります。

これが完了したら、「アニメーション設定」までスクロールします。

まず、訪問者がトグルアイコンをクリックしたときにメニューがどのように展開するかを選択できます。「アニメーションタイプ」ドロップダウンメニューを開き、リストから「上から下へ」や「左から右へ」などのオプションを選択するだけです。

メニューのレイアウトに満足したら、「メニューコンテンツ」タブをクリックしてコンテンツを追加します。

ここで、「メニューを選択」ドロップダウンを開き、フルスクリーンで表示したいメニューを選択してください。

まだナビゲーションメニューを作成していない場合は、WordPressにナビゲーションメニューを追加する方法に関するガイドを確認してください。

メニューに追加のコンテンツを表示したい場合は、「無料HTML /ショートコード」ボックスに追加できます。これはミニページエディタとして機能するため、テキストを入力したり、書式を変更したり、箇条書きや番号付きリストを追加したりできます。

また、プライバシーポリシーページへのリンクを追加するチェックボックスもあります。

次に、WordPressメニューにソーシャルメディアアイコンを追加することを検討してください。これらのアイコンは、フルスクリーンメニューの下部に横一列に表示されます。

これらのアイコンを追加するには、「ソーシャルアイコン1」ボックスをクリックして展開します。

これで、「Facebook」などのアイコンのタイトルを入力できます。

その後、「ソーシャルアイコン」の横にある矢印をクリックして、モバイル訪問者に表示したいアイコンを選択します。

最後に、「ソーシャルURL」フィールドに使用したいアドレスを入力します。

アイコンをさらに追加するには、「別のアイコンを追加」ボタンをクリックするだけです。

最後に、訪問者が探しているものを見つけやすくするために、WordPress検索バーを追加したい場合があります。これを行うには、「検索バーを追加」の横にあるチェックボックスをオンにするだけです。

デフォルトでは、プラグインは「何かを検索…」というメッセージを表示します。ただし、「検索入力プレースホルダー」フィールドに入力することで、独自のカスタムメッセージに置き換えることができます。

たとえば、WooCommerceストアを実行している場合は、「買い物を始める」や「商品を検索」などのテキストを使用したい場合があります。

メニューの設定に満足したら、「変更を保存」ボタンをクリックします。

これで、モバイルデバイスでウェブサイトにアクセスすると、フルスクリーンメニューが実際に動作しているのを確認できます。

WordPressテーマカスタマイザーを使用して、ウェブサイトのモバイルバージョンをプレビューすることもできます。

ボーナス：ランディングページにモバイル対応メニューを追加する方法

ランディングページまたは販売ページを作成している場合は、デスクトップと同じくらいモバイルデバイスでもデザインが見栄え良くしたいと思うでしょう。

それを念頭に置いて、SeedProdを使用してページを作成することをお勧めします。これは最高のWordPressページビルダーであり、300以上のプロがデザインしたテンプレートが付属しています。

SeedProdでデザインを作成した後、ページのメニューにモバイルレスポンシブメニューを追加できます。これはSeedProdの既製のナビゲーションメニューブロックを使用します。このブロックを使用すると、モバイルデバイスとデスクトップの両方に個別のメニューを作成できます。

このように、ユーザーのデバイスに応じて異なるレイアウトを使用したり、異なるリンクを表示したりすることができます。

詳細については、WordPressにカスタムナビゲーションメニューを追加する方法に関するガイドを参照してください。

ナビゲーションブロックをデザインに追加したら、「詳細設定」タブをクリックするだけです。

ここで、「デバイス表示」セクションをクリックして展開します。

その後、「デスクトップで非表示」トグルをクリックして有効にします。これで、このメニューはモバイルデバイスにのみ表示されるようになります。

左側のメニューの設定を使用して、リンクを追加したり、メニューのレイアウトを変更したりできるようになりました。

この記事が、モバイル対応のレスポンシブWordPressメニューの作成方法を学ぶのに役立ったことを願っています。また、初心者向けのWordPressにフォントリサイザーを追加する方法に関するガイドや、モバイルフレンドリーなWordPressサイトを作成する方法に関する専門家のアドバイスも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。