【爆速UI設計術】モダンなwebデザイン素材集

# **【概要】**

個人アプリを作成する上で、イラストや写真が欲しいと思ったことはありませんか？
今回は、アプリで使用できる商用フリーの素材を紹介していきたいと思います！

# **【前提・注意】**

使用には、各サイトのライセンスを熟読してから使用するようお願いいたします。

https://www.lct.jp/column/9361/

基本的には、下記の点に注意をお願いいたします。

・加工禁止の素材を加工しない
・商用範囲外を超えた使用をしない(商用のTシャツデザインに適用など)
・ライセンス表記が必要なものに関しては必ず記述する
・その他、適切な使用方法を心がける

# **【内容】**

カテゴリー別にご紹介します。具体的には

**・イラスト系**
**・アイコン系**
**・ビジネス系**
**・漫画系**
**・Youtube系**
**・かわいい系**
**・その他**

になります。注釈と、サイトの特徴を説明していきたいと思います。

## **【イラスト系】**

### **【イラスト屋】**

https://www.irasutoya.com/

| 使用数 | クレジット記載 |
| ----------- | ----------- |
| 1つの制作物につき20点       | 不要       |


## 特徴

### **最新のトレンドが取り入れられている。**

2024年3月時点では、AI関連などのイラストは他サイトであまり取り扱ってないことが多いです。(もしその他ございましたらこっそり教えてください。)
下記のようにAI関連の画像を使用したい人にとっておすすめです。


![スクリーンショット 2024-03-15 13.01.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/a4eefa5b-1cad-d9b9-21cc-1a7230b089bd.png)

### **幅広いジャンルがある。**

人・行事や概念など幅広いジャンルで素材があります。

![スクリーンショット 2024-03-15 15.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/057a2183-a6b4-0744-051e-ce35297c8c25.png)

### **AI生成機能があり**

下記のような操作で簡単にイラストを生成できます。

![スクリーンショット 2024-03-15 12.51.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/dc21ecc2-da44-0b88-55b8-f41019697c9a.png)

![スクリーンショット 2024-03-15 12.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/d2b36973-f18e-1c15-b68f-435ecd25647a.png)

### 最終的にはこんな感じになります！

![スクリーンショット 2024-03-15 12.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/41efa1ae-d12f-a5fc-5cf2-f44321b2b16d.png)

## **【shigureni free illust】**

https://www.shigureni.com/

### 特徴
**ゆるふわ系デザインが多め**

・太線
・原色寄りの色使い

のため、背景がごちゃついてもイラストが負けないです。

![スクリーンショット 2024-03-15 16.48.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/0a6fe870-e902-a70f-96ab-514ca8ee708e.png)

## **【ちょうどいいイラスト】**

https://tyoudoii-illust.com/

## 特徴
**シンプルかつ柔和な感じのイラスト**

絵の縁が濃い感じイラストです。
どちらかといとビジネスよりの素材が多い印象です。

![スクリーンショット 2024-03-15 16.14.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/79c321b9-081d-e9e2-d7f3-067871a07eda.png)

### **【イラストAC】**

https://www.ac-illust.com/

| 商用利用| クレジット記載 | 検索 | ダウンドード数 |
| ----------- | ----------- | ----------- |----------- |
|可        | 不要       |４回/日       |９点/日       |

## 特徴

**女性らしいイメージがやや多い**

下記のような柔らかい印象のイラストが多いです。

![スクリーンショット 2024-03-15 16.00.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/7d5b876f-9ca0-04a0-a30d-13cc0067b9e3.png)

![スクリーンショット 2024-03-15 16.05.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/cc80f46e-0f8a-fb15-6b96-089af55c9a63.png)

## **【ガジェットストック】**

https://simpc.jp/free/

ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。

![スクリーンショット 2024-03-15 17.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/2ed3b783-3dc5-60f6-d9b2-42b548300795.png)








