KAWAI

@kawai_design • 44,950 subscribers

AIの情報をわかりやすく毎日発信中｜セミナー登壇・動画出演80回以上、法人AI研修8社｜著書『AIでゼロからデザイン』重版｜Google画像生成プロンプト監修｜SHIFT AI デザイン部長/講師｜ベイジ AIデザイン顧問｜NewsPicksトピックスオーナー｜Voicy｜デザイナー歴14年｜ご相談はWebサイトへ

Shorts

【新情報】 Google AI Studio からアプリをデプロイ可能に手順は簡単で、3STEPのみ 1. Build ボタンを押す 2. 作りたいアプリを入力 3. 右上のロケットアイコンを押す

【新情報】 Google AI Studio からアプリをデプロイ可能に手順は簡単で、3STEPのみ 1. Build ボタンを押す 2. 作りたいアプリを入力 3. 右上のロケットアイコンを押す

294,769 次观看

Gemini Omni を試しました！サービス紹介動画が2~3分で完成😳 プロンプトはリプに掲載します。

Gemini Omni を試しました！サービス紹介動画が2~3分で完成😳 プロンプトはリプに掲載します。

46,115 次观看

AIで作ったスライドが、こちら。明日、この作り方をお話しします。資料づくりを速くするコツは、 AIに渡す「4つの材料」を揃えること。・コンテンツ：何を伝えるか・アセット：ロゴや写真などの素材・スタイル：レイアウトや見た目のルール・プロンプト：それらをまとめた指示素材と見た目を先に決めておけば、次の資料でも使い回せます。文字はHTML、絵は画像生成。添付のスライドも、この組み合わせです。明日のウェビナーでは、この資料そのものを題材に、準備から仕上げまでお話しします。 9/5（土）11:00〜11:50 「仕事が速くなる！AI資料作成術」オンライン・リアルタイム視聴無料。資料づくりに時間がかかっている方、ぜひご一緒しましょう。参加リンクはリプライに記載します。

AIで作ったスライドが、こちら。明日、この作り方をお話しします。資料づくりを速くするコツは、 AIに渡す「4つの材料」を揃えること。・コンテンツ：何を伝えるか・アセット：ロゴや写真などの素材・スタイル：レイアウトや見た目のルール・プロンプト：それらをまとめた指示素材と見た目を先に決めておけば、次の資料でも使い回せます。文字はHTML、絵は画像生成。添付のスライドも、この組み合わせです。明日のウェビナーでは、この資料そのものを題材に、準備から仕上げまでお話しします。 9/5（土）11:00〜11:50 「仕事が速くなる！AI資料作成術」オンライン・リアルタイム視聴無料。資料づくりに時間がかかっている方、ぜひご一緒しましょう。参加リンクはリプライに記載します。

18,007 次观看

気づいたら、Webアプリを 20個以上つくっていました💡 1つ以外、無料公開中。 ✅ 画像生成プロンプト作成 ✅ コピーライティング ✅ 配色数値化・提案 ✅ CSV確認・編集 ✅ Markdown 変換 ✅ UIデザイン / Vibe Coding辞典 ✅ Claude Code / Codexの用語集などなど。「毎回ググる」「作業前で迷う」を減らすための小さな道具箱です。全部このページにまとめました。気になるものから使ってみてください😊 Webサイトはこちら

気づいたら、Webアプリを 20個以上つくっていました💡 1つ以外、無料公開中。 ✅ 画像生成プロンプト作成 ✅ コピーライティング ✅ 配色数値化・提案 ✅ CSV確認・編集 ✅ Markdown 変換 ✅ UIデザイン / Vibe Coding辞典 ✅ Claude Code / Codexの用語集などなど。「毎回ググる」「作業前で迷う」を減らすための小さな道具箱です。全部このページにまとめました。気になるものから使ってみてください😊 Webサイトはこちら

35,051 次观看

🔰初心者向けに Claude Code の「始め方」から「コマンド」などをまとめたWebサイトを作りました。公式ドキュメントから情報を収集し、確実かつ読みやすいサイトにしています。ぜひ、眺めるところから、始めてみてください😄

