WebDesign

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

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

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

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

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

この記事の信頼性(著者は実務経験者)

  • バナーの制作経験1,000枚以上
  • デザイナー歴5年
  • 現役フリーランスWebデザイナー

目次

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

ではさっそく見ていきましょう。

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

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

上記のとおり。
それぞれ順番に解説します。

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

レイヤースタイルの調整を行ったか確認します。

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

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

こちらがリサイズ前の画像です。

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

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

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

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

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

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

【Photoshop】スマートオブジェクトの使い方【新人デザイナー向け】Photoshopの学習を始めたけど、スマートオブジェクトがよく分からない。 スマートオブジェクトって何だろう? スマートオブジェクトの仕組みや使い方が知りたい。 こういった疑問に答えます。...

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

サイズに合った文字組み、レイアウトになっているか確認します。

リサイズ前の文字組み、レイアウトに引っ張られていないでしょうか?

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

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

リサイズ前
リサイズ後

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

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

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

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

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

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

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

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

実際に実務でリサイズをしている時に、文字のリサイズ調整しかしていなくて先輩に背景画像とエフェクトの指摘を受けました。

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

NaoG
NaoG
忘れがちだから注意したい!

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

情報を全て入れようとしていないかの確認をします。

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

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

リサイズ前
リサイズ後

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

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

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

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

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