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

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

No.28 BASTA

■概要

除草剤のサイト

 

■ターゲット

・家庭菜園、花壇、家周りの雑草に困っている人

 

■FV

商品を中央に配置し、使用目的場所である花壇や庭を背景画像にしている。メインビジュアルの邪魔にならないよう背景画像はぼかしが入れられている。

左上のBASFの文字は、自然を感じさせる温かみのある緑を背景色として使っていて、製品の安全なイメージにも繋がる。
草を枯らす除草剤等の薬品は、安全で害が少ないことをアピールする必要があるため、背景色やアクセントカラーの使い方で、商品のイメージも大きく変わる。

色んな種類の除草剤がある中、デザインがシンプルでスタイリッシュなため、手に取りやすい。

 

 

■特徴

スクロールすると、FVで中央に配置されていたボトルが固定で一緒についてくるようになっている。テキストは黒に白抜きの文字を使っていて、背景が無地なだけあって視線がグッと集まりやすい。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

・about

見出しはジャンプ率を高く、左に大きく縦文字で表示。aboutはスクロールすると右側から写真やテキストが流れるように表示される。フォントサイズを使い分け、縦書きを随所に入れることで、商品の売りの一つでもあるスタイリッシュさが表現されている。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

・バスタALの使い方

使い方は3ステップは、シンプルで分かりやすい。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

・バスタALの特徴

商品の特徴を3つに分けて紹介。画像の右下に番号を振り、写真を左から少しずつ下にずらした配置。自然と斜め下に視線が誘導される。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

商品の特徴や安全に使用するための注意書きでは、イラストが添えられていて、ユーザーが飛ばすことなく見るような工夫がされている。線を引いて区切ることで、文字の読みにくさや、ユーザーの離脱を防いでいる。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

・よくある質問

除草剤などの薬品は、少量だけのお試しが出来ないため、ミスマッチを防ぐためにも、ユーザーからのよくある質問を入れることで事前に商品の特徴を確認でき、購入への安心感へ繋がる。

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

■フォント

・本文:Noto Sans JP、serif
・欧文:Arial Narrow

 

 

■配色

・ベースカラー:#F5F5F5
・テキスト:#000
・アクセントカラー:#66AD2C

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

 

 

 

 

Webサイト:BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

せろりのセオリー/ Webサイト100選 No.28 BASTA

次へ 投稿

前へ 投稿

返信する

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

テーマの著者 Anders Norén