フラットデザインとフラットなイラストの違い：特徴と使いどころ

スクリーンショットには、数字の詰まったダッシュボードがすでに写っています。その横のメインビジュアルには、つやのある光、描き込まれた顔、青からピンクへとグラデーションしていく空。画面は静かなのに、絵だけがにぎやか。こんな組み合わせ、見覚えはありませんか？

UIとぶつかるので、こういう絵をLPから外したことがあります。プロンプトを工夫しても、結果は同じでした。合っていなかったのは、テイストそのものです。

フラットなイラストとは、シンプルな形とベタ塗りの色で描く絵のこと。陰影はわずかで、グラデーションはほとんど使わず、見せかけの奥行きもつけません。名前の似た「フラットデザイン」は画面の作り方の話ですが、こちらはボタンや枠ではなく、そこに置く絵そのものを指します。実際のUIの隣に置く絵が必要なときは、フラットイラスト生成を開き、「スタイル」を「フラット」にして、モチーフだけを書きます。

フラットなイラストの特徴

まずは塗りから。ひとつの形に、ひとつの色。シャツは紺、マグカップはテラコッタ。背景は白かクリーム色の無地にして、隣に置く見出しの居場所を空けておきます。

人物には顔を描きません。頭は円、胴体はブロック。それでも「ノートPCに向かう人」だとちゃんと伝わります。むしろ、それが狙いです。顔を細かく描くと、スクリーンショットに向かうはずの視線を絵が奪ってしまいます。

色数は少なめに。製品ですでに使っている2〜3色に、ニュートラルな色をひとつ。脈絡のない色が1色混ざるだけで、絵が取ってつけたように見えます。同じことはイラストのテイストの選び方でも書きました。絵は製品を引き立てる脇役で、主役と張り合うものではありません。

輪郭ははっきりと。形を指さして、何色かを言えるくらいがちょうどいい。頬に光が回り込んでいたり、影の代わりにグラデーションが入っていたりしたら、それはもうフラットとは呼べません。立体的に描き込んだレンダリングの絵になり、すっきりしたUIとぶつかってしまいます。

フラットなイラストとフラットデザインは別もの

この2つはよく一緒に検索されますが、役割がまったく違います。

フラットデザインは、画面の作り方のこと。MicrosoftのMetroというデザイン言語が2010年にWindows Phone 7で登場し、2012年10月発売のWindows 8にも採用されてから広まりました。2013年ごろにはAppleのホームページもその流れに続いています。

Nielsen Norman GroupのフラットなUIとクリックできる要素についての記事は、今でもよくチームで共有しています。どの操作部品も平らな四角形だと、どこを押せるのかがわからなくなる、という警告です。その後の「フラット2.0」と呼ばれる流れでは、Material Designのエレベーションのように、ボタンやシートに小さな影を戻して画面を読みやすく保っています。

絵のほうは、そうした画面の上でも、ボタンよりさらにシンプルなままでかまいません。ボタンには押せるように見せるための影が必要でも、メインビジュアルの絵には必要ありません。絵にも同じ影をつけると、2つのレイヤーが同時に主張しはじめます。

フラットデザインは画面をつくるもの。フラットなイラストは、その画面に置く絵です。

フラットなイラストと線画・3D・絵本風の違い

Illustroのスタイルは4種類。製品のレイアウトに収まり、SVGでも書き出したいときに選ぶのがフラットです。残りの3つは「もっと仕上げたフラット」ではなく、そもそも別の種類の絵です。

線画もベクターなので「色を変更」は使えますが、見た目はベタ塗りの形ではなく、インクの線です。場面より図解がほしいレイアウトのときは、線画イラスト生成に切り替えます。

3Dイラストは、マットな質感と丸いフォルムで、撮影スタジオで撮った小物のようなライティングになります。SVGでは書き出せず、Blenderのファイルでもありません。遊び心のある製品の横でフラットだと物足りないと感じたら、無理にフラットでこなそうとする前にBlenderなしでできる3Dマスコットの作り方を読んでみてください。

絵本風は、あえて温かみを出したスタイルです。子ども向けのお話にはぴったりでも、設定画面には合いません。絵本風イラストは物語の中で使いましょう。こちらもピクセル画像なので、フラットのようにパスごとに色を塗り替えることはできません。

フラットなイラストが活きる場所

空状態の画面、オンボーディング、見出しの下に並ぶ機能紹介、サイトとトーンをそろえたいスライド。どれも説明を担うのは言葉とスクリーンショットです。絵の役目は、人、ノートPC、観葉植物、空っぽの受信トレイといったモチーフで、その場面をひと目でわかるようにすることだけです。

横長のメインビジュアルには余白が必要です。隅々まで描き込んだ絵では、見出しの置き場所がなくなります。モチーフはひとつ、背景は無地で指定して、デスクトップ版を決める前に、スマホでどう切り取られるかを確かめましょう。

フロー全体に同じ人物を登場させたいなら、話は別です。生成し直しても、同じ人物にはなりません。そういうときはイラストセットを使います。

テーマとキャラクターの説明を書き、「シーン構成を作成」で場面を決めたら（ここまでは無料）、「キャラクターを固定」を押します。キャラクターシートは3クレジットで、どのシーンよりも先に確認して承認します。イラストセットはIllustro MAXで生成されるため、シーンも1枚ごとに3クレジットかかります。4シーンのセットなら15クレジットになります。

期待できるのは「前よりそろう」ところまで。ピクセル単位でまったく同じになるわけではありません。

このテイストを選ばないとき

表情そのものが笑いどころになるとき。「フラット」の人物には目も口も描かれません。表情でアイデアを伝えたいなら、選ぶスタイルが違います。

