Bootstrapに基づいて設計されたミニマルデザインなオープンソース管理画面テンプレート・「Spur」
Spur SpurはBootstrapに基づいて設計されたダッシュボードテンプレートです。ミニマルなスタイルで装飾もほとんどありませんのでフレームワークライクに使う事が出来そうです。チャートを表示したい時はCharts.jsを読み込め...
Resource - Webデザイナー向け
1000以上ものシンプルなアイコンをsketchファイルやSVG、PSDやFigmaファイルなども同梱して無償配布するオープンソースのアイコンセット・「Material Icons Library」
Material Icons Library Material Icons Libraryは1000種以上のアイコンを無償配布するオープンソースのアイコンセットです。アイコンはSVGで配布されるだけでなく、sketchファイルやPSD...
カラーコードの文字に焦点を当てた実験的なカラーツール・「#c0ffee is the color」
#c0ffee is the color #c0ffee is the colorはカラーコードの文字に焦点を当てた実験的なカラーツールです。ABCDEFのいずれかを含む文字且つ、6文字か3文字の単語を辞書から抽出し、該当するカラーコ...
任意の動画ファイルをアップロードすると、指定したモバイル端末のモックアップに合成した動画ファイルを作成してくれる・「Mock」
Mock Mockは任意の動画ファイルをアップロードすると、指定したモバイルデバイスのモックアップ画像のモニター部分に合成した新しい動画ファイルを作成してくれるWebアプリです。作成された動画ファイルはアップロード時に指定したメールア...
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」
Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...
レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」
maturity-radar See the Pen MdLMKo by kachibito (@kachibito) on CodePen. maturity-radarはレーダーチャートを作成できるスクリプトで...
複数のストックフォトサイトからCCやパブックドメインなどの写真を横断検索できる・「Image Finder」
Image Finder Image Finderは複数のストックフォトサイトからCC0やパブリックドメイン、そのほかのCCライセンスの写真を横断検索できるWebアプリです。 対象サイトはpicjumboやPixabay、Goo...
様々なWebアプリのコンテンツ単位のスクリーンショットをデザインギャラリーに収集している・「Webframe」
Webframe WebframeはさまざまなWebアプリのFAQページや料金表ページ、LPやログインフォームなどコンテンツ単位のSSをデザインギャラリーとして掲載しているWebアプリ専用デザインギャラリーです。 カテゴリはコン...
複数デザイナー向けコミュニティやインスピレーションサイトを任意のカラーコードやキーワードで横断検索できる・「Muzli Search」
Muzli Search Muzli Searchはさまざまなデザインインスピレーションサイトやコミュニティを任意のカラーコードやキーワード等で横断検索できるデザイン検索エンジンです。以前ご紹介したChromeエクステンションのMuz...
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」
Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...
Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」
Neede Design Resources Neede Design ResourcesはWebデザイナーやUI、UXデザイナーなどデザイナー向けのリソースを大量にまとめているキュレーションサイトです。ブランディングやカラー...
自動で背景を除去してくれるremove.bgに、各OSに対応したデスクトップアプリが登場・「remove.bg for Windows/Mac/Linux」
remove.bg for Windows/Mac/Linux remove.bg for Windows/Mac/Linuxは自動で背景を除去してくれるremove.bgのデスクトップアプリ版です。先日Photoshopでも使えるよ...
大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」
OpenMoji OpenMojiは学生53人と2人の教授が共同で進めているオープンソースの絵文字プロジェクトです。現在3000以上ものSVGアイコンが本プロジェクトのスタイルガイドに従い、一貫したスタイルで作成、公開されてお...
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」
DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 ...
カラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれる・「Accessible Color Generator」
Accessible Color Generator Accessible Color Generatorは任意のカラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれるWebアプリです。提案してくれるのは...
高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」
Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」
CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...
プロトタイピングツールのFigmaで使えるBootstrap 4用のUIキット・「Figma Bootstrap 4 GUI Components」
Figma Bootstrap 4 GUI Components Figma Bootstrap 4 GUI ComponentsはプロトタイピングツールのFigmaで使えるBootstrap 4用のUIコンポーネント集です。話題のF...
textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」
Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に...
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...
SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」
SVG Colorizer SVG Colorizerは任意のSVGアイコンを好みのカラーパレットで色を変更、ダウンロードできるWebアプリです。アプリ側で用意したアイコンの他、任意のSVGファイルをアップロードすると自動で解析し、カ...
SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」
iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...