Forクリエイターズ

デジタルクリエイター向けに、AIツール・デザインTips・業界ニュースを毎日発信🎨

🦋Bluesky：

[Forクリエイターズ @_4creators]

A/Bテストの実例コレクションが無料公開されています🎨

→ https://t.co/IlGStCtBM0

トップアプリの「効いた変更」をビフォーアフター形式で閲覧でき、CTA文言・ボタン配置・フォーム設計など、コンバージョン改善のパターン集として参考になります。

ただし海外では「デザインのA/Bテストよりチェックアウト導線の方が売上に効く」という指摘もあるので、視覚要素の改善は導線がボトルネックでないと確認してから手を入れるのが現実的です。

[Adham Dannaway @AdhamDannaway]

Free 🅰️/🅱️ test results collection

Learn design tricks to increase your conversion rates from this curated collection of A/B test results from top apps.

→ https://t.co/UmUQNWxvDx

[Forクリエイターズ @_4creators]

macOS 26 風のオンボーディングアニメーションを SwiftUI で再現したサンプルが話題です🎨

✅ 起動時のフェード&スライドの組み合わせ
✅ メニューバーの動きまで作り込み
✅ YouTube に作り方の解説動画あり

自分のアプリの「初回起動画面」を底上げしたい個人開発者にちょうどいい教材です。

[Kavsoft @_Kavsoft]

New macOS 26 Style OnBoarding Animation Using SwiftUI
https://t.co/aFT5ctxgSw

[Forクリエイターズ @_4creators]

ellipsis(…)の代わりにフェード。
CSSで長文テキストを上品に切る手法が海外で話題です🎨

.text {
overflow: hidden;
white-space: nowrap;
mask-image: linear-gradient(
to right, black 50%, transparent);
}

カード一覧や見出しに効きます。
ただ視覚的に消えるだけで実体は残るので、「切れた」と明示したい読み物UIでは従来通り ellipsis が無難です。

[Ali @alicalimli_dev]

Using CSS mask-image you can truncate texts with a smooth fade effect.

It looks clean and it's a great alternative to text ellipsis.

.text-container {
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: linear-gradient(
to right, black 50%, transparent);
mask-image: linear-gradient(
to right, black 50%, transparent);
}
}

If you found this one useful, follow for more! ❤️

[Forクリエイターズ @_4creators]

手書き風SVGアニメ、4つのコツで一気に「らしく」なります🎨

✅ パスの描画にイージングを効かせる(等速は機械っぽい)
✅ 線は perfect-freehand で太さの抑揚を出す
✅ 紙に書いた署名を撮影 → AIでSVGに変換
✅ 参考実装: https://t.co/oq0tAwsRqr

ポートフォリオの署名アニメやロゴ演出にそのまま使えます。

[jhey ʕ•ᴥ•ʔ @jh3yy]

your signature is a custom easing function™ ✒️

draw it
map the motion to css linear() timing function
package as portable SVG

paste anywhere 👇

[Forクリエイターズ @_4creators]

海外で、AIに作らせた写真家向けポートフォリオが「ソース欲しい」の声で話題になっていました🎨

写真サイトをAIで作る時のコツ:
✅ 大胆な余白とフルブリード画像を指定
✅ サムネ→詳細の導線を明示
✅ タイポは1〜2書体に絞らせる

ただ、ワンショット生成は「触れない見た目」になりがち。
「コンポーネント分割で」と一言添えるだけで、後から編集が効きます。

[Bardhyl Bytyqi @BardhylBytyqi]

claude + 1 prompt + motion

every photographer needs this 🔥

[Forクリエイターズ @_4creators]

3D Webの「お手本」がオープンソース化されました🎨

数年前から3Dデモの定番として引用されてきた、海外のWebデザイナーのポートフォリオサイトです。
滑らかなアニメーションとデザインの完成度で知られていて、特にスキルページの演出が評価されてきました。

✅Three.js製。
✅コードはオープンソースで公開済み。

「3Dサイトに挑戦したいけど、何から見ればいいかわからない」段階の人にとって、いきなり完成形を読めるのはかなり大きいです。

[David @DavidHckh]

My portfolio is now open source

I’ve released the source code behind my portfolio redesign 👀

→ https://t.co/KJoHfHfPwR
→ https://t.co/Ob1p34hpd0
Built with @threejs @greensock #lenis and a lot of love for smooth animations ✌️

