💍ブルガリ⌚のWebサイト分析💻（ジュエリーブランド💎）No.005

ブルガリの公式サイトの全体の特徴

ブルガリの公式サイトは、ジュエリーブランドのWebサイトとして高級感のあるデザインが特徴です。

サイト全体の配色は黒を基調とし、ゴールドなどのメタリックカラーを効果的に使用することで、高級感を演出しています。

グラフィックデザインも洗練されており、ブルガリのブランドイメージを表現しています。

また、ブルガリの公式サイトでは、動画やアニメーションを効果的に使用しています。

動画では、ブルガリの製品やブランドの歴史を紹介しており、アニメーションではブルガリの製品をより魅力的に伝えています。

これらの動画やアニメーションは、ユーザーの視覚的な興味を喚起し、サイトの閲覧を促進しています。

ブルガリの公式サイトのUI視点で優れているPoint

• サイトのデザインが洗練されており、ユーザーが使いやすい。
• 商品の画像が大きく、高品質。
• 商品の詳細情報がわかりやすく、検索しやすい。
• 商品を比較したり、お気に入りリストを作る事ができる。
• 送料無料やギフトラッピングなどのサービスが充実している。

ブルガリの公式サイトのUI視点で優れているPoint（具体例）

• サイトのトップページには、最新のコレクションや人気商品が大きく表示され、すぐに見つけることができる。
• 商品の詳細ページには、商品の画像や説明・価格などがわかりやすく表示され、購入を検討しやすい。
• 商品を検索する際は、ブランド名や商品名・価格などさまざまな条件で検索することができる。
• 商品を比較したりお気に入りリストを作ったりすることで、購入を検討している商品を簡単に管理することができる。
• 送料無料やギフトラッピングなどのサービスが充実しており、購入に結びつきやすい。

これらの優れたUIにより、ブルガリの公式サイトはユーザーにとって使いやすく購入しやすいサイトとなっています。

ブルガリの公式サイトのWebサイト分析

1. FV（ファーストビュー）

Headerエリア

1段目：

• 店舗を検索・サービス・お問い合わせ・検索【左寄せ】

• ニュースレター・マイアカウント・マイウィッシュリスト・ショッピングバッグ【右寄せ】

2段目：

• ロゴ【中央揃え】

3段目：

• グローバルナビゲーション(メガドロップダウン)【中央揃え】

キービジュアル：

• 動画【幅100%、高さ(100vh-145.5px)】

H1：

• 2行に渡ってH1のキーワードを設定

スクロールダウン：

• メインビジュアル中央下段に縦線が動いてスクロールを動かすスクロールダウンを採用

2. ナビゲーション

商品ページに遷移後、1段目に流れるアニメーションが表示。

▼スクロールダウンするとHeaderエリアが2段に変化

 

▼Header1段目：1292px以下でナビゲーションの要素が折り返し表示

▼Header3段目：1338px以下でナビゲーションの要素が折り返し表示

 

3. メガドロップダウン（PC）

セルペンティ75周年

• 1階層：タイトルのみ

ハイジュエリー

• 2階層：写真3枚横並び

ジュエリー

• 2階層：3カラム写真付き

1. 写真7枚横並び(端末のサイズにより可変)
2. テキスト縦並び
3. 画像2枚手動スライド

ブライダル

• 2階層：3カラム写真付き

1. 写真8枚横並び(端末のサイズにより可変)
2. テキスト縦並び
3. 画像1枚

ウォッチ

• 2階層：3カラム写真付き

1. 写真5枚横並び、2枚横並び
2. テキスト縦並び
3. 画像2枚手動スライド

レザー製品その他

• 2階層：3カラム写真付き

1. 写真6枚横並び
2. テキスト縦並び
3. 画像2枚手動スライド

フレグランス

• 2階層：3カラム写真付き

1. 写真6枚横並び、3枚横並び
2. テキスト縦並び
3. 画像2枚手動スライド

おすすめセレクション

• 2階層：4カラム写真付き

1. テキスト縦並び
2. テキスト縦並び
3. テキスト3カラム横並び、アイコン4種横並び
4. 画像2枚手動スライド

チョコレート

• 1階層：タイトルのみ

ブランド

• 2階層：写真6枚Gridレイアウト

ストーリー

• 1階層：タイトルのみ

ブルガリ ホテルズ＆リゾ－ツ

• 1階層：タイトルのみ

4. ハンバーガーメニュー

▼1023px以下でグローバルナビゲーションがハンバーガーメニューに変化

 

▼横幅1023pxのナビゲーション表示結果

 

▼横幅639pxのナビゲーション展開表示結果

5. メガドロップダウンの分析（SP）

セルペンティ75周年

• 1階層：タイトルのみ

ハイジュエリー

• 2階層：写真3枚縦並び

ジュエリー

• 2階層：写真2枚横並び

ブライダル

• 2階層：写真2枚横並び

ウォッチ

• 2階層：写真2枚横並び

レザー製品その他

• 2階層：写真2枚横並び

フレグランス

• 2階層：写真2枚横並び

おすすめセレクション

• 2階層：アイコン2種横並び

チョコレート

• 1階層：タイトルのみ

ブランド

• 2階層：テキスト1カラム縦並び

ストーリー

