気づき&学び days

今まで、はまぞうブログのカスタマイズワークショップを6月、7月と計２回行いましたが、

それはパソコン用のヘッダー部分のカスタマイズについてでした。

今やスマートフォンでのネットコンテンツ閲覧率が65～70%に達している状況の中、

スマートフォン用のカスタマイズはもっと重要だと当初から思っていました。

パソコン用のカスタマイズも一段落したので、

今月10日頃からスマートフォン用のカスタマイズを試行錯誤しながら少しずつ進めてきましたが、思っていた通りパソコン用より難易度が高くて、やってもやってもうまくできないことの繰り返しで、案の定難航しました。

そのおかげで、つまずいたところはいろいろ身についたと思います。


そんなこんなで、どうにか形になってきたので、ここで簡単に紹介しようと思います。

まず最初に試みたのが、スマートフォン画面の一番下に固定して付けられるナビゲーションメニューです。



・青い太線で囲んだ部分①がナビゲーションメニューになります。

・ナビゲーションメニューは、画面の最下部に常に固定されます。

・一番左の「メニュー」は、ここではスライドメニューを開いたり閉じたりするメニューボタンです。（スライドメニューが不要な場合は、別の機能として設定できます。）

・メニューの数は５つまで、メニュー内の文字数は全角６文字までとなります。

・メニュー内のアイコンは、600以上のアイコンから選ぶことができます。

ナビゲーションメニューの概要はざっとこんな感じです。


次に試みたのが、画面横からスルッと出てくるスライドメニューです。



スライドメニューは上のようなイメージになります。

・青い太線で囲んだ部分③がスライドメニューです。

・画面最下部にある「メニュー」ボタン②をタップするとスライドメニューが画面の左側からスルッと出てきて表示されます。
　再び「メニュー」ボタン②をタップすると、スライドメニューは画面の左側に引っ込んで表示されなくなります。

・スライドメニューは、表示されている状態で上下にスワイプすれば縦方向にスクロールします。

・スライドメニューの項目はいくつでも増やせます。

・画面最下部にあるナビゲーションメニューのひとつに、「メニュー」ボタン②を設定する必要があります。

・スライドメニューの横幅は、360px以内で自由に変更できます。

スライドメニューはざっとこんな感じです。


パソコン用にナビゲーションメニューを付けている方の中には、

スマートフォン用にもナビゲーションメニューを付けたいと思っている人が多いのではないかと思い、形にしてみました。

近いうちに、カスタマイズサービスとしてご提供しようと考えています。