KAWAI

@kawai_design • 42,339 subscribers

AIの情報をわかりやすく毎日発信中｜セミナー登壇・動画出演75回以上、法人AI研修6社｜著書『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 просмотров

🔰初心者向けに 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 が "数分" で「オリジナルラジオ」生成 NotebookLM で音声を生成できるようになりました。早速試したところ、驚くほど自然な会話が生成されました。実験的にVoicyに投稿したので、ぜひ聴いてみてください。リプからすぐに全編聴けます。

AI が "数分" で「オリジナルラジオ」生成 NotebookLM で音声を生成できるようになりました。早速試したところ、驚くほど自然な会話が生成されました。実験的にVoicyに投稿したので、ぜひ聴いてみてください。リプからすぐに全編聴けます。

95,500 просмотров

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

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

87,800 просмотров

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

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

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

136,598 просмотров • 10 дней назад

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

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

190,027 просмотров • 3 месяцев назад

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

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

169,819 просмотров • 3 месяцев назад

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

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

121,894 просмотров • 3 месяцев назад

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

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

182,291 просмотров • 6 месяцев назад

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

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

145,052 просмотров • 4 месяцев назад

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

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

78,718 просмотров • 2 месяцев назад

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

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

215,810 просмотров • 8 месяцев назад

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

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

126,777 просмотров • 8 месяцев назад

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

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

63,733 просмотров • 4 месяцев назад

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 просмотров • 7 месяцев назад

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

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

54,550 просмотров • 4 месяцев назад

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

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

31,227 просмотров • 2 месяцев назад

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 просмотров • 2 месяцев назад

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

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

47,715 просмотров • 5 месяцев назад

WebサイトやUIを作る人はGoogleから新しく出た「Stitch」を使った方が良い 100文字程度の入力（リプ参照）でこのサイトが生成されます。右上のボタンから色やフォントなどの変更も可能。コードとFigmaのコピペもできるので、叩き台フェーズの工数が大幅に削減できます。

WebサイトやUIを作る人はGoogleから新しく出た「Stitch」を使った方が良い 100文字程度の入力（リプ参照）でこのサイトが生成されます。右上のボタンから色やフォントなどの変更も可能。コードとFigmaのコピペもできるので、叩き台フェーズの工数が大幅に削減できます。

83,014 просмотров • 1 год назад

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

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

123,904 просмотров • 1 год назад

あのデザインを指定したいんだけど何てプロンプトを書けば良いんだ？その悩みは「PhotoshopVIP」さんの記事が解決してくれます。人気のスタイルが40種類掲載されているので、眺めているだけでも楽しい。スタイル名が分かれば、プロンプトも明快になります。どのスタイルが好みですか？

あのデザインを指定したいんだけど何てプロンプトを書けば良いんだ？その悩みは「PhotoshopVIP」さんの記事が解決してくれます。人気のスタイルが40種類掲載されているので、眺めているだけでも楽しい。スタイル名が分かれば、プロンプトも明快になります。どのスタイルが好みですか？

77,844 просмотров • 1 год назад

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

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

81,908 просмотров • 1 год назад

Googleの「Deep Research」が調査結果をWebページに変換可能にコードの編集・コピーもできます

Googleの「Deep Research」が調査結果をWebページに変換可能にコードの編集・コピーもできます

64,136 просмотров • 1 год назад