見出し画像

MizunoのLP模写をしてみた

MizunoのLP模写をしました。
https://www.mizuno.jp/baseball/products/shoes.aspx


今回の理由
・LPの模写をしたいと思った時にLP一覧をみていた時に目を引いたから。
・テクスチャを多く使っていてどういう風にコーディングしているのか気になったから。

まずは画像をダウンロードしたけれども、とにかく画像が多かった!
時々background-imgタグで背景画像に指定されていて一括ダウンロードできないものもしばしば。
中盤にデザインされている「New」と書かれた三角のドッグイヤーのようになっているものは擬似要素で背景画像に指定されていた。擬似要素にするとはもう発想が凄い。

デザインの印象
・少しくすんでロックなアンティーク感を感じるデザイン。
・配色は灰色をベース、次に黒、アクセントカラーに赤、緑(LINE)を加えている。

誰に向けてのデザイン?(妄想・考察)
・10代〜30代の男性向けデザイン。若者向け。
クライアントの要望は?→1.購入してもらいたい 2.購入してもらうためにLINE診断にLPから飛ばしたい。(LINEを登録してもらえれば今回購入されなくても通知を送ることができて訴求力UP)
ストーリー→スパイクの良し悪しで変わる→商品紹介→一番みてもらいたい性能を見せる→価格提示→LINE診断に繋げる
気になったデザインのあしらい
キーワードになっているのは「
全体的にフォントが太くて力強さを感じる。
商品紹介や価格提示のところに赤い太枠が使われていて目を引く。
太枠を写真からずらしたりしてデザインに動きをつけている。

購入してもらえるためにどこを目立たせているか?
商品紹介のところ。野球選手の写真を使用して、「自分も〇〇のようなプレーがしたい」=欲しいに結びつけるところ。

どこかのセクションをバナーとして模写しても引き出しを増やせそう、と思った。

というわけで画像を拝借してバナーを作ってみた。
(※あくまでも模写なので、実際の商品企業様とは一切関係ありません!)

太枠がキーワードだったので、キャッチコピーと組み合わせてみた。
背景にテクスチャ、靴の写真の下に黒を敷くだけでかなり画面が引き締まる…!
太枠をずらして使用するのはまた別のデザインでも使用できそうと感じた。

今回の模写も勉強になりました。ありがとうございました。

デザインの本を購入など勉強に使います。 大切に使用します。