Tailwind.cssで利用できる様々なUIのHTMLコードを配布する・「Flowrift」
Flowrift FlowriftはTailwind.cssで利用できる様々なUIのHTMLコードを配布するWebサイトです。Tailwind.cssが読み込まれたWebページにHTMLを貼るだけで使う事が出来ます。 コードはブ...
Resource - Webデザイナー向け
Web Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリ・「Motion One」
Motion One Motion OneはWeb Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリです。 使い方も以下のようにとてもシンプルで、軽量なAnime.jsのさらに半分のファイ...
ベーシックなタイプのいろいろなSVGパターンを配布する・「Basic Pattern Repository」
Basic Pattern Repository Basic Pattern RepositoryはベーシックなタイプのいろいろなSVGパターンを配布するパターン配布サイトです。 斜線や罫線、方眼、波線などどこでも見かけるような...
アニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーター・「whatamesh」
whatamesh whatameshはアニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーターです。 2021年9月現在、Stripeのヘッダに使われているようなやつを作れる、みたいなアプリです。 ...
CSSファイルを読み込むだけで見た目を整えられるclass-lessなCSSフレームワーク・「AttriCSS」
AttriCSS See the Pen by kachibito (@kachibito) on CodePen. AttriCSSは読み込むだけで見た目を整えられるclass-lessなCSSフレーム...
任意の画像で様々な種類のCSS製フィルターを確認、気に入ったフィルターをクリックするとCSSコードをコピーできるWebアプリ・「FilterSS」
FilterSS FilterSSは任意の画像で様々な種類のCSS製フィルターを確認、気に入ったフィルターをクリックするとCSSコードをコピーできるWebアプリです。 現在42種のフィルターが用意されており、全てCSSで書かれて...
Webデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクション・「Toolkit」
Toolkit ToolkitはWebデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクションサイトです。 とても細かくカテゴライズされていていたりキーワード検索出来たりログイン不要でお気に入り機能を使えたり...
2Dのピクセルアートから容易に3Dモデル化できるオープンソースのKenShapeクローン・「Pixel Model Maker」
Pixel Model Maker Pixel Model Makerは2Dのピクセルアートを3Dモデルにしてくれるオープンソースのソフトウェアです。 ゲームアセットを提供するKenneyが開発、サービス展開するKenShape...
チャートやダイアグラムなど、画像を手書き風に変換、スタイルの調整等も可能なWebアプリ・「INSTAD.IO」
INSTAD.IO INSTAD.IOはチャートやダイアグラムなど、画像を手書き風に変換、スタイルの調整等も可能なWebアプリです。 フローチャートやダイアグラム、インフォグラフィックなどを印象的な見た目の手書き風に出来るように...
Webページの大まかなスタイルをざっくり決めてCSSコードを発行できる・「SHAPER」
SHAPER SHAPERWebページの大まかなスタイルをざっくり決めてCSSコードを発行できるOSSです。 ツールバーでタイポグラフィ、テキストやユニット、ボタンなどのスペースサイズ、カラースキーム、角丸の有無に加えてダークモ...
レスポンシブWebデザインの表示テストを複数デバイスで同時に行えるオープンソースのElectronベースデスクトップアプリ・「Responsivize」
Responsivize ResponsivizeはレスポンシブWebデザインの表示テストを複数デバイスで同時に行えるオープンソースのElectronベースデスクトップアプリです。インドに住む16歳の学生の方が開発してるみたいです。 ...
SkechやFigmaで使えてReact、Vue等もサポートするオープンソースの国旗アイコンのセット・「Flagpack」
Flagpack FlagpackはSkechやFigmaで使えてReact、Vue等もサポートするオープンソースの国旗アイコンのセットです。 250以上の国の国旗がSVGで書かれており、3種類のサイズで用意されており、デザイナ...
複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」
Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...
Instagramのフィードをレイアウト等を細かくカスタマイズして任意のWebサイトで埋め込み表示できるウィジェットサービス・「LightWidget」
LightWidget LightWidgetはInstagramのフィードをレイアウト等を細かくカスタマイズして任意のWebサイトで埋め込み表示できるウィジェットサービスです。 難しい操作もなく、コーディング不要のノーコードツ...
複数のダッシュボードUIを全てオープンソースとしてFigmaで提供している・「Openby.design」
Openby.design Openby.designは複数のダッシュボードUIを全てオープンソースとしてFigmaで提供しているプロジェクトサイトです。 20ほどのダッシュボードUIがOSSとして公開されており、ソースのDL或...
任意のWebページで使われているSVGファイルを最適化したりコードをコピーしたりできるオープンソースのブラウザ拡張・「SVG Gobbler」
SVG Gobbler SVG Gobblerは任意のWebページで使われているSVGファイルを最適化したりコードをコピーしたりできるオープンソースのブラウザ拡張です。 ChromeとFirefoxの拡張が用意されていま...
アスキーアートをSVG化し、ダイアグラム等をプレーンテキストで作図できるOSS・「Svgbob Editor」
Svgbob Editor Svgbob EditorはアスキーアートをSVG化し、ダイアグラム等をプレーンテキストで作図できるOSSです。 上図のようにプレーンテキストで書いた図がそのままSVGで出力されるので複雑なダイアグラ...
背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできる・「Glassmorphism CSS Generator」
Glassmorphism CSS Generator Glassmorphism CSS Generatorは背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできるWebアプリです。 Windows Vis...
Webサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツール・「Sa11y」
Sa11y Sa11yはWebサイトに組み込んだりブックマークレットとして使えるOSSのアクセシビリティチェックツールです。 下記のコードを挿入する事でWebページのアクセシビリティチェックを行う事が出来ます。 ...
各OSにも対応のFigmaやSketch、XDなどからもインポートできるノーコードなビジュアルHTML/CSSエディター・「Desech Studio」
Desech Studio Desech Studioは各OSにも対応のFigmaやSketch、XDなどからもインポートできるノーコードなビジュアルHTML/CSSエディターデスクトップアプリです。 Mac、Windows、L...
ドラッグ&ドロップでTailwind.cssベースのWebページを作成出来るノーコードWebサイトビルダー・「Windframe」
Windframe Windframeはドラッグ&ドロップでTailwind.cssベースのWebページを作成出来るノーコードWebサイトビルダーです。 この手のツールでよくあるタイプのUIで直感的に操作できます。左カラムでパー...
Web制作をサポートする実用的なツールを50以上公開している・「toolb.dev」
toolb.dev toolb.devはWeb制作をサポートする実用的なツールを50以上公開しているプロジェクトサイトです。大量のツールが公開されていますが、どれもそれなりに使いそうなツールばかりでした。 ツールはHTML、CS...