Webサイト分析#2 ねこねこチーズケーキ様

ねこねこチーズケーキ

【目的】
商品の認知向上
商品の購入数増加

【ターゲット】
商品の購入を検討している人

【配色】

・メインカラーに焦げ茶色
→商品キャラクターである猫の色から持ってきている

・アクセントカラーに水色系
→商品が黄色系の色なので、反対色である水色を使用することで、より商品の色味が協調されている

【フォント】
Noto sans jp
見出し・フォント等で使用
世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。

Noto Sans JPの字の太さは極細の「Thin」から極太の「Black」まで6種あり、パソコンやモバイル端末などさまざまなシーンでの可読性を意識したデザインとなっています。「ヒラギノ角ゴ」と比べると曲線がやや強くしなやかな印象を持ち、また線が短くすっきりとした字形となっています。
非常に癖がなく美しく、モダンすぎず、かといってクラシックすぎない

無償で利用でき、ウエイト（太さ）が7種類もあり、スマートフォンやタブレットなどのモバイルデバイスで読みやすいようにデザインされているので、使いやすい

【見出し】
h2：35px、文字間3.5、フォント高さ1.14
p  ：①17px、文字間0.34、フォント高さ50
　    ②29px、文字間0.29、フォント高さ56
        ③19px、文字間0.75、フォント高さ45
        ④23px、文字間4.6、フォント高さ1.14

【余白】
コンテンツ間：183px、214px
h2とpの間：74px
コンテンツ幅：1284px～1400px

【レイアウト】
シングルカラムレイアウト
FV→わたしたちについて→特徴→ニュース→コラム?→商品の制作過程→商品一覧→お店一覧→フッター

【FV】
ねこねこチーズケーキの写真がFVに使われている
→シンプルなFVにすることで、商品の見た目や食感、質感をダイレクトに伝えられるから
（今回の場合、写真かた、滑らかな舌触り、ふちに焦げ目があるので、外はパリッと、中はしっとりするチーズケーキなのかな..?と感じた）
→商品等、1つのものを訴求するときは、ユーザーが商品にのみ視線がいくよう、シンプルなものにする。また、FVを見ただけで、商品に興味を持ってもらえるよう、使用する写真は商品の魅力が十分伝わるものを使用するべき（食品であれば、見た目からおいしそうだなと感じたり、商品の特徴が一目でわかるもの）

【技法】
①ロゴアニメーションが取り入れられている
ロゴが一文字ずつ現れる→FVが現れる→ロゴが一文字ずつ消える、滑らかな動き
→ロゴを動かすことで興味を持ってもらう
→おしゃれなサイトであることを強調している
→滑らかな触感のチーズケーキであることを示唆している？
→現れて消える＝食べ始めると止まらない、すぐに食べ終わるほどおいしいチーズケーキであることを示唆している？

②サイト名＝ねこねこチーズケーキ
　→猫が2匹寄り添うイラストがロゴに使われている
　→猫型のチーズケーキを販売していること、会社名がねこねこチーズケーキであることが、一目でわかり、また会社名が印象に残るロゴだなと感じた。

③ヘッダーがハンバーガーメニューになっている
→写真をダイレクトに訴求するために、メニューなどがFVに表示されないようにした？
→下層ページに遷移しなくても、TOPページにほとんどの情報が記載されているので、ナビゲーションメニューはそこまで重要ではない
→一般的にはヘッダーは常に表示させておいたほうが、ユーザーにとって親切である。しかし、下層ページへの誘導を重視していない、FVで写真をダイレクトに訴求したい等、何かしらの目的がある場合、ハンバーガーメニューに入れるなどを検討が必要。ただし、ハンバーガーメニューにナビゲーションがあることをユーザーがわかるようにすることが必須である。

④スクロールすると文字がふわっと表示される
→飽きずにサイトを読み進めてもらうため
→ロゴアニメーションと同じような動きをサイト全体にいれることで、統一感を感じさせる、またサイト全体をリッチに見せている
→ふわっと、ゆったりなアニメーション＝優しい、柔らかい、ゆったりとした印象＝このチーズケーキは柔らかい舌ざわりで、食べている間はゆったりとした時間が過ごる..という印象を与えている？

⑤スクロールバー・TOPへ戻るバーがついている
→ユーザビリティを意識したサイトになっている

⑥コンテンツページまでスクロールすると、ロゴサイズが小さくなる
→コンテンツ箇所への訴求度を高めるため

⑦背景に猫のあしらいがあったり、pointに猫マークが使われていたり、「ねこ」を効果的に使われている
→サイトのイメージとなるものを、サイト全体で使うことで、ユーザーに印象に残ってもらいやすい

⑧テキストを簡潔にし、写真を大きく載せることで
　より商品のイメージが伝わりやすい

⑨NEWSをホバーしたとき、角が丸くなるアニメーションが取り入れられている
→他ではあまり見ないホバーアニメーションなので、面白いとは思いつつも、若干わかりにくい。
背景色やフォントカラーが変わるといった、一般的なほうがユーザーにとって親切かも

⑩商品制作の流れでサムネイル付きスライダーが用いられている
→一連の流れがわかりやすい。自分でクリックしないと写真が切り替わらない一方、自動で切り替わらない分、ストレスがかからない
→その下に動画で一連の流れを確認できるので、あえて自動で切り替わるスライダーにしなかったのでは
（ユーザーがゆっくり内容を確認できるようにするため）

⑪スライドショーの下に、動画で制作の流れを載せているので、より商品の魅力が音や質感等からも伝わる。

【考察・印象】
〇ねこねこチーズケーキという商品名にちなみ、猫関連のイラストをサイト全体であしらっていたため、ユーザーの印象に残りやすいサイトになっている

〇テキスト量を抑え、写真を多く使用していたので、より商品の魅力が伝わった。

×商品ラインナップに、オンラインショップへの導線を設けたほうが、商品の購入増加につながるのではないか