共栄美装WEBサイト2023年1月度アップデート情報3

共栄美装広報部です。本日で1月末日となりますが、2023年初月は皆様にとってどんな月でしたか？

今月は、私にとっては色々と情報発信の質が向上した月となりました。アップデート情報もこれで3件目。今回は、細々とした修正に関するお話をさせていただきます。

お話をする前に、少々私個人が大切にしている事をお話します。私たちは、WEBサイトを作るときにフルスクラッチビルドをしている訳ではなくテンプレートを使っています。そのため、新しい機能を実装したての時は「テンプレート臭さ」「杓子定規さ」「大雑把さ」が出てしまうこともよくあります。

少ない手順、低いハードルで多くのことが出来るのがWordPressや、その外観テーマ、プラグイン(追加拡張機能)の良さです。一方で、オリジナリティを求めようとすると素人目には疑問にすら思わない所まで「どうなっているのか？」という所から咀嚼をしていく必要があります。1月は、まさにその咀嚼を進めていた1ヶ月でした。

前置きが長くなりました。では、ここからは何が変わったのかをお送りします。

吹き出しと目次が見やすくなった！

もしPCでご覧になっている場合はささいな事に感じるかもしれませんがスマホユーザーにとってはそうではありません。なぜなら、スマホはPCと比較して圧倒的に画面が狭いからです。狭いと、横並びにできる文字数に限界が生まれてしまい、結果すぐに改行されてしまいます。

視線をジグサグに忙しく動かすことはストレスを与えてしまいます。これを最小限に納めるため、余白についてシビアに調整を行いました。

同時に見出し項目が並んだ目次も全幅をとっていますが、理由は同じです。みだりに改行してばかりでは視認性が下がるので、十分なスペースをとらせています。

詳細表が見やすくなった！

詳細表は項目に対して内容が2列に並んでいますが、以前は「サイズ」の項目がよく改行してしまっていました。ここに文章が入ると結局改行してしまう羽目になるんですが、そうでない立体の寸法(幅×奥×高mm)は頻繁に使うので、せめてこれくらい入らないかと思ってフォントサイズを小さくしたり、文字と文字の距離を詰めて対応しました。

タブを横にスライドできるよう調節

私たちのサイトは最近、一部タブによってコンテンツを表示切り替えできるようになりました。ところが、このタブが多くなってくるとスマホでは複数行になってきます。こうなるとタブからコンテンツまでの距離が遠のいてしまい、視覚的にはノイズが増えてしまいますし誤タップの原因も増えて操作感も今ひとつになってしまいます。

そこでスマホでは「2.5個ぶんだけ」タブを表示しています。中途半端な見せ方に見えるかもしれませんが、これが横方向にスクロールできる事を暗示するヒントとなります。ユーザーは「この右側に何かあるのではないか」と思い、必要であれば続きのタブを見られるようにしています。