「Beauty-Net」Webサイトの基幹コンテンツは、以下4種類のWebページで構成されています。
【1】トップページを含む、商品などの「リスト表示」
【2】画面上部のメインメニューからアクセスできる「ブランドリスト」
【3】商品に関する詳しい情報を掲載している「詳細情報ページ」
【4】さまざまな商品画像を高解像度でご覧いただける「商品画像ギャラリー」
※本ページ内のWebページの画像は、PCでブラウズした状態をイメージしています。タブレット・スマートフォンでご覧いただいた場合は、ご利用いただくデバイスの画面の横幅に応じて文字サイズ・画像サイズが自動的に調整され、サブメニューが画面下に移動します。
トップページ(www.beauty-net.co.jp)
メインコンテンツのエリアには、最近発売された新商品や、Beauty-Net からのお知らせがリスト表示されています。
補足説明
- 新商品やお知らせは、新しいものが上に表示されます。
- 商品名、商品画像、「続きを見る »」をタップ(クリック)すると、その商品の詳細情報ページが表示されます。
- 1画面に表示される商品/お知らせの数は20です。
ブランドリスト・リスト表示
メインメニューに配置しているカテゴリ名をタップすると、各カテゴリで人気のあるブランドを一覧表示します。
また、商品ごとに設定されている発売日・カテゴリ・タグなどのデータに基づいて、さまざまな商品を一覧表示している画面が「リスト表示」で、トップページもリスト表示画面の一種です。
補足説明
- ブランド名・説明文などをタップすると、そのブランドの商品がリスト表示されます。※最新の「Internet Explorer」など、Webブラウザによっては、ロゴマークをタップしてもOKです。
- 各画面に共通の「サイト内検索」ウィンドウに任意のキーワードを入力することで、検索結果がリスト表示されます。
- 「発売年月別 商品一覧」のプルダウンメニューで、発売年月別に商品がリスト表示されます。
- 「カテゴリ別 商品一覧」の各カテゴリをタップすると、該当カテゴリに属する商品がリスト表示されます。
詳細情報ページ
リスト表示では省略されていた商品説明全文・商品仕様・JAN/EANコード画像に加え、さまざまなアングルからの商品画像、カタログ画像、全成分などの詳細情報を参照できます。
また、商品ページのトップに配置しているメイン画像は、1,200×1,200ピクセル(余白部分を含む)の高品質。画面上の表示サイズは縮小していますが、スマホやタブレットの画面上でピンチアウト(指2本で拡大)することで、より鮮明な商品画像をご覧いただけます。
補足説明
- ページヘッダの「Beauty-Net」ロゴをタップすると、トップページへ移動します。
- 「« 前へ」、「次へ »」をタップすると、その商品より1つ前、または1つ後にリスト表示されていた商品の詳細情報ページを表示します。
- 「ショッピングカートに入れる」ボタンをタップすると、その商品がカートに追加され、宅配サービスのご注文画面が表示されます。
- 「ショッピングカートに入れる」ボタンが表示されていない場合、欠品または販売終了品です。販売終了品の場合、「カテゴリ別 商品一覧」に販売終了品として分類されています。
- 気に入っていただいた商品を、Facebook・Google+・Twitter・LINEなどのソーシャルメディアのお友達にご紹介いただくこともできます。
- メイン画像以外の商品画像・カタログ画像は、ダウンロード速度を上げるために画面上では圧縮データをサムネイル表示しています。
- 商品画像を高解像度でご覧いただく場合は、サムネイルをタップするとギャラリーモードに移行し、大きな画像が表示されます。
- カタログ画像のサムネイルをタップすると、カタログ画像がフルサイズで表示されます。
- JAN/EANコード画像はダミーではなく、実際に機能するリアルバーコードです。SVGベクターグラフィックとして描画されるため、ピンチアウトでどこまで拡大しても鮮明。スマホのバーコード対応カメラアプリを使って、PCの画面上で読み取ることもできます。※バーコードリーダーの機種によってはPC画面上のバーコードを読み取れない場合もございます。
商品画像ギャラリー
「Beauty-Net」の各コンテンツで公開している商品画像はすべて、1,200×1,200ピクセル(余白部分を含む)の高解像度バージョンに変更しました。
プロカメラマンが1点1点の商品をすべて撮影し、実物に近い色調に近づくようにフォトレタッチャーが丹念に補正したオリジナルの画像は、まるで、商品が目の前にあるような鮮明さ。全く新しいWeb体験をお楽しみいただけます。
各商品コンテンツ下部の「商品画像」をクリックしていただくと、大きなサイズの商品画像をギャラリー形式でご覧いただけます。ファイルサイズが大きめですが、もちろんスマホでもOK。
また。ほとんどの商品において、さまざまなアングルやパッケージ裏面の画像も掲載。今までになかったリアルさを感じていただけるように、フルに拡大すれば注意書きやメーカー名を読めるほどのクオリティで、すべてゼロから作りなおしました。
もちろん、商品以外のイメージ画像なども全て、Retina対応解像度で制作していますので、iPad Air などのRetinaディスプレイ搭載デバイスでご覧いただいた際の鮮明度が向上しています。
サブメニューの機能
基幹コンテンツへのアクセスを補助するため、画面右のサブメニューに追加機能をインストールしています。
【1】サイト内検索
新しくなった検索エンジンが、メーカー名・商品名・JANコードなど、さまざまなキーワードで商品をスピーディーに検索します。
※検索結果は、表示速度を高めるために商品画像を省略しています。
【2】発売年月別 商品一覧
プルダウンメニューから、発売年月別に商品をリスト表示します。
【3】カテゴリ別 商品一覧
商品は、メインメニューにも表示されている大分類カテゴリと、折りたたみ式の中分類および小分類カテゴリに分けられています。
- カテゴリの展開と折りたたみ
- マークをタップすると下位のカテゴリが表示され、マークをタップするとそのカテゴリが折りたたまれます。
- カテゴリ名をタップすると、そのカテゴリに属している全商品がリスト表示されます。
【4】わたしのお気に入り
各商品の詳細情報ページ右上の「お気に入りに追加」をタップすると、その商品が「わたしのお気に入り」に表示されます。
「宅配サービス」でいつもご注文されている商品や、気になる商品を追加しておくと次回のアクセスが簡単です。1デバイスあたりの最大登録数は50商品です。
※「わたしのお気に入り」は、WebブラウザのCookie(情報の一時保管領域)に保存されるため、異なるデバイス(例えばPCとスマホなど)でアクセスした場合はそれぞれ独立して表示されます。
【5】みんなのお気に入り
他のお客様が「わたしのお気に入り」に登録している商品がトップ50商品まで表示されます。()内の数字は、その商品をお気に入りに登録しているお客様の人数です。