No.017「SHIRO」のからくり

No.017 SHIRO- ワンピースの楽譜 | Webサイト100選

サイト概要
SHIROのWebサイトです。
自分たちが使いたいものを。SHIROのこだわりの素材から生まれるMAKE UP COLLECTION（メイクアップ／コスメティックス）、SKIN CARE（スキンケア）、FREGRANCE（フレグランス）。地球の生命力を、隅々まで、その一滴に。食のセレクト SHIRO LIFE。トータルビューティーサロン SHIRO BEAUTY。シンプルに素材のおいしさを追求した SHIRO CAFE。

No.017 SHIRO-ワンピースの楽譜 | Webサイト100選

ここが魅力！
・季節に合わせたレイアウトが組み込まれていて最新感がある！

No.017 SHIRO-シーズン装飾（背景）-ワンピースの楽譜 | Webサイト100選

No.017 SHIRO-シーズン装飾（アイコン）-ワンピースの楽譜 | Webサイト100選

No.017 SHIRO-ブランドロゴ-ワンピースの楽譜 | Webサイト100選

・「SHIROのエシカルな取り組み」では、ブランド、商品理解を深められる！商品への思いを高められる！

No.017 SHIRO-SHIROのエシカルな取り組み-ワンピースの楽譜 | Webサイト100選

・商品の詳細ページの説明が細かく、画像もあって分かりやすい！ネットからの購入も安心！

No.017 SHIRO-商品説明-ワンピースの楽譜 | Webサイト100選

・「SHIRO BEAUTY LESSON」では、商品の使い方を動画で説明していて分かりやすい！

No.017 SHIRO-SHIRO BEAUTY LESSON-ワンピースの楽譜 | Webサイト100選

構成
・FV

No.017 SHIRO-FV-ワンピースの楽譜 | Webサイト100選

→自分が本サイトを初めて見るときに期待する内容として、新商品がすぐに分かるかがあると考えた。
その上でサイトを開いてみると、商品が写っていないものもあるが、カルーセルパネルデザインに使われている新商品の画像にはどれも「2021.〇.△ RELEASE」と発売日が書いてあり、画像だけで言うならば新商品がすぐに分からないものもあったが、詳細ページにとびやすいという意味では新商品の情報は得やすいと感じた。

※右下の「LOGIN」アイコンと「CART」アイコンが「ヘルプ」ボタンと被っていて見えない。

・header、nav
→右上のSNSアイコンは、サイズは小さいがアイコンの背景色とマークの色、アイコンとメインヴィジュアル（MV）のコントラストが高いため、分かりやすい。
（製品）トップメニューは、MVの下にあるため、少し気づくまでに時間がかかる。
また、グローバルナビゲーションは見当たらない。

画面のサイズ幅が766px以下になると、ヘルプボタンが“？”のマークのみになり、画面下にハンバーガーメニューを含めたグローバルナビゲーションが出現する。

No.017 SHIRO-header(766px以下)-ワンピースの楽譜 | Webサイト100選

スクロールしていくと、幅768px以上では（製品）トップメニューが上部に固定され、幅766px以下ではグローバルナビゲーションが下部に固定される。

・footer

No.017 SHIRO-footer(768px以上)-ワンピースの楽譜 | Webサイト100選

→背景色はブランドのロゴと同じダークカラー。カテゴリ別に縦に並んでいる。メインカテゴリ名は太字になっているが、文字が全体的に小さめなので違いは分かりにくい。
本ブランドの会社（株式会社シロ）の代表取締役会長が関わる「みんなのすながわプロジェクト」サイトのリンクが貼ってあり、本ブランドサイト以外のサイトからも、本ブランドのこだわりや思いを知ることができる。

幅が766px以下になると、一部がアコーディオンメニュー（※1）になる。

※1 WEBサイトにおけるナビゲーションメニューのひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるもの