LPのメインビジュアル(First View)作ってみた。

メインビジュアルBefore After

今回は私が架空のLPのメインビジュアル(First View)を作成して、プロに添削してもらった時にどのように変化していったのかの紹介します!

では早速、BeforeAfterを晒していきます!笑

目次

Before Afterスタート!!

Before(なんかよくわからず適当に作った見るからにダサいやつ)
BeforeのFダサいFV
Before
After(添削を経て修正したやつ)
添削後のAfter FV
After

自分で言うのものなんですが、だいぶ良くなりましたよね?笑
ちなみにこれ、1日のやりとりでの変化でした。

今回の架空メインビジュアルのテーマ

これを制作するきっかけとなったのは、私が参加しているオンラインコミュニティでのワークショップでした。

その時のテーマはざっくりですけど、こんな感じでした。
・美容化粧品の紹介。商品写真だけ素材あり。他の素材は自由だが女性の肌の写真を使用。
・ターゲットは30代女性、これから美容についてちゃんと考えなきゃと思ってる人。
・使用カラー、キャッチコピーは指定なし。
などなど。

結構自由に考えることができるテーマでした
一旦30分くらいの制限時間で作成したものを、先生に添削してもらっています(それがBefore!!)。
自分の作品はもちろんのこと、他の人の作品の講評からも学ぶことが多く、それがAfterにつながりました。

Beforeについて

BeforeのダサいFV
Before

全然時間が足りず、とりあえずなんとなくで制作してしまい、反省点がありまくりです。笑
では、このクオリティになってしまった私が、自分と他の人の講評を受けて、学んだことを以下にまとめます。

素材がまずミスチョイス

限られた時間の中で、なんとなくで選んでしまった写真なこともあり、ミスチョイスで溢れています!笑
皆さん、わかりますか??


その1・人物写真
Beforeで使っている人物写真、なんだか肌の赤みが強いですよね?
化粧品のLPなので肌に透明感がある人物をチョイスした方が良かった。少なくとも加工をすべき。

その2・あしらい
なんかオシャレ???だからという変な理由で葉っぱで装飾してみちゃいました。
ボタニカル的なのを強く出したいならアリかもしれませんが、特にそういうこともなく。
化粧品のイメージに合わせたあしらいであれば、水飛沫などの方が良かった。

人物と化粧品の大きさのバランスが悪い

化粧品といった美容系のLPのFVは肌を多く見せる方が目を引くため、人物の方を大きくするとバランスが良い。→化粧品のFVだから化粧品を大きくするべきなのかと思っていたけど、場合による。
左上から読むといった目線の動きなどを考慮するのであれば、人物は右に配置されることが多い(例外もあり)。

配色が良くない

背景に緑色をメインにしてしまったのも、素材に葉っぱを選んでしまって、そこからなんとなくです。
素材が適切でないと、どんどんデザインの不一致に連鎖していきますね。
艶感にふさわしい色味や、差し色に化粧品のロゴの色を使ってみるなど、工夫が必要。

なんとなくで作るとデザイン事故が起きる!

上記を踏まえて作り直してみた。(修正1回目)

FV修正1回目
修正1回目

この時点でだいぶ変わりましたね。
Beforeの反省点と重なりますが、工夫した点を以下にまとめました。

人物写真

明るい肌を表現できるように写真を選び直し、色味や明るさを調整。配置も右に変更。
人物写真は大きく、化粧品の写真は小さくすることでメリハリがつくようにした。

透明感、艶感がありそうなあしらい(素材)を使用

水飛沫のあしらいを追加(左上と真ん中上らへん)。
背景にもシルク的な素材を持ってくることで、全体的に艶感が出るようにした。

差し色にゴールドを使用

化粧品のブランドロゴのカラーがよく見るとゴールドなので、全体的なあしらいの色にゴールドのグラデーションを用いた。

キャッチコピーのボリュームを変更

Beforeの時は時間もなくて全然思いついていなかったのもあるけれど、少し増やしました。
強調したい部分に関しては文字を大きくしたり、メリハリをつけるために帯を引いてみたり・・・

当たり前だけど、理由を考えながら作るのはとてもとても大切。

Afterについて(5回ほど微調整を繰り返して到達!)

添削後のAfter FV
After

先生にしつこく添削をお願いして、微調整を繰り返し、Afterに到達しました。
修正1回目から微調整した点に関して以下にまとめました。

左余白が空き気味なので調整

文字間を調整しつつ、少し少し余裕を持たせられるようなイメージで余白を詰めた。
『肌への〜ない?』の上と左の余白のバランスが整うようにした。

青色の背景帯を細く

『シミ・ソバカス〜化粧水※』の背景帯の幅を補足することで、まとまりをよくした。

Newの位置を変更

化粧品と近接するように配置を変更。

ひらがなの字間を調整

『あふれる』と『るい』が同じくらいの字間になるように調整。
最後は数値ではなく、見え方を重視して調整!

理由を持った修正大切!
最終的な微調整は数値に頼らず、見え方を意識する!!

まとめ

文字の抜け感といった点やまだまだ改善できる点はあるかと思いますが、今回はこれで一旦フィニッシュしました。
デザイン事故を起こさないためには、理由を持ってデザインを進めていくことが大切と身に染みました。


他の人の作例を見たり添削してもらえると、学べることが多いな〜と強く思ったので、デザインに自信がない方こそ、勇気を持って見てもらうといいかと思います。


今回は化粧品のLPのFVでしたが、テーマによって、デザインのコツが変わっていくと思うので、引き出しを増やしていけるように、私も頑張ります!

メインビジュアルBefore After

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

このブログの運営者

0歳児の育児をしながら、名古屋でWEBサイト作ったり、ゆるいイラスト描いたりしながら活動中。
5年間CAとして働いた後、アラサーでWEB業界に飛び込んだ日々を振りながら、誰かの役に立つ発信ができたらなと思いブログを始めました。
好きなことは美味しいもの探し。

目次