Site Overlay

スマホのメニューが整理されて見やすくなりました!【地味な改善】

こんばんは、ウェブ担当のOです。

サトナカウェブショップのスマホ版メニューが整理されて見やすくなりました!地味な改善にはなりますが、結構皆さん見られるところなのでいい感じにセットできてよかったです。

新旧メニュー比較

左が新メニュー、右が旧メニューです

旧メニューのほうは結構ごちゃっとしておりました。

それを新メニューで一新。

レイアウトの調整をすると同時に、コンテンツの内容ごとに分野を仕分けました。また、旧メニューでは一度「カテゴリー」のアコーディオンを開かないと商品カテゴリのページに行けなかったのですが、それを改善するため最初からカテゴリー一覧を表示させるようにしました。

分類は上から順番に…
・商品カテゴリー
・特集ページ
・リアルショップ
・利用ガイド
・ブログ&SNS
・アカウント(ログインなど)

となっています。

また、アカウントのところにはログイン時に名前が表示されるようになっています。いままでは自分がログイン状態かどうか分かりにくかったので、それを改善するためとなります。

技術的なおはなし

カラーミーの「MONO」というテンプレートを使っているのですが、正直スマホ版のデザインに関しては全体的にちょっと古めかな~と思います。特にこのメニュー周りは不便に感じるところも多少あったので、今回修正することができてよかったです。

今回の修正内容だと、CSSはあまりいじらずHTMLをメインで触るだけで修正できる内容だったので、初心者の方でも頑張ればいけるくらいの難易度かと思います。

if周りで少しだけ不具合が出てページ表示されないことがあったので、もしページ自体が表示されなくなってしまったら、if関係をコメントアウトではなく削除してしまうとうまく動くかもしれません。

さいごに

今後もこんな感じで細かい修正を続けていく予定です。ここがちょっと不便…というものがありましたら、お気軽にコメントやお問い合わせフォームからお知らせください。

ほかの記事はこちらから

カテゴリー:トラウマIT部