見出し画像

95.Leanani plus #1日1サイトレビュー

【印象】
・可愛い、賑やか、楽しい印象
【ファーストビュー】
・上下に余白を開け、左右横幅いっぱいにサイズを広げた写真を配置。写真内にイラストを組み込み、アニメーションで絵の具とラメをイメージしたイラストを表示している。写真がカラフルなこと、イラストも鮮やかなことから楽し気な印象。左側に手書き風のフォントでキャッチコピーを斜めのラインで表示している
・メインビジュアルに上部が一部被さるようにバナーを配置している
・ヘッダーの中央にロゴを表示し、右側にハンバーガーメニュー(3本線んでメニュー表記無し)を表示。メニューのみ追従する仕様になっている
【コンテンツ】
・ハンバーガーメニューをクリックすると白背景のメニュー画面が開く。テキストリンクと一緒にバナーを配置している。ホバーでバナーの文字色よりも明度の高い色に背景色が変わる
・縦書きでセクションタイトルを表示したり、イラストを斜めに表示したりと動きを出すことで楽しい印象を演出している
・写真にピンクのシャドウを重ねたり、ラメの入った枠線を入れている。賑やかな印象を持った
・サイト内で使用している写真は小物や服装が色鮮やかで華やかなイメージ。写真に組み合わせているイラストも彩度が高くカラフルな印象
・「PRODUCTS」セクションは写真を交互に表示。商品の説明文を表示したレイヤーを前面に配置している。説明文の背面には商品ジャンルを灰色の文字で薄く表示している
・レイヤーを重ねたり、イラストを枠からはみだして表示したりとサイト全体で奥行きを出したデザインになっている
・Instagramのセクションは写真を大きく表示している。メインのユーザー層がInstagramをよく使用する層と思われるので広めに表示することで目に入りやすくしている
・Instagramの他にもYoutubeの動画を埋め込んでいる
・ボタンはホバーで左から右に流れるように色が変わる。マウスを離すと右から左に元の色に戻る
・「NEWS」箇所は文章量が多いので視認性を上げるためにあしらいを少なめにしている
・フッターは黒背景に白字を使用。左側にロゴを配置し、上にSNSアイコンを大きめに表示している。右側にはメニューリストを表示している
【カラー】
・白、黒、灰色、ピンク、緑、紫
・テキストカラーは黒#000000
【フォント】
・A1 Gothic M
・英字見出しにfutura-pt
【レスポンシブ】
・「PRODUCTS」セクションは写真を上部に、商品の説明文を下部に表示している
・フッターは中央揃えになっている