見出し画像

79.AND PLANTS #1日1サイトレビュー

【印象】
・シンプル、やわらかい、ナチュラルな印象
【ファーストビュー】
・コントラストが強めで緑が映える写真を画面いっぱいに広げて表示。キャッチコピーは無し
・ヘッダー中央にロゴ、左右にテキストリンクでメニューを配置。右端にアイコンでログイン画面へのリンクとカート画面へのリンクを貼っている
【コンテンツ】
・コンセプト部分は写真をアーチ状に切り取っている。ロゴもアーチ状の形なので揃えている。詳細ページへのボタンは円になっており、ホバーで拡大する。見出し文は下線を引いて強調
・ボタンは角丸、写真やイラストを円で囲んで強調するなど丸を使って柔らか印象を演出している
・Instagramのセクションを作り、写真を多めに載せていることからSNSに力を入れていることがわかる。クリックでInstagramの該当ページへ飛ぶ。ホバーでFacebook、Twitter、Pinterestのシェアボタンが出現する。Twitterでシェアしようとすると文字数オーバーになっているのでそのまま投稿できないのが気になった
・「ALL PRODUCTS」セクションでは左側にセクションタイトルとイメージ写真を載せ、右側に実際の商品カードを並べている。商品写真は縦長で大きめに表示。カード内には商品名と価格、鉢の色を丸アイコンで載せている
・背景色が白か薄い灰色なので、明るい緑の「MEET YOUR PLANTS」セクションが目立つようになっている。ボタンはホバーで白からゆっくりと透過するようになっている
・「OUR POLICY」セクションは画像とテキストを交互に表示することで動きを出している
・レイヤーや写真を重ねたりはせず、フラットなサイトデザインになっている
・セクションタイトルに縦長のサンセリフ体を使うことでスタイリッシュに見せている
【カラー】
・白、灰色、緑
・テキストカラーは青に近い暗めの緑#004347
【フォント】
・ヒラギノ角ゴ Pro
・英字にeuropa
・英字見出しにcentury-gothic
・YakuHanJPを使用
【レスポンシブ】
・ヘッダーメニューはハンバーガーメニュー(3本線)に変更し、アイコンは右側上部に配置。中央にロゴ、左側にログイン画面とカートのアイコンをそれぞれ表示している
・メニューは左から右に、画面全体ではなくサイトが一部見える形で開く
・コンセプト部分のアーチ状の写真が無くなっている
・PC版ではレイヤーや文字を重ねるデザインは無かったが、SP版では「ALL PRODUCTS」のセクションタイトルと写真を重ねて表示している