現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

ウェブデザイナーのすぴかあやかです。

今回、わたしは「デザインのリサイズ」についてのクイズを出題します。

早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらのデザインの「リサイズ」がよいと感じますか？

1問目「拡大してリサイズ、適切なのはどっち？」（難易度★）

2問目「縮小してリサイズ、適切なのはどっち？」（難易度★★）

3問目「Instagram用の広告バナーにふさわしいのはどっち？」（難易度★★★）

いかがでしたか？

わたしが考える答えは……

1問目の答え：A

2問目の答え：B

3問目の答え：A

以上がわたしなりの解答です。

あなたがよいと感じた「デザインのリサイズ」は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation

1．サイズに合ったジャンプ率を意識する

まずは1問目の振り返りです。

この問題は、A5サイズのチラシをA1サイズのポスターに拡大する際の、適切なリサイズ方法についてのクイズでした。

そして、作例AとBの違いは、「比率やレイアウトを変更して拡大する」、もしくは「元のデザインをそのまま拡大する」というものでした。

わたしが選んだ答えは、「A」の「比率やレイアウトを変更して拡大する」でした。

それでは、その理由を見ていきましょう。

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

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

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

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

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

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

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

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

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

【ポイント1】どこでデザインを目にするのかを考えよう

A5のチラシの場合、以下のような状況で手に取ることが多いと考えられます。

• 人から手渡される
• 他の展覧会で配布される

A5サイズは小さく、すぐに全体を見渡せるサイズなので、元のデザインでは「なにをやるのか（いけばな展）」「いつ・どこでやるのか（日時・場所）」がパッと見てわかる文字のサイズにしています。

一方でA1ポスターの場合、以下のような状況で目にすることが多いと考えられます。

• いけばな教室の壁に掲示されている
• 会場や駅などに掲示されている

チラシと決定的に違うのは、まず「ポスターの前で足を止めてもらう」必要があるという点です。

人は興味がないものは目に入らず素通りしてしまいます。

そこで正解のAでは、目を惹く写真を大きく配置して「なんだかきれい」「これは何だろう」と興味をもってポスターに近づいてもらい、近づいてから日時や場所などの情報を受け取る、という2段階の構成にリサイズしています。

もちろん、チラシやポスターで、必ずしもこういった状況になるとは限りません。

しかし、「どこでデザインを目にするのかな」「見る人はどんな状況かな」など「見られるシーン」を想像するのはデザイン制作でとても大切なことです。

【ポイント2】デザインから目までの距離を考えよう

チラシとポスターでは「手に取って見る」「壁に掲示されたものを見る」という違いがありました。

これは「デザインから目までの距離が違う」とも言えます。

手に取るデザイン（チラシ、本、名刺など）

目までの距離はおよそ30cmほど。

この至近距離ですべての情報がスムーズに読めるように設計します。

壁に掲示するデザイン（ポスターなど）

大きさによって数メートル先からでも目に留まる必要があります。

気になって近づいて見る場合でも、およそ50cm〜1mほどの距離があります。

このように、サイズによってデザインの考え方は大きく異なります。

どこでデザインを目にするのかという「場所・状況」だけでなく、「目までの距離」を意識することで、そのサイズに最適な文字の大きさやジャンプ率、メリハリを考える手掛かりになります。

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

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

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

【手順1】アートボードツールに切り替える

ツールバーから「アートボードツール」を選択するか、ショートカットキーの「Shift＋O」でアートボードツールに切り替えます。

【手順2】オブジェクトと一緒にアートボードを複製する

元となるデザインのアートボードをクリックして選択します。

アートボードの四辺に「＋」マークが表示されるので、「Option」キー（Windowsは「Alt」キー）を押しながら、複製したい方向の「＋」マークをクリックします。

これで、元のオブジェクトを保持したまま、同じアートボードが丸ごと複製されます。

【手順3】新しいアートボードのサイズを変更する

複製された新しいアートボードを選択した状態で、コントロールパネルやプロパティパネルにある「幅（W）」と「高さ（H）」の数値を、新しく作りたいポスターのサイズ（A1など）に変更します。

このとき、コントロールパネルの「オブジェクトと一緒に拡大縮小」にチェックを入れておくと、アートボードのサイズと一緒にオブジェクトも拡大縮小されます。

各パーツのサイズやレイアウトは調整する前提ですが、まずはざっくりアートボードとサイズ感を合わせたいときに便利です。

