KAWAI

@kawai_design • 44,158 subscribers

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

Shorts

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

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

46,115 görüntüleme

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

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

294,769 görüntüleme

気づいたら、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 görüntüleme

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

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

42,025 görüntüleme

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 görüntüleme

他のデバイスで、画面がどう見えるかを確認できるChrome拡張機能が便利。1クリックすれば、開いている画面をチェックできます。Chromeをお使いの方は↓からすぐに機能追加できます。

他のデバイスで、画面がどう見えるかを確認できるChrome拡張機能が便利。1クリックすれば、開いている画面をチェックできます。Chromeをお使いの方は↓からすぐに機能追加できます。

87,800 görüntüleme

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

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

30,471 görüntüleme

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

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をお送りします。

38,746 görüntüleme • 6 gün önce

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

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

250,336 görüntüleme • 1 ay önce

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

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

140,161 görüntüleme • 1 ay önce

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

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

48,722 görüntüleme • 23 gün önce

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

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

190,795 görüntüleme • 5 ay önce

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

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

170,860 görüntüleme • 5 ay önce

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

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

182,291 görüntüleme • 7 ay önce

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

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

215,810 görüntüleme • 9 ay önce

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

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

146,223 görüntüleme • 6 ay önce

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

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

122,268 görüntüleme • 5 ay önce

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

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

78,718 görüntüleme • 3 ay önce

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

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

126,861 görüntüleme • 9 ay önce

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

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

63,733 görüntüleme • 5 ay önce

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 görüntüleme • 9 ay önce

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

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

54,550 görüntüleme • 6 ay önce

どのAI使ったら良いの？という質問は、もうしない方が良い... なぜなら、Gensparkを知らないことがバレるからです。 Gensparkのチャットなら、プロンプトに応じて一番良い出力になるモデルを選んでくれます。自分は「どのモデルにしようかな？」と考える必要はありません。タブを切り替えて、複数のAIを試す手間もなくなります。使うAIすらもAIが選択する。私たちは、「何を問うか？」を考える時間を大事にしましょう。

どのAI使ったら良いの？という質問は、もうしない方が良い... なぜなら、Gensparkを知らないことがバレるからです。 Gensparkのチャットなら、プロンプトに応じて一番良い出力になるモデルを選んでくれます。自分は「どのモデルにしようかな？」と考える必要はありません。タブを切り替えて、複数のAIを試す手間もなくなります。使うAIすらもAIが選択する。私たちは、「何を問うか？」を考える時間を大事にしましょう。

47,715 görüntüleme • 7 ay önce

825個の画像生成プロンプトを閲覧・コピペできるWebサイト少しずつ、画像反映していっています。もしシェアして欲しい方がいればリポストいただけると嬉しいです。優先順位と、私のやる気が上がります⚡️ 要するに、みんなの反応が「元気玉」です。

825個の画像生成プロンプトを閲覧・コピペできるWebサイト少しずつ、画像反映していっています。もしシェアして欲しい方がいればリポストいただけると嬉しいです。優先順位と、私のやる気が上がります⚡️ 要するに、みんなの反応が「元気玉」です。

31,381 görüntüleme • 4 ay önce

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

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

123,967 görüntüleme • 2 yıl önce

Codexを使いたい人へ。日本語ガイドを更新しました。 5/10時点の公式情報と手元のcodex-cli 0.130.0を確認して、 ✅ CLIコマンド ✅ 設定 ✅ MCP / Plugins ✅ Skills ✅ Codex Cloud ✅ GPT-5.3-Codex ✅ rate card を1サイトに整理しました。公式docsだけだと追いにくい人向けです。保存用にどうぞ。ヘッダーからClaude Code版にもアクセスできます。 🔽 Webサイトはこちら

Codexを使いたい人へ。日本語ガイドを更新しました。 5/10時点の公式情報と手元のcodex-cli 0.130.0を確認して、 ✅ CLIコマンド ✅ 設定 ✅ MCP / Plugins ✅ Skills ✅ Codex Cloud ✅ GPT-5.3-Codex ✅ rate card を1サイトに整理しました。公式docsだけだと追いにくい人向けです。保存用にどうぞ。ヘッダーからClaude Code版にもアクセスできます。 🔽 Webサイトはこちら

25,040 görüntüleme • 3 ay önce