デザイン会社が発信!バナー制作情報メディア

Illustratorでバナーを作る手順|アートボードの設定から書き出しまで、制作会社のやり方

公開日 更新日
Illustratorでバナーを作る手順|アートボードの設定から書き出しまで、制作会社のやり方
弊社(バナー制作.jp)では、広告バナーを主にIllustratorで制作しています。文字や図形を多く使い、同じデザインを複数のサイズに展開することが多いためです。

この記事では、Illustratorでバナーを作るときの手順を、ファイルの設定・複数サイズの作り方・書き出しまで、弊社のやり方に沿って紹介します。

目次

バナー制作でIllustratorを使う理由

  • 文字・図形・ロゴがベクターなので、拡大・縮小しても粗くならない
  • 1つのファイルに複数のアートボードを並べ、サイズ違いを一度に作れる
  • 「スクリーン用に書き出し」で、複数のサイズ・形式を一度に書き出せる
写真の切り抜きや細かい補正はPhotoshopのほうが得意です。2つの使い分けはバナー作成はイラレとフォトショどっち?、Photoshopでの作り方はPhotoshopでバナーを作る手順で紹介しています。

ファイルとアートボードの設定

設定バナーのとき
単位ピクセル
カラーモードRGB(Webに出すため)
アートボードの大きさ媒体の推奨サイズ(例:1080×1080px)
ラスタライズ効果72ppi か 高解像度(ぼかし・影を使うとき)
ピクセルグリッドに整合線や図形の端がにじまないように使う
媒体ごとの推奨サイズはバナーサイズ一覧にまとめています。

作る順番

  1. ラフ(配置の下書き)を作り、主役と文字の位置を決める
  2. 写真やロゴを配置する(写真はリンク配置にし、元の画像を差し替えやすくしておく)
  3. 文字を入れる。キャッチコピー→補足→ボタンの順に大きさの差をつける
  4. 色を決める。リンク先のLPのトンマナ・ロゴ・素材をもとにする(弊社のやり方)
  5. いちばん小さい文字が読めるか、実寸で確かめる。弊社では1000×1000pxで作る場合、36pxくらいを目安にしている

複数サイズを作るとき

  • 最初の1サイズ(多くは正方形)で主役・文字・色を決めてから、ほかのアートボードを足す
  • 縦長・横長は縮小するだけでなく、主役と文字の位置を組み直す
  • 共通の部品(ロゴ・ボタン)はシンボルにしておくと、修正が全サイズに反映される
組み直し方はバナーのリサイズのやり方で詳しく紹介しています。

書き出し:スクリーン用に書き出し

Illustratorの「スクリーン用に書き出し」を使うと、複数のアートボードを、1x・2xなどの倍率とJPEG・PNGなどの形式で一度に書き出せます(出典:アセットの収集と一括書き出し|Illustrator ユーザーガイド)。
  • 広告に入稿するバナーは、媒体の規定に合わせた大きさ(1x)で書き出す。弊社ではJPEGで納品することが多い
  • 自社サイトに置くバナーは、2xで書き出すと高解像度の画面でもきれいに見える(Retina対応のバナー画像)
  • 書き出したら容量を確かめ、媒体の上限を超えていないかを見る(PNGとJPGの使い分け)
やっぱりLP制作はプロに任せたい!まず制作事例を見る

Illustratorで作る前の確認

  • 単位がピクセル、カラーモードがRGBになっているか
  • アートボードの大きさが媒体の推奨サイズか
  • 写真をリンク配置にして、差し替えやすくしたか
  • 書き出しの形式・倍率・容量が媒体の規定に合っているか
Illustratorは、複数のサイズを効率よく作り、文字や図形をきれいに保てるのが強みです。設定と書き出しを最初にそろえ、どのサイズでも主役と文字が読めるように組み直してください。
この記事を書いたライター
2009年創業のデザイン会社です。バナー制作.jp(バナー制作実績)では、Instagram・X(旧Twitter)・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上(バナー以外の制作を含む)、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

バナー制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    件名
    会社名

    会社名ふりがな

    担当者

    担当者ふりがな

    電話番号

    メールアドレス

    都道府県
    ご商談希望
    (3~4候補)

    web商談時に
    聞きたい事

    ご返信方法
    電話連絡の場合
    ※複数回答可

    お問い合わせ内容

    バナーサイズ
    (単位:px)

    デザイン参考

    バナーにいれる
    テキスト情報

    イメージ
    フォント
    リンク先URL

    レギュレーション(仕様)

    素材画像URL

    ※GigaFile便でアップロードしたURLを上記に張り付けてください
    ※提供素材が無い場合は有料素材のみで制作

    規約に同意する


    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

     
    バナーアーカイブ