noteでサイトレビュー！

みなさん、こんにちは！hatsuと申します。
前回前々回と結構自由に記事を書いてきたので、今回は真面目に！ウェブサイトのレビュー記事を書いていこうと思います…！

私は今年の春にデザイナーの職に就いてから、毎日１レビューを目標にサイトレビューを行ってきました。実際に始めたのは６月後半くらいからなので、この記事を書いている今で期間としては大体約３か月といったところです…！

１つのサイトをレビューするにしても、結構な数のサイトを見てその中から選ぶといった感じで行ってきたので、サイトレビューを始める前と今では少しづつサイトの見え方も変わってきたのかな？と感じています。

というわけで、今回は私自身の勉強を兼ねて以前レビューしたサイトをもう一度見ていきながら、以前と今回で感じたことの違いだったり、新たな発見だったりを文章にしていきたいなと思っています！
では、はじめていきます～！

弥生焼酎醸造所

弥生焼酎醸造所

▶サイト概要
大正11年に創業した奄美大島で最も古い蔵元、弥生焼酎醸造所のウェブサイト。
▶想定されるターゲット
・お酒を家で楽しむのが好きな人
・お酒は好きだけど焼酎に馴染みがなかったり、飲み方にあまり詳しくない人
・日本のお酒や焼酎に関心のある海外の人
▶キーワード
スタイリッシュ、シンプル、洗練された、爽やか、清涼感、大胆

01. FV

・ファーストビューは大胆かつスタイリッシュな感じで、焼酎にあまり馴染みがない人にもとっつきにくさを感じさせない印象。
・左右に見切れるように表示されるロックアイスや水しぶきが大胆さを演出しています。前景と背景にボケが入っているのも奥行きを感じさせて素敵です。
・FVのスライドインのアニメーションが下から上に波打つ感じの動きでお酒を注いでいる感じを連想させます。こちらも波のアニメーションが2重になっていることで、平面感？のっぺり感？を感じさせない作りになっているなと思います…！

02. トップページ

・ここでもロックアイスに前ボケと後ボケが効いていて、清涼感を感じさせます。ちなみに細かい部分なのですが、氷と横線が重なった部分では氷の奥にその線がぼんやりと透けて見えていて、氷っぽさや立体感が増しているなと思いました！
・テキストは日文が16px、英文が12px。line-height（行間）が2（ここでは16px＊2＝32px）、letter-spacing（字間）は.06em（フォントの指定サイズを1としたとき.06の字間）と相対値で指定されています。
個人的には英文と日本語文のバランスが良く、下層ページなどの少し長めの文章でも読みやすいなと感じました…！

・この部分では画像の上に重なった白地のテキスト部分に0.8の透過とbackdrop-filter: blur(20px);で20pxのぼかしを入れています。小さい画像だと見えにくいのですが、後ろの要素の形がぼんやり見える感じがくもりガラスのような印象で、サイトの雰囲気によくあっているなと思います。
・また、ぼかしをかけている要素自体に1pxの薄いグレーのボーダーが入っていることで、背景の画像に沈んでしまったり、ぼやけた印象になってしまったりすることのないようになっています。

03. 焼酎の愉しみ方 ページ

・最初にキャッチコピーや簡単な説明から入って、レシピやおつまみを紹介、最後に商品のビジュアルとオンラインストアへのリンクにつなげています。レシピやおすすめのおつまみの紹介を先に提示することで、買った後のことを想像させやすくするような形となっています。
・情報量は比較的多いページかなと思うのですが、点線で適度に区切ってpaddingも点線の両側に60px以上ずつと広めに取られているので、圧迫感を感じさせず見やすいです。
（SPサイトではレシピの途中から透過をかけて「もっと知る」ボタンで詳しい内容を開く仕様になっています）
・細かい部分ですが、各レシピの切り替わり部分にコンテンツ幅いっぱいで表示されている画像のモチーフの後ろに薄いグレーが敷いてあることで、ぼやけた印象にならずに収まりが良い印象になっているのかなと感じました。

04. 全体

・サイトの構造として、トップページの次に来るページが「焼酎の愉しみ方」のページで、初めて訪問した人が商品の概要や歴史などではなく、「楽しむ」という目線から入れるところが面白いなと思いました。
紹介されているアレンジの仕方や相性の良いおつまみがなじみのあるラインナップなので、普段あまり焼酎を飲まない人でも身近に感じてもらいやすい良い導入なのではないかなと思います。
・商品の見た目が鮮やかで素敵なので、ビジュアル以外の要素の色彩を絞っていることでそれがより際立って感じられます。焼酎に馴染みのない若い人などにもパッケージなどのビジュアルから興味を持ってもらえる作りにもなっているように感じました。

▼感想・思ったことなど
このサイトは私がサイトレビューを始めて最初にレビューしたサイトなので改めてじっくり見てみたいなと思って1つ目に選びました…！
今回は一部抜粋してレビューをしてきましたが、醸造の工程や歴史もわかりやすく書かれているので、見ごたえのあるサイトとなっています。
私はあまり焼酎に明るくないのですが、FVにも載っている緑色のラベルの弥生のパッケージがかわいくて惹かれました！焼酎と聞くと無意識のハードルみたいなものがある人もいるのかなと思うのですが、見た目やレシピなどいろんな切り口があるととっつきやすく感じられていいな～と思います…！

 最後に

今回は２～３つのサイトをレビューしていこうと思っていたのですが、１つでもかなり長くなってしまったので、このあたりで区切ろうかと思います…！（見通しが甘かった…）
記事を書くにあたって改めてよくよく見てみると気づけなかったところが見えてきたり、感じ方も同じ部分もあれば違うところもあったりと、学びのある機会となりました！
また機会を見てサイトレビューの記事も書いていきたいなと思います！
ここまで読んでいただきありがとうございました…！