【トークイベント】明日から使えるAIドリブンの制作フロー
AIツールを活用する事例をよく耳にしますが、「具体的にどうすれば良いかわからない」や「結局ChatGPTしか使いこなせていなくて憤りを感じている」というデザイナーの声をよく聞きます。
そこで株式会社SHIFT CDOの川合卓也氏に登壇していただき、「”AI×デザイン” 明日から使えるAIドリブンの制作フロー」と題したAIとデザインに特化したオンライン、オフラインイベントを開催しました。
登壇者情報
川合卓也（Takuya Kawai）
株式会社SHIFT AI CDO（最高デザイン責任者）
グラフィックデザイナーとしてキャリアをスタートし、Webデザインやフロントエンド・バックエンド開発を経験。現在はクリエイティブの監修・制作に従事し、JOOiや複数のAIツール 公式アンバサダーを務める。
Xアカウント：https://x.com/kawai_design
本記事では、本イベントで語られた、AIのツールの紹介、どの制作物にどのツールが適しているのか実践ベースで詳しくお届けします。 明日からAIツールを使い生産性を上げたいデザイナーの方にぜひご覧いただきたいです。
※2025年3月11日時点の情報になります。なお各ご紹介するAIツールのステルスマーケティングは行なっておりませんので予めご了承の程よろしくお願いいたします。
AI×デザインの現状、未来
昨年のデータによれば、日本でAIを業務に活用している方はわずか9％ほどにとどまっているそうです。その中でも、さらに「AI×デザイン」というテーマに興味を持っている方はかなり意欲的で先進的な方々だと感じています。
私はもともとはグラフィックデザイナーとしてキャリアをスタートし、Web制作や開発を経て、ChatGPTの登場をきっかけにAIの世界へと深く関わるようになりました。
著名なAIクリエイターのプロジェクト事例を交えながら、明日から実践できるAI活用×デザインについてお話しさせていただきます。
特に、今回はLP制作に特化した内容で進行します。Perplexity、Genspark、Createといった注目ツールを中心に、「知る」「考える」「行う」という3ステップで、AIを活用したデザインの現場をご紹介していきます。
AIツールはたくさんありどのツールを使って良いか迷子になることが多々ありますよね。
そのため私は3つのジャンルに分けています。
想像系AI：テキストを生成したり、検索ツールを使いまとめてくれるもの 例：ChatGPT
創造系AI：画像や動画を生成してくれるツール 例：Midjourney
組み立て系AI：Web、アプリスライド生成ツール 例：Create
今回はLP制作に特化したAIツールご紹介します。 上記が今回ご紹介するAIツールで、知る、考える、行うのカテゴリーで分けたときの図です。
それでは早速、本題に入っていきましょう。
今回は分かりやすいように4つのフェーズに分けていきたいと思います。
AI×デザインの現状、未来
知るフェーズ
考えるフェーズ
行うフェーズ
まとめとゴールの再確認
AIが得意なこと、苦手なこと
現在、AIが得意なことは以下の情報（中央値）の収集とパーツ作りです。
・情報収集
・テキストによる提案
・アセット制作（ロゴ、カリグラフィ、写真、イラスト、グリッドデザイン など）
・コピーライティングの大量生成
AIが苦手なことは言語化が難しいグラフィックデザインです。
・文字（タイポグラフィ、美しい文字組）の描画
・デザイン4原則や錯覚など人間や物理に配慮したレイアウト
・個性的な色合いやレイアウト
未来のAIとデザイナーのあり方
コアのプロンプト、パーパスなどを入れるだけでブランディング、プロダクト、サービス、マーケティングが全自動で生成できることだと思います。
デザイナーの役割は0→1と99→100のみです。
0→1の部分はクリエイティブディレクションですね。
定義と道のりを決める主な役割、99→100は選択と最終調整です。
そしてデザイナーの審美眼が重要になると思います。
つまり、思想を知り、最良の形を選ぶというのがAI時代のデザイナーの役割になると思います。
それでは具体的なAIドリブンな制作フローに移っていきたいと思います。
知るフェーズ
ゴール：AIをクライアントについて熟知した秘書にする
今回はFeloというツールを利用します。
Feloについて機能特徴を説明しながらどう調べるのかを説明しますね。
1. 深く広くWeb検索ができる
普段の検索だと７〜８の記事が出るが、ディープリサーチを使うと200件くらいの記事から検索することができます。
2. 最新のLLMモデルが使用できる
DeepSeek AI、Claude、Geminiなど色々なモデルが使えます。
3. マインドマップ、AI図解、スライドで情報を俯瞰できる
NotebookLMのような機能が便利です。
※NotebookLMとは、情報をAIに読み込ませて独自のAIをカスタマイズできるツールです。
4. FeloのWeb検索で情報収集ができます
トピックをクライアントの専門家にすることによって得られる情報の精度が上がります。
以上が知る、情報揃えるのフェーズです。
私は知るというフェーズが一番大切だと思います。考えたり、行うフェーズに際に適切に知っていないとアウトプットの方向性がズレてしまうためです。
考えるフェーズ
ゴール：LPの設計図をつくる
全てのデザイナーがLPを作るという目的ではないかと思いますが、抽象化するとどのメディアにも応用できるのでぜひご覧ください。
まずは、コアメッセージの確認です。
会社情報やLPの作り方のレギュレーションなど特化したトピックにします。
続いて、情報設計をします。
Feloではテキスト以外でマインドマップを俯瞰して情報を整理、俯瞰したり、AI図解で整理することも可能です。
上記の図が弊社で制作しているLPの情報設計です。
AIを活用して図解して俯瞰して考えたり整理することが可能です。
次にLPに欠かせない画像生成のプロンプトを生成します。
LPに入れる画像を生成するためのプロンプトを生成したいと思います。
引き続きFeloに依頼してプロンプトを生成し、スプレッドシートにまとめます。
大量の情報が載ったスプレッドシートをGeminiに送ります。
ここで初めてGeminiを利用します。
※なぜGeminiなのか
大量の情報だとFeloだと途中で読み込めなくなる可能性が高いが、Geminiだと大量の情報でも難なく読み込むことが可能なのでなので活用しています。
また、LPの情報設計のプロンプトを生成する際はセクションごとに〈section〉、セクションの内容を〈/section〉で区切ることによってHTML風なプロンプトにすることをお勧めします。
行うフェーズ
ゴール：デザイナーへパスを渡す
行うフェーズではいくつかフローがあるためPart１〜３に分けてご紹介します。
Part:1 画像生成
ご紹介したいツールは以下の2つです。
Genspark
Recraft
特に今回はGensparkだけでも良いので覚えていただけると嬉しいです。
Gensparkは日本語で画像生成ができるツールで、特にビジュアルイメージの方向性を探る際に非常に便利です。MidjourneyやDALL·Eと比べても、日本語でプロンプトを書いても高い精度で応えてくれます。
先ほどGeminiで生成したプロンプトをGensparkでコピペをします。
そうすると数秒後に、4～6枚の方向性の違う画像が提示されます。その中で「これっぽいな」と感じたら、そこから深掘りすることもできます。
下記が私がGensparkを活用して生成した画像です。
これを見るとなんでも生成できてしまうなと思ってしまいますね。
背景除去も可能なので画像素材サービスや画像編集ソフトの代替できるようになっていくと思います。
ここでGensparkの活用については以上です。
次にRecraftです。
Recraftは特定のテイストや当てはまる際やモップアップを作りたいときに便利です。かなり個性が強いため商業デザイナーには使いにくいと思いますが、進化していくと使いやすいと思います。
グッズ展開をお勧めしたいです。
こちらは私のアイコンを使って自動的にグッズに提案してくれます。
OpenAIのsoraと組み合わせることでプロモーション動画が生成可能です。
そのほかHailuo AIなどを使っても動画生成可能です。
Part:2 Webサイト生成
ここで紹介したいのが、冒頭にも触れたCreateというツールです。
Createは自然言語だけでLPなどのWebページを生成できる日本のAIツールです。最大の特徴は、デザインの細かい知識がなくても「いい感じ」のデザインができる点。
Geminiで生成したプロンプトを貼るだけですぐにLPデザインを生成する。プロの視点から見るとまだまだなと思う部分はありますが、しかし、Createが生成したLPから修正していくというアプローチ方法だと口数は削減できそうですよね。
そのほかにも Onlookというツールもご紹介させてください。
これはFigmaのUIに似ているツールでPC,モバイルのデザインを出してくれます。
Figmaに慣れてしまった方で工数削減されたい方にはこちらもお勧めできます。
part3 デザイナーの仕上げ
ゴール：AIでパスを回してデザイナーがシュートする
こちらが最後のフローになります。
html.to.design
Webサイト公開後のプレビューのデータをFigmaにペーストできるツールです。
先ほど生成したものをFigmaでデザインすることができます。とても便利ですよね。
Figma to Studio
画像は色ベタに変換しておくことをお勧めします。
画像が入っているとコピーするとエラーが発生した際に時間がかかってしまうためです。
あとでStudioで編集してクライアントに納品するという流れです。
修正、改修もStudioならコントロールしやすいです。
新しいセクションが必要になればそこだけCreateで生成するで問題ないと思います。
まとめとゴールの再確認
本日のゴールは明日からAIを使ってデザイン制作に活かせることでした。
ここまでの話をまとめると、こんな流れでAIを活用できるようになります：
1. 知る：Feloで深く広い情報収集
2. 考える：情報の整理をしながらGensparkでビジュアルの方向性をつかむ
3. 行う：Createでたたき台を自動生成して実制作に活かす、プラグインを使い、最後のデザイン修正をしていく
この3ステップで、制作のスピードはもちろん、「悩む時間」「考えが詰まる時間」が圧倒的に減るはずです。
最後までご清聴いただき誠にありがとうございました。
明日からWeb制作を行う際に試していただけると幸いです。
今回、このイベントを企画したJOOiはデザイナーマッチングサービスとしてデザイナーの皆さんに制作案件をご紹介しておりますが、デザイナーが志す場所になるというビジョンのもと、こういったイベントやレポートなどデザイナーの皆さんに役立つ情報もご提供しております。
現在、積極的にデザイナーさんを募集しておりますのでJOOiにご興味ある方のご応募をお待ちしております。