WEBサイトについて 共栄美装WEBサイト11月最終アップデート情報

共栄美装広報部1号です。本日は、またまたスマホ版の機能拡張報告です。

共栄美装のナビゲーションバーについて

弊社のナビゲーションバーはシンプルなもので

ホーム/セットプラン/レンタル用品/イベント別/会社概要/実績紹介/採用情報/お問い合わせ

が並んでいます。

さらにサブメニューから、子ページへのリンクも出来るようにしています。
例えばセットプランに対してステージやテントは親子関係であり、この部分は階層化されています。

デバイスによる利便性の違い

パソコンだと、マウスカーソルが乗るとそのサブメニューがプルダウン表示される仕組みがあります。

これで親ページを介さずに直接子ページにたどり着くという近道が使えたのですが、スマホ環境だとその近道を非表示にしていました。
理由は、私たちがプラットフォームにしたテンプレートテーマが、スマホ表示時に最初から子ページもすべて展開されているナビゲーションバーだったからです。

これでは、かなり冗長なメニューバーとなってしまいます。試しに、下記に親ページのみのナビゲーションと子ページを含めたナビゲーションバーの総数をカウントしてみました。

ナビゲーションボタンの総数

※ホームは、PCだとスクロールさせるとロゴアイコンに姿を変え、スマホだと非表示にしています。サイト左上のロゴを押せばどのみちホームに戻れますから、スペースを省略しています。

さすがにスマホという狭い画面にこれら全情報を掲載すると収まりきらず、数の暴力になります。
こういう事情もあり、サブメニューは意図的に非表示にしていました。

非表示にしていても親ページを巡回していればリンクを辿れば、いずれは目的地には到達するのでそこまで大きな問題ではありません。
ただ、これではどうしてもデバイスごとに利便性の格差が生じてしまいます。
それが昨日までの弊社のウェブサイトです。

トグルスイッチ実装が解決の鍵

タップ操作がメインの端末は「マウスホバー」とはまた別の切り替え操作が必要でした。
そこで今回、プログラムコードの改良によってトグルスイッチを実装しました。

スマホで弊社のナビゲーションバーを開いたとき、子を持つナビゲーションボタンに反応し、右端に小さな＋ボタンを表示する機能を実装しました。
これを押すと、サブメニューがアコーディオンのように開きます。ボタン本体は斜めに回転して✕印に変化します。

もう一度押すと傾きは元通りになり、展開前の状態に戻ります。

実は昔からあった、身近なところにあるトグルスイッチ

トグルスイッチはあまり常用される単語ではないと思います。
私もプログラミングを始めるまで「トグル？何それ？」といった感じでした。

ですが、以外と身近なところにこの仕掛けは使われれています。
下記の1枚目はパチンパチンと切り替えることができるスイッチ。2枚目は、スマホやデバイスの設定画面などでよく見かけるスイッチです。

どちらもトグルスイッチです。
つまるところ、同じ箇所にあってON/OFFを切り替える機構のことを指します。

一般的な呼び方としては「開閉ボタン」とでも呼ぶべきなのですが、話の余興にでも役立てていただければ幸いです。

まとめ

弊社WEBサイトはナビゲーションバーの子要素を表示するサブメニュー表示方法を、下記の方法で実装しました。

• パソコンだとマウスホバー
• スマホだとトグルスイッチ(NEW)

編集後記

置き場所に困るからといって、ただ情報に制限をかけて見えなくするだけでは芸がありませんよね。
スマートとは、スリムで小型であることを指す以外にも「賢い」という意味も含む単語です。
画面が狭くて表示域は限られていますが、そこに技術者が創意工夫を詰め込むことで「小さいけど色んな事ができる！」を実現できる。
これこそ「スマートフォン」の真価ではないでしょうか。