ECサイトのフローティング・メニューのデザインを調べてみた

ECサイトのフローティング・メニューのデザインを調べてみた ECサイト構築・運営
この記事は約4分で読めます。

ECサイトのフローティング・メニューを調べてみた

フローティング・メニューとはサイトをスクロールした際に固定で表示される追従型メニューのことです。

追従型メニューはスクロール時は邪魔にならないようにメニューの高さが縮小されて表示されることが多いです。
実際にECサイトでどのようなデザインが採用されているか調べてみました。

今回、アットランダムにECサイトを選出しましたが、フローティング・メニューを採用していないサイトも意外に多かったです。
また、初期表示のメニューをそのままフローティング・メニューとして表示するサイトも多いです。

フローティング・メニューは必須ではなく、また高さを低くする必要もなくなっている傾向があるようです。

BEAMS

BEAMS(ビームス)公式サイト

初期表示のメニュー

BEAMS

初期表示の高さ 90px

スクロール時のメニュー

BEAMSのフローティングメニュー

スクロール時の高さ 60px

ZOZOTOWN

ファッション通販ZOZOTOWN

初期表示のメニュー

ZOZOTOWN

初期表示の高さ 50px

スクロール時のメニュー

ZOZOTOWNのフローティングメニュー

スクロール時の高さ 50px

ユナイテッドアローズ

ユナイテッドアローズ公式通販

初期表示のメニュー

ユナイテッドアローズ

初期表示の高さ 64px

スクロール時のメニュー

ユナイテッドアローズのフローティングメニュー

スクロール時の高さ 64px

SHIPS

SHIPS 公式サイト|株式会社シップス

初期表示のメニュー

SHIPS

初期表示の高さ 72px

スクロール時のメニュー

SHIPSのフローティングメニュー

スクロール時の高さ 72px

ベイクルーズ

ベイクルーズのファッション通販 – BAYCREW’S STORE

初期表示のメニュー

ベイクルーズ

初期表示の高さ 112px

スクロール時のメニュー

スクロール時の高さ フローティング・メニューなし

楽天市場

【楽天市場】Shopping is Entertainment! : インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

楽天市場のカートボタン

初期表示の高さ 75px

スクロール時のメニュー

スクロール時の高さ フローティング・メニューはなし

Rakuten Fashion

ファッション通販 Rakuten Fashion(楽天ファッション)

初期表示のメニュー

楽天ファッション

初期表示の高さ 118px

スクロール時のメニュー

楽天ファッションのフローティングメニュー

スクロール時の高さ 75px

MAGASEEK

レディースファッション通販 MAGASEEK(マガシーク)

初期表示のメニュー

MAGASEEK

初期表示の高さ 163px

スクロール時のメニュー

MAGASEEKのフローティングメニュー

スクロール時の高さ 55px

Francfranc

Francfranc(フランフラン)家具・家電・インテリア雑貨のオンライン通販

初期表示のメニュー

Francfranc

初期表示の高さ 168px

スクロール時のメニュー

Francfrancのフローティングメニュー

スクロール時の高さ 168px

無印良品

無印良品

初期表示のメニュー

無印良品

初期表示の高さ 120px

スクロール時のメニュー

スクロール時の高さ フローティング・メニューなし

ユニクロ

ユニクロ 公式オンラインストア

初期表示のメニュー

ユニクロ

初期表示の高さ 140px

スクロール時のメニュー

ユニクロのフローティングメニュー

スクロール時の高さ 140px

unico

【公式】unico(ウニコ)|家具・インテリア・収納の通販

初期表示のメニュー

unico

初期表示の高さ 160px

スクロール時のメニュー

unicoのフローティングメニュー

スクロール時の高さ 100px

ACTUS

ACTUS

初期表示のメニュー

ACTUS

初期表示の高さ 75px

スクロール時のメニュー

ACTUSのフローティングメニュー

スクロール時の高さ 75px

ベルメゾン

通販のベルメゾンネット

初期表示のメニュー

ベルメゾン

初期表示の高さ 188px

スクロール時のメニュー

スクロール時の高さ フローティング・メニューなし

DELL

Dell 公式サイト (Dell Japan) | Dell 日本

初期表示のメニュー

DELL

初期表示の高さ 227px

スクロール時のメニュー

DELLのフローティング・メニュー

スクロール時の高さ 122px

投稿者プロフィール

HORIKAWACEO
関西大学卒業後、東証プライム上場企業ゼネコンにて人事総務業務に従事。
幼少よりモノ作りが好きだったこともあり、「モノを作る仕事がしたい」という思いからシステムベンダーへ転職。

システムベンダーでは、IBMオフコンAS400で金融、物流、販売管理、経理、人事総務などのシステムを開発。
台北に駐在し遠東國際商業銀行のシステム構築プロジェクトへの参画など貴重な経験を積む。
10年間で、プログラマ、SE、プロジェクトリーダー、プロジェクトマネージャーを務め、「システムの質は要件定義の質に比例する」と学ぶ。

その後、クレジット決済代行会社にヘッドハンティングされる。
決済システムの再構築、国内外の銀行システムとの接続、クライアントの会社サイト制作・ECサイト構築を行う。
一方、組織改革を任され、20名から60名へ会社規模を拡大させる。(退任時役職:常務取締役)

2008年クリエイティブチーム・サンクユーを立ち上げ、2010年に法人化し株式会社サンクユーを設立。

クライアントの業界、取扱商材、ターゲット顧客を理解・分析することで、結果が出るWEBサイトを制作することを得意とする。
また、ECサイト構築・運営への造詣も深く、NTTレゾナント株式会社が運営するgoo Search Solutionでコラムを執筆。
ECマーケティングレポート | goo Search Solution


■趣味・好きなもの
WRC / ロードバイク / MMA / ボクシング / サッカー
David Bowie / blur / MUSE / TheRollingStones / XTC
機動戦士ガンダム(ファースト) / 富野由悠季
ベルセルク / 頭文字D / 進撃の巨人 / ジョジョの奇妙な冒険 / あしたのジョー
Mission: Impossible / Memento / ワイルド・スピード / ソナチネ
LOST / Game of Thrones / FRINGE / The Mentalist

お気軽にご相談ください

お気軽にご相談ください

タイトルとURLをコピーしました