【day67】電気ケトル特集ページ／タイガー魔法瓶 #1日1サイトレビュー

電気ケトル特集ページ - タイガー魔法瓶

【概要】
タイガー魔法瓶の電気ケトルの紹介LP

【選んだ理由】
写真素材とフォント、色合いがナチュラルにマッチしていると感じる。
デザインの組み合わせを分析！

【参考になるデザイン（PC）】
・ファーストビューはTVCMと同じ印象的な動画が白枠を残して大きく配置
→うっすら青みのある動画だから、白色のコピーの可読性を保っている
・SCROLLの表示はフォントと縦に細ライン
→動画に重なっている部分は白、それ以外は黒。ラインの可読性を上げている？

・グローバルナビゲーションはハンバーガーメニューで表示
→開くと画面の約1/3の範囲で表示
→各メニューはホバーすると、背景がベージュになり矢印が黒になって少し右に移動する

▼ハンバーガーメニューを開いた画面

▼各メニューをホバーした時

・各エリアではエリアの左上に縦書きの英字でエリア名が配置されている
→エリアを縦書きの英字で配置されているパターン、多いな〜。このサイトはフォントが小さめのシンプルなタイプ。
・OUR STORYではサブタイトルが縦書き
→ユーザーの視線をスムーズに誘導できるし、読みやすい
→写真がの密になっているところに文字が配置されていて、余白を感じられてバランスが良い

▼写真でも密になっている場所とフォントの場所が重なっていて左右に余白がある

・商品のラインナップのエリアでは、左右交互に商品情報と参考写真が配置されている

▼左右に商品情報と参考写真がシリーズごとに左右交互に配置

【ターゲット】
・CMをみた人
・電気ケトルの購入を検討している人

【サイトの目的】
・商品のコンセプトや情報を知ってもらう
・各商品情報ページに遷移してもらう
・自社のオンラインショップや店舗にて商品を購入してもらう

【フォント】
和文：FOT-筑紫A丸ゴシック Std R
英文：Asap（Google Fonts）
　　　→文字のハライ？が柔らかいサンセリフ体だ〜〜

【カラー】
フォント：fff、222（濃くない黒）
背景：fff、EDE9DE（ベージュ）、171616（黒）
ナビゲーションボタン背景：292827（黒）

【レスポンシブ（SP）】
・ファーストビューは、白背景の余白がなく、SCROLLしてそのまま次のエリアが表示されている
・OUR STORYでは、本文が左揃えになっている（PCサイズでは中央揃え）
・ラインナップでは参考写真がなく、白色背景で商品説明のエリアだけになっている

【感想まとめ】
シンプルで無駄がない印象の商品にあわせて、余計な要素や動きがないスッキリしたデザインのサイト。
写真と文字のレイアウトの仕方が上手で、見ていて違和感がない。

▼PCサイズ キャプチャ