【サイト分析】ヘッターメニューを収納！ハンバーガーメニューはSPだけじゃない！

第一回サイト分析です！
LP制作や、コーディングを進めていく中で自分のデザインの幅をもっと広げていきたい！サイトの仕組みを理解してわかりやすいコードを書きたい！
そんな欲求がふつふつと湧いてきました😀

ボスに相談したところ、
💁‍♂️『サイト分析しちゃおう！』と。

よし！サイトのなぜなぜ？を勝手に分析していきます！！！！（🧠が単純）
学習のメモみたいになってしまう可能性もありますが。学んだことを一緒に共有できれば嬉しいです。
私がリサーチするので、一緒にレベルアップしていきましょう！（一人だと心細いから仲間が欲しい。）

今回の分析したかったこと

今回はヘッターに着目して３つのサイトを比較してみました。

最近、SP（スマホ）でサイトを見ることが多くなる中でPCデザインでもハンバーガーメニューが使われていることに気づきました。
３つのサイトを通じて共通点やなぜこのデザインにしたのか意図を考えていこうと思います。

参考にしたサイト

参考にしたサイト

IDENCE Inc. | 株式会社アイデンス

穀宇 (KOKUU LLC.)

澤田屋 - くろ玉 山梨甲斐の銘菓

ヘッターをHBGM（ハンバーガーメニュー）にすることのメリットは？

画面幅が拡張！
従来のヘッターメニューは画面いっぱいに広がり、ヘッターが固定されることで盾の画面幅と横の画面幅が狭まってしまう。選んだ３つのサイトの特徴として、ファーストビューで動画や写真をしっかり見せたい印象がありました。小さいHBGMにメニュートピックを収納することでページデザインや情報の邪魔をしないのだと思います。

アニメーションや文字や画像の配置が自由自在！
HBGMにすることで、文字が右や左にいったり、写真が左や真ん中にいったりの規則性がないレイアウトでも違和感を感じないと思いました。
サイトを見る側は、目線の位置が右往左往してしまうと『今どのページ？』とわからなくなってしまうと思います。HBGMがあることで、すぐに自分が行きたいページに戻れる安心感があると思いました。

従来のヘッターよりも大きく表示することができる！
HBGMにトピックを収納することで画面幅いっぱいや、画面幅半分にサイトのメニュートピックを見せることができます。
余白もしっかり取れるので、サイトの概要がシンプルにわかりやすくまとまって見えます。選びやすくわかりやすい印象です。

HBGMに適していないサイトは？

旅行、相談などの予約を取って欲しいサイトには向いてない気がする

HBGMに全て隠れてしまっていると、探す手間が発生し遅れを取ってしまうと感じました。参考サイトのように常に予約メニュー等が従来のヘッターとして画面を移動しても付いてきてくれると見る側がスムーズに予約へと運ぶことができると思います。

大学眼鏡

ECサイトや情報量が多いサイトは向いていない
アイテム数が多い時や、ターゲットが女性、男性、子供など多い時はHBGMにまとめることは難しいと思いました。

例えば、HBGMは100進んでいても簡単に1に戻れる良い点があります。しかし、これは探す項目が決まっていない、つまりECサイトのような欲しいものを探しながら見るサイトには向いていないと思います。従来のヘッターの方が今見ている画面と比較しながら、邪魔することなくサイト内を検索していくことができるからです。
又、アイテム数が多いサイトは投稿される写真のサイズも小さいので余白のあまりないサイトには違和感と使いづらさを感じると思います。https://www.beams.co.jp/

HBGMのサイトを見て思ったこと

HBGMにすることでスタイリッシュだなぁと思いました。商品や情報の世界観をこす事なくHPがデザインされているからだと思います。

写真や動画が多い印象です。
メニューのトピック数も少ない気がします。

従来のヘッターがファーストビューで見られたとしてもスクロールする事でHBGMに変わるサイトも多いなと思いました。
ABOUTに当たるページの情報量が多いサイトはHBGMがデザイン的にも合う気がします。
もしかして、SPからコーディングしていってるからデザインを変える事なくHPのコーディングに入れるのも時短になっていいのではないかと思いました。
スマホからのコーディングを学習中なのでこれは使える！！

さらっと使ってるけどHBGM🍔この略あってるのかなw

PS…前回のココナラ紹介どうなってーん！って方すみません。
ちゃんと頭にはあります・・・・🦥