🔰初心者向けに Claude Code の「始め方」から「コマンド」などをまとめたWebサイトを作りました。公式ドキュメントから情報を収集し、確実かつ読みやすいサイトにしています。ぜひ、眺めるところから、始めてみてください😄

42,025 次观看

Google Antigravity に note を投稿してもらう実験 → 成功👍 Antigravity が専用ブラウザを立ち上げ、note 記事を執筆、タグ付け、投稿までを実施しました。私がやったのは「承認」と「ログイン」だけ。 1記事なら自分でやった方が早いですが、同時に何記事も投稿したいケース（あまり良ろしくないケース？）はAIにやってもらうと効率化できます。 Antigravity はPCもブラウザも操作し、定期タスクも可能（with Pythonコード）。2025年はAIエージェントの年、2026年はマルチエージェント・スキルの年。自分は「志」や「思想」「哲学」を考える時間が増えます。

Google Antigravity に note を投稿してもらう実験 → 成功👍 Antigravity が専用ブラウザを立ち上げ、note 記事を執筆、タグ付け、投稿までを実施しました。私がやったのは「承認」と「ログイン」だけ。 1記事なら自分でやった方が早いですが、同時に何記事も投稿したいケース（あまり良ろしくないケース？）はAIにやってもらうと効率化できます。 Antigravity はPCもブラウザも操作し、定期タスクも可能（with Pythonコード）。2025年はAIエージェントの年、2026年はマルチエージェント・スキルの年。自分は「志」や「思想」「哲学」を考える時間が増えます。

44,823 次观看

AI で作ったデザインは「ここ直したい」ができない... これがAIデザインツール最大の欠点でした。キャッチコピー1文字変えるだけでプロンプトを何百回も回し直す。偶然、前と同じ構図が出るのを祈るだけ。その常識を壊すツール「Moda」が登場しました。 AIが生成するのは「1枚の画像」じゃなく、Adobe Photoshopのような「編集可能なレイヤー構造」。テキストの打ち替え、ロゴの色変更、写真の位置調整。全部、生成後に自由に触れます。つまりAIの役割が変わった。「完成品メーカー」→「有能なアシスタント」。最後の10%は人間がディレクションする時代です。実際に触ってみた感想、リプ欄に記事を貼りました。

AI で作ったデザインは「ここ直したい」ができない... これがAIデザインツール最大の欠点でした。キャッチコピー1文字変えるだけでプロンプトを何百回も回し直す。偶然、前と同じ構図が出るのを祈るだけ。その常識を壊すツール「Moda」が登場しました。 AIが生成するのは「1枚の画像」じゃなく、Adobe Photoshopのような「編集可能なレイヤー構造」。テキストの打ち替え、ロゴの色変更、写真の位置調整。全部、生成後に自由に触れます。つまりAIの役割が変わった。「完成品メーカー」→「有能なアシスタント」。最後の10%は人間がディレクションする時代です。実際に触ってみた感想、リプ欄に記事を貼りました。

30,471 次观看

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Webサイトにアニメーションを付けたいけど AI にどう指示をすれば良いか分からないそんな時に便利なのが「Animista」動作・名称・コードがパパっと確認できるので、コピーしてプロンプト欄にペーストするだけです。見ているだけでも楽しい。

Webサイトにアニメーションを付けたいけど AI にどう指示をすれば良いか分からないそんな時に便利なのが「Animista」動作・名称・コードがパパっと確認できるので、コピーしてプロンプト欄にペーストするだけです。見ているだけでも楽しい。

145,025 次观看 • 1 个月前

Fableに「Skills社員紹介ページ」をブラッシュアップしてもらいました。進化させすぎ（笑）

Fableに「Skills社員紹介ページ」をブラッシュアップしてもらいました。進化させすぎ（笑）

250,336 次观看 • 3 个月前

Claude Codeを使っていて、「あのコマンド、なんだっけ？」で手が止まる人へ。機能名から探すのではなく、やりたいことから検索できる Webサイトを作りました。 🟧「PRを直したい」 🟧「権限確認を減らしたい」 🟧「別端末で続けたい」 164項目、87コマンド系。検索、分類、詳細つき。 Claude Codeを実務で使う人向けです。サイトURLは後ほどスレッドで共有します。