#javascript #opensource #webdesign

[Forクリエイターズ @_4creators]

blur+scaleで遷移を「高級っぽく」見せるテクは、3つの条件を外すと逆効果になります🎨

✅ 時間は150〜250ms以内(遅いと操作感が死ぬ)
✅ blurは2〜4pxまで(強いと目のピントが外れる)
✅ scaleは0.97〜1.03(派手だと安っぽい)

気づかれないくらいの強度が、ちょうど正解です。

[Nitish Khagwal @nitishkmrk]

little blur & scale is all you need ⎯⟡°

[Forクリエイターズ @_4creators]

配色のアクセシビリティ確認、ツールに丸投げできます🎨

RandomA11y
→ ボタンを押すとWCAG準拠の配色ペアが出る
→ コントラスト比も併記
→ 無料・登録なし

「色を組む → チェッカーで確認 → 落第 → 組み直す」のループが、ボタン一発に置き換わります。
https://t.co/wQvwpid0FB

[Abraham John 🦄🦓 @Abmankendrick]

UI/UX Designers, this might be the best tool for generating accessible color palettes.

RandomA11y helps you auto-generate accessible color collections in seconds, making your designs both beautiful and inclusive.

Bookmarks it for later 💜

[Forクリエイターズ @_4creators]

コードを書かないデザイナーが、Claude CodeでアニメーションUIを実装するワークフローが海外で話題です🎨

✅ Figmaでモックを作って「これを再現して」と渡す
✅ ChatGPTに2部構成のPRDを書かせる:レイアウト編 / インタラクション編
✅ パフォーマンスは「同時にレンダリングするレイヤーを抑える」で対応

AIに分業させると、デザイナーひとりでも実装まで届きます。

[Emisho @Emishonowayi]

Built and published the fictional design agency archive from day 12 using Claude Code + Figma MCP.

Claude got the project surprisingly close very quickly, but the final polish still came down to human direction, especially around motion, depth, blur, and interaction feel.

Live link in thread.

[Forクリエイターズ @_4creators]

画像1枚が、たった5分で「歩き回れる3D空間」になる時代が来ました。

GitHubで公開された「image-blaster」が海外クリエイターの間で話題です。

✅画像を入れるだけで3D化
✅物理演算メッシュ＆環境音まで自動生成
✅モデリングの初期工程を大幅カット

3D制作の常識が変わるかも。週末の検証用に保存推奨です🎨

[CopyRebeldia @CopyRebeldia]

Hoy una industria entera dejó de tener sentido.

Un tío publicó en GitHub un repo que convierte cualquier foto en un mundo 3D explorable: meshes con físicas, splat del fondo, audio ambiente. Todo.

Una imagen entra. Un mundo sale. Cinco minutos.

La gente que se pasó diez años aprendiendo Blender lleva todo el día mirando esto en silencio.

Se llama image-blaster.

[Forクリエイターズ @_4creators]

スクロール時のもっさり感を減らす、UIデザインの細かな工夫。

背景ブラーを多用するUIで、スクロール中のみ動的にブラーを弱めると体感パフォーマンスが向上します。

✅ 描画負荷を下げカクつきを防止
✅ 動いている最中なら違和感なし

※環境により効果は変動。UXの引き出しとして保存推奨🎨

[Gabriel @gabriell_lab]

Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance.

let t;

const nav = document.querySelector(".navbar");
window.addEventListener("scroll", () => {

nav. style.backdropFilter = "blur(8px)";
clearTimeout(t);

t = setTimeout(() => {

nav. style.backdropFilter = "blur(24px)";
}, 120);
});

[Forクリエイターズ @_4creators]

次世代AIツールの「画面設計」として参考になる優れたUIです。

人間と複数AIが協働する『mercury』の開発中画面が話題に。
✅ 左：AIとの対話チャット
✅ 右：手動の設定パネル

対話による手軽なガイドと、プロ向けの詳細な手動制御を両立。AI組み込み系サービスのUIを作る際の引き出しとして保存推奨です🎨

https://t.co/tX5dYyA0XC

[jayson @jaezun_]

Day 5: introducing agent birthing

find me a better agent creation UX and I will buy you coffee

[Forクリエイターズ @_4creators]

Web制作者へ。ホバーアニメーション時の「謎のガタつき」は1行で直せます。

