Webサイト分析#6 家庭菜園ブランドUETE（ウエテ）様

UETE（ウエテ）公式通販 | はじめての家庭菜園ブランド

【印象】
・温かみがあり、大人かわいいサイト
・どちらかというと女性寄りのトンマナ
　L丸みのあるフォント、配色がライトブラウン、ところどころにイラスト

【目的】
家庭菜園の面白さを届けたい
菜園関連の商品の販売増加

【ターゲット】
家庭菜園に興味はあるがいままでやったことがない、どうやって始めたらいいかがわからないユーザー

【レイアウト】
シングルカラムレイアウト
FV→ブランドコンセプト→ピックアップ記事→おすすめ商品→記事一覧→インスタグラム
・ブランドサイトなので、どういう想いの会社なのかを最初に述べている（ユーザーからに共感を感じてもらうため）
・はじめて菜園を行う人がターゲットなので、コンセプトの後に初心者向けの記事を置いている
・商品販促が目的なので、おすすめ記事の下におすすめ商品のコンテンツを置いている

【フォント】
pt sans フォント（英語）
ロシア連邦の公共タイプ用に開発されたフォントのため、ラテン文字とキリル文字の両方が含まれています。PTファミリーには他にもいくつかのフォントがあり、セリフ体のオプションもあります。

游ゴシック（日本語）
游ゴシックとは、字游工房が作成し2008年に発売したゴシック調のOpenType形式の書体のことである。

Microsoft Windows 8.1やMacintosh Marvericks以降などのOSに搭載されている。また、Microsoft Windows 10では、メイリオに代わって游ゴシックがシステムフォントとして採用されている。游ゴシックは、メイリオと比べるとやや太さが細いという特徴がある。

【配色】

ブラウンと白を基調にしたサイト
菜園＝土から茶色をメインカラーにしたのでは
茶色をメインカラーにする＝緑と反対色の関係になり、写真が非常に映えるサイトになった

【FV】

写真＋メインキャッチコピー＋サブキャッチコピー

・写真を見ただけでどういうサイトなのかがわかる
　菜園関連の何かをあるかっている
　真剣そうに野菜（自分）向き合っている
　自然豊かで気持ちよさそう
　畑のように広大な土地ではなく、ベランダような小さい土地で菜園をやっている（→簡単に始められることをアピールしている）
・キャッチコピーのフォントサイズが他のサイトよりも小さい（メイン23px・サブ12px）
　→写真に視線を誘導したかったから、文字サイズを抑えた？

・キャッチコピーの背景に模様が入っている
→文字の可読性を高めるために入れた（文字サイズが小さくても目を引きやすい）
→なんとなく土や雲みたいな模様
→写真＋キャッチコピーだけだと、他のサイトでも一般的にもあり、印象に残りづらい。模様を入れるとコントラストが生まれ、一気に引き締まったFVになった？良いアクセント効果、印象に残りやすくなった

・下矢印のマークを入れることで、この下にもコンテンツが続くことを示し、離脱を防いでいる

【技法】

①ピックアップコンテンツで、記事を横スクロールをドラッグで動かせた

→記事を大きく表示することで目を引きやすくした？インパクトを残すとした？（とはいえ大きすぎるし横スクロールをドラッグでするのはまだ主流でないのでわかりづらいかも..)

https://junpei-sugiyama.com/scroll-drag/

CSSメモ【横スクロール】
overflow-x: auto;
　ブロック要素が左右から溢れた場合、スクロールバーが表示される
white-space: nowrap;
　半角や改行の表示は、左右から溢れた場合改行しない

②スクロールするとヘッダーが固定＋追従

どこからでもすぐに他ページに遷移できるので、興味を持ったコンテンツへの誘導率が高まる（→関心をもったファンを逃しにくい）

ヘッダー部分の背景が黒×透過しており、どこがヘッダー部分かわかりやすい。また文字が白なので黒背景にすることで可読率をあげている。

【総評】

①デザインコンセプト：ナチュラル・素朴・ぬくもり・親しみ・やさしさ

→茶色をメインにしたトンマナ。大きな変化のない配色でトーンも整っており、調和がとれたサイト

②手書き風なイラストがサイト全体にちりばめられており、親しみやすさや素朴さを強調している

③若干余白が小さいかも..
全体的に詰まったサイトに感じ、菜園って余裕なくできないのかもと感じてしまった。
コンテンツ感90px→150pxとかにしてもよかったかも..