Ryoka｜AIデザインツール開発

最新AI × Webデザインの実践・活用法を発信
LP・バナー制作を効率化するWebアプリ「ATARE」10月リリース予定🚀
↓ 初月無料の先行登録はコチラ

[Ryoka｜AIデザインツール開発 @revolvtech]

AIでLPが10分で作れるようになって
Webデザイナーとして、ちょっと怖くなった。

スキルも経験も増えたのに単価は変わらない
AIが出て、依頼主側でも作れるようになった

じゃあこれから
デザイナーは何にお金を払ってもらうんだろう…？

私が出した答えは
「もっと速く作れる人になる」ではありませんでした。

「作業者から、相談相手になる」

・言われたものを作る前に、目的を問い直す
・何を作るか決まる前から相談に入る
・デザインを売上や利益の話として考える

実際に私が単価を維持・向上させながら
案件を安定させるためにやったことを書きました。

AI時代のフリーランスデザイナーの生存戦略。
noteにまとめました↓

https://t.co/YWckzgAFR6

[Ryoka｜AIデザインツール開発 @revolvtech]

@tadamiki_ 投稿内容をご覧いただき、またご指摘いただきありがとうございます。
Canvaの利用規約を改めて確認し、ご指摘いただいた規定があることを確認しました。

今後同様の方法での利用および投稿は行わないようにいたします。
この度はご教示いただき、ありがとうございました。

[Ryoka｜AIデザインツール開発 @revolvtech]

LPのたたき台、約10分でここまで作れます！

今回はハロウィンLPで検証🎃

Canvaで参考デザインを探す
↓
ChatGPT Images 2.5でLPデザイン生成
↓
Codexに渡して実装

配色・写真・装飾の雰囲気まで拾って
まずは約10分でたたき台に！

※もちろん、このまま納品できる完成形ではありません

AIに完成品を任せるというより
最初の「形にする」工程を一気に短縮する🪄

実際の制作フローはこちら↓

[OpenAI @OpenAI]

Get ready.

[Ryoka｜AIデザインツール開発 @revolvtech]

AIでLPを10分で作れても、
デザイナーの仕事が10分になるわけじゃない。

最近「AIでここまで作れたら
デザイナーの仕事なくなる？」とよく聞かれる。

私は、なくなるというより
仕事の中身が変わると思ってます。

AIに任せる
・参考探し
・たたき台
・初期実装

人が時間を使う
・何を作るべきか考える
・良し悪しを判断する
・情報設計する
・細部を仕上げる

「作る時間」が短くなるほど
「考える・判断する時間」を増やせる。

AIで完成させるというより
AIで作業を減らして、人が本質に時間を使う。

今のところ、この使い方が一番しっくりきてます。

[Ryoka｜AIデザインツール開発 @revolvtech]

実際に約10分で作ったLPがこちら↓

「完成させる」じゃなく「たたき台を作る」にAIを使う
こういう使い方もありじゃないですか？🙂‍↕️

[Ryoka｜AIデザインツール開発 @revolvtech]

@shota_it いい感じの叩き台の作り方見つけちゃいました👀

[Ryoka｜AIデザインツール開発 @revolvtech]

これ、ChatGPTでデザインして
Codexに渡しただけで作ったLPです🔍

Figmaで1からデザインして
HTML/CSSを書いて…ではなく

① ChatGPTでLPデザインを作る
② Codexにそのまま渡す
③ 気になるところだけ修正

これだけで、ここまで形になった！

LP制作、どんどん簡単になってる…

1枚目が完成LP
2枚目が実際の制作フロー↓

[Ryoka｜AIデザインツール開発 @revolvtech]

@tech_pr_amb わー！ですよね！👀

[Ryoka｜AIデザインツール開発 @revolvtech]

@ko_________ei そうなんすよ！
細かい部分はまだ修正ひつようなので、
たたき台って感じです！

[Ryoka｜AIデザインツール開発 @revolvtech]

ボツ作品

ヴィーナスの誕生のはずが
クリオネ、召される😂

[Ryoka｜AIデザインツール開発 @revolvtech]

ペット飼ってる人、これ一回やってほしい☺️

「うちの子が もし世界の有名な絵だったら」

[Ryoka｜AIデザインツール開発 @revolvtech]

@33339999g 早送りで見にくくすみませんが💦

[Ryoka｜AIデザインツール開発 @revolvtech]

LPのたたき台をAIで爆速生成！
モンブランLP、約10分でここまで作れました！

Canvaで参考デザインを探す
↓
ChatGPT Images 2.5でLPデザイン生成
↓
Codexに渡して実装

※もちろん、このまま納品できる完成形ではありません

でも、
0→たたき台までを約10分で作れれば
レイアウトを組んで、実装のベースまで持っていく時間を一気に短縮できる。

AIに完成品を任せるというより
最初の「形にする」工程を爆速化する⚡️

