「マジックインキ×RAGEBLUE」 サイトレビュー 16

マジックインキ×RAGEBLUE | RAGEBLUE

こんばんは。本日は、日本を代表する油性マーカーのブランド『マジックインキ』と、人気アパレルブランド『RAGEBLUE』のコラボ商品販売サイト、「マジックインキ×RAGEBLUE」のサイトレビューをしたいと思います。商品のイラストデザインはイラストレーターのマシューマロー。

・マジックインキ公式サイト

・RAGEBLUE公式販売サイト

・マシューマロー公式サイト

＜印象＞

・手書き風で可愛い、カラフル、ポップ、エモい

＜ファーストビュー＞

＜構成・特徴＞
・余白は少なめで、ノートに手書きで書いているような見せ方。

・モバイルファーストサイト。サイト全体の背景部分はノートの表紙、コンテンツの背景部分はノートのようなデザインになっている。

・スクロールをすると、左部分に配置された「item list」に合わせて、画面端のラインのカラーが右下のマジックインキの写真のカラーに変わる。その際、そのカラーのマジックインキのキャップが外れた写真に変わり、頭一個分上に出る。

・コンテンツごとに手書きで一言メモが配置されている。買ったらどう使えるかがイメージしやすく、購買意欲を促進させている。

・Tシャツの写真はチェキ風の枠で囲われ、4秒間隔で自動的にスライドされる。ただスライドされるのではなく、揺れているような動きがつけられている。

・パンツは一つ間隔をあけたパンツに動きがつけられている。生きているようで可愛い。

・アイテムごとに、アイテム・価格・Check! が配置され、Check部分のテキスト背景だけアクセントカラーになっている。ホバーで3つ全てのテキスト背景がそのメインカラーに変わる。

・商品とイラストレーター間を、「Finished!」とマジックインキの写真で区切る。イラストレーター紹介の枠を薄いグレーにし、角を閉じないことで、窮屈さを感じさせない。定規で引いたような形になっている。

・ページ下部に全商品一覧ボタン（商品販売ページへ遷移）とシェアアイコン。全商品一覧ボタンはカーソルを合わせると、ボタン背景をインキで塗ったような動きがつけられている。

＜ペルソナ＞

・10代〜20代の若者。ビビッドカラーのファッションや小物に興味がある。古着屋が好き。キャリーケースやパソコンにステッカーを貼りがち。

＜目的＞

・コラボ商品を買って欲しい。

＜参考になりそう、気付き＞

・ノートのようなデザインが可愛くてオシャレだと思った。サイト全体背景のノートの帯の部分がインキのカラーに合わせて変わったり、コンテンツ背景の「No.」など、細かい部分にもこだわりを感じた。

・「Item」見出しの「I」が縁取られていなくて、遊び心があっていいなと思った。

・アイテムごとに配置された一言メモ。個人的には「色違いで揃えたい夏のよき相棒」が愛着が湧いていいなと思った。付箋を貼ったデザインにしてみても可愛いのかなと思った。

＜配色＞

＜フォント＞

・欧文...Helvetica。見出しやナビ部分のフォントはimg画像を使用。

・和文...ヒラギノ角ゴ。手書き文字部分はimg画像を使用。