2019年10月１日に新しい機能が加わりバージョンアップしたBiNDupですが、個人的に期待していたことは、SHiFTとメガメニューです。まずはメガメニューについてチェックしてみました。

メガメニューは一瞬変な状態で表示される？

メガメニューを使っているテンプレートを選択してプレビューしてみると、わずかな時間ですが一度画面左に黒い矢印が表示されてからメニューが表示されます。一瞬ではありますが、メガメニューのブロックがCSSの適用がされていない状態で表示されて、それからCSSを反映してちゃんと表示される。そんな印象です。

これは、プレビュー時だけでなくBiNDでテンプレートを編集しようとするとわかりやすいです。「ページを編集」をクリックして編集モードに切り替えた時、ウィンドウ左に黒い矢印と白いメニューの文字が表示されます。プレビューで表示されている黒い矢印がメガメニューの矢印であることがわかります。

これはテンプレートが重くてこうなっているのかもしれないと思い、新規サイト作成からメガメニューのブロックだけのデータを作って試しても状況は同じでした。
どうやら、メガメニューではこのように「一瞬、画面左に変な黒い矢印が表示される」ということになりそうです。

 

これまでもBiNDでは、CSSが反映されていない状態で表示されてからCSSが反映されて「若干動く」ようなことがありました。例えば、左寄せに表示されたメニューが一瞬表示されてから中央寄せに移動するように表示される。という感じです。

これはこれで、動きを設定したようにも見えなくもないですが、「これが気になる」と言われるお客様が少なくなく、その動く様子が表示されることを回避するためにページアクションを設定するということがありました。ページアクションを設定してあげるとコンテンツを読み込み終わるまで表示されず、読み込みが終わってからアクションを実行しながら表示されるため、このような動きが表示されることを回避できます。

その反面、読み込みが終わるまでページアニメーションが表示するくるくる廻るマークが表示され、逆にこれが読み込みに時間がかかっている重たいページのような印象を与えてしまうように感じられていました。

これまではCSSタブで設定したブロックの表示で上記のような現象が感じられるような印象もありましたが、メガメニューのブロックを見るとCSSは何も設定がなく、任意のDRESSを読み込ませている様子もありません。

メガメニューを使うとこのような表示は避けられないとすると、ちょっと気になりましたので情報共有として書かせていただきました。そんな些細なことをいちいちと思われる方もいらっしゃるかもしれませんが、こんなちょっとしたことが気になると言われるお客様がこれまで結構な割合でいたのも事実なんです。

追伸）メガメニューの設定はDRESSからしかできないようです。試しにDRESSを見てみましたが相変わらずわかりにくく、どの項目から設定したらいいのかさっぱり検討がつかないような印象です。これについては改めてDRESSの設定を試してみます。

 

BiNDで作るホームページ制作　バインドイズム – BiNDism
https://bindism.com