ウェブデザイン分析①キッズ・楽しいデザイン編（スクスクボール）

webデザイナー志望のむくです。

日々ウェブデザインやグラフィックデザインの勉強をしています。

Webデザインのスキルである言語化能力のアップのためにウェブデザインの分析をしていきたいと思います！合わせてアイキャッチの作成も、制作練習として取り組んでいます。

1回目は、私の気にいっているサイトで、スクスクボールという商品のLPを取り上げたいと思います。かわいくて、わかりやすくて、気持ちいい！と見ていて思い、食品を取り扱っている、育児中の人をターゲットにしてる点でも興味がありました。

URLがこちらです→https://sukusukuball.jp

最初に概要で大枠の分析をして、その後サイトの流れにそって各カテゴリごとに分析をしています。ここから　である調に変わります。

1.概要分析

タイトル：スクスクボール
内容：ご飯に近いおやつ
印象：こども、かわいい、楽しい、優しい、おいしい
カラー：オレンジ系　#E8652B、ブルー系　#65BBB1
フォント：欧文　Helvetica Neue　　　和文　Noto Sans JP、ヒラギノ角ゴ
一般的なフォントだが、色と、レタースペース、行間でころっとかわいい印象になっているのではないか。
中心となる写真：商品を食べている親子、商品で遊ぶ子ども、場所は保育園（木のあたたかみがでている）
中心となる画像：サーカスのような楽しげな動物イラスト。横向
きで統一。
流れ、導線
①画面固定ボタン：固定しているのはロゴ（左上）、メニュー、ショップサイトへのリンク、会員ページへのリンク（右上）、会員登録画面へのリンク、購入ページへのリンク（右下）。
②流れ
最初に動画でのトップビュー、その後最新のお知らせ、コンセプト、商品特性、試食会での様子（写真、感想）、商品詳細（ラインナップ）、購入ページ、Q＆A、商品開発について、パッケージの動物紹介、フッター。
全体の印象：丸と四角のメリハリが効いている。色もオレンジとブルーの２色が際立っている。イラストのところどころに別の色が使われているものの、ごく少量。要素の動きのリズムも統一され、気持ちの良い感覚。子供たちの楽しげな様子が多用された写真から伝わってくる。

2.トップビュー

サイトを開くと「おかしより、ごはんにちかいおやつ」の言葉とサイト移行のアニメーション。その後現れるトップビューではこどもたちの箱を開ける様子が動画で流れる。正面にイラストが配されたロゴで、カラーが印象的である。

3.ニュース部分

のしがつけられたり、誕生日カードがもらえたり、といったギフト需要対応とお得情報があり、すでに商品を知っている人も、初めてページを訪れた人も、まずこれいいな、と思ってもらえるきっかけになっている。

4.コンセプト部分

写真の上に文章をかさね、物語性やメッセージ性を感じる雰囲気になっている。文章の左端はニュース部分の左端と揃っている。

２カラムと３カラム、横幅いっぱいの３種のレイアウトをメリハリよく使っている。コンセプトや試食会の様子など、物語性のある要素、印象付けたいは画面いっぱいになっていることが多いのではないか。（一部、商品開発の説明量が多い部分は画面いっぱい）

5.商品特性紹介

特徴は３つにしぼり、わかりやすい。イラストと小見出しでシンプルに伝わってくる。円はすこしぼこぼこしており、商品と似た雰囲気にしている。ホバーするとひっくり返り、詳細が見られる。ひっくり返した感が伝わる、背景色と文字色を反転した形。図形の背景にはお米を想起させるパターンがうっすら見える。

栄養素の説得材料の紹介
数字のみ大きくし、ダイレクトに伝わる。ついで、栄養素名、詳細の順にフォントサイズ、太さを変えている。
お米の写真を中央にして、なんの説明なのか一瞬でわかる。
見出し、本文が中央揃え。本文は
letter-spacing: 0.16em;
line-height: 2.4;　読みやすい。

6.試食会写真、感想紹介

興味を持ち始めたターゲットに、口コミや使用者の表情、感想を見せることで一層の興味と安心感をもたせるための構成ではないか。
ご両親からお子さんへのメッセージが手書きで書かれているところや、子供が集中して箱を開ける様子（何が入ってるんだろう？という興味をそそっている）が、商品のゴリゴリの宣伝でなく、子供への愛情の表現としてこの商品はどうでしょうか、という提案であったり、子供が見た瞬間に興味をそそられ、自然と食べてくれるような商品なのではないかということが無意識に感じられ、商品を宣伝されていることへの抵抗感が少ない。ところどころに保育園の椅子や壁の写真が入り、抜け感もある。画像は割と余白が少なめに組んであり、画面全体を使った印象が前の流れとのメリハリを感じる。

7.口コミ紹介

素材の味に少し物足りないこどもも一部いたようなのだが、それも率直に掲載され、飾らない口コミの掲載がむしろ好感度につながっているのではないか。もっと見るボタンで他の口コミが見られる。見出し、小見出しが中央揃え、本文はそれぞれの四角内に左揃え。

8.ラインナップ

見出し、小見出しが中央揃えであり、voiceとおなじ流れ。
ピンクとグリーンには、右端に小さくイラストが描かれ、なんの味かがわかりやすい。原材料名は文字色を少し薄くし、本文の細く的な情報であることがわかる。
商品名と本文、原材料名は左端揃えで、左上から下へ読みやすい流れ。

9.購入画面

文章が続いた後の息抜き的な写真。抜け感とカラフルな写真での楽しさを作っているのではないか。

最初に発送の詳細やまとめ買い時の特典が掲載され、ユーザーの気になっている点を解消と、お得感を多少押している。

商品画像はホバーで入れ替わり、商品の箱と、箱を開けた際の様子が見れる。
商品は３個セット、６個セットなどの個数での分け方のためか、数字を大きくしてわかりやすくしている。値段と商品名がオレンジ色で、目立たせ、（赤と近い色のため）多少お得感を感じるような色味としているかもしれない。
カートに入れるボタンはゴールドに白抜きで、白が基調となるこの画面の中で商品名・価格に次いで目立つ。
手頃な普段用、お試しパックを含めたスマートパックもあり、値段で迷っているユーザーのハードルを下げている。

もっと購入時の詳細を知りたいユーザーへ、ショッピングガイド等の事務的な連絡がわかるページへの誘導がある。

10.開発話

毛色が変わり、商品開発へいたった思いが掲載されている。
背景色がオレンジになり、毛色が違う感が出ている。
もっと商品について詳しく知ってから買いたい人向けか。
文章量が多いためか、２カラムで、イラストや写真が少なめ。

11.どうぶつ図鑑

再び楽しい雰囲気の構成。ホバーでひっくり返り、動物図鑑がミ見られる。イラストのかわいさを味わう部分でもあるように思う。ボタンを押せば全種類が見られる。最後にイラストレーター の紹介。

12.フッター

こどもの写真と、ショッピングガイド、プライバシーポリシーなどの事務的なページへのリンク。
固定で右下に購入ページへのリンクと会員登録へのリンクがあるため、下まで読んでも導線は迷わない。

以上、分析でした。全体的に可愛いのに、フォントはオーソドックスなものであったのと、カラムの構成のメリハリが特に興味深かったです。フォントは一般的なものでも、レタースペースと行間の調整で読みやすさや洗練された感じがだせて、カラーを変えることと他の要素との調和でかわいさや楽しさは演出できると思いました。以下、レイアウト分析の最終です。