【ワードプレス×ライトニング】最適なモバイルメニュー表示について考えた

LINEで送る
Pocket

タイトル

こんにちは! るーしーです。

今回も引き続き「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。

まとめという事で「最適なモバイルメニュー」を考えました。

ここで言う最適とは「モバイルメニューの中だけでコンテンツを網羅できるか」と私は考えます。

3回連続でモバイルのナビについて触れる事になりますが今回で完結です。

最後までどうぞお付き合いくださいますようお願いします。

【参考】
⇒第一回:【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

⇒第二回:【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

スポンサーリンク

 

最適なモバイルメニュー表示とは

最適

最適の定義は考え方次第で変わると思います。

冒頭でも触れましたが今回は

モバイルメニューの中だけでコンテンツを網羅できている

という事を最適と定義します。

「いや、それ最適じゃないし」

という突っ込みはご容赦ください。

モバイルメニューでコンテンツを網羅する方法

手段

ここが一番重要だと思います。

理想は

「ワンクリックで行きたいページに行ける事」

ですがそんなコテコテにメニューを盛りまくったら狭い上に操作しづらいモバイルのメニューは破綻してしまいます。

山盛り

そこで試行錯誤した結果、

ヘッダーメニューとカテゴリーの二つを表示させる事で最も「最適」に近い状態になると判断しました。

実際PCサイトでもヘッダーメニューで固定ページを配置し、サイドバーでカテゴリーを表示する事は多いと思います。

PCのメニュー

こんな感じですね。

これをモバイルでもやります。

「え?メニューじゃなくてむしろTOPページで表示したいページがあるんだけど」

というあなた!!

3PRエリアでTOPページに表示させる事ができます。

そのため今回はモバイルメニューで3PRエリアは表示する必要がないと考えます。
3PRエリアについて詳しくはこちら

最適なモバイルメニュー構成

構成

構成はこうです。

1:モバイルナビ上部

・サイト内検索

サイト内検索

2:メインメニュー

・PCサイトヘッダーメニューと同じ

ヘッダーメニュー

3:モバイルナビ下部

・カテゴリー

カテゴリー

・SNS(FacebookかTwitter)

SNS

という感じですね。

PCサイトのヘッダーメニューとサイドバーのカテゴリーに、操作性を考えサイト内検索を追加。

更にSNSへの導線も用意する。

まとめるとこのような感じです。

最適なモバイルメニュー構成

・サイト内検索

・メインメニュー

・カテゴリー

・SNS(FacebookかTwitter)

次からは実際にモバイルメニュの設定手順を紹介していきます。

スポンサーリンク

モバイルメニュー設定

手順

SNSは今回Twitterを設定します。

前提

1:WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用

2:プラグイン「Lightning Advanced Unit」を使用

3:「VK Mobile Nav」の設定は完了している

まだの方はこちら
【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

4:プラグイン「Jetpack by WordPress.com」を使用している

Twitterページ表示を利用する場合必要

設定手順

・サイト内検索

第二回目の記事を参照

・メインメニュー

第一回目の記事を参照

・カテゴリーとTwitter

設定作業がほとんど同じなので同時に説明します。

1:WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック

外観

2:「ウィジェット」をクリック

ウィジェット選択

3:「モバイルナビ下部」をクリック

下部選択

4:表示をモバイルに切り替える

画面下のモバイルマークをクリック。

モバイル表示へ

するとモバイル表示に切り替わる。

切り替わった表示

5:メニューボタンをクリックしメニュー画面を表示する

メニューボタンをクリック。

メニューボタンクリック

するとメニューが表示される。

メニュー

6:「ウィジェットを追加」をクリック

ウィジェットを追加

7:「カテゴリー」をクリック

カテゴリー

するとカテゴリーがメニューに表示され各種設定が出来る。

・タイトル:「カテゴリー」などわかりやすいタイトルがいいだろう。
・投稿数を表示:チェックを入れる

ここはお好みで良いと思います。

変更点はリアルタイムで反映されるので操作しながら決めてもいいでしょう。

入力

画面右のモバイルメニューに設定した通りカテゴリーが表示されていますね。

8:「完了」をクリック

完了

9:「ウィジェットを追加」をクリック

ウィジェット追加

10:「Twitterタイムライン」をクリック

Twitterタイムライン

するとTwitterタイムラインがメニューに表示され各種設定が出来る。

Twitterユーザー名さえ入力すれば設定操作はリアルタイムで反映されるのでお好みで設定しましょう。

名前入力

画面右のモバイルメニューに設定した通りTwitterタイムラインが表示されていますね。

11:「完了」をクリック

完了

12:「公開」をクリック

公開

クリック前に画面右で表示を最終確認しましょう。

また、公開後は実際にモバイルで画面表示がしっかりできているか最終確認をする事を忘れずに。

以上で設定作業は終了です。

お疲れ様でした!!

おまけ

おまけ

ここまでの作業で、モバイルの画面とメニューが実際にどう表示されるか私のサイトのキャプチャを紹介します。

モバイルTOP画面

3PRエリア×2を使いヘッダーメニューの子階層記事もTOPページに表示。

モバイルTOP

モバイルメニュー画面

最適なモバイルメニュー構成を実現
1:サイト内検索
2:メインメニュー(ヘッダーメニュー)
3:カテゴリー
4:SNS(FacebookかTwitter)

モバイルメニュー

まとめ

いかがでしたか?

今回のモバイルメニューの改修で、ライトニングのモバイル表示の自由度がかなり高くなったと思います。

モバイルのTOPページに出したい項目は3PRエリアを使う。
詳しくはこちら

そしてモバイルメニューはPCサイトのヘッダーメニューとカテゴリーを網羅する。
※プラスサイト内検索とSNSを今回は実装しました

なんでもかんでもとやってしまうと情報過多でゴチャゴチャになってしまいますが、これ位だと「モバイルメニューの中だけでコンテンツを網羅しつつユーザビリティも高い状態を維持」できているのではないでしょうか。

これからも色々と試してどんどんお勧めを紹介していきます!!

【関連】
【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件

【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件


【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた


【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

るーしー

ではまた!

スポンサーリンク
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です