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

サイト名：Open Peeps,A hand-drawn illustration library
使用許諾：商用利用可
配布形式：Adobe XD、Figma、PNG、Sketch、SVG
素材数　：100点以上

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

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

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

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

「OpenPeeps」の使い方
1. STEP.1/2｜イラスト素材をダウンロード
2. STEP.2/2｜パーツを選択し、変更する
使用許諾
色んな表情を作ってみた
Webアプリ化も！？

目次へ

「OpenPeeps」の使い方

【商用利用可＆無料】
プロフィールアイコンの作成に最適なシンプソンズ風の人物イラスト素材『Openpeeps』

💁「イラストのパーツを自由自在に変えられる！」

▼詳細はこちらhttps://t.co/yzTUOKPamV #無料デザイン素材 #毎日更新 #イラスト素材 #アイコン #シンプソンズ pic.twitter.com/8fvM4PtJyZ

— 白T（しろてぃー）＠タダデザ！ (@TadaDesign) May 15, 2020

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

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

配布サイト：Open Peeps,A hand-drawn illustration library

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

▲「Get the Library」を押す

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

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

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

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

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

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

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

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

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

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

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

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

▲ 使い方の説明や…

▲ 色の説明まである

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

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

▲ 元となるイラスト

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

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

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

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

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

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

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

② メニューからパーツを指定して変える方法

1. 変えたいパーツを左側にあるメニューから選択
2. 選択したパーツの上で右クリックし、「Swap Instance」を選択
3. お好みのパーツをクリックするとパーツが入れ替わる pic.twitter.com/1fR4loEUKS

— タダで使えるデザインのあれこれ (@TadaDesign) October 24, 2020

使用許諾

「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に貼り付けて、顔のテンプレートに配置

ツイッターには作成動画も載せています。（ただコピペしてるだけの動画です…）

商用利用可の無料で使えるイラスト素材『Openpeeps』を使ってプロフィールアイコンを作成してみました！

💁「もっと効率的なやり方がある気がする…」#プロフィールアイコン #作ってみた pic.twitter.com/pEfWSTgZV6

— 白T（しろてぃー）＠タダデザ！ (@TadaDesign) May 15, 2020

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