通販サイトをレスポンシブデザインにリニューアルいたしました。
今まではパソコンとスマホで別ページの表示で
パソコンにスマホのページが表示されたり
スマホにパソコンのページが表示されたりなどと
ご不便な点もありましたが、画面サイズにあわせて表示の変わる、
レスポンシブデザインになりましたので、
パソコン、タブレット、スマホ、iPad iPhoneに対応し、
さらに見やすく、探しやすくなりました♪
パソコンで見ると、一番上に黒いナビゲーションバーが出現。
・ロゴをクリックするとホームへ瞬時に戻る事が出来ます。
・「DOPE BOYZ」や「SWAG GIRLZ」などをクリックすると
コンセプト別に商品を観覧出来ます。
・「ブランド一覧」では取り扱いブランドをロゴから検索出来ます。
・「カートを見る」は常にここにあるのでいつでもカートの中身を確認出来ます。
続いてはスライドショー。画像は自動でスライドしますが、スライドショー下のグレーの丸をクリックすると手動でも切り替えが可能です。
トップページのみコンセプトのイメージ画像と説明、ブランド一覧へのリンクを設置いたしております。こちらは画像クリックでコンセプト別商品一覧ページへジャンプします。
そのしたには「PICK UP ITEM」季節やトレンドに合わせたスタッフおすすめのアイテムを掲載しております。
サイト下部にもナビゲーションを設置しユーザビリティを向上させました。
シンプルなトップのナビゲーションとは違い、初めてのお客様にも快適にお買い物して頂く為に、お問い合わせやお支払い方法、送料・配送方法など、通販サイトに必要なコンテンツがわかりやすくまとまった仕様となっております。
そして、サイト最下部まで行くと、黒い「TOP」と書かれたバーが出現します。
こちらはページの最上部まで一気に戻ることの出来るボタンとなっており、
トップナビゲーションバーまで自動でスクロールしますので
1000点を超える商品数のサイトでは、長くなりがちな商品ページも楽に観覧できます。
パソコンの表示の大まかな説明は以上です。
パソコン表示｜レスポンシブデザイン
続いては、iPhoneなどのスマートフォンとiPadなどのタブレットのページをご説明いたします。
基本機能は同じですが、トップのナビゲーションの表示方法が異なります。
今回はアプリなどに多く使われる、折りたたまれたプルダウンメニューを採用。
最上部左上のアイコンまたはショップロゴをタップするとナビゲーションメニューが出てきます。
画面サイズの小さなモバイルデバイスは少しでもスペースを広く確保したいと思い、
使わない時はもう一度アイコンをタップして折りたたんで頂くと
プルダウンメニューが邪魔にならずスマートにお買い物して頂けるかと思います。
また、スマートフォンとタブレットでは、4列で表示されていた商品画像が2列になり、
大きい画像で観覧できますので、詳細ページへ行ったり来たりする必要がなく、
短い時間でより多くの商品をご覧頂けます。
スマートフォン様の表示では、出先やお仕事中など、外で見る機会が多いと思い、
見やすさと探しやすさに重点を置きデザインさせて頂きました。
スマートフォン｜レスポンシブデザイン
