ウェブサイト考察レポート #uniam

本日のウェブサイトは、ねこ専用のフレッシュフード uniam 公式サイトです。

【公式】uniam（ユニアム） - 獣医師・栄養士監修ねこ専門のフレッシュフード

概要: 国内では初となる、「ねこ専用」フレッシュフードブランド。
ターゲット予測: 猫を飼っている人
目的予測: ブランドの魅力を伝え、購入につなげる。
文字(本文): 游ゴシック　PC 15px　SP 11px
全体の印象: 派手、カラフル、明るい

カラフルな色使いと舌だし猫がインパクト大のファーストビュー

第一印象は、明るくキャッチーで可愛らしいビジュアルに感じた。これは、愛嬌のある舌だし猫と、猫の写真が際立つはっきりとした背景色、丸く特徴的なロゴタイプによるものだと思う。インパクトのある写真で猫好きの目を引きたかったのではないだろうか。舌だし猫と前にある餌皿の影響で、ぱっと見ですぐに猫の餌のブランドだとわかる。

繰り返し表示される無料診断への動線

uniamでは、自分の家猫に合わせた餌を診断し、その結果をもとに導き出した、猫の個性に合わせた餌の販売をしている。そのため、診断をしないと購入ページへの動線が表示されない構造になっており、トップページでは製品の紹介とともに無料診断への動線が繰り返し表示されている。まずは診断をしないと猫の個性に合わせた餌の販売ができないために、何度も診断への誘導をしているのだと思う。

ゆるくて可愛いイラストとアニメーション

猫のイラストが印象的で、イラストだけでなく、実際の猫の動きを模したアニメーションがついている。猫好きな人はたまらないと思う。イラストとアニメーションは画面の切り替えや視線の誘導にも活用されている。ページ内の印象の変化にも一役かっており、猫愛を伝えるために惜しみなくイラストを使用していると思う。

まとめ
可愛らしい猫の写真やイラストがたくさん使用されており、ブランドの制作者が猫を愛おしく思う気持ちがよく伝わってくる。特に猫の大きな写真はつい手を止めたくなってしまうほど可愛い。

■ こうしたらもっとよくなりそうと思ったこと

「ユニアムの特徴」「はじめてガイド」の２コンテンツをトップに追加する

トップページにあるコンテンツは「無料診断をはじめる」と「レシピ内容を詳しく見る」のみ。「無料診断をはじめる」への動線はページ内で4回繰り返され、ヘッダーと画面右下にもボタンで固定されている。十分に誘導できていると感じたため、削ってヘッダーにある「ユニアムの特徴」「はじめてガイド」の二つのコンテンツへの導線を追加したらどうか。ブランドのnoteに「ねこを愛する方々に、楽しみながらねこのことをもっと知ってもらうにはどうしたら良いか、という視点で創り込んでいます。」との表記があり、猫の生態について触れている「はじめてガイド」はトップページでより推した方がいいのではと思った。

文字まわりのルールを減らす

タイトルと本文周りのルールが複雑に感じたので、ルールを減らしたら情報がより入ってきそう。フォントサイズが多く、立ち位置がわからない文字がある。13.14.15.18ptあたりの文字の使い分けの整理をしたらよりルールが少なくなって分かりやすくなりそうと思った。