HTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリ・「Waveditor」
Waveditor WaveditorはHTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリです。 よくある、プレビューを見ながら直接編集できるもので、マウスホバーで編集したいエリアが分かるので任意のエリア...
Resource - Webデザイナー向け
1つのHTML要素で実装できるCSSローダーのコードを500以上紹介している・「CSS Loaders」
CSS Loaders CSS Loadersは1つのHTML要素で実装できるCSSローダーのコードを500以上紹介しているCSSローダーのコレクションサイトです。動作デモをクリックすればコードのコピーが完了します。 全てのロー...
CC0ライセンスで配布されている、トランスヒューマンを題材に描かれたイラスト集・「transhumans」
transhumans transhumansはCC0ライセンスで配布されている、トランスヒューマンを題材に描かれたイラスト集です。 「トランスヒューマン」という言葉はあまり馴染みが無いかもしれませんが、例えばSFなんかに出てく...
様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」
ReactDemos.com ReactDemos.comは様々なタイプのReact UIコンポーネントの動作を確認できるWebサイトです。いわゆるUIギャラリーサイトみたいな感じです。 スムーズなリストアイテムのドラッグ&ドロ...
クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」
CSS Selectors: A Visual Guide CSS Selectors: A Visual GuideはクラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べるWebサイトです。 テキ...
各項目に入力するだけで簡単に棒グラフを作成出来るWebアプリ・「Bar Graph Maker」
Bar Graph Maker Bar Graph Makerは各項目に入力するだけで簡単に棒グラフを作成出来るノーコードWebアプリです。 以前ご紹介したGraphyはテーブルに入力するタイプでしたが、こちらはもっとシンプルな...
AIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネント・「LangUI」
LangUI LangUIはAIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネントです。 AIアプリと言うか、ほぼAIチャット向けのUIという感じで、プロンプトの入力フォームや対話UI...
既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリ・「EasyDropzoneJS」
EasyDropzoneJS See the Pen Untitled by kachibito (@kachibito) on CodePen. EasyDropzoneJSは既存のフォームに簡単にドラッ...
プレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリ・「Invoice Kitchen」
Invoice Kitchen Invoice Kitchenはプレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリです。 プレビューと言うか、既にレイアウト済みのページで直接編集できるようになっている、とい...
Codespacesに似たクライアント専用のオープンソース開発環境・「DevPod」
DevPod DevPodはCodespacesに似たクライアント専用の、再現可能な開発者環境を作成するためのOSSの開発環境ツールです。 完全無料で、大半のクラウドプロバイダーをサポートしておりベンダーロックインも無く、安心し...
フォームに記入するだけで請求書や領収書を作成してPDFに出力できるOSS・「Invoice Dragon」
Invoice Dragon Invoice Dragonはフォームに記入するだけで請求書や領収書を作成してPDFに出力できるオープンソースのWebアプリです。 表題の通りで、必要事項をフォームに入力すればあらかじめ用意された請...
複数のオープンソースのSVGアイコンプロジェクトを横断検索、その場で簡単なカスタマイズも可能なアイコン検索アプリ・「Iconbuddy」
Iconbuddy Iconbuddyは複数のオープンソースのSVGアイコンプロジェクトを横断検索、その場で簡単なカスタマイズも可能なアイコン検索アプリです。 156のアイコンセット、総計10万以上のアイコンから任意のキーワード...
Tailwindコンポーネントをノーコードで作成、編集し、コードをコピーして利用できる・「Mytailwind」
Mytailwind MytailwindはTailwind.cssのコンポーネントをノーコードで作成、編集し、コードをコピーして利用できるWebアプリです。 ボタン、ナビゲーションバー、カード、サイドバー、アラート、画像、チッ...
WebフォントやSVGで用意されたオープンソースの汎用的なアイコンセット・「Mage Icons」
Mage Icons Mage IconsはWebフォントやSVGで用意されたオープンソースの汎用的なアイコンセットです。最初はMegaと誤認しましたけどMage（魔法使い）でした。 Web、iOS、Android、デスクトップ...
Tailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレート・「Tailbreeze」
Tailbreeze TailbreezeはTailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレートです。 この手のテンプレートはご存知のように数えきれないほど出回っていますが、Tailbreezeは中...
Alpine.jsとTailwin.cssの為のオープンソースUIライブラリ・「Pines」
Pines PinesはAlpine.jsとTailwin.cssの為のオープンソースUIライブラリです。両方を使用しているプロジェクトにコピペで導入できるUIを提供しています。 AlpineとTailwindを併用することで、...
任意のWebサイトを編集可能なFigma用ファイルに変換できる・「html.to.design」
html.to.design html.to.designは任意のWebサイトを編集可能なFigma用ファイルに変換できるサービスです。 手順も簡単で、専用のChrome拡張をインストールし、変換したいWebサイトで実行すると、...
three.js用のReactレンダラーであるReact Three Fiber専用に開発されたオープンソースのビジュアルエディター・「Triplex」
Triplex TriplexはReact Three Fiber専用に開発されたオープンソースのビジュアルエディターです。現在のところ、Windows及びMacOSに対応しています。 React Three Fiberはthr...
読みやすさとブルータリズムのデザイン原則を融合させたオープンソースのBootstrapテーマ・「Brutopia」
Brutopia Brutopiaは読みやすさとブルータリズムのデザイン原則を融合させたオープンソースのBootstrapテーマです。 ブルータリズム(Wikipedia)とは建築様式の一種で、機能性の象徴的な様式だそうです。文...
VueやReactもサポートのされたオープンソースのシンプルで汎用的なアイコンセット・「Iconsans」
Iconsans IconsansはVueやReactもサポートのされたオープンソースのシンプルで汎用的なアイコンセットです。MITライセンスのもとで配布されています。 様々なタイプのアプリケーションに利用できるよう、SVGで揃...
デザインシステムにおけるタイポグラフィやアイコン、スペーシング、コンポーネント等のプロポーションスケールを作成出来るWebアプリ・「Proportio」
Proportio Proportioはデザインシステムにおけるタイポグラフィやアイコン、スペーシング、コンポーネント等のプロポーションスケールを作成出来るWebアプリです。 パラメーターを入力して作り出すジェネレーティブなパラ...
医療に関するものを中心に500以上のシンプルなSVGアイコンをフリーで提供する・「svg.health」
svg.health svg.healthは医療に関するものを中心に500以上のシンプルなSVGアイコンをフリーで提供するSVGアイコンプロジェクトです。 CC-BYで提供されており、クレジットを条件に個人でも商用でも無料で利用...