見出し画像

88.マジックインキ×RAGEBLUE #1日1サイトレビュー

【印象】
・可愛い、楽しい、にぎやかな印象
【ファーストビュー】
・画面中央にノートをイメージした背景を配置し、前面にインスタントカメラ風の写真を並べている。写真や文字をななめに配置することでポップで楽しそうなイメージを作っている。背面にベージュのシャドウを重ねている
・画面左右はざらついた紙のようなベージュの背景を使用。外側に赤いラインが引かれている
・背景とは明度の違うベージュでアイテムリストや手書き風の文字を表示。手作り感を演出している
【コンテンツ】
・画面左右は固定となっており、スクロールすると中央部分のみ動く
・右下にマジックインキの写真を配置。スクロールによって蓋が外れたり閉じたりする。外側のラインの色も商品写真に合わせて変化する
・マジックインキなので「書く」をイメージしたサイトデザインになっている。淡いピンクがかったノート風の背景に手書き風の文字を使用
・中央部分の横幅が狭いのでコンテンツが詰まっている印象。にぎやかで楽しそうなイメージを演出している
・「ALL ITEMS」のボタンは背景色がベージュになっており、ホバーで明度の違うベージュに変わる。上から下に塗りつぶすようなアニメーションを使用
・商品説明は手書き文字になっており、ななめのラインの横書きや縦書きなど統一されていない。ラインを合わせないことで楽しそうなイメージを作っている
・商品写真も同様の理由で揃えて並べるのではなくななめにずらしている。一部のアイテムはアニメーションで上下や左右に少し動くようになっている
・コラボ商品なので、服の写真にマジックインキを写り込ませている
・「01. T-shirt」では横スクロールを使用。写真を灰色の枠で囲みインスタントカメラ風にしている。茶色で少し汚れた風に加工することでレトロ感を出している
・金額や商品名など強調部分は黒またはインクに合わせた色の帯を敷いている。文字色は白を使用
【カラー】
・ベージュ(2色)、淡いピンク、黒、白
・赤、黄色、緑、紫、オレンジ、青
・テキストカラーは黒#000000
【フォント】
・Hiragino Kaku Gothic ProN
・Helvetica Neue
・Brown-Bold
【レスポンシブ】
・PC版ではあった画面左右のベージュ背景部分が消え、中央のノート背景部分のみ表示に変更
・ヘッダーやフッターのメニューは無し。メニューリンクが無いので移動はスクロールのみ