Forクリエイターズ

実世界のデザインシステムから、UIコンポーネントの「正解」を逆引きできる神サイト。

「ボタンの名前どうする？」「このUIの定石は？」と悩む時間をゼロにできます。
GOV. UKや有名企業の事例がまとまっており、実装前に「車輪の再発明」を防げるのが強い。

✅実例から命名規則を学べる
✅複数サイトのUI比較が容易
✅アクセシビリティの参考にも

component.gallery

「サイトの回遊率はナビゲーションで決まる」と言いつつ、意外と参考にできる専用サイトって少なかったんですよね。

最近見つけた「Navbar Gallery」が凄く便利。
名前の通り、優れたナビゲーションデザインだけに特化したギャラリーサイトです。

✅ PC/スマホ別の挙動を確認
✅ 検索、メガメニューなど機能別
✅ 実装が難しい「動き」の参考に

Footer専用サイトの誕生をきっかけに作られたそうです。
UI設計の引き出しを増やしたい時に→https://www.navbar.gallery/

Apple風の「弁当箱デザイン」で迷ったらここ。

タイル状に情報を並べるBento Gridは、機能紹介やポートフォリオと相性抜群。でも、余白や比率のバランスが意外と難しい…。

そんな時は「BentoGrids」が神。

✅ Apple風の厳選レイアウト集
✅ デザイナー本人が手動更新
✅ 直感的なUIで構成案が即決

実務で「構成が固まらない」時間をゼロに🎨
bentogrids.com

【保存版：Three.jsのシェーダー開発が劇的に楽になる】

ノードベースでシェーダーを構築できる「TSL Graph」に待望のLPが登場。
特筆すべきは、サイト自体の背景シェーダーもTSL Graph製ということ。

✅ コード不要で複雑な質感を視覚的に構築
✅ サイト上の「Clone」から即座に編集・実験可能
✅ TSL（Three.js Shading Language）の学習コストを大幅削減

背景演出にこだわりたいWeb制作勢は、まず触ってみるのが正解です。
tsl-graph.xyz

AIに「正しいWordPress開発」を教え込むツール「Agent Skills for WordPress」が登場。

CursorやClaudeに導入するだけで、古いコードや非推奨パターンの生成を防げます。

✅ 主なメリット
・最新のGutenberg/Block開発に対応
・セキュリティや静的解析の知識を注入
・プロジェクトに最適な手法を自動判別

導入は公式GitHubから各ツール（.cursorや.claude）へ。
WP開発の事故を減らしたい方は保存推奨です🎨
github.com/WordPress/ag...

GammaにAIアニメ機能が登場🎨

資料作成ツール『Gamma』で、プロンプトから動画生成が可能に。
静止画カードに動きを加えるだけで、提案書の説得力が別次元になります。

✅ 選べる2つの最新モデル
・Veo 3.1 Fast（Google）
・Leonardo Motion 2（Leonardo.ai）

✅ 活用シーン
・ピッチ資料：ビジョンを映画のように演出
・LP制作：一瞬で目を引くヒーローセクション
・教育：動きで直感的に理解を促す

※Business / Ultraプラン限定。
「動き」で差をつけたいクリエイターは要チェック。
gamma.app/ja

Webサイトの「音」をAIで自作するのが、これからの新常識になりそう。

外部素材を探す代わりに、ClaudeやCursorに「Web Audio API」のコードを書かせる手法が有益です。

✅ 実装のコツ
・音の減衰（Decay）は「指数関数的」に
・クリック音は「バンドパスフィルタ」を活用
・自然な余韻には「エンベロープ（包絡線）」を設定

数式や音響知識がゼロでも、AIに「感情」を伝えてコードに翻訳してもらうだけで、理想のUIサウンドが手に入ります🎨
www.userinterface.wiki/generating-s...

【結論：グラデーションはOKLCHで書く】

「色がくすむ」「中間が灰色になる」悩みは、CSSの書き方ひとつで解決します。
これからはsRGBではなく、色を“回転”させて補完するOKLCH空間が主流。

✅ 解決策 background: linear-gradient(in oklch, blue, red);
✅ メリット ・中間色が濁らず、鮮やか ・P3広色域をフル活用 ・直感的な色指定

デザインの質を一段上げるTipsとして保存推奨です🎨
jakub.kr/work/gradients

Chromeで先行実装中の appearance: base-select が革命的です。
今までJSライブラリ必須だったリッチな機能が、ほぼCSSだけで完結します。

✅ ドロップダウンのアニメーション
✅ 選択肢へのアイコン/画像配置
✅ ダークモード自動対応
✅ アクセシビリティは標準のまま

「未対応ブラウザでは普通のSelectとして動く」ので、実務でも導入ハードルが低いのが強すぎる。今のうちに要チェックです🎨
nerdy.dev/nice-select

Figmaのような「共同編集ツール」を作る時、マウスカーソルの動きをどう滑らかにするか？実は単純な同期だけだとカクつきます。

Liveblocksが教える3つの実装手法が超有益🎨

✅ CSS Transition 軽量。linear指定が意外とスムーズ
✅ Spring（Framer Motion等） 物理演算でヌルヌル動く。一番おすすめ
✅ Spline（perfect-cursors等） 精度重視。少し遅延するが軌跡が正確

ネットワークの遅延を考慮した「ガタつき」の防ぎ方は全開発者必見。
liveblocks.io/blog/how-to-...

【保存版】「触り心地」で差がつくWebデザインの極意

POLAの特設サイトが、UXの参考として異次元すぎる。
単なるスクロールではなく、マウスの動きに追従する「慣性」の制御が完璧。

✅ 要素が遅れて付いてくる浮遊感
✅ 境界線を感じさせないシームレスな遷移
✅ 視線誘導を邪魔しない絶妙な余白

「滑らかさ」を言語化したいクリエイターは必見。
動きの緩急（イージング）の設定だけで、ここまで高級感は変わる🎨

www.pola.co.jp/special/o/we...

Figmaで画像や手描きスケッチを「1クリックでベクター化」可能に。

新機能のAIツール『Vectorize』が神アップデート。
外部ツールへ移動せず、Figma上でラフ画像やロゴ案をそのままパスに変換できます。

✅ 手書きロゴを編集可能なパスへ
✅ 写真からテクスチャを抽出
✅ 1クリックで背景削除→ベクター化

パスの微調整もFigma内で完結。
清書のトレース作業から解放されます。

AIクレジット消費対象ですが、時短効果は絶大🎨
www.figma.com/blog/introdu...

【Webデザイナー必見】高品質なフリーフォント集「Freefaces Gallery」が実用的。
www.freefaces.gallery

個人・商用問わず利用可能なオープンソース書体を、プロの視点でキュレーションしたギャラリーサイトです。

・Sans / Serif / Monospaceなど5系統で分類
・ライセンスの透明性が高く、実務に導入しやすい

フォント選定の工数を削減し、プロジェクトの完成度を底上げできます。

自分の「署名」をサクッとGIFアニメにできる無料ツールが面白い🎨

1. サイト上でサインを書く
2. 筆跡がアニメーション化される
3. そのままGIFで保存

メールの署名欄やポートフォリオのアクセントに最適。
手書きの温かみをデジタルに添えたい時に重宝します。
👉 sig-gif.vercel.app

「どの色をどこに使うか」で迷う時間をゼロにする。

配色サイトで綺麗なパレットを見つけても、いざWebサイトに塗ると「なんか違う…」となりがち。
Happy Huesなら、ボタン・背景・文字への適用例をリアルタイムで確認しながら選べます🎨
www.happyhues.co

心理学に基づいた色の選び方も学べて、デザインの説得力が爆上がり👍

【Figma新機能】 新しい「Glass」エフェクトがかなり優秀です。

Figmaで「ガラス表現」を作る時、もうレイヤーを何枚も重ねる必要はありません。

✅ 光の屈折拡散（Splay）を調整可
✅ テキストや全オブジェクトに適用
✅ デザインシステムの変数（Variables）対応

特に「Splay」の値をいじるだけで、物理的なガラスのような質感が一瞬で出せます。
まずは公式Playgroundで挙動をお試し🎨
www.figma.com/community/fi...

動画引用元：https://x.com/jh3yy/status/1932954702255141031

配色の「濃淡」調整、もう悩み時間をゼロにできるかも。

TailwindやRadixなど、実績あるデザインシステムの"美しいバランス"を、そのまま自分のブランド色に適用できる「Supa Colors」が優秀でした。
supacolors.studio

✅ 人間の目に自然なOKLCH採用
✅ Figma変数/CSS/JSONなど10種書き出し
✅ アクセシビリティ(WCAG)自動判定

「色は決まったけどパレット展開が面倒」な時に最適。
無料枠で十分試せます🎨

Googleドキュメントのフォント、迷ったらもう「Google Sans」一択かも。

Googleのロゴやスマホでお馴染みのあのフォントが、ついにDocsやスライドで使えるように！

設定の「その他のフォント」から追加するだけ。
特に「Flex」は視認性が抜群に良いので、企画書の本文に使うと読みやすさが段違いです。

引用：https://9to5google.com/2026/01/24/google-docs-sans-flex/

Microsoft Clarityに「AI Bot Activity」が追加。
これまでは見えなかった「AIクローラーの動き」が明確になります。

✅ どのAIが来ているか（GPT等）
✅ どの記事が重点的に読まれているか
✅ アクセス頻度とインフラ負荷

JSではなくCDNログ（Cloudflare等）を使うためデータが正確。
WordPressならプラグイン更新だけで対応できる場合も。

これからのSEO分析に必須になりそうです🎨
clarity.microsoft.com/blog/ai-bot-...

LINE公式フォント、Google Fontsで解禁。
fonts.google.com/specimen/LIN...

Webデザインの選択肢がまた一つ増えました。

LINE Seed JP
✅商用利用OK (SIL OFL)
✅スマホで読みやすいジオメトリック体
✅CDNで爆速導入可能に（自前配置不要）