Claude Codeを使っていて、「あのコマンド、なんだっけ？」で手が止まる人へ。機能名から探すのではなく、やりたいことから検索できる Webサイトを作りました。 🟧「PRを直したい」 🟧「権限確認を減らしたい」 🟧「別端末で続けたい」 164項目、87コマンド系。検索、分類、詳細つき。 Claude Codeを実務で使う人向けです。サイトURLは後ほどスレッドで共有します。

140,161 次观看 • 3 个月前

Webサイトの構成を選べる辞典 136種類、プロンプト付きで作りました。ファーストビューから料金表まで、セクション単位で見比べられます。・写真と文章を左右に配置する構成・3つの料金プランを並べる構成・メッセージを1カラムで伝える構成気になる例を開くと、 HTMLと生成プロンプトをコピー可能。プロンプトの会社名やサービス名を変え、 AIに渡せばサイト制作の出発点に。 HTMLを編集して使うこともできます。「どんな配置にするか」を、実物を見ながら決めたいときに。サイトのリンクを欲しい方はコメントで教えてください。 DMでお送りさせていただきます。

Webサイトの構成を選べる辞典 136種類、プロンプト付きで作りました。ファーストビューから料金表まで、セクション単位で見比べられます。・写真と文章を左右に配置する構成・3つの料金プランを並べる構成・メッセージを1カラムで伝える構成気になる例を開くと、 HTMLと生成プロンプトをコピー可能。プロンプトの会社名やサービス名を変え、 AIに渡せばサイト制作の出発点に。 HTMLを編集して使うこともできます。「どんな配置にするか」を、実物を見ながら決めたいときに。サイトのリンクを欲しい方はコメントで教えてください。 DMでお送りさせていただきます。

39,016 次观看 • 1 个月前

UIデザインにこだわりたい人は無料で読めるこのガイドを読もう。 Apple が公開している「ヒューマンインターフェイスガイドライン」がボリューム満点かつ美しい画面でUIデザインを学ぶことができます。 AIの生成が何だかイマイチ、と感じた瞬間はチャンス。このガイドを活用してブラッシュアップできるかもしれません。いきなり生成される前に、まずは眺めてみるだけでも楽しいです。

UIデザインにこだわりたい人は無料で読めるこのガイドを読もう。 Apple が公開している「ヒューマンインターフェイスガイドライン」がボリューム満点かつ美しい画面でUIデザインを学ぶことができます。 AIの生成が何だかイマイチ、と感じた瞬間はチャンス。このガイドを活用してブラッシュアップできるかもしれません。いきなり生成される前に、まずは眺めてみるだけでも楽しいです。

58,821 次观看 • 1 个月前

Claude Code × Vibe Codingで「それ何て言えばいい？」をゼロにする用語集を作りました AIにWebサイトを作ってもらうとき、地味に困るのが「パーツの名前がわからない」問題。ヒーロー、モーダル、ブレッドクラム… 名前を知ってるだけでAIへの指示精度が段違いに変わります。この用語集では ✅パーツ名/スタイル/インタラクションを網羅 ✅各用語に「AIへの指示例」付き ✅ビジュアルUI図鑑で実際の配置も確認できる Vibe Codingの語彙力、ここで一気に上げてください。 🔽 用語集はこちら

Claude Code × Vibe Codingで「それ何て言えばいい？」をゼロにする用語集を作りました AIにWebサイトを作ってもらうとき、地味に困るのが「パーツの名前がわからない」問題。ヒーロー、モーダル、ブレッドクラム… 名前を知ってるだけでAIへの指示精度が段違いに変わります。この用語集では ✅パーツ名/スタイル/インタラクションを網羅 ✅各用語に「AIへの指示例」付き ✅ビジュアルUI図鑑で実際の配置も確認できる Vibe Codingの語彙力、ここで一気に上げてください。 🔽 用語集はこちら

191,027 次观看 • 7 个月前

UIデザインパターンを全部1ページにまとめた辞典サイトを作りました！ハンバーガーメニュー、カンバン、OTP入力、ボトムシート…108種のUIパターンを「名称 × ミニチュア実物」で一覧できます。「あのUI、名前なんだっけ？」そんな疑問が一発で解決します。検索・カテゴリ別表示・詳細モーダル付き 🔽 Webサイトはこちら

