Resource - Webデザイナー向け

様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」

AnimatiSS AnimatiSSは様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできるWebサイトです。 スクロールアップ/ダウン、回転、回転+拡大縮小、スィング、スライド、シャドウなどなど大量の...

汎用的で使いやすいアイコンを意識してデザインされたオープンソースのSVGアイコンセット・「Humbleicons」

Humbleicons Humbleiconsは汎用的で使いやすいアイコンを意識してデザインされたオープンソースのSVGアイコンセットです。 シンプルでクセの無いスタイリングで、そのまますぐにプロジェクトで使えるようなアイコンと...

ピクセルアート風の350以上のアイコンをまとめたオープンソースのSVGアイコンセット・「Pixelarticons」

Pixelarticons Pixelarticonsはピクセルアート風の350以上のアイコンをまとめたオープンソースのSVGアイコンセットです。 24×24のグリッドでデザインされており、各アイコンのSVGコードはその場でコピ...
Ads

Webサイトの任意のテキストをその場で変更できるブックマークレット・「Quick Edit Bookmarklet」

Quick Edit Bookmarklet Quick Edit BookmarkletはWebサイトの任意のテキストをその場で変更できるブックマークレットです。 Devtoolsを開かずとも、起動すれば即エディターモードにな...

スムーズにアニメーションするblobを動作確認しながら作れるWebアプリ・「Blob Animation」

Blob Animation Blob Animationはスムーズにアニメーションするblobを動作確認しながら作れるWebアプリです。スライムのようなシルエットのblobにゆるいアニメーションエフェクトを付与できる、というもの。 ...

75以上の様々なノーコードアプリをカテゴリ等で探せる・「No-Code Builder」

No-Code Builder No-Code Builderは75以上の様々なノーコードアプリをカテゴリ等で探せるノーコードアプリのコレクションサイトです。 DBや各自動化、Webサイト作成、内部ツール、アプリケーション、Eコ...

コピー&ペーストで使えるHTML/CSS/SVGのローダーのコレクション・「Loaders」

Loaders Loadersはコピペで使えるHTML/CSS/SVGのローダーのコレクションです。Reactもサポートされています。 24種用意されていて軽量、スタイリングはCSSなのでカスタマイズも簡単です。例えば以下のよう...

様々なタイプのWebサイトのUIテンプレートをFigmaやPS用ファイルで無償配布する・「DopeUI」

DopeUI DopeUIは様々なタイプのWebサイトのUIテンプレートをFigmaやPhotoshop用ファイルで無償配布するプロジェクトサイトです。 いろいろな業種や目的に別にFigma或いはPhotoshopで作成されたW...

コピペで使えるオープンソースのTailwind.css用コンポーネントのコレクション・「HyperUI」

HyperUI HyperUIはコピペで使えるオープンソースのTailwind.css用コンポーネントのコレクションです。WebサイトやWebアプリ等でよく使われるWebコンポーネントを収集し、コードをコピーして使えるようになっていま...

Tailwind製のECサイト向けコンポーネント集・「Tailwind Ecommerce」

Tailwind Ecommerce Tailwind EcommerceはTailwind製のECサイト向けコンポーネント集です。Tailwind.cssベースのE-commerceで使えるWebコンポーネントといくつかのWebペー...

オープンソースのピクセルアートなアイコンセット・「Skware」

Skware Skwareはオープンソースのピクセルアートなアイコンセットです。小さめのドットでアイコンとしての可視性も低くなく、スケーラブルなアイコンとなっており割と汎用的な印象です。 種類は100個ほどとなっています。フォー...

多くの機能が永久に無料で使える、フリーランサー向けに開発されたプロジェクト管理ツール・「Hectic」

Hectic Hecticはフリーランサー向けに開発されたプロジェクト管理ツールです。プロジェクトの大半を1人、或いは少人数で対応する事が求められるフリーランサーが有益と思えるような機能が備わっています。 機能はプロジェクト管理...

様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできる・「Iconer」

Iconer Iconerは様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできるWebアプリです。 FeatherやIonic、Heroiconsなどなど頻繁に利用されているアイコン...

無料で利用可能な静的Webサイト構築の為のボイラープレート・「Static Starter」

Static Starter Static Starterは無料で利用可能な静的Webサイト構築の為のボイラープレートです。開発者が培った過去のキャリアが元になったベストプラクティスが詰まっているのだそう。 初級者から中級者まで...

線や棒、円、ドーナツ、散布図などのグラフを数値やテキストの入力のみで簡単に作れるグラフジェネレーター・「Graph Maker」

Graph Maker Graph Makerは線や棒、円、ドーナツなどのグラフを数値やテキストの入力のみで簡単に作れるグラフジェネレーターです。 作成可能なチャートは折れ線グラフ、棒グラフ、円グラフ、ドーナツチャート、散布図、...

Sassベースの軽量でモダンなオープンソースCSSデザインシステム・「Spruce」

Spruce SpruceはSassベースの軽量でモダンなオープンソースCSSデザインシステムです。多様なプロジェクトの確かな土台となるミニマルなフレームワークを目指しているそうです。 このフレームワークの開発者としてのミニマル...

ダミーのユーザー写真やアイコン、名前などをランダム生成するWebアプリ・「Random users」

Random users Random usersはダミーのユーザー写真やアイコン、名前などをランダム生成するWebアプリです。 写真、アイコン、名前はランダム生成され、写真は性別、カラー、白黒、セピアなどの絞り込みも可能です。...

メモを取る感覚で使えるChrome拡張のOSSな電卓アプリ・「Calculator Notepad」

Calculator Notepad Calculator Notepadはメモを取る感覚で使えるChrome拡張のOSSな電卓アプリです。日常的に紙にメモ感覚で計算する事があると思います(今は無いかもですが)が、それをChrom...

class属性を利用するCSSライクなデザインエンジン・「Master Styles」

Master Styles Master Stylesはclass属性を利用するCSSライクなデザインエンジンです。本サイトでは拡張された構文を持った仮想CSS言語と説明しています。 実際に見た方がどういう事か把握できると思うの...

クレジット表記不要で商用利用もOKのロイヤリティフリーのサウンドをすべて無料でダウンロードできる・「Sampld」

Sampld Sampldはクレジット表記不要で商用利用もOKのロイヤリティフリーのサウンドをすべて無料でダウンロードできるサウンドストックサイトです。 音楽のためのUnsplashを目指しているそうです。今までのこの手の配布サ...

ブラウザで動作するシンプルで使いやすいオープンソースのビジュアルWebサイトビルダー・「Webstudio」

Webstudio Webstudioはブラウザで動作するシンプルで使いやすいオープンソースのビジュアルWebサイトビルダーです。いわゆるノーコードツールとなっており、作成したのちにそのまま公開する事も可能です。 上SSは操...

テキストチャットやメッセージングアプリ等の会話をアニメーション付きでシミュレートし、webmやgifでダウンロードできる・「Text Chat Animator」

Text Chat Animator Text Chat Animatorはテキストチャットやメッセージングアプリ等の会話をアニメーション付きでシミュレートし、webmやgifでダウンロードできるWebアプリです。 実際に入力し...
Ads