【無料あり】Webデザイナー向け転職エージェント【建設的な関係を】
Creative21
NexOut
【新人Webデザイナー必見！】バナーリサイズ対応の極意。
Creative21
バナーのリサイズで上司からOKが貰えない。
バナーのリサイズが上手くできない。
バナーのリサイズで気をつけるべきことがあれば知りたいです。
こういった疑問に答えます。
Naoya
やぁ！みんな！元気？
デザイナーの@Naoyaです。
目次
- バナーリサイズ対応の極意
バナーのリサイズって分からないことだらけだよね。
え？これ文字入らなくない？てか、なんかレイヤースタイルバグってる!
ぎゃ～助けて！！！リサイズのバカ！バカ！
Naoya
助けにきたよ！ではゆこう！
スポンサーリンク
バナーリサイズ対応の極意
- レイヤースタイルの調整を行なったか？
- サイズに合った文字組み、レイアウトになっているか？
- 背景画像やエフェクト等、リサイズを考慮しているか？
- 情報を全て入れようとしていないか？
Naoya
順番に解説するよ～ん！
レイヤースタイルの調整を行なったか？
一つ目！
レイヤースタイルの調整を行ったかの確認です。
レイヤースタイルは使用しているものと一緒に比率を保って縮小してくれる訳ではないからです。
Naoya
ごめん、意味分からない。
Naoya
意味分かったら100円頂戴。
Naoya
小学生かよ。
リサイズ時にレイヤースタイルの調整したものと調整していないものを比べてみる
こちらがリサイズ前の画像とします。
リサイズ時にレイヤースタイルを調整していないもの
リサイズ時にレイヤースタイルを調整したもの
一枚目はレイヤースタイルの調整をしていないので文字周りがおかしいですが、二枚目はレイヤースタイルの調整をしているので違和感がない。
Naoya
本当だ！一枚目は文字周りの表示が崩れてる！
なので、レイヤースタイルを使用しているレイヤーの調整を行ったら、同時にレイヤースタイルの調整も行う必要があります。
特にゲーム系のデザインだと必須です。
【Photoshop】レイヤースタイルの使い方【新人デザイナー向け】Photoshopのレイヤースタイルってどうやって使うのだろう？
レイヤースタイルの素材はどうやって読み込んだら良いのだろう？
オリジナルのレイヤースタイルは作れるのかな？
こういった疑問に答えます。...
縮小をする前にスマートオブジェクトを適用して調整するのも、ありです。
【Photoshop】スマートオブジェクトの使い方【新人デザイナー向け】Photoshopの学習を始めたけど、スマートオブジェクトがよく分からない。
スマートオブジェクトって何だろう？
スマートオブジェクトの仕組みや使い方が知りたい。
こういった疑問に答えます。...
Naoya
はい、100円頂戴。
Naoya
このパターンで本当にお金もらってる人見たことある？笑
Naoya
嘘つき！今度からライヤー星人って呼ぶから！
サイズに合った文字組み、レイアウトになっているか？
二つ目！
サイズに合った文字組み、レイアウトになっているかの確認です。
Naoya
リサイズ前の文字組み、レイアウトに引っ張られてるんじゃない？
リサイズとはベースのものをそのまま小さくする対応ではなく、それぞれのサイズに最適化したデザインを制作することです。
Naoya
なんかリサイズ前のデザインに引っ張られちゃうよね！
リサイズ前とリサイズ後の画像を比べてみる
リサイズ前
リサイズ後
リサイズ後のものはリサイズ前のものに比べ、レイアウトや文字組みが異なります。
なので繰り返しになりますが、リサイズ前の文字組み、レイアウトに引っ張られていないかの確認をします。
Naoya
レイアウトはリサイズ前のものから変えていいんだよ！
———————————————
チュートリアル準備中
———————————————
背景画像やエフェクト等、リサイズを考慮しているか？
三つ目！
背景画像やエフェクト等がリサイズを考慮しているか確認です。
文字組みもそうですが、背景画像やエフェクト等の微調整は忘れがちだからです。
Naoya
あ！忘れてた！
体験談：リサイズ時に文字の調整しかしていなくて先輩に指摘を受けた。
実際にNaoyaも新人の頃に実務でリサイズをしている時に、文字のリサイズ調整しかしていなくて先輩に背景画像とエフェクトの指摘を受けました、これほんと忘れがち。
なので、背景画像やエフェクト等がリサイズを考慮しているか確認をします。
情報を全て入れようとしていないか？
四つ目！
情報を全て入れようとしていないかの確認です。
リサイズ対応はあくまでも指定のサイズに最適化する対応です。
なので無理にコピーを全て入れる必要はありません。
リサイズ前とリサイズ後の画像を比べてみる
リサイズ前
リサイズ後
リサイズ後の画像はリサイズ前の画像に比べ情報を減らしている。
Naoya
要素は減らしてもOK！
因みにサイズの割りに情報が多いデザインは説明くさくなりダサく見えがちです。
———————————————
チュートリアル準備中
———————————————
この項目はクライアントの意図により解釈が異なる場合があるので、コピーを除いたものと、全て含めたものどちらも提案するのが無難です。
ABOUT ME
デジタルアーツ東京→デザインプレックス東京→デザイン制作会社→フリーランス
This article offers a fascinating perspective on the subject. The depth of research and clarity in presentation make it a valuable read for anyone interested in this topic. It’s refreshing to see such well-articulated insights that not only inform but also provoke thoughtful discussion. I particularly appreciated the way the author connected various aspects to provide a comprehensive understanding. It’s clear that a lot of effort went into compiling this piece, and it certainly pays off. Looking forward to reading more from this author and hearing other readers’ thoughts. Keep up the excellent work!
Fantastic article! I appreciate how clearly you explained the topic. Your insights are both informative and thought-provoking. I’m curious about your thoughts on the future implications of this. How do you see this evolving over time? Looking forward to more discussions and perspectives from others. Thanks for sharing!