## **【アイコン系】**

## **【human pictogram 2.0】**

https://pictogram2.com/

オリンピックで流行ったやつです。


![スクリーンショット 2024-03-15 16.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/2d33c79a-ff6f-c1ae-49b6-687955698d7d.png)

本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。

![スクリーンショット 2024-03-15 16.53.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/0dd824a8-87fc-b93b-6787-7da19db920c3.png)


## **【EXPERIENCE JAPAN PICTOGRAMS】**

https://experience-japan.info/

### 特徴
**海外から見た日本が表現されている**

これはシンプルにUIが凝ってたので紹介します。

[![Image from Gyazo](https://i.gyazo.com/12811c1b5db169def4b97df620f0afbb.gif)](https://gyazo.com/12811c1b5db169def4b97df620f0afbb)

和テイストを演出したい場合は、良さそうですね！

## **【ICOOON MONO】**

https://icooon-mono.com/

![スクリーンショット 2024-03-15 16.57.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/a962e7e2-7650-37c4-6b77-ec215a15124f.png)

こちら色・サイズも変更可能です！

![スクリーンショット 2024-03-15 16.57.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/75fd0716-a61f-c3f8-f684-beeb29341459.png)

## **【Icon-rainbow】**

https://icon-rainbow.com/


![スクリーンショット 2024-03-15 16.58.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/2e3395ea-0969-4000-f5c9-2d265ef85107.png)

ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。
![スクリーンショット 2024-03-15 16.58.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/7853ef50-5cce-6a38-5803-3fc9ef8a40bc.png)

## **【IFN FREE ICONS】**

https://illustration-free.net/

![スクリーンショット 2024-03-15 17.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/f8cc17a8-c710-ed33-0b66-4a8596add0e9.png)

このデザインはどのようなパターンにマッチしているのかなどシチュエーションの記述があるのが特徴です。
　
![スクリーンショット 2024-03-15 17.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/0e075925-600c-6319-5354-0b8b41b8ecdd.png)

## **【iconmonstr】**

https://iconmonstr.com/

![スクリーンショット 2024-03-15 17.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/a063b50b-d867-1aee-9537-eb1fa89f4ed5.png)

デザインパターンが複数提示されるのも面白いですね。

![スクリーンショット 2024-03-15 17.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/b06a04cb-7728-7831-0138-a9094d72c5c4.png)


## **【FLAT ICON DESIGN】**

http://flat-icon-design.com/

POP調なイラストです。

![スクリーンショット 2024-03-15 16.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/c7a7baa2-2999-d95f-5552-878dd65b9385.png)





## **【ビジネス系】**

## **【Tech Pic】**

http://tech-pic.com/

### 特徴
**テック系で柔らかい印象**

![スクリーンショット 2024-03-15 16.31.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/34ac84fe-e7c4-7e6a-ed7a-97eaf366f2da.png)

また、家電関係のイラストも多めのイメージです。

![スクリーンショット 2024-03-15 16.32.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/583ebfb3-8b0f-14b1-b728-e28f4bedffdf.png)


## **【unDraw】**

https://undraw.co/illustrations

## 特徴
**Tech系のイメージが多い**

個人的にはこれをよくみます。Techや仮想通貨系のアプリで多い印象です。

![スクリーンショット 2024-03-15 16.23.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/1695e412-00cc-8038-0f86-56966788aed3.png)

カラーコードも変更できるので、アプリとの親和性もよし！

![スクリーンショット 2024-03-15 16.24.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/8dc4dd7f-5a08-41b8-587c-0347aa997634.png)

## **【storyset】**

https://storyset.com/

| クレジット記載 |
| --- |
| 必須 |
### 特徴
**海外っぽく、unDrawと比べるとデフォルメが薄め**

![スクリーンショット 2024-03-15 16.28.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/fcdfc9ac-ebd9-8674-7b2c-05bb24c6917f.png)


また先ほど同様、カラーコードだけでなく、レイヤーの変更で簡単なカスタマイズも可！

![スクリーンショット 2024-03-15 16.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/4247e6d5-7d1e-92d1-4cd7-e64ba9e9e1d7.png)

ただし、本素材の使用には、クレジットの表記には気をつけましょう。



## **【漫画系】**

## **【漫画パーツストック】**

https://mangasozai.com/

## 特徴
**the 漫画アプリにピッタリ**

◎集中線のパターン

![スクリーンショット 2024-03-15 16.08.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/16fd1d59-feff-a9f6-f84d-1d46b18df2a3.png)

◎怒りのパターン

![スクリーンショット 2024-03-15 16.12.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/1766a828-ba71-b8b3-10ac-cda0b1809df1.png)

また、フォトショを介さず、色やサイズを変更できるのが高ポイントですね。

![スクリーンショット 2024-03-15 16.11.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/77a47ac7-0ee5-e1be-36ad-1f38324c24bf.png)


## **【ダ鳥獣戯画】**

https://chojugiga.com/

### 特徴
**そのまんま「鳥獣戯画」**

タイトルのまんまです。

![スクリーンショット 2024-03-15 16.16.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/3feed30e-b681-22c9-8c37-b3e1d7f3ddb4.png)

細かいレイアウト調整もよしですね。

[![Image from Gyazo](https://i.gyazo.com/1394b90a97f3189985a16d2fac0864d2.gif)](https://gyazo.com/1394b90a97f3189985a16d2fac0864d2)

## **【農民イラスト】**

https://nawmin.stores.jp/

### 特徴
**農業系特化のイラスト**

![スクリーンショット 2024-03-15 16.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/1d149cc9-6d91-bfed-9886-35f308555eef.png)


## **【フキダシデザイン】**

https://fukidesign.com/



## **【かわいい系】**

## **【kyuncuts】**

https://kyuncuts.com/

### 特徴
**かわいい系のものが多め**

子育てなどのアプリ利用などが望ましいと思われます。

![スクリーンショット 2024-03-15 16.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/7d20aadb-bb19-460a-9f48-76999738de18.png)

![スクリーンショット 2024-03-15 16.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/6a1c50fd-805e-655c-0f16-a040332acd67.png)




## **【その他】**

## **【oisishiso】**

https://oishiso.jp/

### 特徴
**美味しそうなものの素材ならこれ**

飯テロです。(笑)

![スクリーンショット 2024-03-15 16.50.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/f25aa1f7-c0f9-69b9-4144-89980902668a.png)

艶感もしっかり表現されているので、かなりクオリティがたかい印象を感じます。

![スクリーンショット 2024-03-15 16.51.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/babc4f37-08a0-2deb-c57f-4ca8bec9a0be.png)

## **【pixabay】**

https://pixabay.com/ja/

## **【o-dan】**

https://o-dan.net/ja/

検索でフリー素材を引っ張ってこれます。

![スクリーンショット 2024-03-15 18.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/5dc6bce9-9a3b-8868-52f4-96f514084af4.png)

風景など撮影特化のサイトにはおすすめです！

![スクリーンショット 2024-03-15 18.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/8fc70f82-a22d-833a-0712-641909689689.png)


## **【PAKUTASO】**

https://www.pakutaso.com/#google_vignette

### 特徴
**Youtubeのサムネ的なやつ**

Youtube的な雰囲気にはなりますが、このような素材を使用するもの良いかもです。

![スクリーンショット 2024-03-15 18.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/081295e3-0100-c346-14ad-a2b84d3c87dd.png)

## **【まとめ】**

ここまでお疲れ様でした！
たくさんご紹介しましたが、いかがでしたでしょうか？
ぜひアプリ作成の参考になれば幸いです！

また、注意点ですが、クレジット表記が必要なものなど使用上で注意点があるものの取り扱いには注意して使用しましょう〜！