WebDesign

【新人Webデザイナー必見!】バナーリサイズ対応の極意。

バナーのリサイズで上司からOKが貰えない。
バナーのリサイズが上手くできない。
バナーのリサイズで気をつけるべきことがあれば知りたいです。

こういった疑問に答えます。

NaoG
NaoG
やぁ!みんな!元気?

クリエイターの@NaoGです。

目次

  • バナーリサイズ対応の極意

バナーのリサイズって分からないことだらけだよね。
え?これ文字入らなくない?てか、なんかレイヤースタイルバグってる!

ぎゃ~助けて!!!リサイズのバカ!バカ!

NaoG
NaoG
助けにきたよ!ではゆこう!

バナーリサイズ対応の極意

  • レイヤースタイルの調整を行なったか?
  • サイズに合った文字組み、レイアウトになっているか?
  • 背景画像やエフェクト等、リサイズを考慮しているか?
  • 情報を全て入れようとしていないか?
NaoG
NaoG
順番に解説するよ~ん!

レイヤースタイルの調整を行なったか?

一つ目!
レイヤースタイルの調整を行ったかの確認です。

レイヤースタイルは使用しているものと一緒に比率を保って縮小してくれる訳ではないからです。

NaoG
NaoG
ごめん、意味分からない。
NaoG
NaoG
意味分かったら100円頂戴。
NaoG
NaoG
小学生かよ。

リサイズ時にレイヤースタイルの調整したものと調整していないものを比べてみる

こちらがリサイズ前の画像とします。

リサイズ時にレイヤースタイルを調整していないもの
リサイズ時にレイヤースタイルを調整したもの

一枚目はレイヤースタイルの調整をしていないので文字周りがおかしいですが、二枚目はレイヤースタイルの調整をしているので違和感がない。

NaoG
NaoG
本当だ!一枚目は文字周りの表示が崩れてる!

なので、レイヤースタイルを使用しているレイヤーの調整を行ったら、同時にレイヤースタイルの調整も行う必要があります。

特にゲーム系のデザインだと必須です。

【Photoshop】レイヤースタイルの使い方【新人デザイナー向け】Photoshopのレイヤースタイルってどうやって使うのだろう? レイヤースタイルの素材はどうやって読み込んだら良いのだろう? オリジナルのレイヤースタイルは作れるのかな? こういった疑問に答えます。...

縮小をする前にスマートオブジェクトを適用して調整するのも、ありです。

【Photoshop】スマートオブジェクトの使い方【新人デザイナー向け】Photoshopの学習を始めたけど、スマートオブジェクトがよく分からない。 スマートオブジェクトって何だろう? スマートオブジェクトの仕組みや使い方が知りたい。 こういった疑問に答えます。...
NaoG
NaoG
はい、100円頂戴。
NaoG
NaoG
このパターンで本当にお金もらってる人見たことある?笑
NaoG
NaoG
嘘つき!今度からライヤー星人って呼ぶから!

サイズに合った文字組み、レイアウトになっているか?

二つ目!
サイズに合った文字組み、レイアウトになっているかの確認です。

NaoG
NaoG
リサイズ前の文字組み、レイアウトに引っ張られてるんじゃない?

リサイズとはベースのものをそのまま小さくする対応ではなく、それぞれのサイズに最適化したデザインを制作することです。

NaoG
NaoG
なんかリサイズ前のデザインに引っ張られちゃうよね!

リサイズ前とリサイズ後の画像を比べてみる

リサイズ前
リサイズ後

リサイズ後のものはリサイズ前のものに比べ、レイアウトや文字組みが異なります。

なので繰り返しになりますが、リサイズ前の文字組み、レイアウトに引っ張られていないかの確認をします。

NaoG
NaoG
レイアウトはリサイズ前のものから変えていいんだよ!

———————————————
チュートリアル準備中
———————————————

背景画像やエフェクト等、リサイズを考慮しているか?

三つ目!
背景画像やエフェクト等がリサイズを考慮しているか確認です。

文字組みもそうですが、背景画像やエフェクト等の微調整は忘れがちだからです。

NaoG
NaoG
あ!忘れてた!
体験談:リサイズ時に文字の調整しかしていなくて先輩に指摘を受けた。

実際にNaoGも新人の頃に実務でリサイズをしている時に、文字のリサイズ調整しかしていなくて先輩に背景画像とエフェクトの指摘を受けました、これほんと忘れがち。

なので、背景画像やエフェクト等がリサイズを考慮しているか確認をします。

情報を全て入れようとしていないか?

四つ目!
情報を全て入れようとしていないかの確認です。

リサイズ対応はあくまでも指定のサイズに最適化する対応です。
なので無理にコピーを全て入れる必要はありません。

リサイズ前とリサイズ後の画像を比べてみる

リサイズ前
リサイズ後

リサイズ後の画像はリサイズ前の画像に比べ情報を減らしている。

NaoG
NaoG
要素は減らしてもOK!

因みにサイズの割りに情報が多いデザインは説明くさくなりダサく見えがちです。

———————————————
チュートリアル準備中
———————————————

この項目はクライアントの意図により解釈が異なる場合があるので、コピーを除いたものと、全て含めたものどちらも提案するのが無難です。