ジェイ | Designer @KADOKAWA Group

ドワンゴ兼KADOKAWAのデザイナー統括。N予備校 Webデザイン授業のカリキュラム制作。バンタン講師も担当。元LIGの初代広報。|

[Himanshu Hingorani @himanshubuildss]

Your AI isn't bad at design. It has just never seen good design.

I've tested 100+ vibe coding resources this year. These are the 40 I actually kept, grouped by what you're stuck on.

Bookmark this 🔖

1. 👑 https://t.co/RlChWqggj8
Why it's different from everything below:
- Every one is a complete prompt, not a snippet you wire up yourself
- 3 steps: copy the prompt, paste it into your AI, launch it live
- 300+ award-winning prompts, all in one place
- Full source code to download and edit
- Works with Claude Code, Cursor or v0
Built for founders and freelancers who want award-level sites without a design team or a week of tweaking. If you only open one link in this post, make it this one.

2. https://t.co/zii2nKAKiq - design systems as markdown your agent can read
3. https://t.co/mHD5eSDPKY - ready-made prompts for dashboards and landing pages
4. https://t.co/iRLY9tbhpW - curated high-end sites
5. https://t.co/hOf1AxeaT7 - real UI inspiration mapped to prompts
6. https://t.co/bhB2GfGIix - 2,000+ real product styles with typography
7. https://t.co/ZNFmqbqGsp - 2,600+ examples of how top design systems solve the same element
8. https://t.co/9FlWM4hqJb - curated collection of beautiful websites
9. https://t.co/qeCSncdyPP - the best of web design, recognized and ranked
10. https://t.co/X4Y6aj4wjS - showcase of the best animation websites
11. https://t.co/0HVARfCzo4 - curated landing pages
12. https://t.co/wl4RgkJCgh - mobile design patterns
13. https://t.co/qA4B0mmprH - experimental web design projects
14. https://t.co/75zV2ioDNu - navigation patterns
15. https://t.co/XPn2VgZBdJ - footer layouts
16. https://t.co/NDaj9DThhe - conversion-tested forms, popups and buttons
17. https://t.co/TXT88wdEv5 - curated hero sections
18. https://t.co/3BKI45pK93 - the best pricing page examples
19. https://t.co/p6pXo8hFRn - community component marketplace that plugs into agents via MCP
20. https://t.co/vUKwdPK1IN - still the gold standard
21. https://t.co/nxASYyVHLH - 200+ animated React and Tailwind components
22. https://t.co/E2oLbxcBP3 - 150+ animated components and effects
23. https://t.co/MIhQHgyUPK - advanced interactions
24. https://t.co/9G9JFLtNIg - open-source UI elements
25. https://t.co/hLskTa9FXY - animated components built on Motion and GSAP
26. https://t.co/3YKB8hgUEp - 2,000+ pre-built section blocks for shadcn/ui
27. https://t.co/NvM0Wbm3rN - 150+ motion effects with React code and prompts
28. https://t.co/iFJCleZZpJ - micro-interactions
29. https://t.co/cP8YFdb7cr - glass refraction components
30. https://t.co/knFchyx5GQ - lightweight animation engine
31. https://t.co/yKODSqvV3k - the most popular web 3D library
32. https://t.co/u7On2CIuL1 - the standard online shader editor and community
33. https://t.co/K1fLsfOmhQ - free interactive intro to fragment shaders
34. https://t.co/nk12i7IbXV - full Three.js course with shader chapters
35. https://t.co/L7sX9ESVJE - 2,000+ hand-drawn illustrations
36. https://t.co/BfrrSJOQVY - 3D icons
37. https://t.co/7kTs2GnyG2 - command-line AI coding agent
38. https://t.co/nfft1euNlN - AI-first code editor
39. https://t.co/uSGcKdT9hN - Vercel's prompt-to-component tool
40. https://t.co/FSxcd5r9cn - AI app builder in the browser

Which one should I add next?

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

おおお

[田中義弘 | taziku CEO / AI × Creative @taziku_co]

3D制作も「一人で何役もこなす」時代へ。

オープンソースのAI 3Dエディタ「Mixar」が登場。
これまでモデリング、テクスチャリング、ライティングなどを順番に進めていた工程を、複数のAIエージェントが並列で進める。

Blenderベースで、BYOKやCodexにも対応。

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

「自分の軸」を大切にするのは大前提。でも、肩書きに縛られて「自分にはこれしかできない」と枠を狭めるのが一番の悪手。

職種が溶け合う今の時代、やりたいこと・やれることを増やし続けないと、あっという間に置いていかれる。

「何者か」に固執して縮こまるより、軽やかに越境してアップデートし続ける人こそが、これからの時代を勝ち抜く。

[nobuo | 鈴木伸緒 @nobgraphica]

まさに。
自分も同じようなことを思っていて、10/11のDesignshipでもまさに話そうと思ってました。
逆に本来やりたかったことに対して、みずからせばめてしまっているというかね。

sawaさんの文脈に沿ってるかわからないけど。

https://t.co/1RG4PDcsDF

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

