生成AIとデザインについて



デザイナーの平林です。
今回、初投稿ですが、生成系AIについてのお話しをしたいと思います。
私自身、専門家ではありませんが、昨今の生成系AI市場の高まりや、将来的に予想されるインパクトがとても大きい領域だと捉えています。
今回、生成AIについての調査や、現状のトレンド（動向）、私自身がどのように使ってみたかなど紹介してみます。

## 最近の生成AIの急成長、需要の高まり
最近の生成系AIはすごいです。
今年、国内だけでも、AIの市場規模は対2021年比27.0ポイント増の**4930億7100万円**の見込み。2022～2027年の年間平均成長率（CAGR）は23.2％で推移するとされ、2027年には**1兆1034億7700万円**になると予測されています。

IDC Japan：国内AIシステムの市場予想（2023/4/27）

<img width="283.2" alt="sdgshd001.png (29.0 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/84cd6b43-c0b1-407b-83f0-0c179cf53bf1.png">

### しかし、一方では...
調査の結果、約半数の54%にはまだ生成AIが知られていないようです。

<img width="635" alt="スクリーンショット 2023-06-30 6.48.19.png (198.1 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/89291982-1735-43e8-8679-b9c17f96167f.png">

### そしてさらに...
企業が行う「生成AIが関係する取り組み」についてのアンケートで具体的な取り組みの割合は全体の１割を切っています。

<img width="488" alt="スクリーンショット 2023-06-30 6.50.35.png (126.3 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/e2157b84-d967-454e-b216-b1d816019a49.png">

### AIについてのイメージ
ポジティブなイメージが全体の3割、ネガティブなイメージは５割強といったところです。
様子見は1.5割程度でした。
また、生成AIに対する最もポジティブな層に見られた職種として、DX / IT部門・経営企画があった。この分野は積極的な業務代替、自社活用の意識が高いことがわかります。

<img width="1273" alt="スクリーンショット 2023-06-30 6.53.04.png (415.5 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/b16f6b98-9280-4ce6-b807-c9169c7e42c5.png">

### AIに求めるもの
テキスト・文章生成など業務の中でいう、ルーティン作業、事務作業系が多いです。

一方、アイディアワーク、クリエィティブの生成に期待する声はマイナーですね。
創造する作業は、専門知識や経験・ノウハウが生きる部分もあり、生成AIによるアウトプットの精度はまだまだ及ばない、また、制作物、その制作過程に対する諸々の判断・意図が曖昧になり、扱いにくいことはわかります。

<img width="620" alt="スクリーンショット 2023-06-30 7.06.14.png (219.5 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/a1c70b4d-242b-4bbc-999c-0fe29e31d276.png">

