![見出し画像](https://assets.st-note.com/production/uploads/images/102248176/rectangle_large_type_2_e86f8e441599da56590fe150e3ca5d00.png?width=800)
ぴったりデザイン-その3
じめっとした天気が続いて、少し気分が下がります。
そんなときは楽しいサイトを考察するのが一番ですね!本日は素敵なMVで一気に引き込まれたサイトを考察します。アニメーションやアイコンにもこだわりを感じるサイトです。
うなぎパイファクトリー公式サイト
https://www.unagipai-factory.jp/
![](https://assets.st-note.com/img/1679621336897-II3saRsEJf.png?width=800)
サイト概要
春華堂の「うなぎパイ」について学ぶ事が出来る新しい施設、「うなぎパイファクトリー」の公式サイト(リニューアル)
想定ターゲット・目的
・子供からお年寄りまで、ファミリー層
・春華堂の「うなぎパイ」を知ってる人、好きな人
・2025年に開業20周年を迎える「うなぎパイファクトリー」の認知度を上げる
ゴール→施設を知ってもらい、来場者を増やす&うなぎパイの購入を増やす、ファンを増やす
第一印象
教育番組のようなストップモーションでうなぎパイが作られていく工程が見ていて楽しい。自分が家庭を持っていたら、子どもにも見せたいサイトだなと感じる。
うなぎパイとは?
うなぎパイは、有限会社春華堂が販売する洋菓子。静岡県浜松市の名産品として全国で広く知られています。
「夜のお菓子」のキャッチフレーズとともに、全国的に知られるようになった「うなぎパイ」。女性の社会進出で一家だんらんの時間が減っていることを気にかけていた山崎社長が、「夕食後にうなぎパイを囲み、楽しいひと時を」と願いを込めたという。
うなぎパイファクトリーとは?
浜名湖名産「うなぎパイ」の生産工場です。
職人の手わざによって作られるうなぎパイの
秘密を知ってもらおう!をテーマに製造工程を公開しています。
うなぎパイファクトリーは、「お菓子を通じて人々を喜ばせたい」という信念のもと、“職人とのふれあい”をコンセプトにうなぎパイの製造工程を間近に見学できる施設として2005年にオープンしました。
館内は、無料で自由にご見学いただけます。
また、製造工場でしか味わえない「焼きたてのうなぎパイ」が食べられる「窯出しうなぎパイツアー」が好評開催中です。
オリジナルスイーツが楽しめるうなぎパイカフェ、屋外ガーデンの移動カフェ「うなくん号」、大人気のうなぎパイグッズやお土産をお求めいただけるファクトリー直営売店など、地元浜松のみならず近隣地域の皆様にご愛顧いただき、多数のご来場をいただいております。
制作会社について
FunTech株式会社
制作にあたって
津々浦々、老若男女から愛されているうなぎパイ。
そのうなぎパイの生産工場の見学ができる「うなぎパイファクトリー」のWebサイトリニューアルにおいて、
① ランディング時のインパクト・ワクワク感の創出
② 工場見学や施設紹介、営業日を紹介するカレンダー、お知らせへの動線をできるだけわかりやすいサイト設計
③ 老舗のお菓子屋さんである春華堂の”細部へのこだわり”を表現するために、サイト全体に細かなギミックの仕掛け
を狙いとしました。
メインビジュアルの動画では、一枚一枚クレイ(=特殊な素材の粘土)をオリジナルで作り上げ、それを一枚ずつ撮影しコマ送りの動画を制作し、PC版とスマートフォン版は同じ動画を90度回転しても成立するような撮影を実施しました。
![](https://assets.st-note.com/img/1679648446642-kXXpYXP5U8.png?width=800)
デザインについて考える!
まずはMV。クレイアニメ風の動画がかわいくて、最後まで見てしまいます!サイトを訪れてこの動画が流れるので、インパクト大ですね。
FV内に営業カレンダーへの導線が目立つところにあるので、迷わない導線設計がいいですね。
![](https://assets.st-note.com/production/uploads/images/101029686/picture_pc_409d3ca446d514a904f29c6fd419c588.gif)
サイト内のいたるところにうなぎパイがコミカルに動いていて見ていてわくわくします。ひとつひとつをコーディングで動かしているみたいです。
![](https://assets.st-note.com/production/uploads/images/101030117/picture_pc_981866fa52c071fced7b7a1966432cdb.gif)
そしてこちらのエリア内でだけ、カーソルがうなぎパイに!!
特定のエリアのみカーソルを変えることができるんですね。
![](https://assets.st-note.com/img/1679647208432-VRj1XaXYx8.png?width=800)
施設でしか食べられない商品も紹介されています。これもインパクトのあるパフェで、思わず笑顔になります。
![](https://assets.st-note.com/img/1679647358187-MFj6fw34c5.png?width=800)
個人的にすごくいいなと思ったのが、よくある質問のアコーディオン部分!
アコーディオンをクリックするとひらめきの電球マークがでてきます。
このアコーディオンでのあしらいは初めて見たので、かわいくてびっくりしました。
![](https://assets.st-note.com/production/uploads/images/101055467/picture_pc_f6622a1427a8e17d60a0bd27b894a0a7.gif)
わくわくした要因まとめ・・・
・アイコンのクオリティが全体的に高く、特に「うなぎパイ」のアイコンがかわいい
・子供が好きそうなコミカルな動き
・ライティングが全体的に優しくて、堅苦しさを感じない
まとめ
私自身うなぎパイというのは少し渋めの大人のお菓子のイメージがあったのですが、サイトを見て、老若男女に愛されてきたお菓子なんだなと感じました。コミカルな動きと、柔らかいライティングによって見ていて楽しい、紹介したくなるサイトでした!
この記事が気に入ったらサポートをしてみませんか?