デザインをfigmaでやらなくなったなぁ…

[坪田 朋 / クラシル CPO @tsubotax]

最近よく聞かれるけど、Figmaを使わなくなった ＝ AIにデザインを任せた、ではない。

むしろ判断と試行錯誤は以前より自分でやっている。変わったのは、その判断を形にする方法。

Figmaで直接手を動かす代わりに、Claude Codeを通じて自然言語で形にする。そうすると画面を作るだけでなく、カーニングを比較する、アニメーションを複数案で試す、SVGを調整する、そのまま実装する、までがひと続きになる。

AIにデザインを任せたいわけではなく、自分が不得意だったツール操作をAIが代替してくれることで、これまでツールの習熟度に阻まれていたアイデアや創造性まで、自分で形にできるようになった。すごく良い時代になったと思う。

自分の判断を保ったまま、1人でカバーできる領域を広げる。

AIはデザイナーの判断を代替するものではなく、その判断が届く範囲を広げるものだと思う。

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

メモ

[Nero @neropursue]

If you’re a designer, bookmark this.

1. https://t.co/1ohPv5tqpb — Showcase your best creative work in a simple, beautiful portfolio.
2. https://t.co/mNrTXcBvFT — Discover the best design inspiration shared by designers on X.
3. https://t.co/SBNFYdavi6 — Mobile app animations, transitions, and micro-interactions worth bookmarking.
4. https://t.co/NvwwhlZ2L4 — Find inspiration for better, more effective website CTAs.
5. https://t.co/JJBoSttayB — Explore creative social media posts and visual content for inspiration.
6. https://t.co/bK5fAQDJqT — Discover creative navbar and navigation designs from real websites.
7. https://t.co/Ils1o1KewB— Explore a curated collection of beautifully designed icons.

What did i miss?

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

リモートでもリモートじゃなくても大事よね。挨拶と一緒な気がする。

[sogitani / baigie inc. @sogitani_baigie]

リモートワークに向いてない人、例えばテキストの会話でクッション言葉を入れず要件しか書かない人は向いてない。「修正お願いします」じゃなく「この前と方針が変わって申し訳ないけど修正お願いします🙏」みたいな一手間を面倒だと思う人は出社向き。リモートは情報が欠落しがちなのでできるだけ補完する行動を求められる。

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

参考になるわ。

[LOOPY @VibeEverything]

Opus 5.5로 만든 바이럴 영상 389개 모음

요즘 화제인 Opus 5.5로 만든 모션그래픽부터
설명 영상, 3D 장면, 게임까지 정리돼 있음

원본 영상과 리메이크 영상을 같이 볼 수 있고
프롬프트도 바로 복사해서 활용 가능

마음에 드는 영상을 내 로고, 컬러, 폰트 같은 에셋과 함께
클로드에게 주고 구성안을 뽑아달라고 하면
아이디어의 방향을 정하고 구체화하는데 도움이 됨

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

カメラワーク大事よね

[テツメモ｜AI図解×検証｜Newsletter @tetumemo]

📝AI動画を作る人、これはブックマークしておいた方がいい
「Cinematic Techniques」というサイトに、映画・映像制作で使われる技法が424個まとめられていて、カメラワークだけでも86種類。これが動画とプロンプト付きで無料公開されている！

・Dolly In / Out
・Tracking Shot
・FPV Drone
・360-Degree Orbit
・Dolly Zoom
・Handheld

さらに構図、アングル、照明、レンズ、色調、トランジション、Film Noirなどのジャンル表現まで揃っている
しかも面白いのが、それぞれ「どういう技法か」だけではなく、映像での使い方、参考例、AI動画生成で使えるプロンプトまでセットになっていること

これ、眺めて終わりではなくSkills化するとかなり使えそう

例えば

「不安感のあるシーンにして」
↓
該当する撮影技法を検索
↓
Camera Angle × Lighting × Lens × Colorを選択
↓
動画生成用プロンプトまで自動生成

みたいなSkillを作ってもいいし、サイトをClaude Opus 5.5に投げてこのサイトを動画生成プロンプト作りのアドバイザーにしても良い

AI動画時代は「プロンプトを覚える」より、「映画監督が使ってきた映像文法をAIから呼び出せる状態にする」方が強そう！

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

@wurst_design 僕も同じ感覚ですｗ
AIが定額利用できなくなったら、AIのために働く未来が見えていますｗ

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

判断が任せられる部分が増えるのすごいな

[のえる｜AI構築者 @noel_ai_lab]

https://t.co/ZulKukvgQv

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

よさげ

[NOIZ ANIMATION STUDIO | AIアニメスタジオ @NOIZ_ANIME]

Wan3.0、少しずつコツを掴んできたかも！
せっかくなので、これで5分くらいの動画を作ってみようかな。どんなものができるか楽しみ！

#AIアニメ #wan3

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

僕らってIT土方だと思ってました。キラキラしたこと1回もない…。一度でいいから煌めきたい。

[滝口健太郎｜Webコンサルタント・デザイナー @takiguchi_ss]

