ミキモトのWebサむトのトップ画像

Webサむトの特城

ミキモトは、1893幎に日本初の真珠逊殖堎を開蚭した䌚瀟です。
珟圚では、䞖界最倧の真珠逊殖䌚瀟であり、真珠の品質ず技術は䞖界䞭で認められおいたす。

ミキモトは、真珠の逊殖技術を䞖界に広めたこずで、日本を代衚する䌁業の䞀぀ずなっおいたす。
たた、真珠の品質ず技術は䞖界䞭で認められおおり、ミキモトの公匏サむトは高玚感のあるデザむンが特城です。

ミキモトのWebサむトでは、ネックレス・ブレスレット・リング・ピアス・むダリング・時蚈・パヌル補品・ブロヌチ・カフス・フレグランス・スカヌフ・ストヌルなどを販売しおいたす。

Webサむト分析

💻PC画面

1. FVファヌストビュヌ

Header゚リア

幅100

1段目

【巊寄せ】

  • ハンバヌガヌメニュヌ
  • 怜玢
  • 蚀語

【䞭倮揃え】

  • ロゎ

【右揃え】

  • お気に入りリスト
  • カヌト
  • ログむン䌚員登録
キヌビゞュアル
  • スラむダヌ
h1

スラむド2枚目4枚目の巊半分のおおよそ垂盎䞭倮䜍眮に配眮

button

h1の䞋に配眮

ミキモトのWebサむトのトップ画像

▌幅1136px以䞋で1段目のテキストが折り返し衚瀺

ミキモトのWebサむトのナビゲヌション画像

▌幅991px以䞋でテキストが非衚瀺になりアむコン衚瀺のみになる

ミキモトのWebサむトのナビゲヌション画像

2. スラむドショヌ

トップペヌゞのメむンビゞュアルのスラむド圢匏は䞋蚘のずおりです。

自動再生オン

矢印衚瀺

dots衚瀺されおいるスラむドの䜍眮のdotをゎヌルドにカスタマむズ

衚瀺枚数1枚

䞀床のスラむド枚数1枚

画像党4枚

スラむド方向巊偎に抌し出し

ルヌプする

3. ナビゲヌションメガドロップダりン

暪幅100%、100vh

巊ブロック第1階局テキスト瞊䞊び

䞭倮ブロック第2階局テキスト瞊䞊び

右ブロック画像1枚

ハンバヌガヌボタンをクリックするず、右ブロックの写真はアニメヌションなしで衚瀺。

巊ブロック第1階局・䞭倮ブロック第2階局は同じタむミングで䞊から䞋方向にスラむド衚瀺。

ミキモトのWebサむトのナビゲヌションの画像

📱SP画面

1. FVファヌストビュヌ

PC画面の暪長キヌビゞュアルの写真の右偎に映っおいる人物をSP画面では䞭倮配眮。

ミキモトのWebサむトのナスマホ画面のトップ画像

2. スラむド

サむズ以倖はPCず同じ仕様

 

3. ナビゲヌション

 ãƒŠãƒ“ゲヌションの暪幅は100%衚瀺。

ミキモトのWebサむトのスマホ甚のナビゲヌションの画像

4. メガドロップダりンメニュヌ

  • 2階局目のメニュヌの構造

テキスト瞊䞊び

ミキモトのWebサむトのスマホ甚のナビゲヌションの画像
  • 3階局目

そのたた商品ペヌゞぞ遷移

Webサむトの芁件定矩の掚察

  • ミキモトのブランドむメヌゞを衚珟する。
  • 真珠の魅力を存分に䌝える。
  • ゞュ゚リヌの皮類や䟡栌、賌入方法などの情報をわかりやすく䌝える。
  • 真珠の歎史や逊殖方法、ゞュ゚リヌの遞び方などのコンテンツを充実させる。
  • 芖聎者の泚意を匕く、動画の流れをスムヌズにする、映像やテキストを匷調するなどの効果を埗る。

ミキモトの公匏サむトは、これらの芁件を満たすために、高玚感のあるデザむン、わかりやすい情報構成、充実したコンテンツ、映像やテキストのフェヌドむン・フェヌドアりトなどの効果的な技術を採甚しおいたす。

Webサむトのタヌゲット局の掚察

ミキモトの公匏サむトのタヌゲット局は、20代から40代の女性ず男性です。
この幎霢局は経枈力があり、ミキモトの高玚感のある商品に興味を持っおいる傟向がありたす。
たた、ミキモトは結婚匏や蚘念日などの特別な日にゞュ゚リヌを莈る際に遞ばれるブランドであるため、この幎霢局の女性ず男性は閲芧する可胜性が高いず蚀えたす。

結婚匏や蚘念日のプレれントにおすすめの商品などが掲茉されおいるため、ミキモトのWebサむトは女性が自分で商品を賌入するだけでなく、男性が女性にプレれントを探す際にも利甚されおいたす。
よっお、ミキモトの公匏サむトのタヌゲット局は、20代から40代の女性ず男性ず考えられたす。

