デザインいろいろ分析【web編_01】

こんにちは。Design Houseのちひろです。

駆け出しのデザイナーの私ですが、少しでも「良いデザイン」を作りたい。
でもいいアイディアなんてふっと湧いてくるものでもありません。
とにかく引き出しを作りまくる、
そのためには「良いもの」を見極める「良い眼」が必要です。
ということで、ここでは私が日々心掛けているデザイン分析記録を公開していこうと思います。

デザイン、といってもさまざまな種類があるので、とりあえず
WEB／パッケージ／ポスターなど（紙もの）
の3ジャンルに分けて、見つけたものを分析していこうかと思ってます。

今回はWEBサイト編。
中でも「食べ物」にテーマを絞って3つのサイトを見ていきます。
ちなみにルールは、一階層までとしてTopページかLDページを見ていきます。
今回は特に事前知識のないものを選んでみました。

ではさっそく1本目。

1本目：養老ミート株式会社

https://www.yoro-meat.co.jp/

飛騨牛の肥育と販売を手がける岐阜県のブランド牛会社さんです。
開いた瞬間、朱色の背景に黒毛の牛のインパクトがすごい。

特にポイントだと感じたのは、この3点です。

・フォントの選び方
・ゆっくりとしたアニメーション
・大胆な写真の使い方

☆これらのデザインから受け取れるブランドイメージ
「高級感」「丁寧なこだわり」

文字が少しゆったりめに組まれていて、さらに明朝体が重みを感じさせます。
また特に印象的なのはふわっと出てくるようなアニメーションでしょうか。
メインヴィジュアルの大きな牛が煙の中から出てくるのも魅力的ですし、
その他の場所もマウスオーバーでゆっくり写真が浮き上がってきたり
間や余白の使い方が高級感を演出していて、素敵なサイトだと感じました。

中でも、一番驚いたのは写真ですね。
一見グロテクスにも写りかねない塊肉の写真を、美しく、かつ絶対美味しい！と思ってしまうように見せています。
シンプルな配色だからこそ、こだわり抜いた写真が活かされたのだと思います。
とても素敵なサイトでした。

2本目:Lilionte（リリオンテ）

https://www.choco-ne.com/

ラムネをチョコレートでコーティングした新しいお菓子を提案する奈良の会社さんです。
ポップで可愛い雰囲気がメインヴィジュアルから伝わってきます。

主にこの3点が気になりました。

・丸のイメージ
・浮遊するイメージとアニメーション
・縦組みと横組みを織り交ぜた文章構成

☆これらのデザインから受け取れるブランドイメージ
「可愛さ」「商品を伝えたい」「ラムネの清涼感」

ラムネ＋チョコレートって確かになかなか想像しにくい味ですよね。
だからこそサイト全体のデザインを通して伝えようという工夫を感じます。
全体的に淡い水色をベースにし、丸いフォルムの写真やグラフィックがラムネのしゅわしゅわ感を想起させます。

また、面白いと思ったのは文字の組み方。
欧文も和文も要所要所で縦組みにしています。
見出しを縦に組むことで、下にスクロールして読ませることを誘導しているのでしょうか。
味の伝わりにくいお菓子を購買につなげる、という目的を踏まえると
こういう表現方法も有効なのかも、と感じました。
あくまで私の考察ですけどね……！

3本目：SOLES GAUFRETTE

https://soles-gaufrette.com/

最後の分析はこちら、バターゴーフレット専門のお菓子屋さんです。
フッターで気づきましたが、チーズケーキで有名な株式会社BAKEが手がけるブランドの一つでした。

BAKEさんが手がけるブランドサイトはどれも魅力的なんですが
こちらのサイトでは主に以下の3つに演出のポイントを感じました。

・フォントの大きさ
・化粧品やアートのような写真を使用
・動画の使い方

☆これらのデザインから受け取れるブランドイメージ
「おしゃれ、スタイリッシュさ」「素材へのこだわり」

どこをスクロールしても飛び込んでくるタイポグラフィが印象的です。
最近海外のおしゃれなサイトを見ていると、こういう傾向のものをよく見かけるので
それを踏襲して雰囲気を作っているように感じます。
写真も大きく使用されていますが、不思議と圧迫感がなく
ゆったりとした余白が高級感を演出しています。
写真もまるでアート作品のような構図で撮影されていますよね。
割と化粧品やオーガニックの商品などで見かける雰囲気だと思ったのですが
それをお菓子に置き換えている点がユニークです。

また、動画を使用することで、写真以上のシズル感を演出しています。
素材へのこだわり、特にバターをメインに押し出した商品です。
それぞれの素材や製造過程のショートムービーだけで香りが漂ってきそうで
動画の威力、すさまじや……と思わず見入ってしまいました。
今のところ東京駅でしか買えないようなので、誰かに頼んで買って来てほしいです。

全体的に説明を最小限にしてデザインで伝える、ということを実現しているサイトだと感じました。
きっとサイトに訪れた方の中にも、なんだかおしゃれだから欲しい！となる方も多いのではないでしょうか。

◎まとめや考察など

3つのサイトについての分析をしてみました。
偶然かもしれませんが、最近使用フォントの傾向に明朝体やセリフ体も増えているんでしょうか。
今回の3件ともに、それぞれのブランドイメージとして明朝体、セリフ体が使われていました。
またライン（線）は全体的に細めが流行のようです。

今回はどれも食べ物という商品でした。
そのため、最終的には購買につなげることを目的としたサイトだと思います。
感じたポイントは「説明過多にならないこと」です。
特に3つ目のSOLES GAUFRETTEでも記述したように
クライアントが伝えたいメッセージを文字情報だけではなく
いかに、グラフィックや写真、動画、全体の配色を使って伝えるかがポイントだと思います。

いや、当たり前だよという話なんですが、
意外と人って欲張って表現しようとしてたくさん説明しちゃったりしますよね。（特に私はそうなんです。）
言葉でなくて、置き換えられるものはないかと意識することを心掛けたいなと今回の分析を通じて感じました。

他にもいろいろ気になるポイントがあると思うので、ぜひ上のサイトを研究してみてください！
以上、デザインいろいろ分析〜WEBサイト編でした。

ちひろ