Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。
第10回目は洗濯洗剤のブランド、ラボン [LAVONS] の公式サイト。
手書きのイラストが可愛らしいなと感じたサイトでした。
ラボン [LAVONS] 公式サイトの「柔軟剤」ページです。
ターゲット
思いっきり女性向け。20~30代くらいだろうか。
配色
白ベースに、淡い水色、清新な印象のある蛍光ブルー。
ベース：#ffffff
メイン：#f8f8f6
アクセント：#66CCB8
テキスト：#000000
フォント
本文は游ゴシック。
セクションタイトル英数字（img配置）：Looking Flowers CapsあたりのHandwrittenフォントをもとにアレンジor手書きした？
本文： 游ゴシック体, 游ゴシック, YuGothic, “Yu Gothic Medium”, “Yu Gothic”, “Segoe UI”, Meiryo, sans-serif
レイアウト
PCファースト。
ブレイクポイント：768px
line-height: 1.6~1.7くらい
内部コンテンツ幅： 最大1130px
セクション間空き：見た目でPC120px / SP60pxくらい空いて見えるように調整
ファーストビュー
No.010 LAVONS
明るくナチュラルなイメージで撮られた商品画像と、手書き風のキャッチコピーが目に入ってきます。
左上にブランドロゴ。
導線
右上にハンバーガーメニューが追従。
ブランドのトップページ、その他の商品へのページ、各種ECサイトへのリンク、SNSリンクが貼られている。
PCサイズで見ると左端にアイコンのSNSリンクがある。
フッターに各種ECサイトへのリンク。
コンテンツ
ファーストビューから少しスクロールすると、商品バリエーションの紹介がされている。ページ内リンクで飛ぶことができる。
SPサイズでは横にスクロールする。
スマートフォンサイズ。
個別の商品紹介は、商品イメージと香りの説明を画像で置いているproductphotoのdivに、商品タイトルや説明を含むproductdetailのdivをpositionで重ねて実装しているようです。
香りの説明にこの矢印使うんだ…。ピラミッド型とかはよく見るけど
トップノート→ミドルノート→ラストノートの順に香るからこれでもいいんだ
ページ全体は白と水色で爽やか印象。
ところどころに使われている壁紙風のテクスチャや、手書きのイラストがナチュラルな印象です。
フルサイズ
コメントを残す