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

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

No.84 Bollina O³ MIST

■概要

電気分解方式により水を容器に入れるだけで殺菌・消臭効果のあるオゾン水を生成出来る、携帯オゾン水生成器のサイト。

 

■ターゲット

・除菌・消臭を気にする人

 

■FV

画面いっぱいを使ったヒーローイメージ。大きく配置されている背景のタイポグラフィーも印象的。背景の文字周りにはほんのりと白い影が付けられており、メインの水生成器の周りにもシャドウが付けられているため、商品が浮き上がったように立体感が出て印象的になる。水滴の画像があることでよりみずみずしさ感じる。

 

■特徴

スクロールすると上部にロゴとIntroductionが固定で表示される。Introductionは、ページのどの部分を読んでいるのか○を使って表示されている。右下に配置されているアイコンは、背景に馴染むシャドウが入れられていて、カーソルを載せるとシャドウが明るい色に変化する。

サイト全体として透明感のある柔らかい雰囲気が特徴的。文字色を黒より少し明度を上げた色にすることで、読みやすさを残しつつサイト全体のふんわりとした印象に馴染むようになっている。

 

背景文字のシャドウの入れ方がとても綺麗で立体的。水の滴が落ちて弾けるアニメーションがとてもリアル。

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

 

オゾン水の効果をアイコンを使い説明。アイコン化することで目に入りやすく、シンプルで読みやすい。

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

 

商品のイメージ画像をスライドで表示。画面の3/4と1/4に分けて表示させているのが特徴的。写真の間に丸いページャーが用意されているが、小さくて分かりずらいし、カーソルのクリック出来る範囲もかなり狭く使いづらさを感じる。ここでのクリックはあまり求められていない?

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

 

・Feature

見出しや振ってある番号のジャンプ率が高く見やすい。スクロールすると、番号には水滴が滴り落ちるようなアニメーションが付けれていて、水滴の画像も相まり水の透明感が伝わる。ふんわりと要素がフェードインしてくる様も落ち着いた印象を与える。

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

 

Stepも番号を大きく表示させることで、商品の扱いやすさが伝わりやすい。

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

■フォント

・din-2014、futura-pt

 

■配色

・テキスト: #5d5f68、#666、#abbdd6
・ベースカラー: #e2eaf5
・アクセントカラー:#fff

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

 

 

 

Webサイト:Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

せろりのセオリー/ Webサイト100選 No.84 Bollina O³ MIST

次へ 投稿

前へ 投稿

返信する

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

テーマの著者 Anders Norén