WEBサイト分析　#003　【ジャパンフードサービス】様

おはようございます。
今回はunion.net様の実績から、
【 ジャパンフードサービス 】様のWEBデザインの分析をしていきます。

ファーストビュー

ファーストインプレッション

▼美味しそう
▼明るい感じ
▼ちょうどいいアニメーション
▼子供さんの笑顔がほっこりする

ターゲット

・鶏肉の加工食品を扱う企業様(既存)
・鶏肉の新商品を考えている企業様(新規)

目的

▼事業内容を知ってもらう
▼新規顧客様を増やす

フォント

▼欧文
　▷Josefin Sans

▼日本語
　▷Noto Sans JP

配色

▼メイン＆アクセントカラー
　▷#e1251b　(見出しや特に目立たせたいテキスト部分に使用)
　　#fcecea　  (背景色に使用)
　　#FD5A00　(ボタンやあしらい、見出しほどではないが少し目立たせたいテキスト部分に使用)
▼ベースカラー
　▷グレー
　　#f6f4f4　　(背景色に使用)
▼文字色
　▷ブラック
　　#333333

キーワード

・美味しそう
・あたたかみ
・安心感
・ほっこり

ユーザーに与えたかった印象

・安心感
・味に定評のある
・こだわっている

ユーザー側の印象

・ほっこりする感じ
・一般的なコーポレートサイトのようなカッチリした印象ではなく、
　柔らかい印象
・家族の食卓を思い出す
・美味しそう
・こだわりを感じる

全体スクショ画像

全体スクショ画像

各セクションごとの印象

・TOPページのスライド？アニメーション

　▷1枚1枚の画像の表示時間は短いけど、
　　フェードがかかって画像が切り替わっていくので、
　　走馬灯のようになっている。
　　途中で子供の笑顔があるので、印象が良くなる。
　
　▷様々な料理の写真を掲載して、
　　ユーザーにリアルな想像をしてもらえる。
　　

・NEWS

　▷最新情報を更新している。
　　ユーザー側が常に新しい情報を知ることができる。

　▷イベントに出店している情報を乗せておくことで、
　　製品について詳しく知りたいと思ったユーザー様が
　　接点を持ちやすくなる。
　
　▷日付の隣に、ニュースのジャンルを簡単に記載している。
　　ジャンル別に分けることで、
　　ユーザーがほしい情報にたどり着きやすくなる。

・Service

　▷背景色をグレーにすることで、
　　NEWSセクションとの区切りを表現している。
　　メリハリが出る。

　▷サービスがターゲット別にリスト化されている。
　　自分に必要な情報かどうかをユーザー側が判断しやすい。
　　
　▷リスト部分をホバーすると、
　　詳細な説明と対象の企業様の業態が表記されている。
　　ぱっと見がすっきりしているのでユーザーが文字疲れしない。
　　
　▷NEWSセクションとタイトルの開始位置が同じ。
　　Zの視線誘導。
　　
　▷画像は一枚だけ

・Product

　▷幅広く製品を取り扱っている。との文言があるので、
　　異なる製品が写っている画像を３枚配置している。
　　その画像はずらして配置し、余白感を持たせることで
　　単調にならず、あか抜けた印象になる。

・Particular

　▷Serviceのセクションを反転した配置にして
　　デザインに変化をもたせている。
　　背景色はグレー。
　　→デザインの４原則でいえば、反復
　　　ただ、Serviceセクションと大きく異なる点が３つある。
　　　・リストホバーで画像が切り変わる。
　　　・リストホバーで詳細な文章が出てこない。
　　　・画像が背景色から飛び出した形になっている。
　　　　左側に余白を設けている。
　　　　→リストホバーで画像と文章のどちらかだけを変化させることで
　　　　　より伝えたい情報だけにフォーカスさせることができる。
　　　　　必要以上にアニメーションをかけない。
　▷セクションの背景色は角が角ばっているけど、画像の角は丸い。

・Staffコラム

　▷サイドスクロールだということが分かるように、
　　←→を置いている。
　
　▷左にテキスト、右に画像がある配置は
　　これまでのセクションと同じだが、背景色がオレンジになっている。
　　→デザインにメリハリ？
　　　事業内容のことではなく、ちょっとした日常などを掲載する
　　　セクションなので明るい印象にしたかった？
　
　▷今までの見出しは濃いオレンジで統一されていたが、
　　今回の見出しは黒文字で、
　　バックの英語のあしらい的なものにオレンジの淵文字が使われている。
　　→少し砕けた印象
　　　あか抜ける感じ？
　
　▷かわいいキャラクターのイラストが出てくる。
　　→やはり親しみやすい印象を持ってもらおうとしている？

・Company

　▷グレー背景
　▷センター配置
　▷見出しとそれに合った画像のみのセクション
　　→総じてシンプル、正気に戻った感じ。
　▷コラムの下側のイラストと同じ開始位置に
　　Companyセクションのタイトルがあるので、視線の流れがスムーズ

・Recruitment

　▷背景が薄いオレンジ色かつ鶏の形
　▷あしらいや画像がすべて円形
　　→ポップで親しみやすい印象

・contact

　▷背景色がグレー
　▷お問い合わせ方法別に薄いグレーの線で区切っている。
　▷メールでのお問い合わせボタンが一番強調されている。
　　→メールでお問い合わせされることが多い、または
　　　メールでお問い合わせされたいから？

・Footer

　▷すべての項目が表示されている。
　　なんの項目があるのか、ユーザーが知りたい情報をパッと見て
　　知ることができる。
　▷SNSの一覧が一番下に配置してある。
　　→一番下のページは本当に興味のある人しか来ないはず。
　　　→そこまでSNSに注力しているわけではない？

・感想

　▷角丸と角を組み合わせていても違和感がなかった。
　▷アニメーションはかけすぎていない。
　　注目させたい部分に最低限かけている。
　▷Particular以外のすべての見出しの縦位置がそろっている。
　　PrarticularはKVと縦位置がそろっている。
　▷業務ではない社内に関することは少しPOPに
　　親しみやすさを感じるようなデザインにしていて、
　　業務内容など、まじめにこだわってやっているよということを
　　伝えたいセクションでは、背景をグレーにしたり
　　少し締まったデザインにすることでメリハリがついていた。
　　勉強になった。