UIデザインパターンを全部1ページにまとめた辞典サイトを作りました！ハンバーガーメニュー、カンバン、OTP入力、ボトムシート…108種のUIパターンを「名称 × ミニチュア実物」で一覧できます。「あのUI、名前なんだっけ？」そんな疑問が一発で解決します。検索・カテゴリ別表示・詳細モーダル付き 🔽 Webサイトはこちら

171,431 次观看 • 6 个月前

Google Gemini 3 で１発生成した「Webサイト」 ※ プロンプトはリプに掲載コーポレートサイトのテンプレートを生成しました。ビジネスや信頼感を印象付けるしっかりとした表層デザイン。これが数分で生成できてしまうことに驚きです。

Google Gemini 3 で１発生成した「Webサイト」 ※ プロンプトはリプに掲載コーポレートサイトのテンプレートを生成しました。ビジネスや信頼感を印象付けるしっかりとした表層デザイン。これが数分で生成できてしまうことに驚きです。

215,810 次观看 • 11 个月前

「Nano Banana Pro」で生成したサムネイルのギャラリーサイトをGoogleの「Antigravity」で生成しました。 "これができるなら、あれもできるのでは？"というアイデアが溢れてきます。やはり、考え込む前に、行動するのが吉。行動しないと、思考も豊かにならない。とにかく作る、試す。

「Nano Banana Pro」で生成したサムネイルのギャラリーサイトをGoogleの「Antigravity」で生成しました。 "これができるなら、あれもできるのでは？"というアイデアが溢れてきます。やはり、考え込む前に、行動するのが吉。行動しないと、思考も豊かにならない。とにかく作る、試す。

182,291 次观看 • 9 个月前

学びたいことが増えるほど、教材代も増える... その常識を変えたくて、 0円カワイ大学をオープンしました。 AI、デザイン、コピーライティング、マーケティング、人間理解など、仕事に必要な最低限の知識を、すべて完全無料で学べる大学を目指しています。チュートリアル機能もあるので、何から読めばいいかわからない人も、すぐに使い始められます。ログイン不要で、完全無料です。マイページで学習進捗を管理したい方は、無料会員登録がおすすめです。現在は無料提供を続ける予定ですが、利用者が増えた場合は、運営状況に応じて提供方法や条件を見直す可能性があります。マイページを使いたい方は、早めの登録がおすすめです。現在は20記事。まだ始まったばかりなので、読んでみて「このテーマも知りたい」と思ったら、ぜひコメントで教えてください。内容を増やしていきます。サイトを見たい方は、コメントに「欲しい」と書いてください。 URLをお送りします。

学びたいことが増えるほど、教材代も増える... その常識を変えたくて、 0円カワイ大学をオープンしました。 AI、デザイン、コピーライティング、マーケティング、人間理解など、仕事に必要な最低限の知識を、すべて完全無料で学べる大学を目指しています。チュートリアル機能もあるので、何から読めばいいかわからない人も、すぐに使い始められます。ログイン不要で、完全無料です。マイページで学習進捗を管理したい方は、無料会員登録がおすすめです。現在は無料提供を続ける予定ですが、利用者が増えた場合は、運営状況に応じて提供方法や条件を見直す可能性があります。マイページを使いたい方は、早めの登録がおすすめです。現在は20記事。まだ始まったばかりなので、読んでみて「このテーマも知りたい」と思ったら、ぜひコメントで教えてください。内容を増やしていきます。サイトを見たい方は、コメントに「欲しい」と書いてください。 URLをお送りします。

55,443 次观看 • 2 个月前

【文字のアニメーション100選】 Webサイトに動きが欲しい。でも、何て指示すれば良いの？そんな疑問を解決するサイトを作りました。アニメーション名・デモ・コードコピーを100個掲載しています。もうアニメーションを指示する際に迷うことはなくなると思います。（100個から1個を選ぶ大変さはあるかもw）私の公式サイト（プロフィールに記載）のToolページに追加予定。ぜひブックマークをしてお待ちいただけると幸いです。お楽しみに。（今後も続々とちょっと便利なサイトを公開していきます🧰）

