サービスサイトやアプリに使われているイラストの分類 【随時更新】

現在2019年12月31日、スッキリした気分で新年を迎えたいので、自分に課した、今年中に終わらせたいタスクを消化しているところです。

私らしく、力技noteで締めたいと思います（笑）

ビジネス職の内定を蹴って、デザイナーに転身した私にとって、この1年は紛れもなく私の人生の転換点になったと思っていますが、まだ終わりが見えていないので、あえて今年の振り返りはしません（笑）
（来年から自分の進んでいく道が見えていたら、本当は振り返りをしたかった・・・）

1月までにこの状況を打破する意気込みです！！！

・・・・・・

サービスサイトやアプリなどにちょこちょこ登場するイラスト。

「なんかいいな〜」と思ったら、スクショを撮って眺めるも、私には到底描けやしない・・・イラスト描ける人って凄いなぁ・・・いいなぁ・・・
そう思ってました。

いや、でも、ちょっと待てよ、、、
私がいい！と思ってスクショフォルダに溜まっていくイラストは、"イラストが描けるかどうか"という要素だけで出来上がっているのか？？？

例えば、無料のイラストサイトからベクター画像をダウンロードしたところで、私のスクショに溜まっているイラストのような「なんかいいな〜」にはならない。

では何がその「なんかいいな〜」を構成しているのか、それらを考えてイラストを"自分なりに"分類してみました。

（このnoteは、私のイラストの苦手を克服するための第一歩のつもり）

・・・・・・

イラストを構成する要素

イラストを構成する要素は大まかに以下かなぁと想定

① 絵そのもの
デフォルメされた絵なのか、デッサンなのか、顔のパーツはどうするのか、表現の幅は広そうです（ここに関しては初学者すぎて何も言えない）
② 配色
色を何色使っているのか、どのような系統の色でまとめているのか
（色彩検定を先日取得できたので、一般大学生よりは詳しくなったはず）
また、影は付けるか、影の付け方はどうするか、色はグラデーションなのか単色なのか、パターンは適用するのかなど
③ 線画
線画をつけるか否か、線画の太さや線の種類など
④ その他追加の要素
背景や装飾など

この中で、①はどうしても練習が必要なので、私も就職するまでに模写から始めて鍛えていきたい所存です。
②③に関しては、イラストが苦手な人でも、他のイラストを眺めて、ダウンロードした商用イラストに活かせるんじゃないかなと思います。

実際に先日制作させていただいたLP（RASHISAキャリア）のイラストは、ダウンロードした素材の配色や構図などを修正して利用しました。

ダウンロードした状態のまま利用したら、配色など被ってしまったり、イラストだけデザインが浮いてしまったり、オリジナリティ性に欠けてしまいます・・・

だから、せめて、イラストが描けなくても、描けるようになる必要性を感じていなくても、イラストの配色や線画について知識があるといいなぁと思い、イラストの収集を始めました・・・！

イラストの分類

私がサービスサイトやアプリを覗いている時に、たまたま出会ったイラストの中で、「なんかいいなぁ〜」と思ったものを分類してみました。

いい！と思った基準も、分類方法も自己流なので、お手柔らかに眺めてください・・・
そして、あなたにとっての「なんかいいなぁ〜」が見つかると嬉しいです。

◼︎ イラストの分類方法

〜線画あり〜
① 線画の色が黒以外
② 線画の色が黒っぽい色 × 焦点がヒト以外
③ 線画の色が黒っぽい色 × 焦点がヒト

〜線画なし〜
④ 線画なし × 焦点がヒト以外
⑤ 線画なし × 焦点がヒト（海外風のイラスト）
⑥ 線画なし × 焦点がヒト（一般的なイラスト）

〜おまけ〜
⑦ 3次元の立体的なイラスト
⑧ 手書き風
⑨ 塗りをオフセットにしてズラすイラスト
⑩ 背景の装飾

〜線画あり〜

① 線画の色が黒以外

folioのように一色のみで構成されるイラスト、
そうだんドットミーやAnyca、トレタnowのように同系色で配色されているイラスト、
freeeのようにカラーを多用しているイラスト、
JTやCinemally、zaimのようにベースとなるカラーに、アクセントカラーや相性に良いカラーをポイント使いしているイラスト。

ここで重要なのが、有彩色でベタ塗りをする箇所は一部分であること。
どの部分を塗りにするのか、何色に塗るのか、難しいところですね・・・

② 線画の色が黒っぽい色（ヒト以外に焦点）

③線画の色が黒っぽい色（ヒトに焦点）

②③について、
線画のウェイト（結構違う）、線画をつける箇所とつけない箇所のメリハリ、使用カラー数、配色の仕方など、眺めていると、各イラストの特徴が見えてきますね〜！

〜線画なし〜

④ 線画なし × 焦点がヒト以外

⑤ 線画なし × 焦点がヒト（海外風のイラスト）

⑥ 線画なし × 焦点がヒト（一般的なイラスト）

〜おまけ〜
（サンプル数が少ないのでおまけ扱い）

⑦ 3次元の立体的なイラスト

⑧ 手書き風

⑨ 塗りをオフセットにしてズラすイラスト

⑩ 背景の装飾

背景に、ベースカラーの透過 or 薄めの色でイラストを散りばめるようなデザイン（どう言語化したら良いだろう）をよく見かけるので、背景のイラストに悩んだ時は、参考にしたいものです。



他にも、
「このサービスのイラストも可愛いよ！おすすめだよ！」
とか、
「イラストの分類間違えてない？こういうのも入れた方がいいよ！」
みたいなのあれば、教えてください！！！


これから人物のイラストが必要だなぁってなったら

・顔のパーツはいる？（海外風のイラストにするかどうか）
・線画はいる？ウェイトはどのくらい？線はどのブラシを使う？
・配色はどうする？一色？同系色？それとも補色を差し込む？
・色は塗る？どの子色を塗る？

などなど考えて、イラストを準備していきたいと思います〜！

もし、年内最後に、そして最後までこのnoteを読んでくれている方がいれば、全力でランチ行きましょう！

来年もよろしくお願いいたします。良いお年を！

東  莉緒