デザイン解剖 #66
今回は FruOatsさんのブランドサイトを分析&トレースさせていただきます！
コンセプト推察
優しいおやつで、からだを嬉しく
・カロリーを気にしている人でも我慢せずに食べられる
・ヘルシーさとおいしさを両立している
という商品の性質から、暖色・丸みの強いフォントで優しい印象を大事にされているのかなと思いこのコンセプトにしてみました！
使用フォント
英文_menu/セクションタイトル/数字/ボタン：Inter
Interは、UIでよく使われるRoboto, San Francisco, Lucida Grandeにインスパイアされたフォントです。小さいサイズでより機能するようにデザインされています。
Figmaで働くデザイナーのRasmus Anderssonさんは主にRobotoというフォントを使っていましたが、もともとRobotoは見出しなどに使われる想定であるため、文字サイズが小さくなると非常に読みづらいという問題を抱えていました。Anderssonさんは「小さい文字でも読みやすいフォントはないものか」と調べていましたが、最終的に「ない」と結論付けました。そこで作成されたのがInterというわけです。
英文_あしらい/商品名：futura PT
言わずと知れた王道書体。Oがほぼ正円だったり、直線的な部分が多かったりと、取り入れるとシンプルで洗練された印象になりますよね。
一方でM,N,Wなど鋭角が尖りすぎる印象の時には、ウェイトが高いものを使用するようにしています(個人の感想)。
和文：Noto Sans JP
ザ・王道の日本語webフォント。とても丸みのある文字なので今回のコンセプトとも合っている。
ロゴ：Sofia
端が角丸・曲線が滑らか、線幅に差がある、ととてもフェミニンな印象のフォントです。
MVコピー：游ゴシック ボールド
MVコピーのみ游ゴが使われている。
文字通り"キレイ"感を出すためと推察。
使用色
背景：ピンクみのオレンジ(#EC6D4E)
→食材にいちごやオレンジなどの果物とチョコレートも使われていることからの色味チョイスなのではないか？
文字色：白(#fff)
基本的にはこの2色のみで構成されている。
一部分(あまり目立たせなくて良い箇所)には、CSSで不透明度を低くする対応がされている。
特筆点
FV
ヘッダーH200pxでスクロール固定
menuは、マウスオーバーで文字を上下方向に回転させるアニメーションをつけることでクリックできることを伝える
MVは右から左のスライドアニメーションになっており、右側が見切れていることで興味を掻き立てる仕様。
またスクロール誘導には円形を採用し、回転するアニメーションをつけることで水車のように画面を動かす役割を果たしていると感じた(スライドと回転の速度が同じなのも心地いい)
コンテンツ
見出し(h2)が13pxとかなり小さいが、読んでもらわなくとも、その下の文章を見れば内容がわかるとの判断からだと思う。区切り線くらいの役割になっている。
背景としての画像は通常の長方形を、コンテンツとしての四角形には10Rの角丸をつけて使っていることで、実際に目に入る箇所は柔らかめの印象、背景はかっちり目、とわずかなコントラストが効いている
コンテンツ下部にfutura(100px)で材料をスライドして見せる仕掛けあり。ここで一旦目を引く動きをいれることで、うるさくはならずとも飽きさせない試み？
写真素材をぼかして背景に使用することで、新たな色を使わず、かつトンマナが合い、抜け感のある演出が可能になっている
ボタン
優先度高の場合
マウスオーバーで白→オレンジに変色&枠線ができる
広範囲の背景と同じ色なので、差別化するために枠線を入れていると思われる
優先度低の場合
マウスオーバーで円部分がオレンジ→白に
文字と記号が近づく演出
商品そのもののリンクにとんでもらうことの方が重要なので、こちらはあまり目立たせていないと思われる
フッター
ヘッダーが追従のため、フッターにはメニュー入れずシンプルに。
他の背景とも同色で、あまり目立たせていない。
SNSアイコンも白で統一し、他のコンテンツと調和させている
その他気づき
背景の色味と写真の色味がすべてマッチしているためFVに白抜きのロゴを置いたり、画像を広く使っても違和感がないのだと思った。
もしかしたら最重要点かもしれない。(写真そのもののトンマナを合わせることは心がけるが、サイトで使用している色味のトーンと合わせるという点はなかなか気づけていなかった発見かもしれない)
SP
基本的には、左右を上下に組み替えた配置。
こちらのFV下部部分のみ、画像が先に見え→文章レイヤーが重なり→さらに別素材まで重ならせることでつながりを見せる仕掛けが斬新だった。
PC同様、テキスト部分が左側によっているのも面白いと思った(自分なら中央揃えにしてしまいたくなるが、確かにそれだと動きがなくてのっぺりした印象にまとまってしまいそうだ。)
トレースさせていただきました！
ほとんどのマージンが10(100単位)で構成されていました。
和文：見出し60pt平文28ptなど、ジャンプ率がかなりはっきりしていました。
背景画像のHが1500pxなど、かなり大きく大胆に画像が使われていました。
写真がいくつか重ねられたような演出の箇所では、左右20度ずつにずらされていました。
励みになりますのでよろしくどうぞ！