せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No. 83 LOOP EAR PLUGS

■概要

ノイズキャンセリングイヤホンのサイト。
騒音を低減するイヤホンと、大音量の中で音質を保ちながら音量を低減させるイヤホンの2種類が紹介されている。

 

■ターゲット

・仕事や日常生活の中で騒音を消して集中したい人
・騒音から耳を保護したい人
・コンサートなどのイベントで大音量から耳を保護しながらも音楽を楽しみたい人

 

■FV

2種類のイヤホンを2カラムで表示したヒーローイメージ。シチュエーションによる使い方を明示するため、RELAXとMUSICの見出しはジャンプ率を高くし、モデルさんの背景もシチュエーションに沿った画像が配置されている。全体の写真のトーンを抑えることで、商品のイヤホンが立体的に見え目立つようになっている。

 

■特徴

トップページをクリックすると、それぞれの詳細ページへ移動。

 

・Relax

騒音を低減し静かに自分だけの音を楽しいたい人向け用のこちらのページでは、Relaxを表すように背景色を白にし落ち着きのある印象になっている。
下部には金額と購入サイトのリンクが常に表示されているため、購入へ繋がりやすい。もう一つの同じシリーズの詳細ページのリンクも固定で表示。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

各見出しのジャンプ率が高く、必要最低限のテキストのため読みやすい。
シャドウの付け方や文字の配置、配色に統一感がありスタイリッシュでお洒落である。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

 

視線誘導に繋がるようあしらいや写真が配置されている。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

 

・Features

番号を振って大きく表示。装飾を入れないことで見やすく、シンプルに分かりやすい内容になっている。たっぷり取られている余白が洗練された雰囲気を出している。アピールポイントの低減の大きさは、フォントを太字にし丸で囲むことで強調される。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

カラーバリエーションはスライドで紹介。金額と色を掲載し、ページャーの丸は各カラーに対応した色になっている。スライドすると商品の色に合った背景色がつくようになっていて華やかになる。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

 

大音量から耳を保護しつつも音楽を楽しめるLoop Experienceのページでは、黒を基調にLoop Quietと同じページ構成でデザインされている。

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

■フォント

・Metropolis Semi、Noto Sans JP、Hervetica

 

 

■配色

・#000、#3A3A3A、#fff、#F4F4F4

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

 

 

 

Webサイト:LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

せろりのセオリー/ Webサイト100選 No.83  LOOP EAR PLUGS

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén