Webデザイナー向け

ダイアグラム生成用言語のD2の使い方をオンラインで学べる・「D2 Playground」

任意のWebページの静的プレビューを取得し、共有できるブラウザ拡張・「Mirrorful」

モダンで美しいオープンソースのTailwind.cssコンポーネント集・「Ripple UI」

Ads

開発者やデザイナー、マーケター、ライターなど向けのツールを無料で使えるもののみ収集している・「Mr. Free Tools」

WebフォントやSVGの他、FigmaやVue、React、Flutterなどもサポートされている2300以上のオープンソースアイコンプロジェクト・「Atlas Icons」

アニメーション付与も可能な、ピクセルアートなどローポリ専用のオープンソース3Dモデルエディター・「Blockbench」

Web上での様々な活動に貢献してくれそうな無料ツールを大量に公開している・「1Tools」

クロスプラットフォームで動作するオープンソースのリモートデスクトップツール・「HopToDesk」

Tailwind.css+ Alpine.jsのコードをプレビューとエディター付きで探せる・「Windl」

ダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSS・「Bahunya」

WCAG に準拠した色の組み合わせを簡単に作成できるWebアプリ・「Accessible color palette generator」

最新テクノロジーに関するアイコンをフォントで提供するアイコンセット・「Futicons」

Material Designの原則に従ってデザインされたオープンソースのアイコンライブラリ・「Circum」

開発者やマーケター、デザイナー等に有益なツールやリソースを探せる・「Resource.fyi」

汎用的で使いやすいオープンソースのSVGアイコンのセット・「Slim icons」

任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」

カラーピッカーやルーラー、テキスト編集や要素の移動や削除、コード抽出などを任意のWebページで実行できるOSSの開発者向けブラウザ拡張・「SuperDev」

スクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリ・「Lenis」

デザインシステムの為のオープンソースのスターターキット・「kickstartDS」

デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」

サンプルを見ながらアクセシブルなカラー配色をランダム生成できるカラーツール・「randoma11y」

マウスの動きに応じて輝くホログラフを実装できる・「pokemon-cards-css」