tesio　＃１日１サイトレビュー

tesio｜使い手に永く“よりそう”クラフトサングラス

【概要】

「使い手に永く”よりそう”」がコンセプトのクラフトサングラスのプロダクトサイト

【ターゲット】

（画像モデルから）サングラスの購入を検討している30代

【印象】

・薄いベージュと白の配色で日常感や落ち着いた印象

・余白が多い

・使用シーンの画像が多い

・ノングリッドレイアウト

・「職人の手で作られた」「修理可能」という文章を様々なコンテンツ内で伝え、コンセプト通り永く使用できるという安心感がある

【トップページの構成】

・メインビジュアル

・news

・about

・repair：修理の流れの案内

・collection：商品の紹介

・shoplist

・online store

・SNS

【メインビジュアル】

・左側に少し余白を残して画像が配置

・画像はカルーセルで全4枚（引きの写真2枚、風景1枚、アップ1枚）

・カルーセルの間隔は約6秒→ゆっくり変わっていくためゆったりとした落ち着いた印象になる

・左上にロゴ、上部にグローバルナビゲーションが配置（online storeのみ枠で囲まれていて目立つようになっている）

・コンセプトテキストは余白と画像を跨がるように左側に配置

・右下にスクロールを促すアイコン（白い棒のみ）が配置

【コンテンツ】

・画像やテキストが左右に交互に配置される形式が多い

・ボタンやナビゲーションなどのホバーは色が白っぽくなる

・背景画像があるボタンのホバーは画像が明るくなる

・動きはスクロールしたときに画像やテキストが現れるくらいで全体的に動きやアニメーションが少ない→落ち着いた印象に

・repairの説明はイラストを使用しわかりやすい。イラストは線のみでシンプル

【フォント】

・和文はNoto Sans

・欧文はvollkorn serif

・本文は13、14px

・見出しは24、26、32px

【カラー】

・ベースカラーは白（#ffffff）

・メインカラーは茶色寄りの薄いベージュ（#f4f1e9）→クラフトサングラスの「クラフト」感を出すため？

・アクセントカラーはグレー（#9fa0a0）

【レスポンシブ】

SP表示では、

・ハンバーガメニューに変化（開いた時の背景画像はMVの風景画像）

・MVの余白は下部に変化

・MVのテキストコンセプトは下部の余白に配置

【サイトを通じてどのような目的を達成しているか】

目的：サングラスの購入

・コンセプトの通り永く使えるように「職人の手で作られた」「修理可能」という文章で安心感を与える

・日常で永く使ってもらえるように使用シーンの文章や画像を多く載せ、購入者の使用するシーンを想像しやすくしている

→購入に繋がる

➡︎結果：目的達成