デザイン解剖#04

Webデザイン勉強のため、サイトの解剖をしています！

今回は主にお出汁を販売している手火山家さんのサイトです。

「かっこいい！」「かわいい！」「素敵！」「新しい！」など、そう感じた理由を紐解くために、自分なりにWebサイトを分析します。

ーーーーーー

手火山家（てびやまや）河文伝承

縦書きの文章が用いられたサイトを分析するのは初めてです！ﾜｸﾜｸ
今回のポイントは、和風なのに古臭さや重さを感じさせない秘訣を探ることです。

テーマカラー：FEF8F4(薄い桃色ががった白)・534D4B(濃い灰色) 
差し色：B89C7D(黄土色/金色)
フォント：筑紫Aオールド明朝Pr6

PC版MV

・一見白に見える背景は、サイト全体を通して和紙のような繊維質なテクスチャが敷かれており、遠目だと薄い桃色になる。そこから温かみを感じる
・スライドショー形式で画像が入れ替わるが、1枚ずつズームするので繋がりに動画のような滑らかさがある
・スクロールするとヘッダーのロゴが小さくなり、固定表示される
・メニュー項目はハンバーガーメニューに収められている
・Instagramのアイコン、メニュー共に細い線が用いられることで洗練された印象になっている

PC版メニュー

・縦書きで、右から順番に表示されていくモーションがついていることで巻物が広げられたような雰囲気がある
・文字間のマージンは24pxで、コンテンツは中央揃えになっている。縦書きなので、個人的には右か左揃えにしてしまいたくなるが、中央にしていることで今っぽさの表現になっている
・要素ごとの余白を広めにとることで、横書きと縦書きが混在していても違和感を感じさせていない

・写真の背景を灰色にすることで、必要以上の重厚感を感じさせない
・ロゴやテキストの色は一見黒に見えるが、実際は濃い灰色を使っている。それも現代的な雰囲気を生み出す一因か
・写真を正方形で揃えることで清潔感のある印象
・マージンの取り方が秀逸で、どの画像とどの文言がセットなのかがひと目で分かる

・見出し<h1><h2>を縦書きにすることで、自然と目線を集める働きがある
・「厳選素材」部分では四角く切り取られていた画像が丸く切り取られることで、ここでは「用いられている素材」という扱いになっていることが分かる
・「購入」ボタンは、これまで登場していない黒ベタ白文字を使うことで目立たせている
・ここでも縦書きと横書き間の余白を広く取ることで、違和感なく、メインの文章と説明/購入コンテンツを両立させている
・見出し文は64px、説明部分は20pxとジャンプ率が高い

・全て直角と直線で表されたオリジナルの地図が掲載されている
この下にGoogleマップへのリンクも用意されており、デザイン性と実用性の両方が考えられている
・実際に訪れた際に分かりやすいよう、お店の外観が掲載されている

SP版

商品紹介部分は、SPの方が設計の意図が汲み取りやすい・組み方として心地の良いものになっていました。

Instagramの投稿

web分析とは離れますが、Instagramの運営もブランディングとして考えられた物だったのでご紹介します。
ほとんどの投稿が、自社の商品を用いたレシピの解説になっています。チェキ風に、料理と説明をひとつの画像に収めて作成していることで訪問者が見やすく、一覧表としての役割を果たしています。
またコメントができない使用となっていることで、コミュニケーションの場というよりも完全にメディアとしての役割を担わせています。

所感

・背景に白ベタではなくさりげなくテーマに合ったテクスチャを敷く
・文字も黒ではなく濃い灰色を使う
といった細かい気遣いが、結果として全体の雰囲気を醸し出す重要な意味を持っているのだなと思いました。
また写真にマウスオーバーでズームされたり、スクロールに合わせてロゴが小さくなるといったモーションがあり、その表現方法も柔らかさを感じさせる一因になっているなと思います。

ーーーーーー

こういう見方もあるかも！などあればコメントいただけると踊って喜びます。また、掲載に問題がある場合もコメントいただければ取り下げます。

解剖記事が5つになったらマガジンにまとめてみようかなと思っています！
また、最近はモーショングラフィックの勉強もしていて、奥が深いな〜とAeの世界を見つめています...