【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブデザインで参考になるナビゲーション5パターン

レスポンシブデザインで参考になるナビゲーション5パターン

toggleナビゲーション

レスポンシブデザインで作られたサイトでは、通常のナビゲーションメニューと違い、さまざまなナビゲーションの変化パターンが存在します。

ブロックを並べ替えたり、動的にドロップダウンリストに変更してみたりと色々と調整することができるので、レスポンシブサイトを構築する際にご参考ください。

ブロック並び替え その1

ブロック並び替えその1

PC〜タブレットサイズでは横並びのナビゲーションメニューですが、スマートフォンサイズまで狭めると2列になり縦に並び替えられます。こちらのサイトではソースコードも表示してくれているので便利です。

参考:http://dabblet.com/gist/2030070

ブロック並び替え その2

ブロック並び替えその2

こちらもPC、タブレットでは横並びのメニューですが、スマートフォンサイズまで狭めると縦メニューへと変化します。また折りたたみメニューとなっており、多くのメニューがある場合もすっきりと見やすく整理することができます。

参考:http://www.ejhansel.com/responsive-menu/

フライアウト

PC、タブレットでは横並び、スマートフォンサイズではメニューは「menu」タブに格納されていますが、タブをタップすれば左側に隠れていたグローバルメニューが「ニョキ」っと出現します。Facebookのモバイルアプリもこのようになっていますね。

ファーストビューで見せたいコンテンツがたくさんある場合は便利です。

参考:http://codepen.io/bradfrost/full/IEBrz

toggle(トグル)ナビゲーション

toggleナビゲーション

横並びのナビゲーションメニューが、スマートフォンサイズになるとmenuタブに収まり、タップすることで中のメニューが縦方向に開きます。これも上部メニュースペースの節約になるので、見せたいコンテンツを多く表示することができます。

参考:http://codepen.io/bradfrost/full/sHvaz

ドロップダウンリスト

ドロップダウンリスト
こちらはナビゲーションメニューが、幅を狭めるとドロップダウンリストとなってセレクトする形に変化します。こちらもソースコードが表示されているので、参考になります。

参考:http://tinynav.viljamis.com/

コンテンツの共通化で運営者、ユーザー双方にメリットを

いくつかご紹介しましたが、レイアウトパターンに「これ」というものはありません。サイトコンテンツの配置やテイストなどを加味しながら、自身のサイトにあったものを選択していただければと思います。

重要なのは、レスポンシブサイトを構築する際には「コンテンツを共通化」させることです。共通化させることで、サイトの構築・更新を効率化することができ、さらにユーザーを迷わせるリスクも減らすこともできます。

運営者側、ユーザー側双方にとってメリットのあるサイト構築を手がけてください。

aiship 上林

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+