見出し画像

97.mori-no-oto #1日1サイトレビュー

【印象】
・ナチュラル、優しい、シンプルな印象
【ファーストビュー】
・カルーセルスライダーで写真を複数枚表示。左右に次の写真を画面から少しはみだして配置している。角丸で縦長に切り取っている。実際に製作している様子や工房におもちゃ製作物を置いた様子を撮影することでどのように作られているのかイメージしやすい写真になっている
・ヘッダーは左側にオンラインショップへのボタンを配置、中央にロゴ、右側にハンバーガーメニュー(黒背景、2本線、メニュー表記無し)を表示している。クリックすると黒を背景色に使用したメニューが画面いっぱいに開く。ハンバーガーメニューのみ追従する
【コンテンツ】
・写真やボタンなど角丸で切り抜くことで柔らかさや優しさを演出している
・同様の理由で配色がベージュや茶色など木材を思わせる柔らかい色合いになっている
・あしらいがシンプルですっきりとした印象
・「ABOUT」は英字を大きく白字で表示し、その前面に本文を重ねて表示している
・「PRODUCTS」の小型楽器の紹介部分は写真を複数枚並べて表示。左側に余白を開け、クリックすると写真が移動する矢印アイコンを配置している。写真のループは無し。大型楽器は左側に写真を表示し、自動でゆっくりと画像が切り替わるようになっている。大型楽器の右側に余白を開け、手作りkitの紹介スペースを設けている
・「OTOTABI」は左下と右下が角丸のレイヤーを表示し、セクションタイトルやカードを少しはみだして表示している
・セクションタイトルは英語表記のみ。日本語表記は無し
・写真に本文を重ねて表示している箇所が複数あるが、黒の半透明のフィルターを全面にかけていたりグラデーションをかけたりと視認性を上げているので読みやすい印象を持った
・フッターは「CONTACT US」セクションと一体になっている。左側に住所を表示し、右側にSNSへのリンクとコピーライトを配置している
【カラー】
・白、黒、ベージュ、茶色
・テキストカラーは黒#1A1A1A
【フォント】
・a-otf-gothic-bbb-pr6n
・セクションタイトルにeuropaを使用
【レスポンシブ】
・ヘッダーの要素の位置を変更。左側にロゴ、右側にオンラインショップへのボタン、ハンバーガーメニューと並んでいる
・「PRODUCTS」の矢印アイコンは左から下部に移動
・「OTOTABI」はベージュの背景色の上に白レイヤーを重ねていたが、SP版では白背景のみになっている