【デザインを見る】うなぎパイファクトリー

mimi | webデザイン勉強中（https://note.com/webdesign_mi0026）さんの投稿を見て、私もwebデザインを見る勉強をしてみる

本日私が見るサイトはこちら
knot | 福島県浜通りで暮らす、普通の人々のWEBメディア
( https://knot-to-knot.co.jp/ )

これをmimiさんの見ていたものになぞらえて私も見ていこうと思う。

1
アクセスしてまず飛び込んでくるうなぎパイが作られる様子が想像できる動画・魚のように可愛く動くうなぎパイのアニメーションや、赤などの色使いから、ワクワクする感じが伝わってくる。

2
・うなぎパイが作られる様子が想像できるポップな動画がこのように作られているかという興味→工場見学に行ってみようかなというふうに誘導している？

https://www.unagipai-factory.jp/wp-content/themes/unagipai-factory2022/common/video/mv-resize.mp4

・ファーストビューで出てくる工場の営業時間などがすぐわかる。
また、うなぎパイの生産状況がお休み中なのかなど、すぐにわかるので今動いているのかということがリアルタイムに伝わり、親しみや興味が出るようにしている？

・うなぎパイのモチーフを使ったスクロール・クリックアニメーションが使われていて、可愛さ・親しみやすさ・うなぎパイのサクッと感が表現されている。

・フッターのアクセス情報がデザイン4原則が綺麗に使われており
見やすく、わかりやすい。

3

・うなぎパイを足跡のようにしてアニメーションを作り、製造工程の写真に目線を誘導している。

4
文字が大きめで、太字、行間がゆったりととられており読みやすい。

font-size:1.6rem (ルート先のfont-size:2.666vw)
line-height:4rem; (ルート先のline-height:1.15;)
letter-spacing:0.1em; (body要素のletter-spacing:0;?)

font-sizeのルート先をvwで設定してある。デバイス画面の大きさごとに文字の大きさを変えられるがあまりこの書き方は見たことがない気がする。

letter-spacingが親要素で設定されておらず、上を辿るとbody要素の0になるが、その0.1はおかしい？

→親要素のfont-sizeを基準にする？
そうなると遡ると1.6remがbody要素で設定されてあるので、さらにその親要素の2.666vw
375*(2.666/100) = 9.9975px?
もうちょっと大きそうな気がするが…。

例えば横幅375のスマホ画面であれば、
(375*(2.666/100))*1.6 = 15.996px?
これも数値あっていなさそう…。

5
白を下地にポップな赤( #f50025 )が使われている。
うなぎパイという食べ物を扱っていることや、工場という体験をする施設のページということもあり、興奮を表す赤が使用されている？

6
・うなぎパイが作られている工程が想像できる可愛らしい動画で、工場への興味を引き出している？
・フッターのアクセス情報のところなどアイコンが使われていて文字だけでなく、視覚的に目で見てどの情報を表しているのかわかりやすい。

・FAQが整列・近接が使われていてわかりやすい。

7
「２」で書いてあるように、ページの所々でうなぎパイにちなんだスクロールアニメーションなどが使われ、サイトの持ち味の一つとなっている。