![見出し画像](https://assets.st-note.com/production/uploads/images/78668593/rectangle_large_type_2_86971391db2a632b9a438779c0d0a765.jpeg?width=1200)
無料添削デザインスクール #77「美容商品LP」
添削
![](https://assets.st-note.com/img/1652683418528-0o0GNt6h7m.jpg?width=1200)
美容系商品のLPですね。
紫が印象的な綺麗なサイトになっていますね。
■目的を忘れない
![](https://assets.st-note.com/img/1652683514720-c2tGxagMmu.jpg?width=1200)
LPやWEBサイト、その他にも紙媒体の広告やチラシ、デザインの仕事には全て目的があります。
アーティストは自己表現なので目的が何でもいいのですが、デザインにはクライアントがいて、その人の問題を解決するのが仕事です。
きれいに作るのはもちろんなのですが、それ以上に問題を解決することを忘れずにデザインする必要があります。
LPを作りたい、またはリニューアルしたいという依頼の中には、何か問題を抱えているはずです。
・注文が入らない
・認知度が上がらない
・今のLPでは売れない
など、商品やクライアントによって問題は多様です。
練習課題ではそれを読み解くのは難しいですが…
LPではとりあえず、解決したい問題は、買ってくれない。
商品を買ってもらうことが解決策です。
当たり前じゃないかと思いますが、初心者の方はデザインや見た目のデザインは作りこむのですが、肝心の「解決」がいまいちのことが多いです。
ボタンなど置いてあるだけではなくて、押しやすかったり分かりやすくするだけでもいいです。
ヘッダーに固定したした時に見やすいなど。
解決につながるコンバージョンのボタンにもデザインを入れてみてください。
■背景色の使い方
![](https://assets.st-note.com/img/1652683958542-9994WlBDD8.jpg?width=1200)
紫の花がとてもきれいなのですが、商品周辺の背景画像が濁りすぎているように感じます。
切り抜いたようなデザインできれいなので、それは残しつつ背景の色を薄くしていくと商品も立ってくるので、濃さの調整をするといいです。
![](https://assets.st-note.com/img/1652684281032-TQN3gNt6AJ.jpg?width=1200)
濃い目のところがあるので、濃度の調整をするといいです。
化粧品系など、繊細なデザインをするときは、薄い色を使うといいです。
ただ、薄すぎるとブラウザ設定やディスプレイによっては見えなくなるので、薄すぎには注意です。
全部淡くするとパンチが無くなってしまうので、色やサイズなどにメリハリを付けるといいです。
背景の紫の花がワンポイントになっていて印象的なので、中が淡い色でも十分インパクトは出ると思います。
■デザインには爆発も必要
![](https://assets.st-note.com/img/1652684672043-If0wJcmS93.jpg?width=1200)
デザインはアートではないので、見やすさが大切だと言われますが、それでもデザインも芸術要素があるので、爆発も必要です。
全部爆発させると困るので、小さな爆発を入れると一気に印象が強くなります。
![](https://assets.st-note.com/img/1652684770621-H4ePXcN8k8.jpg?width=1200)
写真を大きく見せるところはドカンと大きくしてしまうだけで印象は大きく変わります。
この画像だとそんなに大きく変わっているように見えませんが…WEBサイトで見ると画像サイズが違うだけでも大きく変わります。
世間のモニターサイズも大きくなってきているので、画面を大きく使うところはアーティストになった気持ちで大胆に作ることも必要です。
■シンプルにまとめる
![](https://assets.st-note.com/img/1652685226553-Xpnm9JKkI5.jpg?width=1200)
【?】のところは何か分かりませんが…
全体としてはまとまっていていいと思います。
ただ、まとまりすぎているようにも見えます。
文字要素やタイトルに強弱をつけるとさらにまとまりが出ます。
![](https://assets.st-note.com/img/1652685488552-3HC8wOWlhl.jpg?width=1200)
「Step」とありますが、女性だったら使う順番は分かるだろうということで、いらない要素は削る。
内容量などはテキストとは違う要素なので、囲んで違うものとしてのかたまりにしてあげる。
ほんのちょっとのことですが、見るべき場所が明確になってくるので、より分かりやすい見た目になります。
■方向性のブレ
![](https://assets.st-note.com/img/1652685779053-X3c1NMagYM.jpg?width=1200)
ここだけ方向性がズレています。
![](https://assets.st-note.com/img/1652685795864-9FBP1E2dha.jpg?width=1200)
全体のデザインは写真をきれいな直線で「パキ」っと切り抜いているので、すっきりした印象があります。
右では「ほわ~ん」としたデザインになっています。
二種類デザインが入ってしまっているので、方向性がブレています。
グラデーションを使うなら、メインビジュアルの光のオーブがあるようなのにして、パキっと切る。
![](https://assets.st-note.com/img/1652686042140-wCoH0Zq5BT.jpg?width=1200)
ほわ~んとさせつつ、パキっとしているので統一されます。
中の要素もできるだけパキっとしたのにするといいです。
■動きを出す
![](https://assets.st-note.com/img/1652686298504-0A0ptTtai7.jpg?width=1200)
横並びのをずらすと動きが出ていいのですが、ランダムに並べると無意識にストレスになります。
人はずれているのを見ると不安になるからです。
![](https://assets.st-note.com/img/1652686376271-6d8f7vJTN3.jpg?width=1200)
ずらす時に規則性を持って作ると動きが出つつ、きれいに見せることができます。
■最後の押し
![](https://assets.st-note.com/img/1652686847497-PsqeyrtCyq.jpg?width=1200)
LPの最後は買うか買わないかの最終ジャッジなので、一番押してもらいたいコンバージョンボタンや価格、特典はもっと大きく出したいです。
![](https://assets.st-note.com/img/1652687142520-1rG1Ni3LUX.jpg?width=1200)
極論このくらい大きくしてもいいです。
さっきまで「きれいにしろ」言ってたのに、最後は泥臭い商売根性丸出し~!?と思いますが、先にも書いた通り、目的は売ることなので、コンバージョンにつながるデザインを作りましょう。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」または動画で添削をする「#動画でデザイン添削希望」を付けて投稿してください。
#デザイン添削希望
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) January 7, 2022
↑こちらを付けてもらえれば無料でデザイン添削します。#動画でデザイン添削希望
↑さらに細かい添削が欲しい方はこちら。
デザインファイルも送ってもらうと、動画で細かくファイルの作り方から添削します。
添削はYoutubeとnoteで!#WEBデザイナー #webデザイン勉強中 pic.twitter.com/SzI928oF2b