Resource - Webデザイナー向け

フレームワーク不要の非依存型で軽量シンプルなカラーピッカーライブラリ・「Vanilla Colorful」

Vanilla Colorful Vanilla Colorfulはフレームワーク不要の非依存型で軽量シンプルなカラーピッカーライブラリです。 名前の通りバニラなスクリプトで動作しますが、他フレームワークにも柔軟に対応する事も可...

1000以上のシンプルなアイコンがSVGやPNGで用意され、全てオープンソースとして利用できる・「Emblemicons」

Emblemicons Emblemiconsは1000以上のアイコンをセットにしたOSSのアイコンパックです。それぞれSVG、背景有りSVG、PDF、PNGが6サイズ、JPGも6サイズ用意されており、全てがMITライセンスの元で公開...

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

lookup.design lookup.designは良質なUIのデザイン例を任意のキーワードで検索できるWebサービスです。 様々なWebサイトのUIパーツが大量に手動で登録されているとの事。例えばfooterやbutton...
Ads

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

filters.css filters.cssは細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリです。 昔ご紹介したInstagram.cssなどのように、任意の画像にclassを付与するだけでカ...

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

Beautiful CSS box-shadow examples Beautiful CSS box-shadow examplesはCSSのbox-shadowで出来る様々なスタイルを収集、コードもコピーできるWebサイトです。 ...

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

Shortcuts.design Shortcuts.designはデザイナーの方向けに必要なツール等のショートカットのチートシートを1か所に集約したプロジェクトサイトです。 SketchやFigma、各Adobe製品、Affi...

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

iconhub iconhubは色や太さ、サイズなどを設定して利用できるシンプルなSVGアイコンセットです。 スタイルは単色線画、単色塗りつぶし、2色線画、2色塗りつぶし、2色線画+塗りなどから選択でき、サイズは6種、線の太さも...

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

Drawflow DrawflowはJavaScript製のシンプルで使いやすいフローチャート作成Webアプリです。オープンソースとしてソースコードも公開されています。他ライブラリへの依存もありません。 左ペインにあらかじめ用意...

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

Hex Palette Hex Paletteは4色ベースの美しいカラーパレットを大量にストックしているカラーパレットギャラリーです。 カラーパレットといっても編集したり類似を探したり他アプリで使えるファイルをDL出来たりといっ...

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

Omatsuri OmatsuriはWeb制作に使えるシンプルなツールのコレクションです。基本的にフロントエンド開発向けがメインだそうです。1つ1つはシンプルなツールですが、全てがPWA対応且つオープンソースとしてソースコードも公開さ...

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

Moul Moulはフォトグラファー向けに開発されたオープンソースのポートフォリオ公開ツールです。 シンプルな構成で作品のコレクションを制御、さまざまなレイアウトを利用可能との事です。 Goで書かれています。サンプルを見る...

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

Plausible Plausibleはプライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツールです。 通常のアクセス解析ツールとしてサービス展開していますが、OSSとしてもソー...

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

Volt Voltは複数サンプルも用意されているBootstrap 5ベースのオープンソースのダッシュボードテンプレートのセットです。 管理画面などが必要なアプリやサービスを展開するスタートアップ向けに、必須となりえるようなペー...

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

Coaster CoasterはUnsplashの画像を検索してDLしたりクリップボードにコピーしたり壁紙に設定できるデスクトップアプリです。 直接サイトにアクセスすれば事足りるんですが、使ってみた印象ではハードにUnsplas...

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

Undesk Undeskはチーム向けのワークスペースを提供するシンプルなプロジェクト管理ツールです。 チーム向けとあって、チャットツール、タスク管理、ファイル管理などが可能で共有できる他、伝言やメモ、アイデアの共有などに使える...

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

Embla Carousel See the Pen mdPOxwm by kachibito (@kachibito) on CodePen. Embla Carouselは滑らかに動くスワイプ可能な非依存型のカ...

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

Halfmoon HalfmoonはBootstrapライクに使えるフロントエンドフレームワークです。美しいダッシュボードやプロダクトページの開発スピード向上をサポートしてくれるそう。 RWD対応でBootstrapと概ね同じc...

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

Neu Icons Neu Iconsは様々な業種やシーンにも対応したオープンソースのベーシックなアイコンセットです。 1000以上のアイコンがSVGで用意されているほか、Figma用やCDNも用意されています。 ...

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

Create Content Loader Create Content LoaderはSNS等のローディングで見かけるプレースホルダーをSVGで作れるWebアプリです。 FacebookのカードやInstagramなどで読み込...

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

fontvuer fontvuerはオープンソースのフォントビューアです。Vue.js+Electronで構築されており、各OSで動作します。 任意のテキストでインストールされているフォントを一括表示してくれるので探す際に表示確...

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

CSS Vocabulary CSS VocabularyはCSSの用語を視覚的に学べるスタディサイトです。教育機関や研修など、教材向けに良さそうです。 実際のCSSのコードが左ペインに書かれており、右ペインにCSSで使われてい...

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

Basicons Basiconsはミニマルなスタイルで汎用的に使えるようデザインされたオープンソースの線画アイコンセットです。 サイズやストロークの太さなどを設定して個別にDLしたりまとめてDL出来るようになっています。 ...
Ads