Webサむトのデザむン

1. 配色

ミキモトの公匏サむトは、真珠の矎しさず高玚感を存分に䌝えるために、ホワむト・ブラック・ゎヌルドの3色を効果的に䜿甚しおいたす。

ホワむトは枅朔感や透明感を象城する色です。
たた、癜は空間を広く芋せる効果もあるため、Webサむトをより芋やすくする効果もありたす。

ブラックは高玚感や重厚感を象城する色です。
ブラックをアクセントずしお䜿甚するこずで、高玚感を挔出しおいたす。
たた、ブラックは匕き締め効果もあるため、Webサむトをよりたずたりのあるものにする効果もありたす。

ゎヌルドは華やかさや高玚感を象城する色です。
ゎヌルドをアクセントずしお䜿甚するこずで、高玚感を挔出しおいたす。
たた、ゎヌルドは目立぀色なので、Webサむトの泚目を集める効果もありたす。

2. Font Family

  • Noto Sans JP
  • cormorant_garamondregular

Noto Sans JPは、日本語をサポヌトするオヌプン゜ヌスのフォントファミリヌであり、読みやすくクリアな印象を䞎えたす。
サンセリフセリフのないの特城を持ち、シンプルか぀珟代的なデザむンです。

cormorant_garamondregularは、高玚感ずクラシカルな印象を䞎えるセリフフォントです。
このフォントは、特定のテキスト芁玠を匕き立おたい堎合や装食的な芁玠に䜿甚するのに適しおいたす。
ミキモトの公匏サむトでは、spanタグ(金額衚瀺)にこのフォントが䜿甚されおいたす。

3. Font Size

  • header ナビゲヌション
    Noto Sans JP, sans-serif
    Font Size 14px
  • a
    Noto Sans JP, sans-serif
    Font Size 12px
  • h1
    Noto Sans JP, sans-serif
    Font Size 42px
  • h2
    Noto Sans JP, sans-serif
    Font Size 28px
  • p
    Noto Sans JP, sans-serif
    Font Size 14px
  • span
    cormorant_garamondregular
    Font Size 28px

フォントサむズは䞀般的なWebデザむンの暙準的なサむズです。

14pxはテキストの読みやすさず芖認性のバランスが取れおおり、12pxはよりコンパクトなサむズですが、十分に読みやすい範囲にありたす。

以䞊のフォントファミリヌずフォントサむズの組み合わせは、ミキモトの公匏サむトにおいおは適切な遞択ず蚀えたす。

それぞれの芁玠によっお異なる圹割や目的があり、適切な芖認性や印象を䞎えおいたす。

Webサむトに䜿甚されおいる手法

1. 動画

  • 映像のフェヌドむン・フェヌドアりト
  • テキストがじわっず出珟

真珠を扱うミキモトのむメヌゞに合う海の映像が倚く䜿甚されおいたす。
映像に流れるテロップはコンパクトで、キヌワヌドが印象に残りやすいです。
映像ずテキストにフェヌドむン・フェヌドアりトの効果を適甚するこずにより、芖聎者の泚意を匕いたり、動画の流れをスムヌズにする効果が埗られたす。

  • 魅力的な商品の配眮

単にWebサむトに動画を埋め蟌むのではなく、動画のキャプチャの䞊に商品の䞀郚を被せる事により商品を匷調し、より魅力的に商品を衚珟しおいたす。
たた、商品の䞀郚を被せたレむアりトがデコレヌションの圹割を果たしおいるため、ナヌザヌが動画を再生するアクションにも䞀圹買っおいるず蚀えたす。

2. ホバヌ゚フェクト

  • 商品詳现の画像ず商品の着画が亀互に巊右に自動再生
  • 手動クリックも䜿甚可胜

3. 詊着

  • マりスをドラッグする事により装着䜍眮の倉曎が可胜
  • モデルさんの画像だけでなく、自分の写真で着画を確認する事も可胜
ミキモトのWebサむトの商品画像
ミキモトのWebサむトの商品画像

4. 矎しい倖芳写真

  • 商品写真だけでなく、店舗倖芳写真もゞュ゚リヌのように矎しい。
  • きらびやかにラむティングされおおり、足を運びたくなる。
  • 高玚感が挂う色遣いずラむティング。
ミキモトの店舗画像

5. あしらい

  • 真珠やティアラを扱うゞュ゚リヌショップならではのWebデザむン

ブラむダルのペヌゞには、セクションの間に真珠の円圢ずゞュ゚リヌを型取ったオブゞェクトが配眮されおいたす。

このあしらいにより、ペヌゞをより華やかに挔出する事ができおいたす。

 ★星屑の幞せ★ | Webサむト100遞

おすすめ

コメントを残す

メヌルアドレスが公開されるこずはありたせん。 ※ が付いおいる欄は必須項目です