また間を空けてしまったが、久々のブログである。
PCでの閲覧しか考えていない……つまり、モバイル・フレンドリーではない形でスタートした当アトリエのサイトだったのだが、人様には「今どきのホームページは、7割がスマートフォンによる閲覧なので、対応された方がいいですよ」などと言っていたクセに、サイト公開からほぼピッタリ3年経って、ようやくレスポンシブデザインによるサイトが完成した。
長年制作側として様々なサイトを見てきた上で不満に思う部分の幾つかを解消できたサイトに仕上がったと自負している。件名は「体重を減らそうと思っている」ということではない。
世の中のサイトが、PCよりもスマートフォンで閲覧されるようになってきた理由を納得するくらい、私自身もスマートフォンを使うようになってから、調べ物も含めてスマートフォンで閲覧する機会が増えてきた。
その中で気になっていたのが「ハンバーガーメニュー」と呼ばれる≡の格好をしたボタンを押してメニューを開くもので、スマートフォンにも対応したサイトだと、大体の場合左からペロンとメニュー画面がスライドして出てきたりする。2枚のバンズの間にパティ（ハンバーグ）が挟まっている様子と似ているからこう呼ばれるようだが、スマートフォンも大型化していこうというのに、右上隅に配置されていることが多く、指を伸ばすのが億劫なうえ、メニューがペロンと出てきてそれまで見ていたページの大半を隠してしまうと、それまで何を見ていたか忘れてしまうし、下手すれば何を見ようとしていたかも忘れてしまうこともある。
要するに、使い勝手が良くないと思うのである。
なぜこのボタンがトレンドとなり常識化してしまっているのかを考えると、Facebookがこのボタンによるメニュー表示を採用していたことの影響が大きいのではないかと思う。
PCサイトで、膨大なページ数のサイトなどは、スマートフォン対応しようとすると、全面リニューアルということになり費用もかさむが、グローバルナビ部をjQueryやcssを使ってハンバーガーメニュー化してしまい、サイドバーがあればメインコンテンツ下に追いやるなどして、比較的少ない工数で対応できるのもメリットだったのだろうけど、あの使い勝手の悪さはサイト内の回遊を阻害し、高い直帰率を産み出すと思っていたのだ。
一方、PCサイトの頃の設計を引きずっていたのか、画面上端やトップビジュアルの下などにあったグローバルナビが、スクロールに伴って隠れると、フローティングメニューという形で再びグローバルナビが現れる仕組みになっているサイトはチラホラ見かけたが、これも大部分が表示されるのは上部。スマートフォンでは結局エイっと指を伸ばさなくてはならない。
画面が横長のPCでは画期的と言えただろうけれど、クリックしなくてはならない場所へのポインタの移動は少なければ少ないほど、リンクは押してもらいやすくなるのは不変の道理だ。
そこで、私が考えたのは、持つ手の左右に関係なく押しやすく、画面最下部に固定して表示されるグローバルナビ。スクロールしても画面下部に常に表示されているので、見ていたページを遮ったりしなくてよいし、スマートフォンは、殆どの人が縦長の状態でサイトを閲覧するだろうから、ページ下部の10％程度が常にコンテンツを隠していたとしても影響は少ないうえ、片手で持ち替えたりせずに見るべき主要なページを閲覧できるという、高い操作性も兼ね備えている。制作側のメリットとしても、htmlとcssだけで実装できて簡便だし、jQueryなど使うより読み込みも早いと思う。
私はこのグローバルナビの方式を、bottom0ナビ（＝ボトムゼロナビ。画面の底からの距離を0として固定することに由来。）と名付けている。
と、スマートフォン時代に万能であるかのように思えるbottom0ナビだが、実は自認する弱点もある。
ナビに配置する項目数が多いと押しにくくなるばかりか、ボタン上の文字を小さくしなくてはならなくなるので、あまり多くのページをナビに組み込めないということ。2018年での普遍的なスマートフォンの画面サイズでの実感として、6つくらいが限界だと思うが、その問題も、当サイトの制作物一覧ページと料金・発注ページで、1つ答えを出した。
必要なページでは、2段目のナビを表示してしまえば良いのだ。これも何も難しい技術を使わずにできるし、当サイトで採用しているボタンのサイズであれば、それほど押し間違いは起こらないと思う。
iPhoneユーザーの私としては、もう1つ問題に感じるのは、ブラウザがsafariの場合、bottom0ナビを押そうとすると、戻るボタンやブックマークボタンのアイコンが表示された黒いメニューがせり出してきて、この動作中にはボタンが反応しなくなり、2度、3度とタップしないと行きたいページへ遷移しないという点も問題点ではある。但しこれは、主にsafariを使っている場合にのみ感じるストレスであって、検証できた1部の他機種や他のブラウザを使えば、bottom0ナビの回遊性の高さを満喫できる。
結局、ハンバーガーメニューの煩わしさに比べれば、大した事ではないと私は思っている。
ただまあ、サイトの性質にもよるのだろうけれど、スマートフォンでの閲覧が中心となるWebの世界で、100ページに及ぶようなサイトが、全体をくまなく回遊されるようなことは現実的ではないと思えるし、Web上に存在するサイトの全てがスリム化していくのではないかと思えるので、きっと私の考案したbottom0ナビは有用になると思う。いや、私がこれを主流にしていくのだ！
……と考え、いっそ実用新案でも申請しようか……と思っていたところ、ちょっと調べてみると、ハンバーガーメニューの問題点について述べた記事が幾つもヒットした。まあ、そりゃそうだが、この道の権威であるジェームズ・アーチャーという人などは、「劣った醜い撲滅すべきものである」などと言いつつ、データ分析結果を元にして、私が直感的に感じていたことと概ね同じ解説をしているようで、bottom0ナビの普及にますます自信を持ったりするわけである。
と、今回のリニューアルを足がかりとして、bottom0ナビを普及させていこうと思うのだけど、肝腎の自分のサイトをスマートフォン対応させたのが、かなり遅くなったのがお恥ずかしいところではある。