■JOOiのご紹介
デザイナー紹介サービスでした。
■明日から使えるAIドリブンな制作フロー講座
川合 卓也さん
株式会社SHIFT AI CDO（最高デザイン責任者）
▼LP制作に特化して考えます。
▼これだけ覚えていって。
Felo（考察）
Genspark（画像生成）
Create（Webサイト生成）
▼知るフェーズ
●ヒアリング前
Felo
なぜFeloなのか?
・深く広くWeb検索できる
・最新のLLMモデルを使用できる
・マインドマップ、AI図解、スライドで情報を俯瞰できる。
・トピック(NotebookLMのような機能)が便利
・上記が月2,000円ほどで使用できる
●PLAUD NotePin（録音ツール）
※クライアントのヒアリングをツール使って録音するのあり？
●ヒアリング後
PLAUDからデータをエクスポート
→Feloのトピックについか
→Feloがクライアントの専門家に
■考えるフェーズ
●LPの設計図をつくる
PDFを読み込ませて、Feloでトピックを作成する
（要件定義・デザインガイドラインなど）
プロンプト入力
SHIF AIコミュニティのLPで一番伝えるべきコアメッセージを提案して。
●情報設計
・プロンプト例
SHIF AIコミュニティ用のLPの情報設計をセクションご
とに文字生成してください。コピーライティング、入れる
べき画像、閲覧者のインサイトの移り変わりを記載してく
ださい。
・マインドマップも使える
・AI図解も使える
・Feloだとながれていってしまうので、
CSV形式にし、スプレッドシートで管理する
●画像生成プロンプト
・プロンプト例
各セクションで配置する画像を生成するための画像生成プ
ロンプトを日本語で生成して。セクションごとに分けて。
→Feloに生成してもらう。（Gensparkで使う）
・Gemini(ジェミナイ)でプロンプトをつくる
※ジェミナイと呼んでいましたが、人によって呼び方が違うみたいです。
Feloだと大量のデータだと途中で途切れてしまう可能性がある。
・要件定義書とデザインガイドランをGeminiに読み込ませる
→Create.xyzで生成するためのプロンプトを作成。
※一番タフなのはGemini
▼行うフェーズ
●画像生成
Genspark
Recraft
・Genspark→要望を伝えるとエージェントがプロンプトを推論してくれる
・Recraft→画像生成ツール、特定のテイストでやる場合には有効
●Webサイト生成
・Create
→Geminiのプロンプトを入れる
※デザイナー目線でみるとまだまだだけど、ショートカットはできる
・v0
→Createに近いものができる
そのままは納品する人はいない
・Onlook
→Figmaに似ているツール
コード生成もしてくれる
●デザイナーの仕上げ
→Figmaのhtml.to.designを使う。
（URLを入力してFigmaに展開してくれる）
code.to.designもFigmaのプラグインも使える。
CreateはReactでコードを書くので、
Geminiでhtml/cssに変換しておく。
→Figma to Studio
画像は色ベタに変更しておくとペーストが早い
画像そのままだと時間がかかる。
■質疑応答
Q.パスデータの出力もできる？
→今のところできない
Q.Figmaで作ったデータをhtmlとcssでコードにして
コーディングするのは？
→ショートカットして楽をする
■感想
知らないAIがいくつも出てきました、
ちょっと試してみたいなー。
コメント