https://www.vermicular.jp/products/fryingpan/

◎視点
大手サイトで見やすいサイトを確認したく、今回はビジュアル画像も美しく、見やすくフォントのジャンプ率など細かいとこまで配慮されたVERMICULARのサイトをチェック。
フライパンのよさを引き出す見せ方が素晴らしい。
フライパンのページは、個人的にファンであるSTUDIO DETAILが制作。美しい・・・。

◎概要
ここ近年話題に良く上がるVERMICULARのフライパンサイト。
フライパンの魅力を引き出し、そのこだわりや使ったレシピを掲載している。

◎ターゲット
30代〜主婦,料理にこだわる人
・高品質なだけに、値段もそこそこする。そこまで出して料理にこだわる人
 →お金に余裕のある人
 →高級感を出したデザインに

◎配色
ベースは白と黒のシンプルな配色。それが故に、写真が目立つデザインに。

◎フォント
[見出し] A1明朝 / 40px
[本文] 遊ゴシック / 16px

見出しは明朝体で目に入りやすく、本文はゴシック体の読みやすいデザインに。

◎余白
見出し下:40px
コンテンツ上下:120px前後と、大きく設置

◎FV
3枚の写真がフェードしながら切り替わる。
フライパンの写真 / フライパンと料理を載せた写真 / 使用中の写真
と、買う前、から買った後までを連想できるような写真のチョイス。

◎商品紹介ページ
大見出しを大きく設置。上と下に背景がある中に挟まれているので見出しが良く目立つ。
商品紹介はhoverで商品が小さくなり透過される。
2つの違いがまずすぐにわかるようにサイズのフォントが大きい。

◎Value Proportion
フライパンで作った料理写真を大きく横いっぱいに配置。
素材のつやなどを綺麗に表すまでに綺麗に補正されている。
白文字が乗りやすいように薄くフィルターがかかっている。
(これが実際にやると難しい。暗すぎると写真が崩れるし、薄いと文字が読みづらい。この写真加工は素晴らしい・・・)

◎テクノロジー
写真から湯気が出る動画になる。共に特徴をグラフで表現。
背景が黒いので、メリハリがつき、高品質感も出る。

◎写真の配置
項目ごとに写真の配置が変わってくるが、どれも文章を引き立てるバランスの取れた配置。

◎テキストの配置
コンテンツ見出しが右に。
あまり見ない配置な気がするが、コンテンツ見出しが本文を邪魔しない。

マスタードなきもち| Webサイト100選 No.099 VERMICULER

◎フッター
他商品やコンテンツ数も多い為、フッターで整理されている。

マスタードなきもち| Webサイト100選 No.099 VERMICULER

コメントを残す