• 1階層：タイトルのみ

ブルガリ ホテルズ＆リゾ－ツ

• 1階層：タイトルのみ

ブルガリの公式サイトの要件定義の推察

• ブランドの歴史や哲学をわかりやすく簡潔に紹介する。
• 商品の品揃えを豊富にし、最新のコレクションもすぐにチェックできるようにする。
• 購入前に比較検討できるようにするために画像や動画を交えて商品の詳細な情報を掲載する。
• 送料無料や返品保証などのサービスを充実させる。

これらの要件を満たすことで、ブルガリの公式サイトは、ユーザーにとって使いやすく、満足度の高いウェブサイトとなることができます。

ブルガリの公式サイトのターゲット層の推察

ブルガリの公式サイトのターゲット層は、20代後半から40代の女性です。

この年代の女性は、経済的に自立しており、自分への投資を惜しまない傾向にあります。

また、ブルガリは高級ブランドとして知られており、この年代の女性はブルガリの製品を身に着けることで、自分のステータスを高めたいという欲求を持っています。

さらに、ブルガリの製品はエレガントで洗練されたデザインが特徴であり、この年代の女性の好みに合っています。

ブルガリの公式サイトでは、この年代の女性にターゲットを絞ったコンテンツが提供されています。

例えば、最新のコレクションやキャンペーン情報、スタイリングのヒントなど、女性が興味を持つようなコンテンツが充実しています。

ブルガリの公式サイトの色彩の特徴

1. メインカラー：

• ブラック
  ブラックは、高級感やエレガンスを表す色です。

2. サブカラー：

• ホワイト
  ホワイトは、デザインに清潔感や明るさ・純粋さを表す色です。

3. アクセントカラー：

• ゴールド
  ゴールドは、高級感や華やかさを印象を与える色です。

ブルガリの公式サイトのデザインはシンプルで、余計な装飾を排除しています。

これは、ブルガリが持つ洗練されたイメージを表現しています。

全体的に、ブルガリの公式サイトのカラーやデザインは、ブランドイメージを明確に伝えており、ユーザーに高級感やエレガンスを感じさせます。

ブルガリの公式サイトの使用Font

1. Header：

• Font Family：Bulgari_Capitalis
• Font Size：35px,27px

3. Body：

• Font Family：YuGothic, “Yu Gothic”, 游ゴシック体, 游ゴシック, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, Osaka, “MS PGothic”, Arial, Helvetica, Verdana, sans-serif
• Font Size：12px,13px,16px

4. Button：

• Font Family：Futura
• Font Size：26px

5. 画像キャプション：

• Font Family：Bulgari_Capitalis
• Font Size：16px,22px

• Bulgari_Capitalisは、ブルガリのロゴに使用されているフォントです。
  大文字のみのフォントで、力強くエレガントな印象を与えます。
• YuGothicは、日本の人気フォントです。
  読みやすく、クセのないフォントです。
• Futuraは、1927年に発表されたモダンなフォントです。
  シャープな印象を与えます。

ブルガリの公式サイトでは、これらのフォントを使用することで、ブランドイメージを向上させ、ユーザーに親しみやすい印象を与えています。

ブルガリの公式サイトに使用されている手法

1. パララックススクロール：

背景と前景のスクロール速度を異ならせることで、立体的な効果を生み出す手法です。

2. 画像の拡大：

3. スクロールイベント：

スクロールすることでコンテンツが徐々に現れるように設計されており、ユーザーの興味を引きつける効果があります。

4. マウスホバー：

ブルガリの公式サイトの商品ページには、マウスを画像の上に重ねることで別の画像を表示させ、テキストを左から右にフェードインで表示させる効果が使われています。

5. Podcastの埋め込み：

Podcastでは、フィニッシモ コレクションに携わった人々のPlaylistも含まれており、ブルガリの洗練された魅力やデザインについて語っています。

これにより、より深くブルガリを理解する事ができます。

6. スライドショーのカスタマイズ：

デフォルトのdotsではなく、barのインジケーターを表示させています。
スマートでスタイリッシュな印象を与えます。

7. 動画：

ブルガリのチョコレートの製造過程を撮影したYouTube動画では、モノクロで撮影された映像が、製品が写った時にカラーに切り替わる手法が使用されています。
この手法を用いる事により、モノクロの映像では製品の形状や質感を強調し、カラー映像では製品の色合いや光沢を強調する効果があります。

モノクロで撮影された映像の割合は約60%、カラーで撮影された映像の割合は約40%です。モノクロで撮影された映像は、チョコレートの原料であるカカオ豆の収穫からチョコレートの成形までの工程を映しています。
カラーで撮影された映像は、チョコレートの完成品や、チョコレートをクローズアップした映像を映しています。
モノクロ映像とカラー映像を切り替える手法により、チョコレートの魅力を最大限に伝える効果があります。

8. 3Dビューアー：

製品を回転・詳細を表示させる3Dビューアーや、自分の好みに合わせたアイテムをカスタマイズする機能などがあります。
フルスクリーンサイズでの確認もできます。

商品を回転させて商品画像を確認する事により、光の反射具合の確認が可能です。
更に、その画像をjpg形式でダウンロードする事ができます。

 ★星屑の幸せ★ | Webサイト100選