このリサイズ、どっちが正解？デザインのサイズ展開のセンスを磨こう

A5チラシとA1ポスターの「サイズの違い」を考えよう

元となるデザインはA5サイズのチラシで、よくあるA4サイズのコピー用紙を二つに折ったサイズです。

イベントのチラシとしてよく使われる大きさで、「手にとって近くで見る」サイズ感です。

一方でA1サイズのポスターは、A4サイズのコピー用紙を8枚繋げたサイズです。

手に取るにはあまりに大きく、「壁に掲示されているのを遠くから見る」サイズ感です。

これだけサイズに差がある場合、単純に大きくするだけのリサイズではうまくいきません。

ではどう考えるのがいいのか、デザインの手掛かりとなるのは次の2つのポイントです。

1. どこでデザインを目にする？
2. デザインから目までの距離はどれくらい？

この2つについて、さらに深掘りしてみましょう。

Illustratorの「アートボードツール」で、オブジェクトと一緒にアートボードを複製する方法

今回のように、同じオブジェクトを使用してサイズ違いのデザインを作成する場合、アートボードをオブジェクトごと複製できる「アートボードツール」機能が便利です。

サイズ違いのベースを簡単に作れるので、ぜひ覚えておきましょう。

バナー広告はさまざまなサイズと比率がある

ウェブサイトやサービスを利用していると、バナー広告が表示されているのを目にする機会はよくあります。

バナー広告にはさまざまなサイズがあり、「大きい／小さい」だけでなく「横長／正方形／縦長」など、比率のバリエーションも豊富です。

実務でバナー広告のデザインをサイズ違いで複数作る場合、以下のようなフローで作成することがよくあります。

1. 一般的な大きさ・正方形に近いサイズをひとつ選びデザインを作成する
2. クライアント確認をとる
3. デザインのOKが出たら、サイズ違いを作成する
4. あらためてクライアント確認をとる

今回は、最初に大きめの長方形でデザインを作成し、その後、小さなサイズのデザインを作成しています。

その際、「すべての情報を入れる」ことを優先しすぎると、以下のようなデザインになってしまうことがあります。

• 全体的に文字が小さく読みにくい
• ジャンプ率が弱い・メリハリがない

そういった失敗を防ぐために、バナーのサイズに合わせて情報を削る提案をするのも一つの方法です。

今回のバナーは、以下のような工夫で文字数を減らしました。

• 飛行機で行こう！ → 飛行機で！
• 早期予約割引で → 早めの予約で
• セール期間の見出しと開始日時を削除

あくまで「伝えたいことは変えない」ということを大切にしつつ、小さなバナーサイズに合わせた文字数の引き算を考えてみましょう。

Illustratorでバナーデザインする際は「ピクセルプレビュー」で確認しよう

Illustratorはベクターのデザインツールなので、どれだけ拡大しても、Photoshopのようなラスター形式のツールのようにピクセルを感じることはありません。

しかし、バナー広告は「JPEG」や「PNG」などのラスターの画像形式で書き出すことがほとんどです。

文字や要素を小さくしすぎて、書き出してから「文字が潰れて読めない」というトラブルを防ぐために、デザイン制作中に確認する際には「ピクセルプレビュー」を活用しましょう。

それでは、ピクセルプレビューの使い方と注意点について解説します。

「アドセンス広告」と「Instagram広告」の違いを整理しよう

今回リサイズして作成するのはInstagram広告ですが、元となるデザインはGoogleのアドセンス広告です。

Googleアドセンス広告とは、ウェブサイト画面に設置される広告で、ページを閲覧しているユーザーの興味や関心に合わせた広告が表示されるしくみです。

まずは2つのメディアにどんな違いがあるのか、特にデザインの仕上がりにどう影響するのかを、3つのポイントに分けて解説します。

Illustratorの「線」パネルで文字サイズに合わせて太さを調整する

テキストの一部を強調したいとき、文字のサイズを変えてメリハリをつける手法はデザインでよく用いられます。

しかし、小さな文字は字幅が細く見え、別のウェイトの文字に見えてしまいます。

太いウェイトがないフォントの場合、Illustratorの「線」パネルを使って字幅を少し太くすることで均一に見せることができます。

1. ツールバーからテキストツールを選択し、細く感じる文字を選択します。
2. 「塗り」パネルで、塗りのカラーをクリックで選択し、線にドラッグします。
3. 「線」パネルで線幅を設定します。

1. スポイトツールを選択し、設定した文字から他の文字へ設定をコピーします。

これで、異なる文字サイズが混ざっていても、全体で見たときに統一感のあるバナーに仕上がります。

ぜひ字幅の微調整に役立ててみてください。

1．サイズの違いだけでなく「目からの距離」を考える

デザインから目までの距離は、適切な文字サイズを考えるのにも重要な情報です。

どれくらい離れたところから見るのか、どんな状態で見るのかを想像してみましょう。

2．リサイズだからといってサイズを変えるだけにしない

デザインには目を引くメリハリやジャンプ率が必要です。

単なるリサイズだけでは、その点が疎かになることがあります。

メリハリをつけるために情報を削る・絞る提案をするのもひとつの手です。

3．掲載される「メディアの特性」や「ユーザー心理」を考える

「バナー広告」と一言でいっても、掲載される場所は様々で、条件も変わってきます。

リサイズだけに留まらず、掲載される場所や条件を考えてデザインしましょう。

ちなみに以下の記事ではバナーデザインの基本とコツをまとめています。気になる方はぜひチェックしてください。

バナーデザインのコツと作り方！おすすめツールも紹介

デザインでは、ただ画面に向き合うだけでなく、「このデザインはどこで、どんな人が、どんな状態で見ているのかな？」と想像することが、制作のヒントになります。

ただサイズを合わせるだけでなく、ぜひ「見る人の環境」を想像しながらサイズ展開していきましょう。


お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。