スポンサーリンク
グローバルメニューはどうする?
WordPressテーマを作る上で大きな悩みの一つが、グローバルメニュー(ヘッダー下にある横並びのメニュー)をスマホ時にどうするか?です。だいたいはハンバーガーメニューをタップするとメニューがにゅるっと出て来るというのが多いです。けど、個人的にはこれってどうなん??と思ってしまいます。
PCビューだとグローバルメニューは非常に見栄えがいいし、メニュー然として佇んでくれます。しかしスマホにした途端、脇役も脇役です。ほとんど誰も気にしてません。グローバルメニューがこんな扱いでいいのか?と思い悩みます。
しかも今やほとんどのアクセスがスマホからというサイトも珍しくありません。PCで見てる人はあまり居ません。「どうだ格好いいだろ。」とグローバルメニューをヘッダー下に置いても誰もPCで見てないんです。これは由々しき問題です。
グローバルメニューはサイドバーに
そこで、マテリアル2では思い切って、普通のグローバルメニューを取っ払いました。
グローバルメニューはサイドバーに格納しました。
そしてサイドバーを、よりメニュー感を出すために左サイドに持っていきました。
WordPressを始めほとんどのwebアプリケーションは左側にメニューバーがあります。メニューは左です。
多くの国産ブログ用WordPressテーマは右サイドバーが主流なのでちょっと見慣れないかも知れませんが、グローバルメニューを組み込んだ以上、サイドバーは左サイドです。グローバルスタンダードです。
サイドバーをどうする?
もう一つテーマを作る上での悩みは、スマホ時のサイドバーをどうするか?です。まあ普通はメインカラムの下に回り込ませています。
しかし、サイドバーをメインカラムの下に回り込ませてしまうと、異常に縦長のサイトになってしまい、見にくくなります。長すぎてサイドバー部分なんてじっくり見てられません。
それと、横幅の広いデバイスで見た場合に、サイドバー部分がやたら横長になって不細工になります。
個人的にはやたら横に伸び切ったサイドバーが許せません。タブレットでなんて見れたもんじゃない。前作マテリアルでは、それを解決するためにデバイスの横幅が広い場合はサイドバーは2列に分かれるようにしていました。
しかし、2列に別れるというのは見栄えは多少良いかも知れませんが、見やすさという意味ではいまいちです。情報が多すぎて見にくいです。
そんなサイドバー問題を一挙に解決してくれるのが、「スマホでもサイドバーはサイドバー」デザインです。
マテリアル2のサイドバー
マテリアル2では、スマホやタブレットで見た時、サイドバーは画面左に格納されています。
そして画面左下にハンバーガーメニューボタンがあります。
このボタンをタップすれば、横からにゅるっとサイドバーが丸ごと出てきます。PCビュー時のサイドバーがそのまま丸っとです。
「そのまま」というのが大事な所です。PCでもスマホでも同じ位置に同じ情報が載っているというのは重要です。
そしてこのサイドバー、どんなデバイスであろうと横幅は一定なんです。つまり横にびよーんと伸びることはない。
↑タブレットで見たら、こういう状態になります。
まさに「スマホでもサイドバーはサイドバー」デザインです。ありそうでなかった画期的なブログテーマです(自画自賛)。
PCビューではサイドバー追尾
PCビューではデフォルトでサイドバーが追尾します。
※アドセンス広告は追尾NGなので、デフォルトではアドセンスはサイドバーには表示されません。
参考マテリアル2のアドセンス広告の配置について
サイドバーの一番下に、アフィリエイト広告を貼っておけば、コンテンツを読み終わった時に横にその広告がある状態なので、自然とクリックされるかも知れません。
広告じゃなくて、人気記事を表示するWordPress popular postsプラグインを置けば回遊率が上がるかも知れません。
もちろんサイドバーにはWordPressのウィジェット機能を使って、いろんなウィジェットを置くことができます。
お試しあれ
これらの機能を全部入れ込むのは大変でした。あちらを立てればこちらが立たずです。
ハンバーガーメニューボタンの大きさも、大きすぎたら邪魔になるし、小さすぎたら気づいてもらえないし、非常にバランスが難しいです。ちなみにタブレットだと少しボタンが大きくなり、iPhone5だとかなり小さくなります。閉じるボタンの位置もスマホとタブレットでは違います。
妥協したところもないとは言えませんが、まあなんとか自分では納得行く形になったと思っています。使い勝手はいかがでしょうか?是非試してみて下さい。
P.S. いろいろ詰め込んだのでマシンパワーがしょぼいと相当スクリプティングに時間を食うという大問題がなきにしもあらず。。
コメント
マテリアル2の開発ありがとうございます。さっそくブログに導入しました。
サイドバーの表示、たいへん気に入っています。
サイドバーですが、PCでブラウザの横幅を狭める→広げるを繰り返していると、拡げたときにサイドバーが非表示となる現象が起きました。
スマホでも縦横表示の切り替えでサイドバーの表示がされない現象が発生しました(1度だけ再現)。
次回改版する機会があれば、修正をご検討いただけるとありがたいです。
by ジミー 2016年12月1日 9:22 PM
[…] マテリアル作者のNobuoさんがこちらでおっしゃられているように、グローバルメニューはPCから見るとかっこよくて分かりやすい。 だけどスマホで見るとハンバーガーメニューをタップ […]
by 「マテリアル2」にテーマを変更しました!初心者にも使いやすくておすすめ! | 抹茶みるくの、ここからログ 2016年12月2日 2:47 AM
[…] マテリアル作者のNobuoさんがこちらでおっしゃられているように、グローバルメニューはPCから見るとかっこよくて分かりやすい。 だけどスマホで見るとハンバーガーメニューをタップ […]
by 「マテリアル2」は初心者にも使いやすくておすすめ!【WordPressテーマ】 | 抹茶みるくの、ここからログ 2016年12月2日 7:39 AM
[…] 参考:マテリアル2のサイドバー哲学 | ブログ用WordPressテーマ マテリアル2 […]
by WordPress初心者でも簡単にカスタマイズできた、おすすめ無料テーマ5選 | NaeNote 2017年2月22日 11:48 AM
[…] 参考:マテリアル2のサイドバー哲学 | ブログ用WordPressテーマ マテリアル2 […]
by ブログカスタマイズが満たすべき原則とは?クリック率から導かれたあるべき方向性 | NaeNote 2017年2月22日 1:14 PM
[…] 参考:マテリアル2のサイドバー哲学 | ブログ用WordPressテーマ マテリアル2 […]
by 読者の役に立つブログカスタマイズとは?クリック率から見えた原則 | NaeNote 2017年3月1日 4:35 PM
[…] 左側にあり、ここにグローバルメニューが配置されています。 [外部リンク⇒マテリアル2のサイドバー哲学] これを読んでもらえば納得いただけると思います。 サイドバーにメニュー […]
by WordPressテーマをマテリアル2に変更 | LIBERTLOVEL 2017年5月29日 9:01 PM
WordPress Popular Posts をサイドメニューに追加すると、『•エラー: 現在のテーマで WordPress Popular Posts を ajax 化することは出来ません。id 属性が before_widget から抜け落ちています (詳しくは、register_sidebar を参照してください)。』
と、表示され何処をいじればいいのか分かりません。
by りぃ 2019年9月8日 10:36 AM