モダンで美しいオープンソースのTailwind.cssコンポーネント集・「Ripple UI」
Ripple UI See the Pen Untitled by kachibito (@kachibito) on CodePen. Ripple UIはモダンで美しいオープンソースのTailwind.cs...
Resource - Webデザイナー向け
開発者やデザイナー、マーケター、ライターなど向けのツールを無料で使えるもののみ収集している・「Mr. Free Tools」
Mr. Free Tools Mr. Free Toolsは開発者やデザイナー、マーケター、ライターなど向けのツールを無料で使えるもののみ収集しているコレクションサイトです。 無料といって形態は多様化していて一概に言えませんが、...
WebフォントやSVGの他、FigmaやVue、React、Flutterなどもサポートされている2300以上のオープンソースアイコンプロジェクト・「Atlas Icons」
Atlas Icons Atlas Iconsは2300以上もの多種多様なアイコンを大量にまとめたオープンソースのアイコンプロジェクトです。ベーシックなものからニッチなニーズに応えたものまで多岐にわたります。 アイコンはSVGで...
アニメーション付与も可能な、ピクセルアートなどローポリ専用のオープンソース3Dモデルエディター・「Blockbench」
Blockbench Blockbenchはアニメーション付与も可能な、ピクセルアートなどローポリ専用のオープンソース3Dモデルエディターです。 マイクラ的なローポリゴンな3Dモデルを直感的な操作でデザイン出来る、というものでフ...
Web上での様々な活動に貢献してくれそうな無料ツールを大量に公開している・「1Tools」
1Tools 1ToolsはWeb上での様々な活動に貢献してくれそうな無料ツールを大量に公開しているWebアプリコレクションサイトです。他サイトの紹介ではなく、全て自サイトで開発し、全て無料で利用できるよう公開されています。 ...
クロスプラットフォームで動作するオープンソースのリモートデスクトップツール・「HopToDesk」
HopToDesk HopToDeskはクロスプラットフォームで動作するオープンソースのリモートデスクトップツールです。Windows、Mac、Linux、Android、iOS、Raspberry Piなどで動作するそうです。 ...
Tailwind.css+ Alpine.jsのコードをプレビューとエディター付きで探せる・「Windl」
Windl WindlはTailwind.css+ Alpine.jsのコードをプレビューとエディター付きで探せるWebサイトです。オープンソースのコミュニティベースとなっているそうです。 パンくずやフォーム、カード、モーダルや...
ダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSS・「Bahunya」
Bahunya Bahunyaはダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSSです。ナビゲーションはネストにも対応しています。 セマンティックなHTML要素でWebサイトやWebアプリを設計...
WCAG に準拠した色の組み合わせを簡単に作成できるWebアプリ・「Accessible color palette generator」
Accessible color palette generator Accessible color palette generatorはWCAG（Web Content Accessibility Guidelines）に準拠した...
最新テクノロジーに関するアイコンをフォントで提供するアイコンセット・「Futicons」
Futicons Futiconsは最新テクノロジーに関するアイコンをフォントで提供するアイコンセットです。最新テクノロジーという言葉に反応される方も少なくないかもしれませんがまぁさほど深い意味を成さないタイトルなのでご容赦ください。...
Material Designの原則に従ってデザインされたオープンソースのアイコンライブラリ・「Circum」
Circum CircumはGoogleのMaterial Design及びIBMのCarbon designの原則に従ってデザインされたオープンソースのアイコンライブラリです。ReactやVue、Svelteなどもサポートされていま...
開発者やマーケター、デザイナー等に有益なツールやリソースを探せる・「Resource.fyi」
Resource.fyi Resource.fyiは開発者やマーケター、デザイナー等に有益なツールやリソースを探せるキュレーションサイトです。 従来のこの手の際と同様、カテゴリやキーワードから探す形になります。カテゴリはAPIや...
汎用的で使いやすいオープンソースのSVGアイコンのセット・「Slim icons」
Slim icons Slim iconsは汎用的で使いやすいオープンソースのSVGアイコンのセットです。100のベーシックなアイコンがSVGで揃えられています。 ハンバーガーやメール、サーチ、ホーム、アラートや矢印など一般的な...
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Quality CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを...
カラーピッカーやルーラー、テキスト編集や要素の移動や削除、コード抽出などを任意のWebページで実行できるOSSの開発者向けブラウザ拡張・「SuperDev」
SuperDev SuperDevは開発に役立つ様々なツールを任意のWebページで実行できるオープンソースのChromeエクステンションです。 任意のテキストの編集、カラーピッカー、Webページで設定されているカラーの一覧、ガイ...
スクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリ・「Lenis」
Lenis Lenisはスクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリです。LocomotiveやGSAP ScrollSmootherといった先発ライブラリをリスペクトしつつ、より使いやすく欠点も補っ...
デザインシステムの為のオープンソースのスターターキット・「kickstartDS」
kickstartDS kickstartDSはデザインシステムの為のオープンソースのスターターキットです。5つのステップで始められるスモールスターターながら、ブランドに準拠した一貫性あるWebサイトやアプリケーション構築を効率的...
デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」
Design Tokens Generator Design Tokens Generatorはデザイントークンを作成し、まとめてCSS変数にしてくれるWebアプリです。 デザイントークンとは？については以下のAdobe blo...
サンプルを見ながらアクセシブルなカラー配色をランダム生成できるカラーツール・「randoma11y」
randoma11y randoma11yはサンプルを見ながらアクセシブルなカラー配色をランダム生成できるカラーツールです。 2色のアクセシブルなカラー配色をランダムで表示するシンプルなものですが、基準が従来のWCAGではなくA...
マウスの動きに応じて輝くホログラフを実装できる・「pokemon-cards-css」
pokemon-cards-css pokemon-cards-cssはマウスの動きに応じて輝くホログラフを実装できるスタイルシートです。名前の通りでポケモンのトレカのホログラフを再現したものになります。 と言っても自分自身でポ...
必要最低限だけ用意されたclass-lessな軽量スタイルシート・「Bolt.css」
Bolt.css Bolt.cssは必要最低限だけ用意されたclass-lessな軽量スタイルシートです。HTML要素のみでミニマルなスタイリングが可能となっています。 従来のクラスレスなCSSと異なり、どちらかというとスタータ...
任意の画像の切り取り、圧縮、変換、サイズ変更を一括で行えるWebアプリ・「Image Converter」
Image Converter Image Converterは任意の画像の切り取り、圧縮、変換、サイズ変更を一括で行えるWebアプリです。 URL或いはアップロードした画像を範囲を指定して切り取り、自動でサイズ圧縮、pngやg...