![見出し画像](https://assets.st-note.com/production/uploads/images/102962690/rectangle_large_type_2_3764e777ed2e715311db4e12ffdc12f7.jpeg?width=800)
無料添削デザインスクール #203「サブスクバナー」
添削
![](https://assets.st-note.com/img/1681432675625-ri7PMAG2sk.jpg?width=800)
映画・ドラマのサブスクバナーですね。
ダークな印象ですね。
■文字配置
![](https://assets.st-note.com/img/1681432854392-NqIbxjP8FJ.jpg?width=800)
ロゴの横にいきなり価格が置かれていますが、この企業が980円ではなくて、見放題で980円という流れになるので、ここではない方がいいです。
文字の意味が近くとつながっているように配置するといいです。
「Z」で見るとか教科書では教えますが、個人的には「点」で見ると思ってます。
「Z」で見る人は相当に興味のあるユーザーなので、ほっといても見ます。
興味のない人はパッと見て点で見るので、その周りにつながる情報を置いてあげるといいのではないかと考えています。
この中だと「見放題」や「3カ月無料」に目が行くので、そのあたりに金額を置いてもいいのかと思います。
それか、最近は禁止されていますが、無料を大きくして定額の金額は小さく入れる。
■右揃え
![](https://assets.st-note.com/img/1681433201123-tKW1kEZUBC.jpg?width=800)
右揃えは読みにくいという論争が昔あったような気がします。
どうしても右揃えにしかできない時はしょうがないのですが、わざわざ右揃えにする必要もないので、一般的な左揃えかセンター揃えが読みやすいです。
■色味
![](https://assets.st-note.com/img/1681433325474-H3TObTQDAe.jpg?width=800)
ここの黄色というか黄土色がくすみすぎているように感じます。
落ち追加色ではあるのですが、もう少し発色をよくすると目立ちます。
![](https://assets.st-note.com/img/1681433593131-35DReme8Hs.jpg?width=800)
ちょっと明るくするだけでも印象はよくなります。
■ボタンの影
![](https://assets.st-note.com/img/1681433664189-zezqYluQzJ.jpg?width=800)
ボタンの影が左上についていますが、これだと凹んでいるように見えます。
![](https://assets.st-note.com/img/1681433935150-TOb3OHxJMW.jpg?width=800)
人は自然の普通を見ます。
光は上から降り注ぐもの、今回は斜めの影なので左上から光が来ていると見ます。
そうなると凹んでいるように見えます。
ボタンはボコッと盛り上がっている方が押せる感が出るので、凹んでいるよりかはいいです。
一時期凹んだボタンもありましたが、最近はなくなりましたね。
CSSで再現がめんどくさいというのもあり、内側のシャドウ自体が消滅しつつあります。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN
この記事が気に入ったらサポートをしてみませんか?