Webデザイナーという職業を、「キラキラクリエイター」として捉えているデザイナーと、「泥臭い職人」のように考えてるデザイナーとでは、おそらくこの先、生き残れるかどうかの明暗がはっきり分かれるのではないでしょうか。なぜなら、　

たとえば、最近よく聞くように、お客さんが自らAIで生成したデザインを持ち込んだとします。そうした時にキラキラクリエイターの人たちは間違いなく困惑するでしょう。クリエイターの私にこんなものを持ってきて失礼ではないかと立腹するでしょう。が、泥臭職人の人たちは、もちろん最初ははじめてのことに困惑するかもですが、そこは職人なので泥臭く対応するでしょう。

これからはそういった案件が増えてくるのは目に見えてますよね。AI主体の残務処理みたいなものが増えるでしょう。

もしキラキラクリエイト路線で行くとなると、もうほんとにその人にしかできない、AIもパクりきれない独創性を発揮するしかないことになりますが、職人はとにかく状況に応じて、できる仕事を拾っていけばいいということになります。何だったらその泥臭マインドで隣接領域との隙間に入り込んで生き延びることなどもできるでしょう。

この差はかなり大きいのでは？

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

Wan3.0もなかなか良さそう。

[NOIZ ANIMATION STUDIO | AIアニメスタジオ @NOIZ_ANIME]

Wan3.0の練習で、魔法を唱えるアニメーションを作ってみました！✨

正直、制御はなかなか奥が深くて難しい…！ただ、アニメ調のタッチとは相性が良さそうな感触です。皆さんは細かい制御、どうやって詰めてるんでしょうか？🤔

素晴らしい作例をたくさん見かけるので、もっと研究しなきゃ！コストが抑えられるのは個人開発にとって本当にありがたいですね。引き続き頑張ります！

#Wan3 #AIアニメ #生成AI

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

「アニメ化の決め手は海外のプラットフォームの値付けにある」現役プロデューサーが明かす、企画の生死を握る「海外配信サイト」の正体 @moneygendai https://t.co/kw9lDLExE8 #マネー現代

[NOIZ ANIMATION STUDIO | AIアニメスタジオ @NOIZ_ANIME]

新作の短編を公開しました！

『雨を知らない竜｜花を助けたい、小さな竜の物語』

雨を一度も見たことがない竜が、大切な花を守るために奮闘する物語です。心温まる小さな冒険を、ぜひ読んでみてください。

#短編 #アニメ #AIアニメ

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

参考になります。

[柊こんそめ@AI漫画・AIイラスト @potechi_takusan]

@studiomasakaki なんか似たようなことやってます！ ご参考まで
（賢木さん作られたのもぜひ使ってみたいです）

https://t.co/DuoDgTPjUU

[NOIZ ANIMATION STUDIO | AIアニメスタジオ @NOIZ_ANIME]

『死に戻り108回の虚無勇者 〜「最適解」にはなかった、世界の歩き方〜』最新話、Ep.3-2を公開しました！

ついに本編にて「制服リナ」が登場します。
108回目のループ、物語はここから新たな局面へ……！
ぜひチェックしてください！
#死に戻り108回の虚無勇者 #Web小説 #更新情報

#AIアニメ #アニメ

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

どれだけ自己資本でやれるかだよね。

[pp @angle_pp_]

起業した経営者はこれらしい

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

暗闇を自分で突き進む力が必要

[ひとごとMD @hitogoto_butyo]

給料が高くなるほど、仕事は「正しくやる」から「正解がない中で決める」に変わっていきます。

若手の仕事には答えがあることが多いですが、役職が上がると、「どちらを選んでもリスクがある」、「誰かは必ず不満を持つ」、「やってみないと分からない」みたいな仕事が増えます。

高い給料は、能力への報酬というより、不確実な判断を引き受ける職務への報酬です。

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

@wurst_design ホントそうですね。スマホサイズのデザインサイズ悩ましいですよね笑　最近はwebデザインはコーティングして出すことが増えたので、変に悩まなくなりました笑

[ジェイ | Designer @KADOKAWA Group @masa_jay_kimura]

偉いの人の端末が…とかあったなぁ。判断する人はリテラシーもたないとね。

[せきゆおう🇯🇵Web制作とAIのことを発信する人 @wurst_design]

noteに「モバイルデザインの幅は、375pxが最適ではない理由」を追加しました。

気づけば、6,000文字を超える記事になりました🥲

「コーダー目線で、375pxをやめてほしい」という話ではありません。

デザイナー目線でも、ディレクター目線でも、375pxを基準にすることが必ずしも適切ではない理由が、いくつもあります。

会社では375pxが当たり前のように使われる。
書籍や学校でも375pxで習う。
アンケートを取っても、66%の人が「375pxがよい」と答える。
そんな“常識”に、あえてメスを入れます。
実際の端末シェア率まで調査しながら、かなり具体的にまとめました。

モバイルデザインの幅をなんとなく375pxにしている方にこそ、ぜひ読んでほしいです。

https://t.co/W5NvUKcZwQ