CSSライクに書けるオープンソースのデータバインディングJavaScriptライブラリ・「Corset」
Corset See the Pen Counter example by kachibito (@kachibito) on CodePen. CorsetはCSSライクに書けるオープンソースのデータバインデ...
Resource - Webデザイナー向け
テキスト/アイコンベースのシンプルなアバターを生成するReactライブラリ・「Avvvatars」
Avvvatars Avvvatarsはテキスト/アイコンベースのシンプルなアバターを生成するReactライブラリです。任意の画像等を選択しないユーザーの為のもの、という感じ。 40の色と60のアイコン、入力されたテキスト（ユー...
画像内の消したい部分を指定するだけでAIで自動消去してくれる・「Magic Eraser」
Magic Eraser Magic Eraserは画像内の消したい部分を指定するだけでAIで自動消去してくれるWebアプリです。 もはや珍しいものでは無くなったこの手のAIによる画像加工ツールは当ブログでも何度かご紹介していま...
軽量で非依存のモダンなCSSフレームワーク・「Uimini」
Uimini Uiminiは軽量で非依存のモダンなCSSフレームワークです。フルRWD対応、テーマのカスタマイズや他フレームワークとの併用も可能です。 JS不要、圧縮版でわずか4kbの超軽量なスタイルシートとなっており、パフォー...
見やすくシンプルなWebサイトをクラスレスで構築するための軽量スタイルシート・「Almond.CSS」
Almond.CSS See the Pen Untitled by kachibito (@kachibito) on CodePen. Almond.CSSは見やすくシンプルなWebサイトをクラスレスで構築...
チームで利用可能の、モダンなUIで見やすく使いやすいオープンソースのプロトタイピングツール・「Penpot」
Penpot Penpotはチームで使えるモダンなUIで見やすく使いやすいオープンソースのプロトタイピングツールです。ブラウザベース且つウェブ標準のSVGを採用し、クロスプラットフォームでの動作に配慮されています。 モダンで見や...
URLの差し替えでも代替可能なプライバシーフレンドリーなオープンソースのGoogleフォント代替・「Fonts」
Fonts FontsはプライバシーフレンドリーなオープンソースのGoogleフォント代替です。互換性があり、以下のようにするだけで置き換える事が出来るそうです。 👆これを以下のように 或い...
やや緩いタッチで描かれた手書きの線画アイコンのセット・「Doodle Icons」
Doodle Icons Doodle Iconsは、やや緩いタッチで描かれた手書きの線画アイコンのセットです。手書き風ではありますがしっかり認識できるようにデザインされています。 アイコンは400以上用意されており、PNG、S...
モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」
TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...
デザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクション・「Toools.design」
Toools.design Toools.designはデザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクションです。 イラストやアイコン、写真素材、モックアップやタイポグラフィなどのほか、デザインやU...
最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリ・「Whirl」
Whirl Whirlは最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリです。100以上のローダーが纏められています。 どれもユニークで実用的なローダーですが、タイトル通り最小限のコードで実装できるようにな...
微調整や編集も可能な画像の背景削除ツール・「PicWish」
PicWish PicWishは微調整や編集も可能な画像の背景を自動で削除できるWebアプリです。基本的には既存の背景削除ツールと同等の精度と機能を持っています。 後発サービスとして異なる点は、微調整が可能な機能です。背景削除を...
タブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリ・「CSSUI」
CSSUI CSSUIはタブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリです。 タブ、ドロップダウン、モーダル、スライドアウトメニュー、ア...
Webやモバイルアプリ向けに開発されたオープンソースのテスト自動化プラットフォーム・「Testsigma」
Testsigma TestsigmaはWebやモバイルアプリ、API向けに開発されたオープンソースのテスト自動化プラットフォームです。 AIを自然言語処理に利用しており、英語でテストケースを書けば動作するように設計されており、...
ダミー画像をSVGまたはbase64で生成するシンプルなWebアプリ・「Placy」
Placy Placyはダミー画像をSVGまたはbase64で生成するシンプルなWebアプリです。 この手のダミー画像生成ツールはurlのパラメーターの変更だけで簡単に生成できるタイプが殆どでしたがこちらは直接コードを発行してく...
シンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリ・「Xtend UI」
Xtend UI Xtend UIはシンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリです。A11y規格に準拠しておりアクセシビリティにも配慮されています。 Tailwind.css、vanilla...
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」
Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...
動画ファイル内の人物部分のみを切り取って別の動画と合成できる動画背景削除アプリ・「SocialBook Remove Video Background」
SocialBook Remove Video Background SocialBook Remove Video Backgroundは動画ファイル内の人物部分のみを切り取って別の動画と合成できる動画背景削除アプリです。 以...
ReactとFabric.jsで作られたオープンソースのcanva代替となるデザインエディター・「Scenify」
Scenify ScenifyはReactとFabric.jsで作られたオープンソースのcanva代替となるデザインエディターです。開発者の方は代替と言うかクローンとして設計したそうで概ね同じ機能を有していると説明しています。 ...
縦線、横線、四分円だけを使うオープンソースのミニマルなグラフィックエディター・「minimator」
minimator minimatorは縦線、横線、四分円だけを使うオープンソースのミニマルなグラフィックエディターです。方眼紙のようにドットによるグリッドに沿って縦線、横線、四分円にいずれかを使い、線画を作成できるエディター的なもの...
任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成する・「Alwane」
Alwane Alwaneは任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成するWebアプリです。 抽出したいWebサイトのURLを入力すれば、そのサイトを解析してカラーコードを自動生成してくれま...
Deno製のオープンソース静的サイトジェネレーター・「Lume」
Lume LumeはDeno製のオープンソース静的サイトジェネレーターです。JekyllやEleventyなどの静的サイトジェネレータに触発されて開発されたそうですが、より高速でよりシンプルに使用し、設定する事が可能で柔軟性にも富んだ...