【文字のアニメーション100選】 Webサイトに動きが欲しい。でも、何て指示すれば良いの？そんな疑問を解決するサイトを作りました。アニメーション名・デモ・コードコピーを100個掲載しています。もうアニメーションを指示する際に迷うことはなくなると思います。（100個から1個を選ぶ大変さはあるかもw）私の公式サイト（プロフィールに記載）のToolページに追加予定。ぜひブックマークをしてお待ちいただけると幸いです。お楽しみに。（今後も続々とちょっと便利なサイトを公開していきます🧰）

146,223 次观看 • 7 个月前

AIに動きをつけてもらうと、動くのに「なんか安っぽい」で止まる。 CSSアニメーション130種を、動く実物とコードで一覧にしました。たとえば、オーロラメッシュ、グリッチ文字。スクロール駆動リビール、3Dカルーセル。各項目に「AI」タブがあります。 HTML、CSS、対応ブラウザ、描画コスト、 reduced-motion（動きを控える設定）への対応まで、1回のコピーで AIへそのまま渡せます。「安っぽい」の正体は、派手さ不足ではありません。軽さと配慮の指定漏れです。使ってみたい人はコメントしてください。 DMでURLをお送りします。

AIに動きをつけてもらうと、動くのに「なんか安っぽい」で止まる。 CSSアニメーション130種を、動く実物とコードで一覧にしました。たとえば、オーロラメッシュ、グリッチ文字。スクロール駆動リビール、3Dカルーセル。各項目に「AI」タブがあります。 HTML、CSS、対応ブラウザ、描画コスト、 reduced-motion（動きを控える設定）への対応まで、1回のコピーで AIへそのまま渡せます。「安っぽい」の正体は、派手さ不足ではありません。軽さと配慮の指定漏れです。使ってみたい人はコメントしてください。 DMでURLをお送りします。

40,217 次观看 • 1 个月前

Claude Codeを使っていて、「あのコマンド、なんだっけ？」と手が止まる瞬間、ありませんか。スラッシュコマンド、CLIオプション、ツール、フック、MCP、キーボードショートカット。 10カテゴリ、100以上の全機能を検索できる辞書サイトを作りました。もちろん、日本語対応。リアルタイム検索で一発で見つかります。使いどころ・具体例・Tipsも載せたので、「存在は知ってるけど使い方がわからない」も解消できるはずです。定期的に更新しますね。無料です。ブックマークしておくと捗ります。

Claude Codeを使っていて、「あのコマンド、なんだっけ？」と手が止まる瞬間、ありませんか。スラッシュコマンド、CLIオプション、ツール、フック、MCP、キーボードショートカット。 10カテゴリ、100以上の全機能を検索できる辞書サイトを作りました。もちろん、日本語対応。リアルタイム検索で一発で見つかります。使いどころ・具体例・Tipsも載せたので、「存在は知ってるけど使い方がわからない」も解消できるはずです。定期的に更新しますね。無料です。ブックマークしておくと捗ります。

122,441 次观看 • 6 个月前

「配色が苦手」は、色を知らないだけです。センスの問題ではありません。良い配色を見た回数と、それを使える形で持っているかの差です。ポケモンはなぜ愛されるのか。そう考え続けていたら、配色のルールが見えてきました。どのキャラクターも、メインカラーとアクセントカラーのバランスが徹底されています。これはサムネイル、広告、Webサイト、スライドにもそのまま活かせます。ポケモン151体の配色をメイン・ベース・アクセントで一覧できるサイトを作りました。気に入った色はクリックでコピーできます。 Webサイトはこちら

「配色が苦手」は、色を知らないだけです。センスの問題ではありません。良い配色を見た回数と、それを使える形で持っているかの差です。ポケモンはなぜ愛されるのか。そう考え続けていたら、配色のルールが見えてきました。どのキャラクターも、メインカラーとアクセントカラーのバランスが徹底されています。これはサムネイル、広告、Webサイト、スライドにもそのまま活かせます。ポケモン151体の配色をメイン・ベース・アクセントで一覧できるサイトを作りました。気に入った色はクリックでコピーできます。 Webサイトはこちら

78,718 次观看 • 5 个月前

Google 最新AI「Gemini 3」でサクッとWebサイトを生成短いプロンプトでモダンな印象の表層デザインになりました。 ※ プロンプトはリプに掲載