絵本をつくるとき。大事なのはやわらかさで、そもそもSVGにはなりません。

マスコットを、テーブルに置いたおもちゃのように見せたいとき。それは3Dイラストの出番で、書き出しはPNGかJPEGです。

ロゴをつくるとき。小さなフラットの形でも読みやすくはできますが、Illustroはロゴ作成ツールではありません。千個のグッズに刷るマークは、やはりデザイナーの仕事です。

プロンプトでは再現しきれない独自のイラストのルールを、ブランドがすでに持っているとき。フラットなら今週中に出せるたたき台は作れますが、キャンペーンのメインビジュアルのアートディレクションに代わるものではありません。

あとから色を変えられるフラットなイラストのプロンプト

実際に貼りつけて、そこから手直ししているプロンプトがこちらです。

「ノートPCに向かう人、横向き、シンプルな幾何学の形、紺のシャツ、テラコッタ色のマグカップ、クリーム色の背景、顔のパーツなし、グラデーションなし」

書くのはモチーフ、ポーズ、そして2〜3色の塗り。「シネマティック」「8K」「ドラマチックな照明」は入れないこと。どれも、避けたいはずの奥行きを呼び込む言葉です。

レンズを思わせるプロンプトでは、フラットになりません。「日の差し込むオフィスにいる女性、シネマティック、描き込んだ顔、やわらかいボケ」は、写真を頼んでいるのと同じです。フラットにしたいなら形と塗りを指定し、顔とグラデーションは描かないよう伝えます。

最初の結果がまだレンダリングっぽく見えるなら、いらないシーンにMAXのクレジットを使う前に、Illustro Lightで生成し直しましょう。あとから色を変えられるSVGファイルの作り方も考え方は同じで、頼むのは写真ではなくグラフィックです。

ここからは操作です。

1. 「スタイル」を「フラット」にします。
2. ポーズがまだ手探りのうちはIllustro Light（1クレジット）で。出したいシーンが固まったらIllustro MAX（2クレジット）に切り替えます。エディターはLightで開くので、「生成」を押す前にモードを確認しましょう。
3. 「サイズ」を選びます。正方形（1024×1024）、縦長（1024×1536）、横長（1536×1024）の3つです。UIの挿絵なら正方形、メインビジュアルなら横長。ピクセル数を自由に入力する欄はありません。
4. ポーズはいいのに黄色だけが違う、というときは「色を変更」を開きます。色の変更は無料です。同じ色をまとめて置き換えることも、ひとつの形をクリックしてその色だけ変えることもできます。
5. 小物を足したい、笑顔にしたいときは「AIで編集」（3クレジット）を使います。「色を変更」では新しいものは描けません。
6. PNG・JPEGのダウンロードは無料です。「SVGで書き出し」は、自分で生成したイラストなら1クレジット。そのファイルはIllustroのFigmaプラグインでFigmaに配置するか、書き出してから自分でキャンバスにドロップします。

ポーズの参考になる写真がすでにあるなら、写真をイラスト化するのも手です。このツールの出力はフラットのみで、3クレジット。あとはほかのフラットなファイルと同じように色を変えられます。

よくある質問

イラストでいう「フラット」とは、どういう意味ですか？

奥行きを演出しない、という意味です。形はひとつの平面に並び、色はベタ塗りで、陰影はごくわずかか、まったくありません。製品のレイアウトの中では、この見た目のおかげで、イラストがボタンや文字、スクリーンショットと張り合わずにすみます。頬に光源を感じたら、その絵はもうフラットではありません。

フラットなイラストはどんな用途に使われますか？

Webサイトのセクション、アプリのオンボーディング、空状態の画面、スライドなど、シンプルな場面をUIになじませたいところで使われます。主役はスクリーンショットで、絵は人や物、空っぽの受信トレイを見せるだけでいい、というときに選ばれるスタイルです。拡大や縮小が必要ならSVGで書き出し、製品の色を借りられるよう、色数は少なめにしておきましょう。

フラットなイラストとフラットデザインは同じですか？

いいえ。フラットデザインはUIのスタイルです。2010年にWindows Phone 7でMetroが登場し、2012年のWindows 8でパソコンにも広がって、製品のUIがそれに続きました。

フラットなイラストは、そのUIの中に置く絵のこと。ボタンは押せるように見せるため小さな影を残すことがありますが、絵はボタンより平らなままでかまいません。

フラットなイラストはベクターファイルですか？

Illustroでは、フラットは色を変えられるSVGになります。そのSVGのダウンロードは1クレジットで、PNGとJPEGは無料です。

「色を変更」では、塗りの色を替えたり形を削除したりはできますが、ペンツールのように新しく描き足すことはできません。絵本風と3Dイラストはピクセル画像のままなので、この話は当てはまりません。

フラットな絵は、ほかに何と呼ばれますか？

フラットイラスト、フラットデザインのイラスト、フラットなベクターイラストとも呼ばれます。この記事では、陰影がほとんどないベタ塗りの形を「フラット」と呼んでいます。輪郭線が中心なら、それはフラットではなく線画。粘土のおもちゃのように見えるなら3Dイラストです。

フラットなイラストは商用利用できますか？

はい、クレジットを購入すれば商用利用できます。どのクレジットを購入しても、規約の範囲で商用利用の権利がつきます。新規登録時の無料クレジットで作ったものは、最初の購入までは個人での利用に限られます。購入すれば、それまでに作ったものも商用利用できます。また、作ったファイルをほかのAIシステムの学習や評価に使うことはできません。

買い切りのクレジットにつく商用利用の権利は、Illustroの料金プランのページに載っています。独自のブランドのルールが必要なキャンペーンでは、たたき台のあとで、イラストレーターに依頼したほうがよい場合もあります。