ひとつのaiファイルに複数アートボードを作ってデザインを作成すると、素材の再利用や全体の調整がしやすくオススメです。

ぜひお試しください。

2．小さなサイズへの縮小は、情報の「取捨選択」で視認性を保つ

続いて、2問目の振り返りです。

この問題は、大きなサイズのバナーを小さなサイズに展開する際の、情報の優先順位や取捨選択についてのクイズでした。

そして、作例AとBの違いは、「要素をそのまま縮小する」、もしくは「内容を適宜削って縮小する」というものでした。

わたしが選んだ答えは、「B」の「内容を適宜削って縮小する」でした。

それでは、理由を見ていきましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【手順1】ピクセルプレビューをオンにする

「表示」メニューの「ピクセルプレビュー」をクリックすると、ベクター表示からラスター表示に切り替わります。

【手順2】ラスター化された状態を確認する

画面の表示がピクセル表示に切り替わったら、文字が読めるのか、線や小さなオブジェクトが潰れていないかを確認しましょう。

【注意点】確認が終わったらプレビューをオフに戻す

一点注意したいのは、これはIllustratorが擬似的にラスター表示しているため、このままデザイン作業を続けると動作が重くなることがある点です。

そのため、ある程度までデザインができたら「ピクセルプレビュー」をオンにして確認、またオフに戻して作業に戻る、という流れを繰り返しながら作業を進めるのがオススメです。

3．掲載場所に合わせてバナーをデザインする

最後に、3問目の振り返りです。

3問目も、バナー広告のリサイズの問題でした。

2問目と同じバナー広告？と思われるかもしれませんが、今回は「単なるリサイズではなく、掲載場所が違う」というのがポイントです。

作例のAとBの違いは、アドセンス用のバナー広告をInstagram広告に調整する際、「写真を強調してリサイズする」、もしくは「要素をそのまま拡大する」というものでした。

そして、わたしが選んだ答えは、「A」の「写真を強調してリサイズする」でした。

それでは、理由を見ていきましょう。

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

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

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

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

【ポイント1】掲載場所の違い

アドセンス広告は、どのウェブサイトに掲載されるか、ということは分かりません。

とても情報量が多いウェブページかもしれないし、シンプルなウェブページかもしれません。

その中でユーザーの興味を引くには、必然的に目立つビジュアル、配色、文字を使うことになります。

一方Instagram広告は、Instagramのフィードに掲載されるので、どのような状態で表示されているのかが最初から分かっています。

そのため、あらかじめタイムラインの見た目に合わせたデザインを設計できます。

【ポイント2】ユーザーの状態の違い

アドセンス広告は、ユーザーがどんな状態で見ているのかわかりません。

「パソコンで見ている？」「スマホで見ている？」「仕事中にニュースを見ている？」「プライベートでブログを見ている？」など、様々なシチュエーションが想像できます。

一方Instagram広告は、掲載場所がSNS上のため、基本的にはプライベートな時間に、友人やフォローしているアカウントの写真や動画を楽しんでいる、と想像できます。

写真や動画ばかりのフィードに流れてくる広告であれば、同じように写真を主役にした方が目に留まりやすくなります。

【ポイント3】掲載できるものの違い

アドセンス広告はバナー画像1枚の中に伝えたいすべての情報を入れる必要があります。

一方Instagram広告は、フィードの投稿と同じフォーマットで表示されるので、画像や動画のほかに、ユーザーアイコンや投稿の本文も入れることができます。

「詳しくはこちら」といったボタンも表示されるため、画像の中に無理に情報を収めなくても、仕組みとして補足できるのです。

アドセンス広告とInstagram広告の違いについて見てきました。

表にまとめると、このような違いがあります。

そして、今回のクイズをあらためて振り返ってみると、Instagram用のバナーへの変換が題材でした。

ここまで解説してきた違いをふまえると、写真が主役のInstagramのタイムラインでは、写真を主役にしてパッと世界観を伝えられているAのデザインの方が、より自然にユーザーの目に留まることが分かります。

バナー画像は伝えたい情報が多く、ごちゃごちゃしたデザインになりがちです。

広告が表示される「場所」や「ユーザーの気持ち」といった状況を踏まえて、本当に必要な情報を考えてデザインしていきましょう。

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

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

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

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

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

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

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

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

まとめ：デザインのリサイズのセンスを磨くポイント

今回は「デザインのリサイズ」に関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/desig２n/quiz-challenge

https://www.adobe.com/jp/cc-shared/fragments/roc/seo/product-blade/illustrator