webサイト分析(2)やさしい切り方辞典(貝印株式会社)

やさしい切りかた辞典 | 貝印

【概要】
貝印株式会社によるやさしい切り方辞典のプロモーションサイト
・食品ロス問題への取り組みの一環として無駄のない野菜の切り方を紹介している
・SDGsの取り組みを身近にするべく、包丁を接点にして家庭での食品ロスに対するメッセージを伝えている

【想定ターゲット】
どんな人：料理に興味のある男女、絵や動画を用いているため家庭科の授業で包丁の使い方を学び始めた小学生でも分かりやすそう。
流入理由：SDGsに興味がある・食品ロスをなくしたい・野菜の切り方を知りたい

【第一印象】
カラフルでかわいい、動きがおもしろい、パステルカラーで見やすい

【デザインポイント】
トップページ：野菜が1列で表示され、右→左に流れる。時々野菜が半分に切れたように動くのでおもしろい。スクロールするとメインのページが表示される。

ヘッダー：固定。やさしい切り方辞典(概要表示される)が左端、メニュー(ハンバーガー)が右端

ハンバーガーメニュー：home、about(概要に飛ぶ)、各種切り方ページに飛ぶ。
クリックすると。。
★menuの部分はcloseに。y軸↑方向に回転。
★ハンバーガーの部分は×になるが、y軸↓方向に回転。
★menuとハンバーガーのクリック後の動きが逆になるのでダイヤルみたい。見ていて気持ちいい
★一覧は下からフェードイン

・それぞれの切り方ページに飛ぶと、切り方動画、順番、シェアできるようにSNSへ飛ぶボタンが設置されている
・ホバーで色反転

メインビジュアル
・全体がグリッド表示？だけど、スクロールすると。。
★gapが生じる
★野菜のビジュアルが散らばる

・動かさずにいると。。
★切り方の動画が表示される、ランダムっぽい

・野菜のビジュアル(画像でもイラストでもなさそうなのでビジュアル笑)をホバーすると。。
★この動きの名前が分からないが、ビジュアルの向こう側でボールを転がすような動き(表現難しい)
★矢印マークの色反転

とにかくアニメーションが面白くて、ぐるぐるスクロールとホバーを繰り返してしまう(笑)

• フッター：固定。スーパーバイザーのお二人の紹介。右下。ホバーで色反転。
  
  
  全体の配置
  ・背景となるメインビジュアルがカラフルな分、メニューなどの要素がシンプルな色使いとフォントで示されている。
  
  
  【カラー】
  #005BFF　テキスト・矢印・メニュー
  #FFFFFF　背景
  
  【フォント】
  　YakuHan jp
  
  【構成】
  トップページ
  メインページ
  
  【レスポンシブ】
  ・変化なし。表示を変える必要がないのかな？
  
  【考察・感想】アニメーションが面白くて、気が付くと動きの虜になっているサイトだった。サイトを見ている時間も自然と長くなる効果があるのかなと。野菜の表現も、よく見ると△で構成されていておもしろい。たまねぎ、しいたけ、など漢字表記も少ないのでどの年齢層でも見やすいと感じた。やさしい切り方って、初めて見る人には何が優しいの？と興味を持たせる言い回しだと感じた。