引用：[Pwc：生成AIに対する実態調査 2023](https://www.pwc.com/jp/ja/knowledge/thoughtleadership/generative-ai-survey2023.html)

## 生成AIに関する議論
生成AI（主にクリエィティブ領域）に関してはさまざまな議論が行われています。
生成作品の所有権、訓練データの全容、プロンプトの入力などどの行為が権利侵害にあたり、どこまでが許容されるのかがまだまだ不透明です。

以下にいくつか問題点を記載します。

- **1．【学習データの権利問題】**
学習に他人の画像や文章を勝手に収集して利用する

※ 例えば生成AIツールの「プロンプト（呪文）」に著名なクリエイターの作風や、制作者名、作品名を入力することで、作風を再現するケースです。
<img width="640" alt="AS20230412003587.jpg (67.1 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/70f79981-9d62-40e9-a0aa-f5f7247b41c7.jpg">


- **2．【生成物の著作権問題】**
生成系AIを利用して自動生成した生成物に著作権は発生するか、発生するならば誰の権利になるか

※ アメリカでは実際に、生成AIによる創造物が、著名なクリエイターの作品の著作権侵害を犯しているとして訴訟されたケースもあります。

↓ このように、言い逃れできないレベルで似ているケース。
<img width="1280" alt="maxresdefault.jpg (135.1 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/7bf3e095-97ad-4211-a457-22d3a5e7a7d9.jpg">


- **3．【その他権利侵害の懸念】**
生成系AIを利用して画像や文章を作成・利用することは著作権・肖像権らの観点で懸念はないか、画像以外にも、論文や、写真に写っている人物の顔など権利問題は指摘するとキリがありません。
中には悪用されるケース、悪用を心配して発信止めるするケースもあります。
最近だと、pixivでアップしたイラストを非公開としたり、新規投稿を停止したりする事態が起きました。

記事：[画像生成AIの「悪用」に絵師たちが反発、pixiv上でイラスト非公開に…](https://www.bengo4.com/c_23/n_15982/)

### 対策、運用ルールを決めるのが大事
・生成されたものの信憑性を担保、確認する（難しいかも）
・意図的に著作権侵害が疑われる生成を行わない、自身の制作物として公開しない。
・機密情報や個人情報などを用意にインプットしない（組織のルールにもよる）
・将来的なリスクも十分に考えて、生成を行う
・ライセンス周りや、生成ツールのガイドラインを確認しておく
などなど。

**うまく付き合っていった先に...　生産性、品質が向上したり、今までにない画期的な取り組みができそうです。**

# デザイン業務で活用が期待されるAI、事例紹介
画像はもちろん、ビデオや音楽などデジタルデータ化できるクリエィティブなどはすでに生成AIのサービスが増えつつあるものが多いです。
生成するものや、AIの性能によって品質はまちまちだが、高いクオリティのアウトプットが出せるものも散見されます。

## 例えばUI生成系AIにはどんなものがある？

#### クリエイティブの作成に使えそうなツールを見ていきます...

[海外の方がまとめているスタートアップリストが面白いです。](https://airtable.com/shr6nfE9FOHp17IjG/tblL3ekHZfkm3p6YT)

[他にも、Base10の出した生成系AIのカオスマップがあります。](https://base10.vc/post/generative-ai-mission-critical/)
<img width="1148.0366972477066" alt="generative_ai_map_v2.jpg (621.3 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/b15b8221-aa71-4b80-aab9-5864be1aad18.jpg">


**1つ目：「Diagram」**
**先日、Figmaが買収を発表。**
Figmaのようなユーザー数の多いプロダクトにどのようなAI機能がつけられるか期待です...！

**Genius**
ユーザがFigma上でデザインを行う操作を学習することで何をデザインしているかを理解し、デザインシステムのコンポーネントを使用して自動で配置の提案を行うツールです。
[デモ](https://www.genius.design/)

**Magician**
アイコンが作成できるツール。AIによるテキストtoアイコンのため、既存のアイコンセットなどにはないアイコンを作ることが可能です。
[プラグイン　※月$5](https://www.figma.com/community/plugin/1151890004010191690/Magician)

---

**[UiZard](https://uizard.io/)**
UI作成ツールです。
手描きのスケッチをAIが美しいフレームワークに自動変換してくれる、プロンプトを入力すると、ワイヤー、デザインを作成してくれます。

### 【試してみました】
**スケッチ → ワイヤーフレーム**
<img width="1833" alt="Frame.png (3.2 MB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/836219bc-bc69-44bf-be56-1d4b3835607b.png">

### 【レビュー】
**いい点**
 ・基本的な構成、レイアウトは大きくずれてない。
・形や、文字をハッキリ示していれば、それ通りに作ってくれるところもある。
・少し修正すればギリ伝わる

**ダメなところ**
・ところどころ、文字とUIパーツが識別できていないと思われるところがある。
・画像をAIが変換しただけで、そんなにUIっぽくないし、全体的にのっぺりした印象。
・情報のグルーピングなどがイマイチ。

**改善点**
・UIの認識パターンの特徴を掴めば、いいものはできそう。
・もう少し大きく、丁寧に描写すれば良さそう。

---

### 【試してみました2】
**テキスト プロンプト → UIデザイン**

まずは、以下のようなプロンプトを入力します。
**・デバイスサイズの指定**
　→ 今回はWebにしました。

**・このプロジェクトの説明（どんなUIや機能かを説明）**
　→ 今回のテーマは「環境にやさしい電子マネーアプリ」
　　機能1：電子マネー取引や残高などを確認できる機能
　　機能2：持続的可能な取り組みによってポイントが貯まる、環境活動に寄付できる機能

**・デザインテイストの指定**
　→ 鮮やかな緑色のボタン、自然モチーフのイラスト/写真、グラスモーフィズム、シンプル

**・テーマやトンマナの指定**
　→ モダンデザイン、フォーマル、ライト調

<img width="779" alt="img01.png (432.9 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/ece796b6-0feb-4f69-8f52-1b2524581951.png">

※ プロンプトは字数制限があり、アプリの要件となるプロンプトの最大字数は300文字です。
要件を300文字（英語で）まとめるのはかなりむずかしく、どうしても抽象度が高くなります。
業務で使うのであれば、もう少し詳細なパラメーターを設定・調整できるといいですね。

### 成果物
<img width="601" alt="スクリーンショット 2023-06-30 12.46.50.png (148.1 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/c127396a-8301-4a51-abf0-04b8bfe52fa3.png">

ログイン画面

----

<img width="741" alt="スクリーンショット 2023-06-30 12.46.28.png (199.7 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/0f50a867-5075-45df-ba10-e82bc5523f2a.png">

マイページ

-------

<img width="775" alt="スクリーンショット 2023-06-30 12.46.17.png (173.9 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/b27fd346-f8dd-4693-a126-4e3db05eda10.png">

ポイントなどが確認できるダッシュボード

-------

<img width="474" alt="スクリーンショット 2023-06-30 12.46.39.png (1.1 MB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/f74f72d7-2724-41ad-9112-61823c4b0220.png">

寄付できるページ

------

Figmaの容量で生成後の編集もできるみたいです。
<img width="1440" alt="スクリーンショット 2023-06-30 14.47.37.png (673.1 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/0e19f1a7-a263-47d9-b3e1-584684dbfa1a.png">

------

## デザインプロセスから見るAIの活用シーン
**デザイン系生成AIの強みについて**

・圧倒的なスピードと量！
・初期のパターン出し、モック、プロトタイプ、ワイヤーフレーム（？）までを効率化！
・自動補完が優れている！

下の図のように、プロジェクトの工程ごとに様々な役立ち方が期待できます。
また、スキルや知識不足をAIがアシストすることで、デザインの民主化がよりいっそう進んでいきそうですね。

<img width="1833" alt="Frame.png (400.6 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/f1bbbdf4-3ea5-40dc-9657-8d4f64c4d255.png">

AIを活用したデザインについてはこちらの動画がわかりやすいです。
**[「Generative AI時代のUXデザイン」](https://www.youtube.com/live/yWzu0OYjDXk?feature=share)**


## 他にも試した事例を紹介
#### アバターデザインの幅出し、ヒアリングに生成AIを試しに使用しました。
[ Adobe firefly（beta）](https://firefly.adobe.com/)で生成しました。

商標利用OKの訓練データをもとに作成された画像生成AIです。
<img width="960" alt="cont1_l.png (862.2 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/03b257c9-5e56-426d-a977-413b67e54157.png">

<img width="1440" alt="スクリーンショット 2023-06-30 14.44.28.png (4.3 MB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/4c6794b1-3ed4-4642-a9f7-4733d5326ab0.png">

機能の中には、画像生成はもちろん、3Dイラストの生成や、テキストエフェクトなどがある。正式版は商標利用が可能で、生成したもののレタッチ、Adobe関連のソフトとも連携して使えるようになると思われます。

#### 例えば、３Dアバター生成のためのプロンプト
`3d avatar, cute, round, animal（何かの動物の名前） , color（色）, children ,clothes`
<img width="1353" alt="キャラクター リスト.png (1.2 MB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/dd63a08e-573e-41b1-ae88-0e15bcda493e.png">



---
## 他にも試した事例 2
#### 撮影のディレクション資料作成に使用
サイトの写真撮影のため、カメラマンさんにディレクション内容をまとめたドキュメントを作成することになりました。

右も左も分からないので、アドバイスを求めてみました。

（写真は一部抜粋）
<img width="772" alt="スクリーンショット 2023-06-30 14.01.50.png (281.9 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/1de2414b-9cdb-4545-ae5b-d32a07f8df70.png">
<img width="837" alt="スクリーンショット 2023-06-30 14.02.11.png (469.4 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/37b50f98-01b0-4ffe-9ed3-39dc9e104ac9.png">
<img width="746" alt="スクリーンショット 2023-06-30 14.02.19.png (98.6 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/525db019-2ffe-44b4-af14-b0e8eadbe6b2.png">
<img width="847" alt="スクリーンショット 2023-06-30 14.02.45.png (368.4 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/048cc493-a856-4edf-9c81-5c53e07da4ad.png">
...

自分でいい感じに添削して、最終的に資料にまとめました。
<img width="687" alt="スクリーンショット 2023-06-30 16.48.50.png (179.6 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/600a7f6e-8c90-45f2-b2f7-23bbe1ef1bd6.png">
<img width="691" alt="スクリーンショット 2023-06-30 16.49.03.png (732.8 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/886611ad-1fde-4a78-856d-268025767f8c.png">


-----

余談だが、デザインの表現、図のアイディアも出してくれます。
<img width="844" alt="スクリーンショット 2023-06-30 14.04.29.png (505.6 kB)" src="https://img.esa.io/uploads/production/attachments/10655/2023/06/30/110676/cba8ef12-a600-41f8-be6f-e50b27058c65.png">

------

# AIとのコラボレーションについて
ここまでAIの紹介、活用事例などをみてきたが、AIはまだまだ完全ではないことがわかりました。

しかし、私たちはまだまだ、AIに対する理解や、付き合い方、使いこなす方法を知らないと思います。

例えば、「Text to 〜」ではAIに入力するプロンプト次第で全く違ったアウトプットができたり、クオリティーが向上したりします。プロンプトでお金を稼ぐ人も出てきたように、今後はAIにどれだけ的確な指示（コミュニケーション）ができるかが成果物の品質につながるかもしれません。

進化のスピードも早く、今後巨大市場になることが予想されるため、私たちもできるだけいい影響を受けたいものです。

新規事業開発や、スタートアップの検証フェーズなどでは「早い・安い」が求められます。
もしかしたら今後のアップデートでAIによる生成物は「早い・安い・上手い」を満たすようになるかもしれないです。
そういった可能性面でも生成系AIと新規事業の相性は抜群！ビジネス、エンジニア、デザイナーという職種に関わらずとも、IT領域において生成AIを使いこなせたら強いと思います。

本日はここまでです。
読んでいただきありがとうございます！