「モダンだけど親しみやすい」を出したい時の最適解。
実装ハードルが一気に下がったのが神アプデです🎨
www.lycorp.co.jp/ja/news/rele...

UIデザイン、ボタンの状態は「通常・ホバー」だけでは足りません。
実装漏れを防ぐ、必須の「5つのステート」基本リストです。

✅Default（通常時）
✅Hover（カーソルを乗せた時）
✅Press（押した時）
✅Focus（キーボード選択時）
✅Disabled（押せない時）

特にFocusはアクセシビリティ観点で重要。
キーボード操作（Tabキー移動）やスクリーンリーダーを使う際に、「今どこを選択しているか」を示す非常に重要なステートです。

引用：https://x.com/AdhamDannaway/status/2013633113251824116

【速報】2月12日、モリサワから新書体が大量追加されます。
www.morisawa.co.jp/about/news/1...

今回追加される『103ファミリー』の注目株はこのあたり。デザインの幅が広がりそうです。

✅プフ ワンダー（人気ポップ体の新作）
✅瓦ゴシック（瓦明朝の相方、ついに登場）
✅たらふく（個性的で愛嬌ある筆文字）
✅欧文・中国・タイ文字なども大幅拡充

⚠️注意：Morisawa Fonts限定です（PASSPORTは対象外）。
提供開始は【2/12 14:00】から。

Xが「新アルゴリズム」の全容を公開
github.com/xai-org/x-al...

クリエイターが意識すべき“表示順”の決定要因はシンプルになりました。
AIがユーザーの過去履歴から以下の確率を予測し、スコア化します。

✅加点（高評価）
・いいね / リプ / RT / シェア
・プロフクリック / 画像拡大 / 動画視聴
・滞在時間（Dwell）

⚠️減点（致命的）
・「興味なし」 / ブロック / ミュート / 通報

これまで存在した「人力の細かい調整（ヒューリスティック）」は全廃。
小手先のハックよりも、純粋にリアクションを引けるコンテンツだけが勝つ仕様です。

ブラウザがそのまま「自分専用PC」になるOSSが凄まじい。

『Puter』 アプリもファイルも、ブラウザ内に全部保存。
ネットさえあれば、どの端末からでも"いつものデスクトップ"が開けます。

✅ 面倒なインストール不要
✅ UIが完全にPC（使いやすい）
✅ DropboxやGoogleドライブの代替に
✅ オープンソースで無料

iPadでPC作業したい時や、個人クラウド作りたい人に最適。
これ、未来だ...🎨
github.com/HeyPuter/puter

【商用無料】ゲームへの埋め込みもOK、ドット絵特化のフォントサイトが凄すぎた。

「x0y0pxFreeFont」
hicchicc.github.io/00ff/

✅クレジット表記不要
✅.ttfの同梱配布OK
✅加工・改変・再配布も可

「レトロゲーを作りたい」「UIをピクセル風にしたい」人に最適。

【無料】自分の作品を「AI学習・無断転載」から守るための新常識。

Adobe Content Authenticity (Beta)を使えば、作品に「デジタル署名」と「見えない透かし」を埋め込み、所有権を証明できます。
contentauthenticity.adobe.com

✅メタデータ削除されても追跡可能（透かし・指紋認証）
✅Webアプリで一括50枚まで処理
✅JPG/PNG対応

SNSやポートフォリオに作品を上げる前の「ひと手間」で安心感が段違いです🎨

Googleの最強AI、なんで名前が「バナナ」なの？🍌

理由：「PMのあだ名がバナナだったから」

深夜のテンションで決まったコードネーム「Nano Banana」が、性能良すぎてそのまま正式採用されたらしい。
ふざけた名前だけど、画像内の文字出し精度は世界トップクラス。

blog.google/products-and...

UI構築の知見をまとめた『userinterface.wiki』が公開されました。

全部無料で読める上に「どう作るのが正解か？」のパターンが具体的。
個人開発でUIに迷った時や、デザインの根拠が欲しい時にすごく使えそう。

英語サイトですが、翻訳通せばサクサク読めます🎨

LPや資料用に「AIとの対話画面」や「バズったSNS投稿」の画像を作りたい時、Figmaで消耗していませんか？

「Mockly」ならブラウザだけで完結します。
www.getmockly.com

✅AIチャット風（Markdown対応・ロール切替）
✅SNS投稿風（認証バッジ・いいね数操作）

画像挿入も可。
「架空のデモ画面」や「利用者の声」が秒で作れるので、素材作りの時短にぜひ🎨

引用：https://x.com/maurice_kleine/status/2010055522553344260

UIデザインに迷ったら、この「辞書」を引いてください。

Jim Raptis氏の『UI/UX Tips』が有益すぎました。
www.uidesign.tips/ui-tips
www.uidesign.tips/ux-tips

ボタン配置・余白・配色など、迷いがちな箇所の「正解パターン」が事例付きで網羅されています。

✅全て実プロダクトでテスト済み
✅Before/Afterで比較しやすい
✅登録不要で閲覧可能