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

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

No.85 FruOats

■概要

植物由来のオートミールやチアシード・ドライフルーツを使って作られたグルテンフリーお菓子のサイト。

 

■ターゲット

・ヘルシーなお菓子を食べたい女性(ダイエット向け)
・小麦粉アレルギーの人

 

■視点

背景にインパクトの強い赤色を使いながらも、要素の重なりや文字色を工夫し伝えたい内容が見やすく伝わりやすいこちらサイトをレビュー。

 

■FV

植物由来の穀物やドライフルーツと聞くとなんとなくベージュ系の優しい色をイメージするが、赤系の背景色を使っているのが特徴的。クッキーが果物やオーツに囲まれていて、商品の特徴であるヘルシーさが伝わってくる。ゆっくり流れるスライドが健康的で落ち着きのある雰囲気を感じさせる。テキストは赤背景に映える白文字を使用。シャドウを入れなくても可読性があり読みやすい。

 

■特徴

各セクションの見出しは13pxとかなり小さめ。商品のコンセプトは背景を白のベタ塗りにし、h3の見出しは大きく表示。我慢しなくていいおやつというフレーズは女性に刺さりやすい。

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

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

 

 

各セクションは100vhの表示で収まるぐらいのコンテンツ量で、スラスラと読むことが出来る。セクションを跨いで画像を重ねたり、文字にアニメーションを入れることで動きを作り単調にならないようになっている。

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

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

 

 

FruOats’s Feature

特徴を番号を振ってグリッドで紹介。重ねられた数字と赤字のタイトルが目に入りやすく分かりやすい。具体的な数字をタイトルに入れることで、テキストを読まなくても伝えたい内容が伝わってくる。

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

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

 

 

■フォント

・Inter、Noto Sans JP

 

 

■配色

ベースカラー:#EC6D4E
・テキスト:#2b2b2b、#fff、#EC6D4E

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

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

 

 

 

 

Webサイト:FruOats

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

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

次へ 投稿

前へ 投稿

返信する

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

テーマの著者 Anders Norén