![見出し画像](https://assets.st-note.com/production/uploads/images/140569830/rectangle_large_type_2_c17212b4ad64e601e03db51e92d42eaa.jpeg?width=800)
無料添削デザインスクール #302 「イースターエッグバナー」
添削-1
![](https://assets.st-note.com/img/1715656262403-6c6EiDridG.jpg?width=800)
イースターエッグのバナーですね。
パステル調でかわいいですね。
■QRコード
![](https://assets.st-note.com/img/1715656319783-VDhofd9dnU.jpg?width=800)
これはバナーだと思われるので、QRコードはいらないように感じます。
PCで見る人も減って、現在は90%近くがスマホで見ています。
チラシなら分かるのですが、バナーにQRコードは読み込めないのでいらないかな。
■文字サイズ
![](https://assets.st-note.com/img/1715656421652-Dn1UmxK6SW.jpg?width=800)
この添削もスマホから見てる可能性が高いと思います。
その画面でバナーを表示して読めない文字があったら、それは小さすぎるということです。
最初の内は文字サイズの感覚が分からないので、どうしても小さい文字になってしまうことがあります。
実際にスマホで表示するか、作っているバナーを写真撮影して、画面上で見てサイズ感を何度も確かめてみてください。
これを何度かやると文字サイズの感覚がつかめます。
■要素配置
![](https://assets.st-note.com/img/1715656588808-PhuUHntDbs.jpg?width=800)
バナーや広告って不思議なもので、全員見ているはずで、広告に踊らされて買ってしまったことも絶対あるのに、実際に作るとなるとどれを言えば人は引かれるのかが分からなくなるものです。
この中でターゲットの人が一番興味を引くものは何かを考えて、一番興味が出るだろうというのを大きく出す。
基本はこれです。
現状だと
・日付
・料金
・場所
が並列で置かれています。
必要な情報を載せないといけないのですが、全部を並列で載せるとすごいつまらないデザインになります。
バナーは一瞬で興味を持ってもらうのが役割なので、クリックしてもらったら役目が終わります。
一番興味を持つだろうところだけで1発勝負するのがバナーです。
■装飾負け
![](https://assets.st-note.com/img/1715656873910-K7hA1dBxjD.jpg?width=800)
かわいいイラストで雰囲気は十分出ているのですが、やっぱり肝心なのは文字です。
文字がイラストに負けてしまっているので、色味を濃くするなど、文字を読ませる調整もしてみてください。
修正-1
![](https://assets.st-note.com/img/1715928798599-D6WVfdyfM1.jpg?width=800)
修正して頂いたので、こちらも添削させて頂きます。
見やすくなりましたね。
■箇条書き
![](https://assets.st-note.com/img/1715928918504-dAKkkFUsL1.jpg?width=800)
分かりやすいのですが、他の添削でも書いていますが、バナーは詳細情報を見せるところではないので、ここまでしっかりと見せなくていいです。
毎度書いていますが、バナーの起源は「旗」です。
牛丼屋の前にある旗(のぼり)と一緒です。
振り向いて気付いてもらうのが役目なので、のぼりに詳細なメニューは載せないですよね。
振り向いてもらう情報だけ大きく載せてあげるといいです。
規定で載せないといけない文言もあるのですが、それらは小さくしてもいいです。
ただ「定期購入」などを小さくすると、問題になるので注意が必要です。
■背景
![](https://assets.st-note.com/img/1715929217181-7KmhAd4D2p.jpg?width=800)
背景が真っ白なのでさみしさを感じます。
あまりごちゃごちゃさせると文字が読みにくくなるのでバランスが難しいですが、背景を入れてあげるともっと目立ってくるはずです。
白背景だと周りと一体化してあまり目立たないので、色でもいいので何か入れてあげるといいです。
添削-2
![](https://assets.st-note.com/img/1716270468104-IsxobXrrY5.jpg?width=800)
修正して頂いたので、こちらも添削させて頂きます。
もう少し大きく変えた方がいいかな。
■要素の分散
![](https://assets.st-note.com/img/1716270500629-BMe5AzTDSF.jpg?width=800)
箇条書きは見やすいのですが、バナーとしてはそんなにじっくりと読まれないので、散らしてみてほしい物だけを見てもらえるようにします。
![](https://assets.st-note.com/img/1716270702303-cMwbZRfK8c.jpg?width=800)
日付もタイトルの近くに置けば
「何」を「いつ」やっているかが分かりやすくなります。
![](https://assets.st-note.com/img/1716270768608-JOVTED9d5w.jpg?width=800)
場所もタイトルの近くに移動させれば、タイトル周りだけパッと見てもらえば、「何」を「どこ」で「いつ」までがざっくり分かります。
詳細の住所はクリックした後の詳細ページで伝えればいいです。
大体分かればいいです。
・東京ドーム
・日比谷公園
・ジャスコ
とか、ざっくり分かればいいです。
広告出す時も地域を選んで出すので、北海道に沖縄のイベント情報のバナーは出ません。
なので必然的に近くの施設になるので、ざっくりでも地元の人は分かってくれます。
![](https://assets.st-note.com/img/1716271015100-GkWuqpOwWZ.jpg?width=800)
参加費も「無料」とまとめてあげると分かりやすいです。
![](https://assets.st-note.com/img/1716271098751-DTza7MHsw2.jpg?width=800)
整理するとこんなにスペースが空くので、他の要素をもっと大きくすることもできます。
■文字の整理
![](https://assets.st-note.com/img/1716271220039-2n88c2Mj4F.jpg?width=800)
「何」をやるのがまだ弱いので、景品がもらえるという特典部分をもっと目立たせたいです。
先ほどスペースも空いたので、全体を調整すれば、ここの文字を大きくすることができるはずです。
![](https://assets.st-note.com/img/1716271343377-mx74kiHGma.jpg?width=800)
ただ、この文章をまんま大きくすると、大きくなったけど長いのでよく分かりません。
もっと短文で分かりやすくして、文字を大きく入れられるようにします。
ここでも先に書いたのと同じで、詳細は入れなくてもいい。
![](https://assets.st-note.com/img/1716271397693-MID9OaGEuU.jpg?width=800)
これはイベント詳細なので、実際にやるときに係員から説明されると思うので、ここに書く必要はないと思います。
![](https://assets.st-note.com/img/1716271470313-lWokQcnEwf.jpg?width=800)
「交換しよう!」も事務的処理なのでいらないです。
もっとワクワクする言葉で短くするなら「ゲット!」とかですかね。
![](https://assets.st-note.com/img/1716271538377-897IxtVTq9.jpg?width=800)
ここも長いので「見つけて」「探して」くらいでいいかと思います。
![](https://assets.st-note.com/img/1716271659413-Lgd268OJ9i.jpg?width=800)
言っていることはほぼ一緒で文字を短くしました。
短すぎて意味が分からなくなったりすることもあるので加減が難しいところです。
優秀なディレクターがいれば一瞬でまとめてくれたりします。
![](https://assets.st-note.com/img/1716271840240-LQGu402lEm.jpg?width=800)
重要なのは「豪華景品」のほうなので、そっちを大きくします。
![](https://assets.st-note.com/img/1716271867631-nvMNNbo05P.jpg?width=800)
バランスが悪い時は、詳細を増やして調整します。
![](https://assets.st-note.com/img/1716271909868-FMd8hytpEw.jpg?width=800)
英字にしたりもしますが、これはどっちでもいいかな。
![](https://assets.st-note.com/img/1716272311135-efsaGrp83i.jpg?width=800)
フォントを変えてそれっぽくすればタイトルみたいになってきます。
こんな感じで、デザインは「見た目を作る」というよりも、要素をまとめてあげれば大体いい感じのまとまりができます。
要素の文字数や画像などが変だとデザイン作る時も違和感を感じて中々いいデザインにならないことが多いです。
この「要素がまとまっている」時に感じるのが「デザインの神が降臨した」とかだと思われます。
なので、作業的にまとめればいくらでも神は降臨させることはできます。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|デザイン添削おじさん 現役WEBデザイナー (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN
この記事が気に入ったらサポートをしてみませんか?