レイアウトは作れるけどコーディングが不得意な方に朗報！ 直感的にワイヤーフレームを書くだけで、UIデザインからコードまでAIで自動生成してくれる「tldraw」のMake Real機能を紹介。

1. 非エンジニアでも
ワイヤーフレームから
爆速フロントコーディング！？
株式会社IMAKE濱野将

2. 自己紹介

4. デザイン歴20年
デザインはそれなりに得意で早い方だと自負。

5. ただし、
コーディングは鈍足…
生産効率が悪い…

6. そんな方に朗報！
生成AIを使ってワイヤーフレームを書くだけで
フロントコーティングができちゃう！？

7. 本日お話するツールについて

8. tldraw

9. tldrawとは
tldrawとは、オープンソースのホワイトボードアプリ。
プログラムを生成する際、ChatGPT（※GPT-4）のAPIを活用することで、
makerealという生成AI機能を活用することができる。
tldraw自体は無料で利用可能。
ただし、ChatGPTのGPT-4の利用料と、
OpenAIのAPIキーを利用するため５ドル以上の従量課金が必要。

10. makereal

11. makerealとは
手書きのラフスケッチや画像から、
Webサイトやアプリのデザインが作成できる。
さらに、生成されたデザインからソースコードを瞬時に生成可能。
図からもインフォグラフィックやHTMLコードを生成することもできる。
テキストの補足分を追記することで、その内容に応じた機能も実装してくれる。

12. 生成実例

13. ポイント

14. 描画生成のポイント（2024年4月現在）
イラストの正確さよりもプロンプトを簡潔にわかりやすく入力できるかが重要
・見出しのテキストはAIが認識しやすい「L」「XL」を使う方が良い。
・画像は□内に×を書くと画像になる。
・ある程度スペース（ジャンプ率）は空けてあげないと、
AIが誤認してまとまったセクションにしてしまう。
・補足は赤色など目立つ色のほうが補足と認識されやすい。
・補足の文章は英語にするほうが正確に出力される。

15. メリット

16. 利用するメリット
非エンジニア（ディレクター・デザイナー）
エンジニア
ワイヤーフレームから簡単にコーディングされたデザインが作れる
時短になる・レイアウトをデザイナーだけに頼らなくても良い

17. 社内でおきた変化

18. 社内ではスキルや経験問わず
解像度の高いコミュニケーションが生まれ
コーダーとの認識の齟齬がなくなっ
スクラッチコーディングが早く0→1で制作する時にはオスス
とにかく手軽に遊び感覚でコーディングできるのが楽しい

19. さいごに

20. 今後どうなるのか予想
まだまだ実用には足らないが、中間成果物には使える。
今後AIが進化してもっと精度が高くなり、
機能も充実していく可能性を秘めている。
いずれはFigmaのプラグインなどで実装される可能性もあるので、
今から触れておいても損はしないと感じている。

21. DESIGNCAMPUSもくもく会
2024年4月18日木曜日19:00~21:00
場所：サンロードプラザ ダイヤパレス吉祥寺
2024年5月16日木曜日19:00~21:00
場所：国分寺cocobunjiプラザセミナールーム

22. ご清聴ありがとうございました
〜tldrawのフリーハンドで描いた猫〜