OpenPeeps|プロフィールアイコンの作成に最適な無料イラスト素材

プロフィールアイコンの作成に最適なシンプソンズ風の人物イラスト素材『OpenPeeps』

カテゴリーイラスト素材
配布サイトOpen Peeps,A hand-drawn illustration library
使用許諾 :商用利用可
配布形式 :Adobe XD、Figma、PNG、Sketch、SVG
※記事作成時の情報となりますので、最新の情報は配布サイトをご確認下さい

このサイト「タダデザ!」を作るにあたり、SNS用のプロフィールアイコンを作る必要があり、海外の無料イラスト素材を調べていると「OpenPeeps」という良い感じのイラスト集を見つけました。

なんとこのイラスト素材集、無料な上に様々な表情や格好があり、各パーツを組み合わせることによって約50万通り以上のキャラクターが作れちゃうとのこと。

これはやるしかない!ということで、この無料イラスト素材集を使って実際にプロフィールアイコンを作ってみることにしました。

「OpenPeeps」の使い方

STEP.1/2|イラスト素材をダウンロード

まずは配布サイトから「OpenPeeps」の無料イラスト素材集をダウンロード。対応しているアプリはAdobe XD、Sketch、Figma、Studio

配布サイトに入ったら「Get the Library」のボタンを押す。

OpenPeepsのサイト

▲「Get the Library」を押す

すると、購入画面が出てきます。無料でダウンロードできるので慌てないように…。

購入画面では「カラー」もしくは「モノクロ」かを選択し、「$」の部分に「0」を入力。その後、「Add to cart」のボタンを押す。

OpenPeepsダウンロード画面

▲「カラー/モノクロ」を選ぶ→「$」の部分に「0」を入力→「Add to cart」を押す

その後、元の画面に戻るので右上に出てくるポップアップに従い、ご自身のメールアドレスを入力。

イラスト素材のダウンロードURLが送られてくるので、クリック。

OpenPeepsのサイト

▲ メールアドレスを入力すると…

ダウンロード画面

▲ 入力したメールにダウンロードURLが送られてくる

URL先には対応アプリそれぞれの拡張子ファイルがあるのでダウンロード。

OpenPeepsのダウンロード画面

▲ ファイルの拡張子を選んでダウンロード

実際にダウンロードしたファイルを開くと、イラストがたくさん揃っているのがわかります。イラストレーターのNoritakeさんのイラストに色を付けた感じの絵柄ですね。

これだけでも十分スゴいですが、イラスト素材の使い方やこのイラストに合う色の説明まであります。

OpenPeepsのイラスト集

▲ 様々な種類のイラストが揃っている

OpenPeepsの使い方

▲ 使い方の説明や…

OpenPeepsの色

▲ 色の説明まである

STEP.2/2|パーツを選択し、変更する

ざっと素材を見渡したので、早速ですがこのイラストのパーツを少しずつ変更して、アイコン画像を作っていこうと思います。

OpenPeepsのイラスト集

▲ 元となるイラスト

ここから色を変えることもできるので、まずはTシャツの色を白にします。

OpenPeepsのイラスト集

▲ Tシャツの色を白に変更

パーツの変更はAdobe XDの場合、「アセット」からドラッグ&ドロップで行えます

▲「アセット」からドラッグ&ドロップ

そして完成したアイコン画像がこちら。

OpenPeepsのイラスト集

▲ このサイトのアイコン画像が遂に完成

ちなみにSketchの場合はパーツ選択後に「Override」を選択することで簡単に変更できます。また、Figmaだと以下のような方法でパーツを変えることができます。

使用許諾

「OpenPeeps」は無料でダウンロードでき、CC0ライセンスで使うことが可能。つまり個人利用も商用利用も使ってOK

The library is in the public domain under the CC0 License. This means you can copy, modify, distribute, remix, burn, and use the work, even for commercial purposes, without asking permission.

※記事作成時の情報となりますので、最新の情報は配布サイトをご確認下さい

色んな表情を作ってみた

このサイトで使っているWordpressテーマ「SANGO」には「吹き出し機能」というものが標準で備わっています。

こういうやつ
記事を書く際に文字ばっかり並んでしまった時や、自分の意見を言いたい時に使える機能。記事の質を上げるためにも使わなきゃ損。

ということで、これからこの「吹き出し機能」を多用するために色々な表情のアイコン画像も作ることにしました

作成手順は以下の通り。

① Adobe XDから「OpenPeeps」の表情のイラストをコピー
② Photoshopに貼り付けて、顔のテンプレートに配置
ツイッターには作成動画も載せています。(ただコピペしてるだけの動画です…)

そして完成したのがこちら。合計で10種類以上作ることができました!

▲ 喜怒哀楽のオールスターが勢揃い

これで

どんな記事でも

感情を豊かに

表現することが

可能になりました!

(個人的には大満足。)

Webアプリ化も!?

ここまででも「神イラスト素材集」であることはおわかりいただけたかと思いますが、このイラスト素材集はまだまだ進化を続けています。

この「OpenPeeps」の制作者であるPabloStanleyさんによると、今新しいWebアプリ「blush」を開発中とのこと。

この動画によると「blush」は「OpenPeeps」のイラストが自由にカスタマイズできるようになるWebアプリになるそう。

まだまだ進化する「OpenPeeps」。気になる方は「blush.design」のサイトにメールアドレスを登録しておけば、ローンチしたタイミングを教えてくれるらしい。

ちなみに私はもう登録しておいた。ローンチしたらすぐに記事を作成する予定なのでお楽しみに〜。

※追記:ローンチされました!
イラスト素材をパーツ別にカスタマイズして無料ダウンロードできる!最強のオンラインデザインツール『Blush』 Blush|イラスト素材をパーツ別にカスタマイズして無料ダウンロードできる最強のオンラインデザインツール

今回使用したフリー素材

カテゴリーイラスト素材
配布サイトOpen Peeps,A hand-drawn illustration library
使用許諾 :商用利用可
配布形式 :Adobe XD、Figma、PNG、Sketch、SVG
※記事作成時の情報となりますので、最新の情報は配布サイトをご確認下さい