10.SUKUSUKU BALL サイトレビュー

https://sukusukuball.jp
お米と野菜だけで作った子供のためのおやつ、SUKUSUKU BALLのWEBサイト。
ギャラリーサイトのMUUUUU.ORGから発見し、可愛い!と一目惚れしました。
小さいお子さんの食べ物は、親御さんはとても気を遣っていると思います。このサイトでは、SUKUSUKU BALLの安全性や健康に良さそうといった情報はもちろん、可愛いデザインで、親御さんにとって魅力的に映るサイトになっています。

目的
・SUKUSUKU BALLを購入してもらう
・SUKUSUKU BALLを知って、興味を持ってもらう。

ターゲット
・小さなお子さんがいる親御さん
・親御さんにプレゼントを探している友人　

特徴

余白
縦108pxほど。余白狭めでワクワク感が高まる。

配色
#e8652b   メインカラー　オレンジ
#6ddbcc   メインカラー　水色
#FFF01E　アクセントカラー　黄色
#ca963a   ボタンなど。ゴールド
#f2f2f2　  ボタンなど。灰色
#666　　  文字　黒

オレンジと水色の割合が大きいため、ポップな印象が強い配色です。
水色は食欲減退色になってしまいそうですが、オレンジと合わせて使っていることや、おもちゃみたいなポップなページなので上手く馴染んでいます。
ゴールドが時々入っているため、少し上品な印象になります。
本文で時々使われる黒文字も、かなり灰色よりで柔らかい色。

フォント
-apple-system,system-ui　日本語
Overpass　　　  英語　　Google Fontで利用可

-apple-system,system-ui
このfont-familyを適用すると、San Franciscoというフォントが表示されます。(詳しくはこちらの記事)
Overpass　
スタンダードで使いやすそうなフォント。半角文字ではbやhなどの先端が途切れているところが特徴的。数字が柔らかい雰囲気。このサイトでは子供のための製品ということもあり、英語はあまり使われていません。

フォントサイズはvw指定だったので、今回は記載しません。このサイトはvwや%で指定されているので、画面幅が大きくなってもコードを変えることなく対応できるところが特徴的だと思いました。

メインビジュアル

メインビジュアルはロゴ+背景動画です。ロゴがすごく可愛いので、大きめに入りすることで世界観が伝わります。
ハンバーガーメニューの外にカートアインコンやログイン、SNSのアイコンがあるところが特徴的だなと思いました。
右下にも購入ページへの導線が常に配置されています。このページは商品情報を公開ページであると同時に商品を買うこうともできるので、LPページ的なサイトではないでしょうか。

「米」モチーフ

このサイトでは丸の代わりにお米をイメージできるようなギザギザ丸が随所に使われています。
表示しているコンテンツはホバーでめくることができますが、その背景にはご飯粒をイメージできるようなつぶつぶが描かれています。
細やかなところまでこだわると統一感がでます。

真似したいポイント

・コンテンツ
メインビジュアル→バナー→導入分→商品の利点→原材料の利点→試食会の写真→使用者の声→ラインナップ→ショッピング→Q&A→開発者について→キャラクターについて

・角は丸くして柔らかい雰囲気を出す

・英語は少なめに。
→親しみが重要なので、英語はあまり使わない。使う時は分かりやすい言葉に。

・本文の文字はオレンジが多い。
→黒を使うと硬い印象になり世界観が合わなくなってしまうので、オレンジが使用されている。文字としても読みやすい色がメインカラーの場合に取り入れたい。

・ハンバーガーメニューをカラーに
→ハンバーガーメニューを3色使って表現しているので、ワクワク感が出る。

・商品のラインナップで使用されている原材料のイラスト
→文を読まないでも何の商品か分かりやすく親切。

・商品の写真は最初外箱。ホバーすると開けたところが見える。
→商品がどれくらい入っているかイメージがつく。パッケージがとても可愛いので、最初にパッケージを見せていると購買意欲が高まる。

・商品購入コンテンツではボタンをゴールドに
→商品の質は良いが少し価格帯は高いので、ゴールドを加えて高級感を出す。

・コンテンツが多いときは、もっと見るボタンを設置してあげる

感想

今回のサイトではSUKUSUKU BALLのWEBサイトを紹介させていただきました。
イラストがたくさん使われたとても可愛いWEBサイトでした。
SUKUSUKU BALLも小さいお子さんがいる方にぜひプレゼントしたいなと思いました。