Google 最新AI「Gemini 3」でサクッとWebサイトを生成短いプロンプトでモダンな印象の表層デザインになりました。 ※ プロンプトはリプに掲載

126,861 次观看 • 11 个月前

AI で「UIデザイン」する人必見【新機能】Google Stitch 「ideate」をご紹介します。これは「解決したいことを入力すると、解決策を提示する」機能です。細かい指示は不要そうなので今回は「日本市場で企業の採用を加速させたい」と入力しました。すると、Webサイトの構成案を 3つ提示してきました。全て生成するよう依頼したところ、 3サイト × 4ページを生成。 AI時代、「今まで以上に要件定義に時間を充てることが大事」だと改めて感じました。 ※動画の生成フェーズは10倍速です。

AI で「UIデザイン」する人必見【新機能】Google Stitch 「ideate」をご紹介します。これは「解決したいことを入力すると、解決策を提示する」機能です。細かい指示は不要そうなので今回は「日本市場で企業の採用を加速させたい」と入力しました。すると、Webサイトの構成案を 3つ提示してきました。全て生成するよう依頼したところ、 3サイト × 4ページを生成。 AI時代、「今まで以上に要件定義に時間を充てることが大事」だと改めて感じました。 ※動画の生成フェーズは10倍速です。

63,733 次观看 • 7 个月前

Gemini 3 Canvas を超える使いやすさ Google Stitch が Figma を代替するかも？ 🔽 プロンプトはリプに掲載このWebサイト3ページは、1度の指示で生成されました。コードのコピー、色のテーマ変更（動画終盤で実行）も可能です。修正内容によっては、日本語で指示するよりも楽な場合もあります。さらに驚きなのが、1クリックで「Google AI Studio」「Jules」にエクスポートできます。UIデザインが数分で動作するアプリケーションに変換される。Webサイト、アプリケーションUIデザインの制作プロセスの革命か。

Gemini 3 Canvas を超える使いやすさ Google Stitch が Figma を代替するかも？ 🔽 プロンプトはリプに掲載このWebサイト3ページは、1度の指示で生成されました。コードのコピー、色のテーマ変更（動画終盤で実行）も可能です。修正内容によっては、日本語で指示するよりも楽な場合もあります。さらに驚きなのが、1クリックで「Google AI Studio」「Jules」にエクスポートできます。UIデザインが数分で動作するアプリケーションに変換される。Webサイト、アプリケーションUIデザインの制作プロセスの革命か。

82,674 次观看 • 11 个月前

次世代のストックフォトサービス「／Studio.Stock」がすごい無料・商用利用可能とは思えない品質の写真がズラーっと並んでいます。色合いやポーズをプロンプトで変更可能これは新しい形のサービスですね。

次世代のストックフォトサービス「／Studio.Stock」がすごい無料・商用利用可能とは思えない品質の写真がズラーっと並んでいます。色合いやポーズをプロンプトで変更可能これは新しい形のサービスですね。

74,031 次观看 • 11 个月前

＼にゃーにゃーにゃー／プロンプトCOLLECTION 222個の画像生成プロンプトを " 無料公開したWebサイト " おーぷんどなたでもアクセスできます。気に入ったスタイルをコピーしてお好きなAIで生成してみてください😺 AI × クリエイションで、猫の日を楽しく過ごそう🐾

＼にゃーにゃーにゃー／プロンプトCOLLECTION 222個の画像生成プロンプトを " 無料公開したWebサイト " おーぷんどなたでもアクセスできます。気に入ったスタイルをコピーしてお好きなAIで生成してみてください😺 AI × クリエイションで、猫の日を楽しく過ごそう🐾

54,550 次观看 • 8 个月前

Webサイトにアニメーションを付けたいときは「Animista」というサイトを見ています。動作・設定・コードを簡単に見れます。AIを活用する際も、自然言語で意図通りにならないときはアニメーションの名前かコードを渡せば効率化できる。リプに貼ったので、息抜きに見てみてください。

Webサイトにアニメーションを付けたいときは「Animista」というサイトを見ています。動作・設定・コードを簡単に見れます。AIを活用する際も、自然言語で意図通りにならないときはアニメーションの名前かコードを渡せば効率化できる。リプに貼ったので、息抜きに見てみてください。

123,967 次观看 • 2 年前