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

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

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

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

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

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

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

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

これは、メールリストの増加、販売促進、ビジネスの成長といった主要な目標の達成を困難にします。

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

• 方法1：モバイル対応のレスポンシブスライドパネルメニューを作成する
• 方法2：モバイル対応のフルスクリーンレスポンシブメニューを作成する
• ボーナス：ランディングページにモバイル対応メニューを追加する方法

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

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

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

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

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

モバイル対応のスライドパネルを追加する最も簡単な方法は、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でもフォローできます。