WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

ユーザーにストレスなくサイトを見てもらうために工夫されたサイトがカッコいい!

   

東京都港区南青山(表参道)にある、福井産のメガネフレームアンテナショップ「GLASS GALLErY 291」のサイトです。

白と黒を基調とした、シンプルでスッキリとしたレイアウトのサイトです。
ファーストビューでは大きく配置された写真がフェードで切り替わるようになって、洗練された店内・外観の空間を見ることができますが、とてもスタイリッシュでカッコいいですね…

今回はそんなカッコいいお店のサイトで、個人的に惹かれた箇所を3つご紹介したいと思います!

 

「絞り込み検索機能」がすごい!

クリックすると拡大されます。

ファーストビューをすっきり見せるために、メニューは文字を並べるのではなく、ハンバーガーメニューを置いています。右上の検索ボックスも、虫眼鏡のアイコンにカーソルを合わせると細かく分類された検索ボックスが表示されるようになっています。

検索機能は文字を入力させるフォームのみではなく、「フレーム形状」や「製品種別」など選択肢が事前にある状態にすることで、「検索結果が0件」という状態を無くしています。
そうすることで、ユーザーもストレスなく検索機能を使うことが出来る仕組みになっているのです!とても素敵な機能ですね!

 

CONCEPTがスタイリッシュ!

クリックすると拡大されます。

左側にコンセプト、右側には様々なフレーム・デザインのメガネを同じ構図で撮影した写真をスライダーで紹介しています。
左側は黒が際立つ写真を背景に使ったり文字を入れていたりと少しごちゃっとした見た目に対して、右側は余白を大胆に使った写真が半分を占めているので、それだけで目を引くレイアウトになっていますね!
こんなに沢山の商品があると思うと、まだ試していないだけで自分にもピッタリのフレームがあるかもしれない!と思わずにいられません。

 

ページを移動しなくても詳細が分かる!

クリックすると拡大されます。

こちらはピックアップの項目です。
てっきり商品の画像をクリックすると、詳細ページに移動するのかと思いきやモーダルウィンドウで詳細が表示されるようになってました!
値段だけでなくサイズやフレームの形状、色違いの写真をスライダーで紹介しています。
しかも!「お気に入りに追加」というボタンも設置されていて、お手軽にお気に入りリストを作成することができるんです!
さらに前のモデル・次のモデルもモーダルウィンドウのまま閲覧することが出来ます。

 

まとめ

メガネの種類がとても豊富な分、ページの移動を少なくしたり絞り込み検索をつけて目当ての商品にたどり着きやすく誘導してあげたりと、いかにユーザーにストレスなくサイトを見てもらうかということを考えて作られているホームページです。

私自身絞り込み検索を実装したことがないので、機会があればこのサイトを参考にやってみたいです!

 - タイプ別 ,

  関連記事

2020年新卒採用サイトのトレンドをチェック!おしゃれなデザインをまとめてみました!

年始早々インフルエンザにかかってしまいました…皆様もお気をつけて… 久しぶりに高 …

キャラクターの形をしたペットボトルも作れる!特殊形状・オリジナルラベルのペットボトル5選!

現在、特殊形状ペットボトルの企画・製造をしている企業のサイトデザインをしているの …