イラストを活用しやすくするイラストシステム事例

Date: 2024.12.16

text: PARTZ編集部

イラストシステムは、一貫した品質を保ちながら、誰でもスムーズにイラストを制作・量産できる仕組みです。開発や導入を行うことで、ブランド全体のデザインや表現に統一感を持たせられる点も魅力のひとつです。多くの企業や組織では、オリジナルイラストを多数展開し、制作コストの改善や表現の幅を広げるために活用しています。

今回は、実際に国内外の企業で利用されているイラストシステムや、デザインシステム内でのイラスト活用例、さらにブランド表現としてイラストを取り入れている事例をご紹介します。無料で利用できるイラストシステムもあるため、自社サイトのブランディング用途にも活用しやすいでしょう

イラストシステム事例

Rakuten Illustration System

楽天のイラストシステムは頭、胴体、下半身、付属品などのパーツが用意されています。
パーツや色を入れ替え、30万通り以上の組み合わせのイラストが作成できます。

Ameba Illustration System

Amebaで活用されているイラストシステムはキャラ・オブジェクト・背景の3種類のモジュールがあります。
キャラは頭部、上半身、下半身に分かれており、組み合わせて多彩なイラストを作成できます。

住信SBIネット銀行

PARTZを運営するヒカリナが開発を担当した、住信SBIネット銀行のイラストシステムです。ブランドや作業効率化の観点からイラストシステムの構築をご提案させていただき、企画、設計、イラスト制作、Figma化まで手がけています。

イラストシステムの制作をご検討中の方へ

ヒカリナが担当した住信SBIネット銀行さまのイラストシステムの実績をご紹介しています。ヒカリナでは御社のニーズに合わせたシステム制作も可能ですので、ぜひご相談ください。

freee designelements Illustration

freeeのイラストシステムは、人体・アイコン・エレメントの3種のイラストモジュールが用意されています。
人体は大きく5つのパーツにわかれており、組み合わせで多彩な表現が可能です。手足等のパーツは骨格を動かしてアレンジできます。

note illustration System 「JOY」

noteは「イラスト作成ツール」と「イラスト素材集」を無料配布しています。
「イラスト作成ツール」は頭・上半身・下半身のパーツを組み合わせてイラストをカスタマイズできます。「イラスト素材集」は素材をそのまま使用できます。

minne

minneのイラストシステムは人物のモジュールが用意されています。
頭・胴体＋奥の腕（手）・手前の腕（手）・足に分かれたパーツを組み合わせてイラストを作成できます。

Zaim

Zaimのイラストシステムはルール・モジュール・エレメントの3つで構成されています。
ルールに沿って、パーツが組み替え可能なモジュールと装飾パーツのエレメントを使い、イラストを作成できます。

イラストモジュール「omiso」

Zaimのイラストシステムを構築したデザイナーのmiyaさんが制作した人物のイラストモジュール。
パーツの切り替え・色や線の変更などができます。

Whocares? by Humation

デザイナーen.さんと君（きみ）さんが提供しているFigmaプラグインのイラストシステム。
 Face・Hair・Top・Outer・Bottom・Sock・Shoes・Otherの要素を組み合わせ、人物イラストを作成できます。

Human Illustration System

デザイナーen.さんが開発したFigmaプラグインのイラストシステム。
 Head・Body・Bottom・colorの要素を組み合わせ、人物イラストを作成できます。

humaaans

Humaaansは、人物イラストをパーツごとに組み合わせて自由に作れるイラストシステムです。髪型や服、ポーズを選んで自分だけのキャラクターを作成でき、Webサイトや資料などに幅広く活用できます。ブラウザ上で編集してPNGをダウンロードする方法と、ライブラリをダウンロードする方法があり、ライブラリはSketch、Figma、InVision Studio、Adobe XD用が入手できます。

Alibaba

Alibaba のイラストシステムは、中小企業向けのサービスをもっと親しみやすくするために作られました。オンボーディングやメインビジュアルなど、シーンに合わせて使えるイラストが揃っていて、世界中のチームが同じトーンで活用できるよう工夫されています。

Duolingo

Duolingoのイラストは「丸みのある四角」「丸」「やわらか三角」の3つの基本形から成り、無駄な角を避けたやさしいかたちが特徴です。教育コンテンツにぴったりな、シンプルで親しみやすいイラストです。

Ant Design

Ant Design のイラストシステムは、企業向けプロダクトでも統一感や親しみやすさを忘れずに伝えられるよう、ブランドイメージと使いやすさを大切に設計されています。感情や直感を届けるビジュアルとして、チームでの再現性を高め生産性アップに貢献しています。

デザインシステムの一部としてイラストを扱っている事例

デジタル庁イラストレーション・アイコン素材

デジタル庁ではデザインシステムの中でイラストレーション・アイコン素材を無料配布しています。
行政のサービスや手続きの全体像を伝えるイメージ図、人物・人物以外のエレメントが用意されています。

SmartHR Design System

SmartHR Design Systemでは、SmartHRのサービス全体で利用するイラストレーションの項目が用意されています。

LINE Design System

LINE Design Systemのなかで「キャラクターグラフィック」として人物イラストに関して定義されています。
用意されているグラフィックを編集し、分解したり組み合わせたりすることで、さまざまなシチュエーションを表現できます。

Speeda Design SystemにおけるIllustration

Speedaでは、プロダクトの一貫したUIデザインを支えるためにデザインシステムが整備されています。過去に公開されていたSPEEDA Design System “FALCON” では、カラー、コンポーネント、テンプレートなどとあわせて、Illustrationもデザインシステム内の要素として扱われていました。
なお、Speedaのデザインシステムは現在もアップデートされており、FALCONは過去バージョンの位置づけとなっています。

IBM

IBMのイラストは、Line style、Flat style、Isometric styleを中心に整理されています。加えて、プロダクトUIの表現と概念的なイラストを組み合わせるHybrid UI styleも定義されており、複雑な製品・サービスの内容を、IBMらしい一貫したビジュアルでわかりやすく伝えるための体系になっています。

ATLASSIAN

Atlassianのデザインシステムのイラストは、用途に応じてイラストが3つの種類に分けられており、ちょっとした補足から全体のストーリー表現まで、シーンに合わせて最適なイラストを選べるようになっています。

ブランド表現としてイラストを運用している事例

kaonavi　Brand Deck

カオナビでは用途やシーンに応じて使えるイラストのアセットがあり、素材をそのまま使えるイラストが用意されています。
表情のない抽象的なイラストのアセットは主にコーポレートサイトなどで使用され、表情が描かれている具体的なイラストのアセットは主にサービスサイトなどで使用されています。

SMBC DESIGN SYSTEM

三井住友銀行ではイラストのアバターシステムが構築されています。
体、目、口など、共通パーツを組み合わせることで、簡単に無数のバリエーションのイラストを作成できます。

SmartBank / B/43（現ワンバンク）のイラストシステム

SmartBankでは、家計管理サービス「B/43」に、アプリ内やマーケティング施策で使うイラストのトーンを揃えるため、イラストシステム設計に取り組んでいました。
※現在は「ワンバンク」へサービス変更となっております。