GOLD製特集ページをスマホで表示するとレフトナビが下部に移動します

スマホ表示時は自動レイアウト最適化により、レフトナビが下部に移動します。

このFAQの対象機能
GOLD製特集ページ(楽天GOLDで作成する特集ページ)

ご質問

GOLD製特集ページをスマートフォンで表示すると、レフトナビが下部に移動してしまいます。

ご回答

これは不具合ではなく、レスポンシブデザインによる仕様です。

Biiino(ビーノ)は、画面サイズに応じてパーツの位置や表示サイズを自動的に最適化しています。
そのため、スマートフォンで閲覧すると、レフトナビ(左メニュー)はメインコンテンツの下部に移動します。

ビーノはPC・スマホ両対応のレスポンシブデザインを採用しており、画面サイズに応じて自動的にパーツの位置や表示サイズを最適化しています。

レスポンシブデザインとは
PC・スマホ・タブレットなど、閲覧する端末ごとに画面サイズが異なっても、自動で最適なレイアウトへ切り替える仕組みのことです。

PCでの表示例

PCでは横幅に余裕があるため、レフトナビを左側に配置しても商品画像やメインコンテンツが見づらくなることはありません。

スマホでの表示例

スマートフォンでは画面幅が狭いため、PCと同じ左側にレフトナビを表示すると、メイン画像が小さくなってしまいます。

そのため、ビーノでは、ユーザーが商品を見やすいように、レフトナビを自動的に下部へ回り込ませる仕様にしています。

関連キーワード
レフトナビ 左メニュー サイドメニュー スマホ表示 レイアウト崩れ 表示位置 レスポンシブ 下に移動

関連しそうなFAQなど

ビーノ独自のおすすめ機能 次の開発予定 動画で学ぶビーノ 導入事例