実際の制作フローはこちら↓

[Ryoka｜AIデザインツール開発 @revolvtech]

@33339999g コメントありがとうございます♪

生成画像と「この画像をhtmlにして、アニメーションつけて」みたいなこと伝えています！

投稿した動画はカットなしの具体的なやり方を載せているのでそれみてもらえればわかるかと！！

不明点あれば教えてください〜

[Ryoka｜AIデザインツール開発 @revolvtech]

添付したペット写真を参考に、この子を有名な名画の主人公として描いてください。
重要なのは、元写真のペットをそのまま切り抜いて名画の上に貼り付けたような表現にしないことです。
ペットの顔・毛・体・輪郭・光・影・色味まで、すべて元の名画の画材、筆致、質感、光源、空気感に合わせて描き直してください。
「写真のペット＋絵画の背景」ではなく、
もし画家本人がこのペットをモデルに、その名画を最初から描いていたらどうなるか
という完成形にしてください。
元写真から残すのは、この子の
・顔立ち
・目や鼻の形
・毛色と模様
・耳の形
・体格
・表情
・2匹の場合はそれぞれの位置関係や距離感
です。
ただし、毛並みや輪郭を写真のように写実的に残しすぎず、元の名画と同じ筆致で再解釈してください。
ペットの輪郭だけが背景から浮かないように、
・光源
・影
・色温度
・コントラスト
・彩度
・エッジの柔らかさ
・絵の具の厚み
・キャンバスの質感
を画面全体で統一してください。
主人公の体も、元の名画の衣装・布・装飾・ポーズ・構図の一部として自然に組み込んでください。
ペットの体の上に衣装を後付けするのではなく、毛と衣装が同じ絵画世界の中で一体化して見えるように描いてください。
元の名画の象徴的な構図、背景、配色、光、筆致、質感はしっかり残し、完成画像を見た瞬間に元ネタが分かるようにしてください。
写真感、コラージュ感、切り抜き感、合成感は完全になくしてください。
AI画像っぽいツルツルした質感も避け、実際の油彩画・テンペラ画・壁画など、その作品本来の画材感を再現してください。
最終的には、「ペットの写真を名画に合成した画像」ではなく、「昔から存在していた本物の名画の主人公がこのペットだった」ように見える作品にしてください。

ペットだけを現代の高解像度写真風に描かないでください。ペットも背景も衣装も、同じ時代、同じ画家、同じ一枚の絵として描かれていることを最優先してください。

[Ryoka｜AIデザインツール開発 @revolvtech]

ペット飼ってる人、これ一回やってほしい☺️

「うちの子が もし世界の有名な絵だったら」

[Ryoka｜AIデザインツール開発 @revolvtech]

画像1枚投げるだけで、LPのたたき台が1発でこのクオリティ👀✨

ChatGPTにこの画像を渡す
↓
「この画像でLPを作って」と指示
↓
1発ポン出しでこの状態

色やレイアウトを細かく指示したわけではなく
AIが参考画像の特徴を読み取ってLP全体に展開

※もちろん、このまま納品できる完成形ではありません

でも、1枚のビジュアルから0→ここまで一気に作れるのが便利

ただここからがまた面倒で、
1箇所直すために再生成すると
他の部分まで変わってまた再生成して…

生成したデザインをその場で直接直して
ツールをまたがず完成まで持っていけたら最高。

と思って今そんなツールを開発中です🙂‍↕️

← 元画像｜1発ポン出ししたLP →

[Ryoka｜AIデザインツール開発 @revolvtech]

実際に約10分で作ったLPがこちら↓

もちろん完成形ではないけど
たたき台としてはここまで作れる。

0→1をAIに任せられるの、かなり助かる

[Ryoka｜AIデザインツール開発 @revolvtech]

LPのたたき台、約10分でここまで作れます👀

Canvaで参考デザインを探す
↓
ChatGPT Images 2.5でLPデザイン生成
↓
Codexに渡して実装

もちろん、このまま納品できる完成形ではありません

でも、0→ここまでを約10分で作れるのが便利

浮いた時間で
情報設計・余白・文字・レスポンシブ・細部を詰める。

AIで「完成させる」というより最初の「形にする」時間を一気に短縮する

実際の制作フローはこちら↓

[Ryoka｜AIデザインツール開発 @revolvtech]

私の「こだわり」を生き物にした結果…

キラカードになった！笑
ちゃんと私の要素拾ってるのじわる😹

[Ryoka｜AIデザインツール開発 @revolvtech]

ChatGPTにコレ送ってみて。

【今までの私との会話をもとに、
私の「こだわり」を
リアルな生き物にしてください。

性格・好きなもの・行動・美意識などから
実在していそうな新種の生き物を考え、
ポケモンカード風に描いてください。

カードには
「性格」「習性」「この姿になった理由」「こだわりの技」を入れてください。】