サイトレビュー#3 美しい・シンプルなサイト編（FAT FARMER）
こんにちは、noteの書き方迷子のみききです。
今回のサイトレビューは「美しい、シンプルなサイト編」です！
引用元→https://fatfarmer.jp (FAT FARMER)
植物の育成、販売と、デザイン業務を行っているFAT FARMERさんのサイトです。
シンプルなサイトってかなりたくさんあるとは思うのですが、その中でも
「ありふれた感」がなく、とても洗練された印象を受け、どこか温かさも感じます。
最近のサイトではますます増える「アニメーション」も、多用されているわけではないけど、ちょっと工夫を加えるだけで、既視感のない表現になっている感じがしました。
ここからは分析事項をポイントに絞って記載していきます！
トップページ↓
全体の印象
白い余白に緑の写真が引き立っている。全体的に美しく穏やかで、心地よい印象。
シンプルでありつつ、要素の配置は「一般的なLPの型」から変化がつけられていて飽きのこない構成。
ところどころにそっと配置されているグレーのGaramondの欧文、心地よい空気、洗練された印象を作っている。
サイト概要分析
サイト目的 fatfarmerへの理解促進（事業内容、ブログ）
オンラインショップでの購買（ただし新規サイト来訪者が見られる商品数は少なめ、オンライン会員になると変わるのか？）ターゲット 観葉植物に興味がある人、こだわりの強い人、洗練されたデザインの依頼をしたい事業者
キーワード 美しさ、シンプル、気持ちの良い空気感
フォント
日本語 h1 Noto Serif JP
欧文 FV Cormorant Garamond italic と、'Lato’ italic（andなどの部分）
本文 日本語 Noto sans （Yu gothic, ヒラギノ角ゴシック）
固定左側のバー Cormorant Garamond （斜体でなく、全て大文字、縦組み）
フォントは明朝、セリフ体がメインで、欧文は歴史ある手書きの味わいが感じられるGaramond。洗練されつつもどこか温かみを感じる。
フォントサイズ
FV 19.5rem かなり大きい
本文 1.2rem
アクセントの欧文 1.2rem
H2 10px
H3 1.5rem
ブログ日付の数字 7rem 大きめ
静かな雰囲気ながら、意外とジャンプ率が高いと感じました。FVのタイトルのセリフ体は大きく、本文は小さく配置し、欧文も添えることで欧文があしらいのように美しさを演出しています。
フォントサイズは1.2remが多かったのも意外でした。garamondのフォントが小さめに設計されているため、同じ1.2remでもサイズに若干の変化があるように感じたんだろうと思います。
カラーと固定要素
カラー
写真がメイン、白、グリーン
文字色 #444 グレー
線の色 #e3e3e3 薄いグレー
固定要素
左側 ロゴ・欧文
上部 メニューバー
ファーストビュー分析
メインの写真はスライドショー。その上に写真が２枚。
mix-blend-mode: overlay
opacity: 0.5
で重なっており、かつ、ごくゆっくり左右（一方は上下）に動いている。重なった部分はスライドショー写真の彩度が上がっていて美しい。
タイトルの欧文のフォントサイズはかなり大きい。本文とのジャンプ率。
固定の左側の欧文がアクセントとなって画面を引き締めている。
要素の配置確認
全体のポイント
・写真と見出しの重ね方に工夫がある。（縦辺に重ねたり、上辺に重ねたり）
・トップビュー写真と２枚目の写真は縦辺が同じ
・揃えている部分とはずしている部分がある。
・オンラインショップと、ブログの２つの機能が自然にページに溶け込んでいる。品質の高さやショップのブランディングが徹底されていて、売ろうとする押し付け感がない。
・多くの部分で日本語の文に欧文訳が書かれていて、それがあしらいのようにも存在している。
・文章の組み方は、両端揃えでブロックに寄せているビーフェスと異なり、ナリユキで生まれる余白を活かしている。
まとめ
全体的にブランドの雰囲気が一貫していて、文章からもこれを作った人が植物・自然の美しさを心から愛している様子が伝わってきます。事業内容としては植物の育成・販売に加えデザインも行っているようです。そのためサイト全体として洗練され、澄んだ空気のような印象が余白やフォント、各要素のサイズから感じ取れます。あまり商品数は多くなかったり、一部押せないボタンがありますが、（稼働の範囲に制限があるのかな？）ブランドとしての高品質な印象が確立されています。
シンプルなサイトの中でも、要素の配置に工夫をすることや、ナリユキ組みで生まれる余白の美しさを活かすこと、よくあるスライドショーのFVでも、画像を重ね、重なった部分に変化をつけたりアニメーションさせたりすることで、美しく洗練された印象を作ることができるということが学びでした！
フォントと要素の配置が美しい、FAT FARMERさんのサイトでした！