任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Quality CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを...
Resource - Webデザイナー向け
カラーピッカーやルーラー、テキスト編集や要素の移動や削除、コード抽出などを任意の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...
Figmaで公開されているデザインシステムをコレクションしている・「Design Systems For Figma」
Design Systems For Figma Design Systems For FigmaはFigmaで公開されているデザインシステムをコレクションしているWebサイトです。 AWSやUber、IBMやMS、Airtab...
Feather Iconsフォークのオープンソースなアイコンプロジェクト・「Lucide」
Lucide Lucideは人気のOSSアイコンプロジェクトであるFeather Iconsのフォークであるシンプルなアイコンセットのプロジェクトです。 スタイルは概ね同じものですが、ではなぜフォークされ、新たに別プロジェクトと...
ミニマルスタイルで汎用的なオープンソースのアイコンセット・「Sargam」
Sargam Sargamはミニマルスタイルで汎用的なオープンソースのアイコンセットです。様々な用途に使用できるよう、シンプルさ、一貫性、柔軟性を重視した設計となっているそうです。 700以上の汎用的なアイコンが用意されており、...
様々な国の象徴的なアイコンをゆるいイラストのアイコンをセットで無料公開している・「Landicons」
Landicons Landiconsは様々な国の象徴的なアイコンをゆるいイラストのアイコンをセットで無料公開しているアイコンプロジェクトです。 現在はオーストラリア、ブラジル、日本、中国、イギリス、フランス、インド、インドネシ...
アプリやWebサイト開発等に役立つツールを大量にコレクションしている・「Uneed.best」
Uneed.best Uneed.bestはアプリやWebサイト開発等に役立つツールを大量にコレクションしている開発者向けキュレーションサイトです。以前はフロントエンド専門でしたがリニューアルしてより幅広い層へ対応したみたいです。 ...
パフォーマンス重視でReact専用として作られたオープンソースのStorybook代替・「Ladle」
Ladle LadleはReact専用として作られたオープンソースのStorybook代替です。ControlsとCSFの互換があります。 ご存知の通りStorybookもオープンソースですが、Ladleはパフォーマンスを重視し...
白黒写真をカラー化するAIベースのWebアプリ・「Palette」
Palette Paletteは白黒写真をカラー化するAIベースのWebアプリです。開発者はGoogle Artsに所属するエンジニアで機械学習によるカラー化（ML colorized）に携わっているみたいです。 写真をアップロ...
TypeScriptで書かれたオープンソースのヘッドレスCMS・「Alinea」
Alinea AlineaはTypeScriptで書かれたオープンソースのヘッドレスCMSです。コンテンツはGitでバージョン管理されるGitベースとなっており、埋め込み型のSQLiteにインデックスされる事で高速なクエリと全文検索も...
任意の画像や絵文字等を使ってパターンを作成出来るWebアプリ・「Tylify」
Tylify Tylifyは任意の画像や絵文字等を使ってパターンを作成出来るWebアプリです。複数の絵文字や画像を使ってオリジナルのパターン画像を作成出来る、というもの。 実際にパターンとして利用した状態のプレビューが可能で、そ...
ホワイトボード感覚でアイデアとプロジェクトを視覚的に整理出来るクリエイター向けのノートアプリ・「xTiles」
xTiles xTilesはホワイトボード感覚でアイデアとプロジェクトを視覚的に整理出来るクリエイター向けのノートアプリです。 メモやリンク、動画や画像などのメディアやTodo、データなどをひとまとめにしてザッと見で状況を把握で...
オープンソースのWEBフォントをnpmでインストールできるmonorepo・「Fontsource」
Fontsource FontsourceはオープンソースのWEBフォントをnpmでインストールできる更新型monorepoです。余分なネットワークリクエストが無い分、Googleフォントに比べて大きくパフォーマンスを向上できるそうで...
良い感じのカラーパレットをランダム生成し、CSS変数でコピーできる・「colorSS」
colorSS colorSSはカラーパレットをランダム生成し、CSS変数でコピーできるシンプルなWebアプリです。どれも良い感じで生成してくれます。 スペースキーで生成、sキーでお気に入りに登録できます。お気に入り登録したカラ...
CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」
Open Props Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソース...