figma+画像生成?? 「Recraft.ai」がすごい！? 

## はじめに
こんにちは。司空です。
ある日、ネットニュースを適当に読んでいたら Recraft.ai なるものが出てきて興味が湧いたので触ってみました。（特にデザイン系の仕事をしているわけではないですが、、）

「触ってみたいけど色々面倒くさいから、ざっとどんなのか見てみたい！」人向けです。

※備考

https://news.yahoo.co.jp/articles/8b6efde3d1a4ee98eeff9760ab6678272c3a1d00
## 登録
↓↓↓  Recraft.ai サイトはここから  ↓↓↓

https://www.recraft.ai/


ファーストビューがとてもおしゃれです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/c75cafdb-7002-ce22-fcdd-6f509d6ca462.png)

Googleアカウントを持っている方はソーシャルログインできます。（自分はそうしました）
基本的な情報を入力していきます。※ここでは省きます。

## 試してみる
左上に出てくるImageを選択して生成してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/8b1adcd2-ead2-820b-4754-73ac3f0e5e53.png)

緑？青？の枠が出てきます。ここに生成された画像が出現するみたいです。
左上にプロンプトを入れてRecraftボタンを押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/b6f8bf3c-9db3-1049-3320-4cc1f68d6abe.png)

今回プロンプトは人を登場させたかったので人を入れて適当に考えました。
その他設定は変えていません。

- 生成結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/1f98316a-4867-a49a-1b99-aed36eb38fd0.png)

2パターン生成されました。（添付画像はコピーして並べたので実際は一つのみ表示）
3次元を想定してたんですが、、

もう一度プロンプトに「リアル」と付け加えて生成してみます。

- 生成結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/d6c51e9b-bb4c-d548-8d89-11e528d3fc55.png)

少し暗いですが、かなりリアルに生成できてると思いました。

と、まあ他の画像生成AIサービスと特に遜色ないかもですね、、

### Modify area
画面上部に様々なツールがありそうで、その中でもModify areaという項目が気になったので見てみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/b6bfab3c-5fc4-b264-54bc-144694635e81.png)

すると範囲選択のペンのようなものが出てきました。
先ほどの画像を適当に選んで男の人を囲んでみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/33513563-d5cb-631f-13da-f98db5fa2037.png)

男の人を凶暴な白熊にしてみましょう。
先ほどとは異なりModify areaボタンを押します。（ドキドキ。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/2150fc80-9307-5404-de91-319ee80a0b4f.png)

- 生成結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/0c793aab-f6a4-c2b0-d7c1-f99574cc3415.png)

これはかなりすごいです。
見事に白熊が襲い掛かっているように変わってますね！
境目や角度も自然です。

### 他の機能
消しゴムや切り取りは勿論、背景なども好きに変えれるそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/ee52e44f-6a32-b279-4add-58829ebf25e0.png)

### Mockup
Tシャツやコーヒーカップにプリントしたように画像を張り付けることができるみたいです。
自然すぎる。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/705efed4-56fc-5a7a-852a-bb6b789ccaf8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/397f3285-e808-ac37-706c-e405c05287a2.png)

先ほどの白熊に鮭のイラストを自然な感じでプリントさせてみます。(わくわく。。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/5a017d95-40f6-c76c-6070-63a643f97fb4.png)
[鮭イラスト引用元](https://onwa-illust.com/fish/salmon/)

- 結果
色々な形で張り付けてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3648303/995636b7-d925-b7d8-cced-57d8cc4d1875.png)

白熊以外に影響が及ばず、毛並みや質感に自然に適応していますね。
元から鮭柄の白熊のようです。（は？）

と、普通の検証はしていないのでどんなユースケースに当てはまるかわかりませんが、イラストを入れたグッズの検証をしたいときになどに重宝しそうです。（すでにそのようなツールがあるかもしれませんが、、）

## 感想
筆者はシステム構成図などを作成する際に[figma](https://www.figma.com/)をよく使うのですが、操作感がほぼ一緒なような気がします。
なんだかアイコンも似てるような、、（勘違いです。）

## 終わりに
**Figma**、**Recraft**共に、表面的な機能しか使っていない雑魚エンジニアの自分の感覚では、figmaに+画像生成機能が付いた超便利なツールだと感じました。
これからまだ他の使えてない機能についてもっと深掘っていきたいです。（使用する機会があれば、、）

皆さんもRecraft.aiを使ってクリエイティブなAI生活を送っていきましょう！
いいねしていただけると嬉しいです！