1日1WEBサイト デザイン分析 #10 "フルーツトマト専門農家 | 曽我農園"

こんにちは。WEBデザイナー目指して勉強中のかいもちです。
今日は思わず「美味しそー・・・」と感嘆の声が漏れてしまうようなページを見ていこうと思います ! 

"フルーツトマト専門農家 | 曽我農園"

目的・ターゲット

目的
・「越冬トマト」ブランドをまず知ってもらう
→ 販促 (通販)

ターゲット
・ 地域限定のこだわり食材に関心のある人 (プロアマ問わず)

配色

・背景は、雪の冬空を連想させるような淡いクリーム色 / グレーをあしらい、フッターにはやわらかめのグリーン(トマトのヘタの色 ? )。
・文字色はパキッとした白 / 黒のどちらかを背景に合わせて使用。
・トマト色オレンジは色としては使われておらず、写真のみ。

フォント

・Garamond Premier Pro (タイトル / サブタイトル英字)
→ Adobeフォントで使用可。横長で丸っこいがスタイリッシュという不思議なヤツ... 使いやすそう ! 

・Inter - 400 (本文の小さめ英字)
→グーグルフォントで使用可。特にこれといって特徴はなく、スッキリした見た目のゴシック体。

・游明朝体 - 500 (タイトル / サブタイトル日本語)
→堅すぎず、崩しすぎない明朝体。漢字が綺麗。

・YuGothic - 500 (本文日本語 / 数字)
→言わずもがな...

ファーストビュー

特徴
・(本当はこうやって越冬させてるわけではないだろうけど) 「越冬」と「トマト」をわかりやすく表している。
・タイトルはフォントではなく画像
・グラデーションがかかっていて、下の方に行くほど白くなり、背景色と同化する。雪からのグラデなので違和感は全くない。

コンテンツ

※ 左右のメニューは、白→黒に変わって固定表示

左のメニューは、スクロールすると該当箇所に応じて ▶︎ が付く仕組み。

About (かな ? )
・背景が白→クリーム色に変わったことで、セクションが変わったんだなーということに気づく。
・写真の配置が左右非対称なところ、大きさがまちまちなところがモダンでおしゃれ。セクションタイトルが明朝体なのに硬くない印象になる。

Recent News
・再び背景色に変化あり。
・ここは写真を使わず、あえてシンプルにして、他を目立たせているのかなー。

Products (かな ? )
・写真以外には色を使わないことで、トマトの赤がより映えている。
・→ をクリックしなくても、写真をホバーすると拡大表示されるので、写真からも詳細ページに飛べることがわかる。

Stories
・ホバーに関しては上記productsと同じ特徴あり。
・文章の余白が多め。普通ならもうちょっと説明したくなっちゃうような気がするけど、グッとこらえて詳細ページに飛んでもらっているのかな。

ナビとFooter
・シンプル。ここだけ緑を使っているのがおしゃれ。

感想

・情報の受け取りやすさ、と、おしゃれさが両立しているページだと思った。

・固定ヘッダー(左のメニュー)に合わせてのスクロールになるので、時々固まるのが惜しいと思った。遷移ページでも、これが起因っぽいバグが所々あって、スクロール系アニメーションの難しさを感じた...。

・写真の配置の仕方や文章の量など、魅力的に魅せる秘密が少しわかった気がした...。