Webデザイナー向け

インスピレーション

良質なUIのデザイン例を任意のキーワードで検索できる・「lookup.design」
CSS/HTML

細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリ・「filters.css」
CSS/HTML

CSS box-shadowで出来る様々なスタイルを収集、コードもコピーできる・「Beautiful CSS box-shadow examples」
Ads
Webデザイン補助

デザイナーに必要なツール等のショートカットのチートシートを1か所に集約した・「Shortcuts.design」
その他

色や太さ、サイズなどを設定して利用できるシンプルなSVGアイコンセット・「iconhub」
JavaScript

OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」
インスピレーション

美しいカラーパレットを大量に大量に保管している・「Hex Palette」
ソフトウェア

全てオープンソースで公開されている、Web制作に使えるシンプルなツール集・「Omatsuri」
ソフトウェア

フォトグラファー向けに開発されたオープンソースのポートフォリオ公開ツール・「Moul」
ソフトウェア

プライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツール・「Plausible」
複合/その他

複数サンプルも用意されているBootstrap 5ベースのオープンソースの管理画面テンプレート・「Volt」
ソフトウェア

Unsplashの画像を検索してDLしたりクリップボードにコピーしたり壁紙に設定できるデスクトップアプリ・「Coaster」
その他

チーム向けのワークスペースを提供するシンプルなプロジェクト管理ツール・「Undesk」
JavaScript

滑らかに動くスワイプ可能な非依存型のカルーセルライブラリ・「Embla Carousel」
CSS/HTML

Bootstrapライクに使えるフロントエンドフレームワーク・「Halfmoon」
その他

様々な業種やシーンにも対応したオープンソースのベーシックなアイコンセット・「Neu Icons」
ソフトウェア

SNS等のローディングで見かけるプレースホルダーをSVGで作れる・「Create Content Loader」
ソフトウェア

Vue.jsで構築されたオープンソースのフォントビューア・「fontvuer」
CSS/HTML

CSSの用語を視覚的に学べる・「CSS Vocabulary」
その他

ミニマルなスタイルの汎用的なオープンソース線画アイコンセット・「Basicons」
Webデザイン補助

画像のメイン部分を残し、自動で背景を削除するオンラインの切り抜きツール・「Slazzer」
CSS/HTML

CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
次のページ