![見出し画像](https://assets.st-note.com/production/uploads/images/162463498/rectangle_large_type_2_8ed5d3d9735c44a5c631ba01fb84b2ad.jpeg?width=1200)
無料添削デザインスクール #359「ペイペイカード申し込みバナー」
添削
![](https://assets.st-note.com/img/1732009410-Lg3IoDP9SjbYKxvVzUtRfZG1.jpg?width=1200)
ペイペイっぽいアプリのクリスマスのバナーですね。
クリスマス感が出ていますね。
■ここからがスタート
![](https://assets.st-note.com/img/1732009520-tPDcFLRjl67e3bG90o5AnmCV.jpg?width=1200)
綺麗に配置してあり、整然として見やすいのですが、簡素というかクリスマス感が出ているかというと、色がクリスマスカラーなのと、サンタがいるだけ。
ここからが本当のデザインの始まりなので、参考デザインを見てクリスマス感を盛っていくとクオリティが上がっていきます。
・自分で作る
・ほかのデザインを見る
・自分で作る
・ほかのデザインを見る
・自分で作る
・ほかのデザインを見る
・
・
・
基本はこれの繰り返しです。
参考にしたデザインのクオリティか、それ以上に達したら何とかいいかなという感じです。
クリスマスのデザインは、デザイナーなら絶対に通る道です。
お決まりのクリスマスデザインは、意外と難しいです。
王道にすると子供っぽさやチープ感がすぐに出るので、イラストの素材や装飾は繊細に調整します。
■目立たせる場所
![](https://assets.st-note.com/img/1732009778-xvRMTXzjU4Nek6HgcGYp9Wu3.jpg?width=1200)
「200ポイントもらえる」を目立たせたいのですが、赤い帯が目立ってしまい、200ポイントが埋もれています。
背景の緑と黄色は近い色なので馴染みます。
緑と赤は反対の色なのでぶつかり合って目立ちます。
全体の目立つバランスも調節して、見せたい内容が一番目立つようにしてあげてください。
■バランス
![](https://assets.st-note.com/img/1732009926-YhR6VZQ7qnKdrvEBcgtjowfL.jpg?width=1200)
センター揃えにしてあるのですが、右側がスカスカになっています。
全部をセンターにしなくても、サンタがいる時はサンタを大きくして右に寄せてしまうか、右にも何かイラストを入れてバランスをとってあげるといいです。
上の線は上戸の要素を区切っているのですが、下の線はいらないので、削除して文字を大きくしてあげるといいです。
修正
![](https://assets.st-note.com/img/1733204634-zwjK95MNHBmUD4ogsSqJpI0v.jpg?width=1200)
修正して頂いたので、こちらも添削させて頂きます。
キラキラ感が増えましたね。
■文字サイズ
![](https://assets.st-note.com/img/1733204673-lL9SDk8YoXqfaczvRiuAgHWy.jpg?width=1200)
下の文字が小さくてつぶれてしまうので、もっと大きくしたいです。
「10%還元」も一応キャンペーン内容なので、小さくてもいいのですが、しっかりと読めるようにしたいです。
![](https://assets.st-note.com/img/1733204860-aRBcwLPsfKNXrHqGFm3oVzhA.jpg?width=1200)
「円」を使うとかなりデッドスペースが生まれるのがネックです。
形状なども考慮してスペースを有効活用して、文字を分かりやすく配置してみてください。
修正2
![](https://assets.st-note.com/img/1734403768-M01sR6TWJhvYApu7xlym4Lia.jpg?width=1200)
修正して頂いたので、こちらも添削させて頂きます。
かなり見やすくなってきたかと思います。
![](https://assets.st-note.com/img/1734403898-5dCsnwS7pb4ztID8Bajy9lYv.jpg?width=1200)
左下のがまだギューギューに見えるので、もう少しサイズ調整をしてあげたいです。
「丸」に入れるとどうしてもスペースを食います。
![](https://assets.st-note.com/img/1734403999-sEUZfmvOinPCg1AGpB5XkMYS.jpg?width=1200)
丸は強い個性がある目立つイケメン造形なので、ちょっとはみ出させたり、大胆に削っても丸の印象は残ります。
はみ出させて文字をもっとはじに寄せたり、大きくしても大丈夫です。
![](https://assets.st-note.com/img/1734404153-4EAiBwKNTMmzdsStZUgIRV5r.jpg?width=1200)
ここがぽっかりと空いているのが気になります。
イラストを追加するか「さらに」を外に出して目立たせたりしてスペースを埋めてあげたいです。
全体的にもう少しバランス調整してあげると見やすくなります。
お題
こちらのバナー課題は、こばやすさん(@kobayas_s)のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|デザイン添削おじさん 現役WEBデザイナー (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN