クリエイター向けの情報を毎日発信 🐤X/Twitter：https://x.com/_4creators 📷Instagram：https://www.instagram.com/best_4creators/ ✌️Site：https://4-creators.net/https://bsky.app/profile/4-creators.nethttps://bsky.app/profile/4-creators.net/post/3mm6zt3fsqe2b次世代AIツールの「画面設計」として参考になる優れたUIです。 人間と複数AIが協働する『mercury』の開発中画面が話題に。 ✅ 左：AIとの対話チャット ✅ 右：手動の設定パネル 対話による手軽なガイドと、プロ向けの詳細な手動制御を両立。AI組み込み系サービスのUIを作る際の引き出しとして保存推奨です🎨 mercury.build19 May 2026 09:02 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mm6zt3fsqe2bhttps://bsky.app/profile/4-creators.net/post/3mm4jcqmr422kWeb制作者へ。ホバーアニメーション時の「謎のガタつき」は1行で直せます。 ボタンなどを動かす時、中のアイコンが1pxズレる現象。 will-change: transform; を指定するとピタッと止まります。 ✅「安っぽさ」が消え高品質なUIに ⚠️多用はスマホの動作低下を招くので限定的に18 May 2026 09:02 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mm4jcqmr422khttps://bsky.app/profile/4-creators.net/post/3mlzys4ipn72pダサいスクロールバーは、このCSS2行で解決します🎨 デザインの邪魔になる太いスクロールバー。実は以下のコードをコピペするだけで、細くスマートになります。 CSS scrollbar-width: thin; scrollbar-color: gray transparent; ✅ 簡単にUIの品質UP ✅ 視覚的なノイズを削減 環境により見え方は変わりますが、手軽に実装できるので保存して試してみてください17 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlzys4ipn72phttps://bsky.app/profile/4-creators.net/post/3mlxid7g5ru2b最近のUIデザインの参考に。 「ピクセルアート×3Dガラス」の質感が美しすぎるアイコン事例です🎨 懐かしいドット絵のシルエットに、現代的なメタリックと透明感を掛け合わせた表現が新鮮。 UIのインタラクションも滑らかで心地よいです。 ↓デザインの引き出しとして保存推奨 https://www.behance.net/gallery/246749035/Tags16 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlxid7g5ru2bhttps://bsky.app/profile/4-creators.net/post/3mluxwwbzxl2qプレゼン資料のデザインで迷ったらこれ。 良質なスライドギャラリー「deck.gallery」が超進化しました🎨 ・スライドの用途別（料金表、チーム紹介等）で探せる ・毎日新しいデザインを追加 ・会員登録不要でずっと無料 動作も爆速化。デザインの引き出しとして即ブックマーク推奨です。15 May 2026 09:02 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mluxwwbzxl2qhttps://bsky.app/profile/4-creators.net/post/3mlshfccf7x2bWeb/Nativeの2D表現を変える新技術「Project Redraw」が発表されました🎨 FigmaやSVGのパスデータから、GPUを活用した高度なエフェクトを作成可能です。 ・線幅や色をJS関数で制御 ・パスの接線や長さでグラデ生成 ・重いブラーも単一パスで軽量化 現在はプレビュー版。今後の動向は必見✅ wcandillon.github.io/redraw/14 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlshfccf7x2bhttps://bsky.app/profile/4-creators.net/post/3mlpwwbn7p72bUIデザインの引き出しに加えたい「滑らかな3Dカルーセル」の実装例。 絵本をめくるような立体的なページ遷移が美しすぎると、世界中のデザイナーやエンジニアから絶賛されています🎨 ✅ スクロールに追従する自然な奥行き ✅ アナログ感とデジタルの融合 ✅ 作品が際立つ余白設計 ギャラリーサイトやポートフォリオUIの参考として、いつでも見返せるようにブックマーク保存推奨です🔖 （Source: @ ggigiart）13 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlpwwbn7p72bhttps://bsky.app/profile/4-creators.net/post/3mlnrhxiuj72bClaude Codeに革命。新機能「Agent View」が爆速すぎる。 複数のタスクを並列で実行し、一覧で進捗管理が可能に。 ターミナルをタブだらけにする時代が終わりました。 ✅ 特徴 ・claude agents で全セッションを俯瞰 ・バックグラウンド実行（/bg）対応 ・その場で進捗確認＆指示出し 開発を「待ち時間」から解放する神アプデ。 ※Pro以上のプランで利用可能 🎨12 May 2026 12:18 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlnrhxiuj72bhttps://bsky.app/profile/4-creators.net/post/3mlkvzlaiqc2k【数行でプロ級】Anime.jsの新機能がすごい🎨 複雑なテキストアニメが瞬時に作れる「scrambleText()」が登場しました。 ✅表示方向のコントロール ✅カーソルエフェクト ✅他アニメとの連携（タイムライン等） 実装の手間を削りつつ、サイトの品質をグッと上げられます。11 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlkvzlaiqc2khttps://bsky.app/profile/4-creators.net/post/3mlifkmr4kd2kプロンプトで3D・Web・アプリを生成できるAI「Omma」。 他ツールで挫折した表現が数回の指示で作れたとの声もあり、生成したPBRマップはBlender等へ持ち出し可能です。 ✅特徴 ・AIエージェントによる自動構築 ・主要3Dソフトとの連携 ・design. mdに対応 技術トレンドとしてブックマーク推奨です🎨 omma.build10 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlifkmr4kd2khttps://bsky.app/profile/4-creators.net/post/3mlfv3jvah62e実装されたUIアニメーションの90%は「デザイン」ではなく「単なる装飾」です🎨 LottieFilesの指摘が的確だったので共有。 【無駄なモーションの判定基準】 ✅ 消してもユーザーの理解度が同じなら不要 ✅ 驚かせるためではなく、助けるために動かす 本当に機能する動きは「12の原則」に帰結します。 UI設計の引き出しとして保存推奨。09 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlfv3jvah62ehttps://bsky.app/profile/4-creators.net/post/3mlden4ff2x2c個人開発者の作業時間を大幅に削る「Unity AI」オープンベータ版が公開。 知っておくべき重要ポイントをまとめました。 ✅Unity 6以上で利用可能 ✅外部AIと繋げるMCP連携に対応 ✅Personal版は月額10ドル（無料トライアルあり） ✅ユーザーデータのAI学習はデフォルト「オフ」 無断学習を心配せず使えるのは大きな安心材料ですね。 気になった方は保存して試してみてください🎨 https://unity.com/ja/features/ai?utm_campaign=unity-ai-beta&utm_medium=social&utm_source=x&utm_content=ai-open-beta-announcement08 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlden4ff2x2chttps://bsky.app/profile/4-creators.net/post/3mlau5qyblu2a1枚の画像から超低遅延で会話するAIアバターが作れる「Runway Characters」が公開。 追加学習なしで、イラストや実写画像が24fpsの高画質でヌルヌル動き出します。 ・応答遅延はわずか1.75秒 ・画面共有でデザインのFBも可能 ・Webへの1行埋め込みやZoom連携に対応 通信環境に依存しますが、この応答速度ならカスタマーサポートや配信の形が大きく変わりそう。 APIやWebで既に試せます🎨↓ https://runwayml.com/news/building-runway-characters07 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mlau5qyblu2ahttps://bsky.app/profile/4-creators.net/post/3ml6do2tje32eWebのDOMに直接WebGLをかけられる。そんな次世代の動画表現がもう試せます🎨 Remotionが「HTML-in-canvas」に対応。 ✅特徴 ・DOM要素に複雑なエフェクト(グリッチ等)を直接適用 ・AIエージェント(Claude等)用の公式スキル同梱 ⚠️注意 ・Chrome Canary限定の実験的API ・ネスト不可06 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3ml6do2tje32ehttps://bsky.app/profile/4-creators.net/post/3ml3t7fi4tn2eTailwindで「グラデーション枠線」を作る最適解かも。 面倒な実装を秒で終わらせるOSSプラグインを見つけました🎨 ✅JS不要のピュアCSS ✅角丸(border-radius)にも綺麗に追従 ✅お馴染みの from via to 構文 ✅回転アニメーションも簡単 AI系のUIやグラスモーフィズムと相性抜群です。 Tailwind v4環境の方は、実装の時短用に保存推奨→ gradient-border.floriankiem.com05 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3ml3t7fi4tn2ehttps://bsky.app/profile/4-creators.net/post/3mkzcr3ergd2bポートフォリオは「サウンドデザイン」で圧倒的な差がつきます。 海外プロ達が「ラスボス」と絶賛しバズり中の映像。 視覚効果だけでなく、音の作り込みが段違いです。 ✅ 映像と音の完全な同期 ✅ 緩急をつける無音の活用 演出の引き出しとして、一度見ておくことをお勧めします→ pacomepertant.com04 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkzcr3ergd2bhttps://bsky.app/profile/4-creators.net/post/3mkwscbgton2m次世代AI「Opus 4.7」で何が作れるのか？ Claude公式ハッカソンの入賞作品が、今後の個人開発のヒントになります🎨 🥇 金：音声ベースの医療診断シミュレーター 🥈 銀：回路図を読み込み、基板上に修理手順を直接描画 🥉 銅：「理由を説明できないとコードが書けない」学習ツール 汎用的なWebツールから「専門領域の課題解決×AI」へとトレンドが移行しているのが分かります。03 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkwscbgton2mhttps://bsky.app/profile/4-creators.net/post/3mkubsl7j6s2qClaudeがAdobeやBlenderと直接連携を開始🎨 AIに「指示」するだけでツールが動く新時代へ。 ✅ Photoshop等の操作をAIにお任せ ✅ Blenderで3Dモデルを会話で生成・修正 ✅ Abletonで楽曲制作の不明点を即解消 単なるチャットボットから、クリエイティブ制作の「有能な助手」に進化しました。02 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkubsl7j6s2qhttps://bsky.app/profile/4-creators.net/post/3mkrrdti6hk2aFigmaのAI画像生成がさらに実用的になりました🎨 これまでの「画像アップロード」に加え、キャンバス上の要素をそのまま参照指定可能に。 ✅ アップデート内容 ・コピー＆ペーストで参照追加 ・選択したオブジェクトを直接指定 ・ファイルのドラッグ＆ドロップ 例えば、デザイン中の既存パーツを選択して「この雰囲気で別パターンを作って」という指示が爆速で終わります。01 May 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkrrdti6hk2ahttps://bsky.app/profile/4-creators.net/post/3mkpav5la3e2hApp Storeのスクリーンショット作成、もうAIで完結します。 新ツール『Anything』が優秀。Figmaで数時間かけていた「モックアップ作成→配色→文案挿入→各サイズ書き出し」が、15秒でプロ級に仕上がります。 ✅ アイコンやDLボタンも自動配置 ✅ テキスト1つで文案を自動生成 ✅ 複数デバイスのサイズに一括対応 コードより面倒な“上架の壁”が消えました。後で見返せるよう保存推奨です🎨30 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkpav5la3e2hhttps://bsky.app/profile/4-creators.net/post/3mkmqfx2oin2hデスクトップの「あの味気ないフォルダ」を卒業。 無料のWebアプリ「iFolder」が、クリエイターの整理整頓に最適です。 数秒でフォルダをカスタムでき、インストールも不要。 ✅ 背景色とアイコンを選ぶだけ ✅ 視認性が爆上がりし、作業効率UP ✅ ブラウザ上で即デザイン・書き出し フォルダ整理が苦手な人ほど、色分け管理で直感的にファイルが見つかるようになります。まずは1つ作ってみて。🎨 wolfyxbt.github.io/iFolder/29 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkmqfx2oin2hhttps://bsky.app/profile/4-creators.net/post/3mkk7wh6ruh27「CSS設計、もうAIに丸投げしませんか？」 新登場の『Lism CSS』がAI時代に最適すぎる。 ✅ 特徴 ・軽量&ビルド不要で導入が楽 ・AIが理解しやすいProperty Class（-fz:l等） ・@layer採用でスタイル衝突を回避 AIが迷わずコードを書ける設計なので、CursorやClaude使いは必見。 サイト制作が格段に速くなります。🎨 lism-css.com28 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkk7wh6ruh27https://bsky.app/profile/4-creators.net/post/3mkhphh6adf2b【Web制作の限界突破】 GPT-5.5でついに「HTML-in-Canvas」が実装。これ、表現力の次元が変わります。 ✅ WebGL/WebGPUが標準で連動 ✅ HTML要素をCanvas内で直接描画 ✅ PixiJS + GSAPで超高精度アニメ 「重い・作れない」の言い訳が消える日も近い。 今のうちに触っておくのが吉です🎨27 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkhphh6adf2bhttps://bsky.app/profile/4-creators.net/post/3mkf6ysjxgx2eOpenAIの「Codex」に専用アバターが実装へ。 単なるアイコンではなく、デスクトップ上をドラッグして動かせる「インタラクティブな相棒」になるようです。 ✅ 8種類のプリセット（ドット絵風） ✅ ユーザー独自のカスタム可能 ✅ 常に最前面で動作状況を可視化 ✅ Voice Modeとの統合が期待大 AIがバックグラウンドで何をしているか一目でわかるため、並列タスクの管理が圧倒的に楽になりそうです🎨 動画ソース：@ neocph26 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkf6ysjxgx2ehttps://bsky.app/profile/4-creators.net/post/3mkcok422wn2q「一流の動き」を言語化する。 プロダクトデザイナーHarin氏が1年かけて制作した、至高のインタラクション集が公開。 ZeptoやSwiggyなど一流企業を渡り歩いた彼の「0.1秒へのこだわり」が詰まった14作品。 harin.design ✅ プロダクトの質感を変える14の挙動 ✅ アニメーションの緩急の付け方が秀逸 ✅ UIに心地よさを宿すヒントが満載 「動き」の引き出しを増やしたい方は必見。25 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mkcok422wn2qhttps://bsky.app/profile/4-creators.net/post/3mka63xs25c2mAndroid開発の「アイコン動き、実装めんどくさい」が消えるかも。 急成長中の『Vector Motion Kit』が便利すぎる。 vectormotionkit.web.app 高品質なアニメーションアイコン素材集なんだけど、単なる配布サイトじゃない。 ✅ AVD（Animated Vector Drawable）を編集可能に逆変換 ✅ ブラウザ上でプレビュー＆即エクスポート ✅ 開発者に優しいコード出力24 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mka63xs25c2mhttps://bsky.app/profile/4-creators.net/post/3mk5nm7typn2aWebサイトのアクセントに使える「3Dアイコン」を自作したい人へ。 Poolの新作ツール『Things』が凄すぎる。 things.pool.day ブラウザ上でプロンプトを入れるだけで、質感がリアルで可愛い3Dパーツが即生成されます。 ✅ 特徴 ・光沢感のある高品質な3D書き出し ・プロンプト次第で無限のバリエーション デザインの「ちょっと物足りない」を埋める一撃として重宝しそうです🎨23 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mk5nm7typn2ahttps://bsky.app/profile/4-creators.net/post/3mk354mqcn42eアイコンの「点」を線と同じ太さにしてませんか？ 実はドットを線（ストローク）と同じ太さにすると、視覚的に小さく見えてバランスが崩れます。（Helena Zhang氏のアイコンデザインに関する知見） ✅ 改善の秘訣 ・ドットは線幅より「わずかに太く」する ・16pxキャンバスなら線幅1pxに対しドット1.5〜2pxが目安 ・疑問符や顔など、要素としての重要度で太さを変える タイプデザインの知恵を借りるだけで、アイコンのプロっぽさが激変します。 https://minoraxis.medium.com/advanced-icon-design-dots-590cf96bf27922 Apr 2026 09:00 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mk354mqcn42ehttps://bsky.app/profile/4-creators.net/post/3mjymrtbmes2pデザインから実装の壁が消滅。 「Claude Design」が凄そうです🎨 言葉で指示するだけで、プロトタイプやスライドを生成できる新機能。 ・対話やスライダーで直感的に微調整 ・CanvaやPPTXへ直接エクスポート ・Claude Code連携で即コード化 チームのデザインシステムも自動適用されるため、実務に直結します。 （※Pro等有料プランで順次開放中）21 Apr 2026 09:03 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mjymrtbmes2phttps://bsky.app/profile/4-creators.net/post/3mjw4ai74oz2q動画を「超軽量なASCIIアニメ」に変換する無料ツールが凄い🎨 https://github.com/vansh-nagar/ascii-studio 動画を読み込むだけで、精密なテキスト表現に自動変換。 Webサイトの背景や装飾に使うと、読み込み速度を落とさずテック感を演出できます。 ✅ 動画ファイルをアップするだけ ✅ 精細な調整が可能 ✅ パフォーマンスへの影響が最小限 クリエイティブの差別化に最適。20 Apr 2026 09:01 +0000at://did:plc:3um34mybehom3v64zt4si54x/app.bsky.feed.post/3mjw4ai74oz2q