■概要
メンズコスメを扱っているBOTCHANのブランディングサイト。
■ターゲット
・10〜20代の男性
・化粧をする男性
■FV
取り扱い商品をいくつも並べた画像をスライドで表示。男性のコスメではあまり見ないようなカラフルな配色がとても印象的。ブランド名はヘッダー左上に小さく固定で表示されてあるが、トップページ中央にも白文字で表示されており、一番最初に目が入るためよりブランド名が記憶に残りやすい。ヒーローイメージの色味が多いためか、ナビゲーションは項目ごとに背景色を変えて配置。埋もれることなく存在感がある。
せろりのセオリー/ Webサイト100選 No.95 BOTCHAN
■特徴
・Reccomended
お勧め商品は2カラムで紹介。コスメ画像の背景は、それぞれのパッケージと同じあしらいのデザインを使用しているため、より商品のイメージが刷り込まれて記憶に残る。テキスト部分は読みやすいよう無地背景で表示。
せろりのセオリー/ Webサイト100選 No.95 BOTCHAN
・Product
3カラムで取り扱い商品を紹介。各商品の上にカーソルを持ってくると画像が少し大きくなり、背景のあしらいが動くようになっている。各テキストは、背景色に合わせた色を使用。カラフルな配色で何度もホバーをしたくなる。購入ボタンの文字は小さめだが、背景を黒にしアイコンを一緒に表示させているためわかりやすい。
せろりのセオリー/ Webサイト100選 No.95 BOTCHAN
・Topics
見出し、日付、コンテンツ内容、Read moreの位置が一番左だけずれているのが個人的に気になる。コーディングの際には同じ高さになるよう余裕を持った高さで設定したいところ。しかし、Topicsという固定では無く不定期で更新される内容のため、決め打ちで設定出来ないと考えると難しいところ。
せろりのセオリー/ Webサイト100選 No.95 BOTCHAN
■フォント
・Roboto
■配色
・#000、#535353、#fff
せろりのセオリー/ Webサイト100選 No.95 BOTCHAN