11 ・ ビジュアルと映像
イラスト・画像素材
画面や印刷物の一部として使うイラストや画像を、使う場所に合わせて作り、使い回せる素材として書き出すガイドです。用途と画風を決めるところから、使うすべての場所で見え方を確かめ、記録とともに書き出すまでを扱います。
- 決めること
- 使う場所ごとの条件、画風、構図、切り抜く範囲、使用先ごとの版
- 主な成果
- 素材のファイルと、生成・編集の条件、切り抜く範囲、サイズ、使用先の記録
- 前後のガイド
- 素材を文字やロゴと組み合わせた画像はキービジュアル・広告・SNS画像、印刷物への配置は印刷物・グッズ、継続して登場する人物や生き物はキャラクターのガイドで扱います。
イラスト・画像素材の工程と判断
概要
素材は、画面や印刷物の中に置かれて役割を持ちます。単体で美しい画像でも、置く場所の大きさや背景、隣の文字と合わなければ使えません。このガイドでは用途を最初に決め、案を選んだ後に、使うすべての場所に置いて確かめます。
画像の生成や編集は、AIが画像生成を使って結果を確かめられる環境があり、生成した画像の利用条件が案件に合っている場合に進めます。生成した画像の細部の修正、印刷に使うための線の描き直し、拡大しても崩れない形式への変換が必要な場合は、デザイナーやイラストレーターの作業が必要になることがあります。参考資料を見て方向を考えることと、生成サービスへ画像を入力して生成に使うことは、確かめる範囲が違います。入力する画像は、使ってよい範囲と、サービスの条件、案件の取り決めを確かめてから使います。
向いている場面
- ラベル、Web、SNSなど、複数の場所で同じ挿絵を使うとき
- 写真では表しにくい季節や雰囲気を、絵で添えたいとき
- 生成した画像を修正し、素材として使える状態にしたいとき
このガイドで扱わないこと
- 文字やロゴと組み合わせた完成画像。キービジュアル・広告・SNS画像のガイドで扱います。
- 継続して登場し、性格や形の一貫性を管理する人物や生き物。キャラクターのガイドで扱います。
- 印刷物への配置と入稿。印刷物・グッズのガイドで扱います。
着手時にそろえる材料
- 使う画面や媒体
- 置かれる大きさ（最も小さいものと最も大きいもの）、背景の色、隣に置く文字や写真。
- 描きたいものと構図
- 現実にある物を描く場合は、その形の特徴も確かめます。
- 画風
- ブランド方針と、すでに使っている素材に合わせます。
- サイズと形式
- 背景の透過が必要か、印刷に使うか、印刷に必要な形式と解像度は何か。
- 参考画像
- 人が見て参照するだけの資料と、生成サービスへ入力する画像を分けて用意します。入力する画像は、使ってよい範囲を確かめます。
隣接するガイドとの違い
このガイドの成果は文字を含まない素材で、複数の制作物で使い回します。素材を文字やロゴと組み合わせて媒体ごとの完成した画像にする作業はキービジュアル・広告・SNS画像のガイドの工程03、印刷物に配置して製造する作業は印刷物・グッズのガイドの工程03で行います。継続して登場し、性格や形の一貫性を管理する人物や生き物は、キャラクターのガイドで扱います。
| ガイド | 決めること | 主な成果 | 開く段階 |
|---|---|---|---|
| 08 キービジュアル・広告・SNS画像 | 掲載面で伝える内容と、文字やロゴを含む構図 | 媒体のサイズに合わせて書き出した完成画像 | 掲載先とサイズが決まっているとき |
| 11 イラスト・画像素材 | 素材の画風、構図、切り抜く範囲 | 画面や画像に組み込む素材と、生成・編集の条件 | 部品となる絵や写真が必要なとき。キービジュアルの制作中に素材が必要になったときも開く |
全体の流れと分担
工程は01から05へ進みます。工程03で人が修正の対象にする案を選び、工程04で使うすべての場所に置いて見え方を確かめます。工程03で画風が決まったあとは、別の場所で使う素材（他の季節の挿絵など）を、同じ指示文と画風の要素で別の担当が並行して作れます。工程03でどの案も画風に合わなければ工程02へ、小さな大きさで形が分からなければ工程01へ、工程04で修正しても直らなければ工程03へ戻ります。
工程ごとの分担
| 担い手 | 01用途と画風 | 02指示と参考 | 03案を選ぶ | 04修正と配置 | 05書き出し |
|---|---|---|---|---|---|
| 人 | 判断：使う場所と画風を決める | 判断：指示文と、生成サービスへ入力する画像を確かめる | 判断：修正の対象にする案を選ぶ | 判断：すべての使用先で見え方を確かめる | 判断：書き出した素材を確かめ、置き場所を決める |
| AI | 使用先ごとの条件と画風の候補を整理する | 生成の指示文を作り、形の特徴を書き加える | 少数の案を作る。環境があれば作る | 部分的な修正と使用先ごとの見本を作る。環境があれば行う | 書き出しの条件を整理し、記録を作る |
| デザイナー | なし | なし | なし | 必要な場合、描き直しと、拡大しても崩れない形式への変換を行う | なし |
| 確認の担当 | なし | 必要な場合、入力する画像の権利とサービスの条件を確かめる | なし | なし | なし |
| 別の担当 | なし | なし | 画風の決定後、他の素材を同じ指示文で作る（並行） | なし | なし |
迷ったときの参照先
手元の状況に近いものから、該当する節を開いてください。
015工程のうち1
用途と画風を決める
素材を置く場所とその条件を書き出し、それに合う画風を、見て判断できる要素で決めます。
考え方
用途を決めるときは、使う場所ごとに、置かれる大きさ、背景の色、透過の要否、印刷に使うかどうかを書き出します。そのうえで、二つの条件を分けて確かめます。一つは、最も小さく使う場所で、縮めても何の絵か分かること（識別性）です。もう一つは、最も大きく使う場所や印刷で、必要な解像度があり、拡大したときに線や輪郭が粗くならないこと（品質）です。小さい場所で分かる形でも、大きく使うと粗さや輪郭の崩れが目立つことがあるため、片方を確かめただけで他方を満たしたとは判断しません。印刷に使う場合は、印刷物・グッズのガイドで手に入れた製造先の仕様から、必要な形式と大きさを確かめます。
画風を言葉の印象だけで決めると、生成するたびにずれます。線の太さ、色の数、塗り方、影の有無など、見て判断できる要素で書きます。要素で書いておくと、季節ごとに素材を追加するときも画風をそろえられます。
推奨と理由
最小の使用サイズでは識別性を、最大の使用サイズでは解像度と形の品質を、それぞれ条件にする
理由小さい場所の条件だけで作ると、大きく使ったときに粗さが目立ち、大きい場所の条件だけで作ると、縮めたときに細部がつぶれます。条件を分けて書いておくと、工程03と工程04でどちらを確かめたのかを区別できます。
画風を、見て判断できる要素で書く
理由「やさしい雰囲気」のような言葉は、生成のたびに違う解釈をされます。線の太さや色の数で書くと、複数の素材の画風をそろえられます。
次へ進む目安
- 使う場所ごとの大きさ、背景、透過、印刷の有無が書かれている
- 最小の使用サイズと最大の使用サイズ（印刷を含む）が特定され、それぞれで確かめる条件が書かれている
- 画風が、見て判断できる要素で書かれている
具体例
季節の豆の挿絵
説明のための架空の例です。ブランド方針のガイドの具体例に出てくる焙煎所が、印刷物・グッズのガイドで作るラベルの中央に置く、季節の豆を表す挿絵を作る場面です。同じ挿絵を、Webのお知らせと、キービジュアル・広告・SNS画像のガイドで作る月ごとのSNS投稿でも使います。以降の工程でも同じ例を使います。
- 使う場所
- ラベル（小さな丸、クラフト紙、印刷）、Webのお知らせ（白背景）、月ごとのSNS投稿（写真の上に重ねる）。
- 条件
- 最小はラベルで、その大きさでも豆とその季節の植物の形が分かること。最大はWebのお知らせで、表示する幅いっぱいに広げても線が粗くならないこと。ラベルは印刷に使うため、製造先が求める形式で渡す。背景は透過。
- 画風
- 一色の線画。線は太めで一定、塗りなし、影なし。ブランド方針の「余白を多くとる」に合わせ、描く物は一つか二つにする。
025工程のうち2
生成の指示と参考画像を用意する
描く内容、構図、画風、避けたい表現を指示文にまとめ、参考にする画像と生成サービスへ入力する画像を分けて用意し、その利用条件を確かめます。
考え方
指示文には、描くもの、構図、画風の要素、背景、避けたい表現を書きます。描くものが現実にある物の場合は、形の特徴も書きます。コーヒーの豆や実のように見慣れない人が多い物は、形の特徴を指示しないと、実在しない形で描かれることがあり、詳しい人が見ると誤りに気づきます。
参考画像は、画風や構図を伝える補助として使います。人が見て方向を考えるための参考資料と、生成サービスへ入力して生成に使う画像は、確かめる範囲が違います。入力する画像は、自分たちが権利を持つか使用の許可があり、案件の取り決めで入力に使ってよいものを選びます。生成した画像を商用で使えるか、入力した画像がサービスでどう扱われるかは、使うサービスの条件と案件の取り決めで確かめます。
推奨と理由
実在する物は、形の特徴を言葉で指示に加える
理由画風の指示だけでは細部の形が不正確になりやすく、修正の手間が後の工程に移ります。
指示文を記録として残す
理由季節ごとに素材を追加するときや、別の担当が並行して作るとき、同じ指示文から始めると画風をそろえやすくなります。
次へ進む目安
- 指示文に、描くもの、構図、画風、背景、避けたい表現が書かれている
- 生成サービスへ入力する画像が参考資料と分けて示され、使ってよい範囲と、サービスと案件の条件が確かめられている
具体例
季節の豆の挿絵
- 指示文の要点
- 春の挿絵として、コーヒー豆三粒と桜の枝。一色の太い線画、塗りなし、背景なし、正方形の中央に配置。豆は楕円で、中央に溝が一本ある。
- 入力した画像
- 店主が以前に描いた手描きのメモ（店の持ち物）を、線の太さの参考として生成サービスへ入力した。入力した画像の扱いを、サービスの条件で確かめた。
- 利用条件
- 使う生成サービスの条件で、生成した画像を商品のラベルに使えることを店主が確かめ、確かめた日を記録した。
035工程のうち3
画像の案を作って選ぶ
少数の案を作り、最も小さく使う大きさで比べて、修正に進める画風と構図を選びます。
考え方
案は少数に絞ります。多数の案を並べると、違いの小さい案の比較に時間を使い、判断の基準がぶれます。指示文の一部を変えて数案を作り、変えた部分が結果にどう表れたかを見ます。
選ぶ前に、案を最も小さく使うサイズに縮めて見ます。大きく見たときの細部の美しさより、縮めたときに描いたものが分かるかを優先します。形の誤りは、修正で直せる程度か、作り直しが必要かを分けて判断します。この工程で確かめるのは最小の使用サイズでの識別性です。最大の使用サイズでの解像度と形の品質は、修正したあと工程04で確かめます。
判断の材料と合否
- 判断すること
- どの案を修正の対象にするか
- 材料
- 生成した案、最も小さく使う大きさに縮めた状態、工程01の画風の要素、描く物の形の特徴
- 合格の条件
- 縮めても描いたものが分かり、画風の要素に合い、形の誤りが修正で直せる範囲に収まる
- 満たさないとき
- どの案も画風に合わなければ工程02の指示文を直します。どの案も小さな大きさで形が分からなければ、工程01の描く物の数や構図の条件を見直します。
推奨と理由
指示文の変えた部分と、結果の違いを並べて記録する
理由どの指示が結果に影響したかが分かると、次の素材を作るときに指示を調整できます。
縮小した状態で選ぶ
理由使う場面で何の絵か分からない素材は、細部が美しくても役割を果たしません。
次へ進む目安
- 選んだ案が、最小の使用サイズに縮めても何の絵か分かる
- 画風の要素に合っている
- 形の誤りが修正で直せる範囲にある
具体例
季節の豆の挿絵
- 案
- 線の太さと構図を変えた四案を生成した。
- 縮小の確認
- ラベルの大きさに縮めると、桜の花びらを細かく描いた案は線がつぶれた。枝を一本だけ描いた案は形が残った。
- 形の誤り
- 枝一本の案では、豆の溝が二本描かれていた。修正で直せる範囲と判断した。
- 人の判断
- 店主が枝一本の案を選んだ。夏以降の挿絵は、同じ指示文と画風の要素で、別の担当が並行して作ることにした。
045工程のうち4
修正し、使う場所で確かめる
選んだ案の形や線、余白を修正し、使うすべての場所に置いて、最小の使用サイズでの識別性と、最大の使用サイズでの品質を確かめます。
考え方
修正では、形の誤り、輪郭の不自然さ、線の太さのむら、余白の取り方を直します。部分的な修正を繰り返しても直らない形は、描き直したほうが早い場合があります。印刷で線を滑らかに出す必要があるときや、大きく使うと線の粗さが目立つときは、拡大しても線が崩れない形式にする作業が必要になることがあり、その作業はデザイナーやイラストレーターに依頼します。
修正した素材は、使う場所に置いて確かめます。ラベルは試し刷りに、Webは実際の画面に、SNSは写真の上に置きます。最も大きく使う場所では、表示や印刷の大きさに広げて、解像度が足りているか、線や輪郭が粗くなっていないかも確かめます。単体で問題がなくても、背景の色によって線が見えなくなる、隣の文字と重なるといった問題が配置先で見つかります。使用先によって必要な場合は、線の色などを変えた版を作ります。
判断の材料と合否
- 判断すること
- この素材を、使うすべての場所で使えるか
- 材料
- 修正した素材を各使用先に置いた見本、最大の使用サイズで表示または試し刷りした状態、工程01の条件
- 合格の条件
- すべての使用先で形が分かり、最大の使用サイズで解像度と線の品質を満たし、背景の上で線が見え、隣の文字や写真と重ならない
- 満たさないとき
- 線の色で解決できる場合は版を作ります。解像度や線の品質が足りなければ、拡大しても崩れない形式への描き直しをデザイナーに依頼します。配置先の構図に合わず修正で直らなければ、工程03へ戻って別の案を選びます。
推奨と理由
生成で直らない形は、描き直しを選ぶ
理由生成を繰り返すと、直した箇所とは別の場所に新しい誤りが出ることがあります。直す箇所が決まっているなら、手で直したほうが結果を管理できます。
すべての使用先で確かめてから書き出す
理由一つの使用先だけで確かめると、別の使用先での問題に、配置や入稿の後で気づくことになります。
次へ進む目安
- すべての使用先の見本で、形が分かる
- 最大の使用サイズで、解像度と線の品質を満たしている
- 背景の上で線が見え、隣の要素と重ならない
- 使用先ごとに必要な版が決まっている
具体例
季節の豆の挿絵
- 修正
- 豆の溝を一本に直し、線の太さのむらを整えた。
- 印刷用
- ラベルの印刷で線を滑らかに出すため、デザイナーが線をなぞり、拡大しても崩れない形式で描き直した。
- 大きさの確認
- Webのお知らせの幅いっぱいに広げると、生成した画像のままでは線の縁が粗く見えた。デザイナーが描き直した線のデータから書き出したものでは、粗さがなかった。
- 配置の確認
- SNSの写真の上に置くと、黒い線が豆の写真の暗い部分で見えなくなった。SNS用だけ白い線の版を作ることにした。ラベルとWebは黒い線で問題がなかった。
055工程のうち5
素材を書き出して記録する
使用先ごとの形式とサイズで素材を書き出し、次に使う人が同じ条件で使える記録を残します。
考え方
書き出しでは、使用先ごとに必要な形式、サイズ、背景の透過を確かめます。透過のある画像は、白い背景だけで見ると、縁に残った色や半透明の部分に気づきません。暗い背景にも置いて確かめます。
記録には、生成と編集の条件（使ったサービス、指示文、修正した箇所と担当）、切り抜く範囲、サイズ、使用先、版の違い、利用条件を確かめた日を書きます。記録があれば、次の季節の素材を同じ画風で作るときや、別の担当が素材を使うときに、条件を一から確かめ直さずに済みます。
推奨と理由
透過の素材は、明るい背景と暗い背景の両方で確かめる
理由縁に残った色は、背景によって見えたり見えなかったりします。
素材と記録を同じ場所に置く
理由記録が別の場所にあると、素材だけが使い回され、利用条件や版の違いが伝わりません。
次へ進む目安
- 使用先ごとの形式とサイズで書き出されている
- 透過の素材を、明暗両方の背景で確かめた
- 生成と編集の条件、使用先、版、利用条件が記録され、素材と同じ場所にある
具体例
季節の豆の挿絵
- 書き出し
- ラベル用に描き直したデータ、Web用の透過画像、SNS用の白い線の透過画像。Web用とSNS用は、描き直した線のデータから書き出した。
- 確認
- 白い線の版を暗い背景に置き、縁に灰色が残っていないことを確かめた。
- 記録
- 指示文、修正した箇所、描き直したデザイナー、使用先、版の違い、入力した画像と生成サービスの利用条件を確かめた日を、素材と同じフォルダに置いた。
- 次へ
- ラベル用のデータを印刷物・グッズのガイドの工程03へ、SNS用の版をキービジュアル・広告・SNS画像のガイドの工程03へ渡す。
成果を渡す先
書き出した素材は、使用先ごとの版と記録を添えて、素材を組み込むガイドへ渡します。印刷用のデータと画面用の版は形式が違うため、どの版をどこへ渡したかも記録に残します。
| 渡す先 | 渡すもの | 渡す時点 |
|---|---|---|
| キービジュアル・広告・SNS画像 工程03 | 使用先に合う版と、素材の記録 | 素材を文字やロゴと組み合わせて告知画像にするとき |
| 印刷物・グッズ 工程03 | 印刷用の形式で書き出したデータと、描き直しの担当 | 素材を印刷物の入稿データに配置するとき |
| キャラクター | 画風の要素と、作った素材 | 描く対象が、継続して登場し性格や形の一貫性を管理する人物や生き物になるとき |
このガイドへ戻るとき
画風の要素を決める基準がブランド方針にないときは、ブランド方針のガイドの工程04へ戻り、工程01で検討した画風の候補を渡します。キービジュアル・広告・SNS画像や印刷物・グッズのガイドで、配置先で素材が合わないと分かったときは、このガイドの工程04へ戻り、版を作るか修正してから工程05で書き出し直します。