このイラスト、どっちが正解？イラストを使ったデザインのセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
Web／DTP／グラフィックデザイナーの倉又美樹です。
「イラストを入れて作ったバナー、なんだか素人っぽい…」
「イラスト素材を並べてみたけど、プロのデザインと全然違う…」
そんな悩みはありませんか？
イラストを使ったデザインが垢抜けないときは、実は「配置」「色」「視線誘導」という3つのポイントで解決できます。
今回は、同じ素材を使ってもプロっぽく見せるコツを、クイズ形式でお届けします。
イラストを描くこと自体がデザイナーの主な仕事ではありませんが、イラストを使いこなすことによってデザインの魅力がワンランクアップします。
また、Illustratorはその名の通り、絵を自在に調整するのが得意なツールです。
この記事では、イラストを使いこなすためのIllustratorの操作方法にも触れていきます。
それでは早速、3問クイズを出題します。
以下の3つの作例を見て、AとB、あなたはどちらの「イラストの使い方」がデザインと上手に組み合わせられていると感じますか？
1問目「イラストのレイアウトが適切なのはどっち？」（難易度★）
2問目「印刷用のカレンダー、色が適切なのはどっち？」（難易度★★）
3問目「視線の流れが適切なのはどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
みなさまの答えはどちらでしたか？
ではここからは、各クイズの問題について解説していきます。
それぞれの作例のAとBで、何が異なっていたのか？を説明し、デザイン内でイラストを使うためのテクニックについてもご紹介します。
1．イラストは形と構図で意味を伝える
まずは、1問目を振り返ってみましょう。
私が適切だと思うイラストのレイアウトは「A」でした。
今回のバナーは「サマーセール」がテーマ。
夏らしさを演出するために、海辺の風景を表すようなイラストとして、花、洗濯物、そしてビーチチェアといったアイテムを配置しています。
AとBの違いは何でしょうか。
同じ素材を使っていますが、それぞれが配置された場所に注目してみてください。
Aは、空中に干された洗濯物と浜辺に置いてあるチェアという、それぞれのアイテムが「あるべき場所」に配置されています。
一方でBは、チェアが空中（あるいは海の中）を表す青いエリアに置かれており、ちぐはぐな印象を受けます。
「イラスト素材を使って配置してみたけれど、なんだかしっくりこない」と感じる原因の多くは、構図と意味の食い違いにあります。
浜辺のイラストなら、青いエリア＝空中か海、白いエリア＝浜辺を指します。
そのため、チェアは砂浜エリアに配置することで、初めて見た人に「海辺のリゾート」というイメージが明確に伝わるようになるのです。
イラストは「視覚言語」である
デザインを始めたばかりの方は、「イラストはただ絵を描くこと」だと思われるかもしれません。
しかし実際には、イラストは形や構図によって意味を伝える視覚言語です。
視覚言語とは、文字や絵、図形、色、表情、動作といった目に見える要素すべてを使って、情報や感情を伝える手段のことです。
たとえば、丸みを帯びた形は柔らかさや親しみやすさを、尖った形は鋭さや緊張感を表現します。
構図も同様で、中央に配置すれば安定感を、斜めに傾ければ動きやエネルギーを生み出します。
このように、イラストは形や配置ひとつで「言葉なきメッセージ」として機能しているのです。
Adobe Stockのイラストをデザインに馴染ませるコツ
イラスト素材を使っていて、「配置してみたけれど、なんだか浮いて見える……」と悩んだことはありませんか？
そんなときは、Adobe StockとIllustratorの連携機能を使うと、素材選びから色の調整までスムーズに行えます。
なお、Adobe Stockには無料素材と有料素材があり、それぞれダウンロードまでの流れが異なります。
無料素材の場合は、Adobe ID（無料で作成可能）でログインした状態で「無料でライセンス」ボタンをクリックするだけで、すぐにダウンロードが完了します。
一方、Adobe Stock有料会員の場合は、まずプレビュー版をCCライブラリに保存してレイアウトを検討し、決まったらライセンスを取得するという流れで作業をすると素材管理が効率的にできます。
【手順1】素材を探す
まず、Adobe Stockで使いたいイラスト素材を探します。
今回は「夏のセール」についての素材を探したいので、検索窓に「夏 セール」のようにキーワードを入力します。
キーワードを入力する際、単語の間にスペースを入れる（AND検索）と、両方の意味を含む素材を探せます。
素材を探すときは、左側に表示されるフィルターを使うと便利です。
フィルターが表示されていない場合は、「フィルターを表示」ボタンをクリックしてください。
素材の種類で「イラスト」を選んでおくと、イラストが写真素材に埋もれずに探しやすくなります。
思い通りの素材が見つからないときは、「手描き風」「フラット」「水彩」といったスタイルを示す言葉を追加してみてください。
また、Illustratorで色やパーツを編集したい場合は、ファイル形式をベクター（AI・EPS）に絞っておくことが重要です。
フィルター内のサブカテゴリーで「ベクター」を選ぶと、ファイル形式をベクターに絞って探せます。
ベクター形式であれば、ダウンロード後にIllustrator上で色の変更やパーツの移動・削除といった加工が自由にできます。
一方、JPEG・PNG などのラスター形式では、拡大するとぼやけたり、パーツごとの編集ができなかったりするため、後から調整したい場面には向きません。
このあとご紹介する「オブジェクトを再配色」などの機能もベクター形式が前提になるので、素材を探す段階でフィルターをかけておきましょう。
【手順2】素材をダウンロードする
使いたい素材が見つかったら、「ダウンロード」ボタンをクリックします。
これだけでダウンロードが完了し、透かしのない本番データがそのまま手に入ります。
有料素材の場合は、プラン（サブスクリプションまたはクレジット）契約をすれば、ダウンロード可能です。
ただし、無料体験中の場合は、いくつか有料素材を無料でダウンロードできます。
【手順3】「再配色機能」でデザインに統一感を出す
最後に、デザインの背景に合わせて色を調整します。
イラストを選択した状態で、「編集」メニューの「カラーを編集」＞「オブジェクトを再配色」を開くと、イラスト全体の色味をまとめて調整できます。
背景の色に合わせて彩度や明度を揃えるだけで、「素材を貼っただけ」という印象がなくなり、デザインに自然に馴染みます。
「背景に馴染ませたいけど、具体的にどんな色にすればよいかわからない」というときは、「生成再配色」機能が便利です。
イラストを選択した状態で、「編集」メニューの「カラーを編集」＞「生成再配色」を選択し、プロンプト欄に「夏の海辺の爽やかな配色」「ナチュラルで落ち着いたトーン」のようにイメージを言葉で入力します。
「生成」ボタンを押すと、プロンプトにもとづいた4種類のカラーバリエーションが提案されます。
気に入った候補があればそのまま適用し、もう少し調整したい場合はパネル下部の「詳細オプション」からオブジェクトを再配色の画面に切り替えて微調整できます。
生成再配色で大まかな方向性をつかみ、手動で仕上げるという使い分けがオススメです。
【番外編】CCライブラリを使って、ダウンロード前に素材を比較する
CCライブラリを活用すると、検討中の素材を比べて見るのに便利です。
使いたい素材が見つかったら、「ライブラリに保存」をクリックして、CCライブラリに保存します。
すると、IllustratorのCCライブラリに追加されます。
この段階では透かし（ウォーターマーク）が入ったプレビュー版として保存されるため、ベクターデータとしては編集ができません。
透かしとは、素材の上に薄く表示される格子状の線や文字のことで、「この素材はまだ正式に購入されていません」という目印です。
デザインの完成品には使えませんが、レイアウトに仮置きしてサイズ感や雰囲気を確認する用途には十分使えます。
まだ費用はかからないので、候補をいくつか保存しておいて、デザインに仮置きしながら比較するのがオススメです。
「この素材で進めよう」と決めたら、CCライブラリパネルから素材をドラッグしてアートボードに配置し、素材を右クリックして「画像をライセンス認証」を選びます。
ライセンスを取得すると、透かしが外れた本番用のデータを配置できます。
ライセンス認証後、自動的に本番データが置き換わりますが、その状態だと編集はできません。
編集できるようにするには、CCライブラリにある該当の画像を右クリックし、「コピーを配置」を選択しましょう。
そして、ドキュメント上をクリックすると、自由に編集できるオブジェクトが配置できます。
CCライブラリを活用すれば、素材のダウンロード前の段階でデザインに仮置きできます。
デザインに馴染む素材を比較しやすくなるので、ぜひお試しください。
2．成果物の目的に合わせて、色の情報を整理する
続いて、2問目を振り返ります。
この問題は「印刷用のカレンダー、色が適切なのはどっち？」というものでした。
私が選んだ答えは「B」でした。
AとBの違いは、「色の情報を、最終目的に合わせて整理できているかどうか」です。
今回の作例の場合、最終目的は印刷物です。
Aは、画面上ではとても鮮やかですが、印刷では再現しにくい蛍光色のピンクが含まれています。
特色を使えば蛍光色の印刷も可能ですが、通常のCMYK印刷を行うことを想定し、今回は「B」を正解と考えました。
なお、近年ではRGBデータに対応した印刷技術も登場しており、CMYKでは再現が難しかった鮮やかな色域を表現できるサービスもあります。
しかし、一般的な印刷の現場では、CMYK変換で色がくすんでしまうリスクを考慮し、最初からCMYKの色域内で色を設計しておくことが基本です。
イラストを構成する要素には、色も含まれます。
色も一つの情報であるため、見た目のよさだけではなく目的に合わせて色が整理されているかを考えることが重要です。
「オブジェクトを再配色」と「スウォッチ」で色を管理する
ここでは、Illustratorの「オブジェクトを再配色」と「スウォッチ」機能を使って、色を管理する方法についてご紹介します。
【手順1】イラストの構成色を確認する
まず、イラストを全選択し、「編集」メニューの「カラーを編集」＞「オブジェクトを再配色」を開きます。
これで、イラスト内で使われている色が一覧表示されるので、どんな色で構成されているかをひと目で把握できます。
【手順2】CMYKの数値で色を調整する
次に、配色を調整します。
今回のように印刷が最終目的であれば、CMYKの色域内に収まるよう数値を入力するとよいでしょう。
詳細オプションボタンをクリックし、「指定」タブに切り替えることでCMYKを数値で指定しやすくなります。
【手順3】調整した色を「スウォッチ」に登録する
配色が決まったら、そのまま「オブジェクトを再配色」のダイアログ上からスウォッチグループとして登録しましょう。
パネル上部にあるフォルダアイコンをクリックすると、調整後の配色がスウォッチパネルにグループとしてまとめて登録されます。
こうしてスウォッチグループに登録しておくと、同じプロジェクト内の別のオブジェクトにも一貫した配色をすぐに適用できます。
【手順4】パネル内の色を整理して仕上げる
最後に、スウォッチパネルを開き（「ウィンドウ」メニュー＞「スウォッチ」）、使っていない色やデフォルトのスウォッチを削除して、プロジェクトで使う色だけに絞りましょう。
不要なスウォッチを選択し、パネル下部のゴミ箱アイコンをクリックすれば削除できます。
複数まとめて削除したい場合は、Shiftキーを押しながら選択すると効率的です。
こうしてパネル内を整理しておくと、作業中の色選びで迷いがなくなり、意図しない色のブレも防げます。
3．イラストで視線の流れをコントロールする
最後に、3問目を振り返ります。
私が適切だと思うレイアウトは「A」でした。
なぜなら、デザインに対してイラストの配置が適切であり、視線誘導が設計されていると考えたからです。
基本の「左テキスト／右ビジュアル」をあえて崩した理由
ファーストビューの配置を考えるとき、多くのデザイナーが最初に思い浮かべるのが「左にテキスト、右にビジュアル」というレイアウトです。
これは、横書き文化圏では、視線が左上から右へ流れる（いわゆる「Zの法則」や「Fの法則」）ことに基づいた定石であり、テキストを先に読ませたいシーンでは非常に有効です。
しかし、今回はあえてその定石を崩し、「左ビジュアル／右テキスト」で配置したAを正解としました。
その理由は、今回使用しているシャンプーボトルのイラストにあります。
【理由1】ビジュアルの「主張の強さ」が視線の起点になる
今回のシャンプーボトルは、光沢感や透明感のあるリッチなイラストです。
色彩が鮮やかで、面積も大きく、ビジュアルとしての存在感が非常に強いものになっています。
このようにグラフィカルで主張の強いビジュアルがある場合、ユーザーの視線は文字の配置にかかわらず、まずイラストに引きつけられます。
つまり、イラストそのものが視線の「起点」になるのです。
そのため、Bのように右側にイラストを置くと、ユーザーの視線はまず右のイラストに飛び、左に戻ってテキストを読むという逆流が起きてしまいます。
それであれば、その起点を左上（視線が最初に入るエリア）に配置し、そこからテキストへ自然に誘導するほうが、視線の流れがスムーズになります。
【理由2】「見せてから読ませる」順序が商品訴求に合っている
シャンプーのような商品LPでは、まずビジュアルで「この商品、なんだかよさそう」という第一印象をもたせることが重要です。
そのため、テキストによる説明は、その印象の後に補足として機能します。
Aの「イラスト→テキスト」という左から右への流れは、この「感覚で惹きつける→言葉で理解させる」というコミュニケーションの順序と一致しているのです。
【理由3】イラストの「向き」もレイアウトの手がかりになる
もうひとつ注目してほしいのが、シャンプーボトルの形状です。
ボトルのポンプの向きが右側を向いている場合、その延長線上にテキストがあると、イラストからテキストへの自然な視線誘導が生まれます。
逆に、ボトルが右にあってテキストが左にあると、ボトルの向きとテキストの方向が噛み合わず、視線が散りやすくなります。
イラストを配置するときは、被写体やモチーフの「向き」がどちらを指しているかも意識してみてください。
定石は「理由」とセットで使う
「左テキスト／右ビジュアル」は確かに基本のレイアウトですが、それはテキストを最初に読ませたい場合の話です。
今回のように、ビジュアルの訴求力が強く、商品の世界観を先に伝えたいケースでは、あえてビジュアルを左にもってくることで、より効果的なファーストビューになります。
定石を知ったうえで、目の前の素材やデザインの目的に応じて判断する。
それがデザインセンスを一段引き上げるポイントです。
「グラデーションメッシュ」でリアルな立体感を表現する
今回のシャンプーボトルのような、光沢感や透明感のあるリアルなイラストを見ると、「こんなの自分には描けない」と思うかもしれません。
実はこのグラデーション、Illustratorの「グラデーションメッシュ」という機能を使って表現しているのです。
グラデーションメッシュとは、オブジェクトの内部に格子状のポイントを作り、ポイントごとに異なる色を設定できる機能です。
通常のグラデーション（線形や円形）では、色の変化が一方向に限られますが、グラデーションメッシュを使うと複雑で自然な色の変化を表現できます。
使い方はシンプルで、オブジェクトを選択した状態で、「オブジェクト」メニューの「グラデーションメッシュを作成」を選ぶだけです。
行数と列数を入力すると、オブジェクトに格子が表示されます。
「ダイレクト選択ツール」を使い、各ポイントに色を設定していくことで、光が当たっている部分を明るく、影の部分を暗くといった表現ができます。
今回の作例でこの機能を取り上げたのは、立体的なイラストにおける「光の方向」がデザイン全体の整合性に関わるからです。
光源がどこにあるかを意識して描かれたイラストは、背景やテキストとの一体感が生まれ、デザイン全体が引き締まります。
まとめ：イラストとデザインを組み合わせるコツ
今回はイラストとデザインの組み合わせに関するクイズと、イラストをうまく活用するためのIllustratorにおけるテクニックを取り上げました。
最後に今回のノウハウをまとめます。
1．イラストは形と構図で意味を伝える
イラストの形や配置そのものが、読み手へのメッセージになります。
単に空いているスペースに置くのではなく、そのアイテムがもつ役割や背景を考え、意味が正しく伝わるレイアウトになっているかを確認しましょう。
2．成果物の目的に合わせて、色の情報を整理する
イラスト単体で色がきれいなだけでは不十分です。
印刷用なのかweb用なのかといった最終目的に合わせて色を設計しましょう。
不要な色を整理し、デザイン全体とトーンを合わせることで、一体感が生まれます。
3．イラストで視線の流れをコントロールする
イラストは、読み手の視線を動かすガイド役にもなります。
イラストの存在感や向きを計算し、一番伝えたい情報へと自然に視線を誘導できているかを意識しましょう。
お相手はデザイナーの倉又美樹（まるみ）でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：倉又美樹（まるみ）
フリーランスデザイナー。制作者としてだけではなく、デザイナーを育てることをライフワークとしている。女子美術大学デザイン・工芸学科 プロダクトデザイン専攻 非常勤講師
師匠と弟子で交流し、駆け出しデザイナーを一人にしないコミュニティ「まるみデザインファーム」を運営中。
Adobe Community Expert, Adobe Community Leaders Club