ボタンなどを動かす時、中のアイコンが1pxズレる現象。
will-change: transform; を指定するとピタッと止まります。

✅「安っぽさ」が消え高品質なUIに
⚠️多用はスマホの動作低下を招くので限定的に

[Jakub Krehel @jakubkrehel]

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property.

It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.

[Forクリエイターズ @_4creators]

ダサいスクロールバーは、このCSS2行で解決します🎨
デザインの邪魔になる太いスクロールバー。実は以下のコードをコピペするだけで、細くスマートになります。

CSS
scrollbar-width: thin;
scrollbar-color: gray transparent;

✅ 簡単にUIの品質UP
✅ 視覚的なノイズを削減

環境により見え方は変わりますが、手軽に実装できるので保存して試してみてください

[rauno @raunofreiberg]

How to make scrollbars not suck

scrollbar-width: thin;
scrollbar-color: gray transparent;

[Forクリエイターズ @_4creators]

最近のUIデザインの参考に。
「ピクセルアート×3Dガラス」の質感が美しすぎるアイコン事例です🎨

懐かしいドット絵のシルエットに、現代的なメタリックと透明感を掛け合わせた表現が新鮮。
UIのインタラクションも滑らかで心地よいです。

↓デザインの引き出しとして保存推奨
https://t.co/Y3n1FZ3Pq9

[Geex Arts @GeexArts]

Tags Icons Exploration

[Forクリエイターズ @_4creators]

プレゼン資料のデザインで迷ったらこれ。
良質なスライドギャラリー「https://t.co/U8SkVfYXkY」が超進化しました🎨

・スライドの用途別（料金表、チーム紹介等）で探せる
・毎日新しいデザインを追加
・会員登録不要でずっと無料

動作も爆速化。デザインの引き出しとして即ブックマーク推奨です。

[Muharrem Şenyıl @senyil]

https://t.co/H8VuWhdzJ3 just got a big update!

- Waay faster
- A new deck every single day
- Explore by slide type (intro, pricing, team…)
- No membership, no paywall

Free, forever.

[Forクリエイターズ @_4creators]

Web/Nativeの2D表現を変える新技術「Project Redraw」が発表されました🎨

FigmaやSVGのパスデータから、GPUを活用した高度なエフェクトを作成可能です。

・線幅や色をJS関数で制御
・パスの接線や長さでグラデ生成
・重いブラーも単一パスで軽量化

現在はプレビュー版。今後の動向は必見✅
https://t.co/gop953vyDm

[William Candillon @wcandillon]

Introducing Project Redraw, a new grade of 2d primitives for Web & Native

[Forクリエイターズ @_4creators]

UIデザインの引き出しに加えたい「滑らかな3Dカルーセル」の実装例。

絵本をめくるような立体的なページ遷移が美しすぎると、世界中のデザイナーやエンジニアから絶賛されています🎨

✅ スクロールに追従する自然な奥行き
✅ アナログ感とデジタルの融合
✅ 作品が際立つ余白設計

ギャラリーサイトやポートフォリオUIの参考として、いつでも見返せるようにブックマーク保存推奨です🔖
（Source: @ ggigiart）

[Gi🌱| VGen cms open @ggigiart]

พลิกๆๆๆ📒

[Forクリエイターズ @_4creators]

Claude Codeに革命。新機能「Agent View」が爆速すぎる。

複数のタスクを並列で実行し、一覧で進捗管理が可能に。
ターミナルをタブだらけにする時代が終わりました。

✅ 特徴
・claude agents で全セッションを俯瞰
・バックグラウンド実行（/bg）対応
・その場で進捗確認＆指示出し

開発を「待ち時間」から解放する神アプデ。
※Pro以上のプランで利用可能 🎨

[Claude @claudeai]

New in Claude Code: agent view.

One list of all your sessions, available today as a research preview.

[Forクリエイターズ @_4creators]

【数行でプロ級】Anime.jsの新機能がすごい🎨
複雑なテキストアニメが瞬時に作れる「scrambleText()」が登場しました。

✅表示方向のコントロール
✅カーソルエフェクト
✅他アニメとの連携（タイムライン等）

実装の手間を削りつつ、サイトの品質をグッと上げられます。

[Julian Garnier @JulianGarnier]

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property.

It's crazy how just a few lines of code can create such visually complex effects.