no.004　うなぎパイファクトリー

https://www.unagipai-factory.jp/

【制作会社】
FunTech Inc.

【概要】
うなぎパイの工場見学サイト

【ファーストインプレッション】
動きやアニメが多くて、見ていて楽しいサイトだと感じた。
最初に出てくる、うなぎパイが作られるまでの映像は、ワクワクした。

【ターゲット層】
10代～30代

【使用フォント】
メイン
Kanit

サブ
Kanit

日本語
"Noto Sans JP"

数字
"Noto Sans JP"

【配色】

ベースカラー　#ffffff
メインカラ　#f50025
アクセントカラー　#ffe2d7
フォントカラー　#3b4043

【文字や色の印象・雰囲気・効果】
背景白、タイトルは赤、文章は黒なので、とても読みやすいサイトだと感じた。カラフルでPOPに感じるが、色の種類はあまり多く使っていないことに驚いた。

【サイト構成】
-ページ数
10ページ

-セクション数(トップページ)
9

- 導線はどうなっているか
工場見学に来てほしい。

- お問い合わせ（CTA）はどこに配置しているか
右下固定。

- 背景色の変化はあるか
基本的に白のまま。
NEWSやFAQのみ、背景色が薄いグレーで区切られており、読みやすい。

- スクロールするごとに変化はあるか
下からふわっと出てくる。
途中スクロールするごとに、うなぎのイラストが足跡みたいになって出てきてかわいい。

【トップページ構成】
ヘッダー、メインビジュアル、お知らせ、うなぎパイについて、
カフェの紹介、ＦＡＱ、アクセス、フッター

【デザインポイント】
-メインビジュアル
うなぎパイが出来るまでのアニメーション。
お客さんが一番知りたいであろう営業時間が、
サイトを開いたらすぐわかるようになっている。

-ヘッダー
ロゴ、会社名、その他ナビ。
背景は長細い角丸で囲っており、
うなぎパイを意識しているのかな？と感じた。

-フッター
姉妹ブランドのリンクが貼っており、すぐに飛べるようになっている。
電話番号の文字だけ大きく表示されており、分かりやすい。

-ナビ

-ハンバーガーメニュー
なし。

- 一番最初に目につく箇所
うなぎパイが出来上がるまでの動画。

- キャッチコピー
≪お菓子を通じて人々を喜ばせたい、笑顔にしたい≫

- メインビジュアルの動き
動画。

【実装ポイント】
ヘッダーナビが、下にスクロールすると消えるが、
上にスクロールしてトップに戻ろうとすると、ナビが現れる。

クリックするところが無いセクション(うなぎパイの歴史)に入ると、
マウスがうなぎパイのイラストに変化する。
そのセクションが終わると、普通のマウスに戻る。

【レスポンシブデザイン】
❝工場見学コースのご案内❞が、PCサイトと同じぐらいのサイズで
表示されていて、やはり最終的にそこにもっていきたいのだと分かった。

【ひとつだけ自分のデザインに取り入れるとしたら】
動画を入れたサイトを作ったことが無いので、取り入れてみたい。

【感想・フリースペース】
うなぎパイのイラストに変化したマウスをクリックすると、
うなぎパイが、かじられたようなアニメーションになることに気づいた。
じっくりとサイトを見ないと分からないようなところだと思うので、気づけて嬉しい♪