マテリアル２のサイドバー哲学

グローバルメニューはどうする？

　WordPressテーマを作る上で大きな悩みの一つが、グローバルメニュー（ヘッダー下にある横並びのメニュー）をスマホ時にどうするか？です。だいたいはハンバーガーメニューをタップするとメニューがにゅるっと出て来るというのが多いです。けど、個人的にはこれってどうなん？？と思ってしまいます。

　PCビューだとグローバルメニューは非常に見栄えがいいし、メニュー然として佇んでくれます。しかしスマホにした途端、脇役も脇役です。ほとんど誰も気にしてません。グローバルメニューがこんな扱いでいいのか？と思い悩みます。

　しかも今やほとんどのアクセスがスマホからというサイトも珍しくありません。PCで見てる人はあまり居ません。「どうだ格好いいだろ。」とグローバルメニューをヘッダー下に置いても誰もPCで見てないんです。これは由々しき問題です。

グローバルメニューはサイドバーに

　そこで、マテリアル２では思い切って、普通のグローバルメニューを取っ払いました。

　グローバルメニューはサイドバーに格納しました。

　そしてサイドバーを、よりメニュー感を出すために左サイドに持っていきました。

　WordPressを始めほとんどのwebアプリケーションは左側にメニューバーがあります。メニューは左です。

　多くの国産ブログ用WordPressテーマは右サイドバーが主流なのでちょっと見慣れないかも知れませんが、グローバルメニューを組み込んだ以上、サイドバーは左サイドです。グローバルスタンダードです。

サイドバーをどうする？

　もう一つテーマを作る上での悩みは、スマホ時のサイドバーをどうするか？です。まあ普通はメインカラムの下に回り込ませています。

　しかし、サイドバーをメインカラムの下に回り込ませてしまうと、異常に縦長のサイトになってしまい、見にくくなります。長すぎてサイドバー部分なんてじっくり見てられません。

　それと、横幅の広いデバイスで見た場合に、サイドバー部分がやたら横長になって不細工になります。

　個人的にはやたら横に伸び切ったサイドバーが許せません。タブレットでなんて見れたもんじゃない。前作マテリアルでは、それを解決するためにデバイスの横幅が広い場合はサイドバーは２列に分かれるようにしていました。

　しかし、２列に別れるというのは見栄えは多少良いかも知れませんが、見やすさという意味ではいまいちです。情報が多すぎて見にくいです。

　そんなサイドバー問題を一挙に解決してくれるのが、「スマホでもサイドバーはサイドバー」デザインです。

マテリアル２のサイドバー

　マテリアル2では、スマホやタブレットで見た時、サイドバーは画面左に格納されています。

　そして画面左下にハンバーガーメニューボタンがあります。

　このボタンをタップすれば、横からにゅるっとサイドバーが丸ごと出てきます。PCビュー時のサイドバーがそのまま丸っとです。

　「そのまま」というのが大事な所です。PCでもスマホでも同じ位置に同じ情報が載っているというのは重要です。

　そしてこのサイドバー、どんなデバイスであろうと横幅は一定なんです。つまり横にびよーんと伸びることはない。

↑タブレットで見たら、こういう状態になります。

　まさに「スマホでもサイドバーはサイドバー」デザインです。ありそうでなかった画期的なブログテーマです（自画自賛）。

PCビューではサイドバー追尾

　PCビューではデフォルトでサイドバーが追尾します。
※アドセンス広告は追尾NGなので、デフォルトではアドセンスはサイドバーには表示されません。
参考マテリアル２のアドセンス広告の配置について

　サイドバーの一番下に、アフィリエイト広告を貼っておけば、コンテンツを読み終わった時に横にその広告がある状態なので、自然とクリックされるかも知れません。

　広告じゃなくて、人気記事を表示するWordPress popular postsプラグインを置けば回遊率が上がるかも知れません。

　もちろんサイドバーにはWordPressのウィジェット機能を使って、いろんなウィジェットを置くことができます。

参考ウィジェットについて

お試しあれ

　これらの機能を全部入れ込むのは大変でした。あちらを立てればこちらが立たずです。

　ハンバーガーメニューボタンの大きさも、大きすぎたら邪魔になるし、小さすぎたら気づいてもらえないし、非常にバランスが難しいです。ちなみにタブレットだと少しボタンが大きくなり、iPhone5だとかなり小さくなります。閉じるボタンの位置もスマホとタブレットでは違います。

　妥協したところもないとは言えませんが、まあなんとか自分では納得行く形になったと思っています。使い勝手はいかがでしょうか？是非試してみて下さい。

P.S.　いろいろ詰め込んだのでマシンパワーがしょぼいと相当スクリプティングに時間を食うという大問題がなきにしもあらず。。