カテゴリー: このサイトについて

また間を空けてしまったが、久々のブログである。

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ナビを普及させていこうと思うのだけど、肝腎の自分のサイトをスマートフォン対応させたのが、かなり遅くなったのがお恥ずかしいところではある。

またちょっと間を空けてしまったが、三度目のブログ。

間が空いてしまったのも、ひとたび問題解決できて順調だったので、何とか13日には公開に漕ぎ着けようと頑張っていたのだが、制作物一覧ページにjavascriptによるLightBoxを仕込もうとしたところ、設置に成功した代わりにヘッダ、フッタ、右サイドバーなどの同じくjavascriptを使って読み込んでいた部分が表示されなくなってしまった…というトラブルに見舞われたためだった。

javascriptも、テーブルでのレイアウトによるコーディングが中心だった頃から部分的にちょくちょく使ってはいたが、それらはごく一部分だったし、とても使いこなしているというレベルではなかった。
アトリエ如瓶ギャラリーでは、共通部分を外部から読み込むとか、トップビジュアルの画像の自動的な切り替えなどをjavascriptを使って初めて盛り込んだのであって、どうにか駆使して公開にこぎつけただけでも、ご褒美に自分を女性が相手してくれるお店に連れて行って飲ましてやりたいくらいなのだが、本当にこれで大丈夫なのかなあと思っていたら、製作も大詰めになってから、愕然とするような不具合に出くわしてしまったのである。

タブブラウザが一般的になって、拡大する画像だけを新規タブで開くような動作は、やはり大げさに感じるし、どこか前時代的な処理のような気がするので、LightBoxで拡大画像を小ぢんまりと（？）見られるようにしたかったのだが、当面は保留とすることにした。
ただ、諦めきれずに原因を探ってみると、javascriptのonLoadという処理が、同一ページ内で2回以上使われると、最後に読み込まれた部分以外は無効となってしまうという記述を見つけることができ、対処法も紹介されていたのだが、自分でやってみるとうまく行かず、自分の不勉強とjavascriptの奥深さというか難しさというか、そんなものを感じずにはいられなかった。

LightBoxの実装に成功したとしても、それが閲覧者の関心を集めるのも、あと2～3年くらいなのではないかと思うし、トップビジュアルの画像の切り替えなども、見る人によっては陳腐なのかもしれない。「新しい技術」などという呼称は儚いものだし、技術的な部分は外注してしまうというテだってある。
そう考えると、デザイナーを自称し、存在価値を色あせないものとするためには、技術以外の部分……発想力とか、配色のセンスとか、ユーザビリティの高いサイトの設計とか、そういう部分で勝負できるようでありたいと、私は考えていて……もう寝ます。ここ数日あまり寝てなかったりして。

想定より1日遅れたけれど、どうにかUPできてめでたしめでたし……であります。ご用の方、遠慮なくご発注の程を。