Resource - Webデザイナー向け

オープンソースのWEBフォントをnpmでインストールできるmonorepo・「Fontsource」

Fontsource FontsourceはオープンソースのWEBフォントをnpmでインストールできる更新型monorepoです。余分なネットワークリクエストが無い分、Googleフォントに比べて大きくパフォーマンスを向上できるそうで...

良い感じのカラーパレットをランダム生成し、CSS変数でコピーできる・「colorSS」

colorSS colorSSはカラーパレットをランダム生成し、CSS変数でコピーできるシンプルなWebアプリです。どれも良い感じで生成してくれます。 スペースキーで生成、sキーでお気に入りに登録できます。お気に入り登録したカラ...

CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」

Open Props Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソース...
Ads

ブラウザで動作するモーショングラフィックエディターWebアプリ・「Motionity」

Motionity Motionityはブラウザで動作するモーショングラフィックエディターWebアプリです。特にユーザー登録等も不要で誰でも無料で利用可能です。 複数レイヤーを使って任意のオブジェクトを時間経過に合わせて動くよう...

16種のスタイルが用意されたオープンソースのシンプルなSVGアイコン・「icons.download」

icons.download icons.downloadは16種のスタイルが用意されたオープンソースのシンプルなSVGアイコンです。4種の線の太さ、線画か塗りか、角丸かシャープか、などを選択できるアイコンが80近く用意されています。...

スクロールやマウスの動きに合わせて視差効果を実装するReactライブラリ・「React Just Parallax」

React Just Parallax React Just Parallaxはスクロールやマウスの動きに合わせて視差効果を実装するReactライブラリです。軽量高速で簡単に書けるのが特長だそう。 マウスの動きに合わせた視差効果...

最近見かけるモダンなカーソルエフェクトを実装できるコードを配布する・「Curzr.」

Curzr. See the Pen Curzr | Free cursor library by kachibito (@kachibito) on CodePen. Curzr.は最近見かけるモダンなカーソ...

丸みがあって柔らかい印象のミニマルで汎用的なアイコンのパック・「magicoon」

magicoon magicoonは丸みがあって柔らかい印象のミニマルで汎用的なアイコンのパックです。無料版で360以上、有償版で4800以上のアイコンがセットになっています。 1つのアイコンにつき4種のスタイルが用意されていて...

1つのdiv要素で作れる実用的なCSSローダーのコレクション・「one `div` loaders」

one `div` loaders See the Pen Untitled by kachibito (@kachibito) on CodePen. one `div` loadersは1つのdiv要素で作...

無料で利用可能な、多様な目的のプレゼンに使えるアイコンやイラストが含まれたプレゼンテンプレートのセット・「Lucid 」

Lucid Lucidは無料で利用可能な、多様な目的のプレゼンに使えるアイコンやイラストが含まれたプレゼンテンプレートのセットです。 プレゼン作成のあれこれをサポートするpremastが5周年を迎えたそうで、そのお祝いギフトとし...

各アプリストアなどアプリを紹介するプラットフォームで使えるアプリの紹介用スクリーンショットを作成出来る・「App Screenshot Generator」

App Screenshot Generator App Screenshot Generatorは各アプリストアなどアプリを紹介するプラットフォームで使えるアプリの紹介用スクリーンショットを作成出来るWebアプリです。 App...

グラデーションカラーの管理が可能なオープンソースのWebアプリ・「Gradientify」

Gradientify Gradientifyはグラデーションカラーの管理が可能なオープンソースのWebアプリです。CSSのコピーやPNGとしてのダウンロード、ブックマーク等が可能です。 既に綺麗なグラデーションが100以上用意...

2Dや3Dの円グラフを簡単な記述でパッと作れる円グラフ作成ツール・「Pie Chart Maker」

Pie Chart Maker Pie Chart Makerは2Dや3Dの円グラフを簡単な記述でパッと作れる円グラフ作成ツールです。日本語も入力可能、利用にあたり何かしら登録する必要はなく誰でも利用可能です。 タイトルや背景色...

Microsoftがオープンソースで提供する、Teamsで使われている1500以上の3Dスタイルな絵文字・「Fluent Emoji」

Fluent Emoji Fluent EmojiはMicrosoftがオープンソースで提供する1500以上の3Dスタイルな絵文字のコレクションです。 Teamsで使われている絵文字のようで、この度オープンソースとしてGithu...

Material UIのReactコンポーネントで構築されているオープンソースの管理画面・「Minimal-UI」

Minimal-UI Minimal-UIはMaterial UIのReactコンポーネントで構築されているオープンソースのダッシュボードテンプレートです。 デモページが7ページほど用意されており、管理画面及びコンポーネントを構...

シンプルで直感的に使える国産のスケジュール調整アプリ・「Tocaly」

Tocaly Tocalyはシンプルで直感的に使えるスケジュール調整アプリです。日本の方が開発されており、UIもカレンダーも全て日本に対応されています。 使い方もシンプルで分かりやすくなっており、カレンダーから候補日時を選び、U...

WebサイトやUI、ポスター、ロゴやイラストなど様々な制作例を大量に用意したカラーパレットジェネレーター・「Palette Maker」「」

Palette Maker Palette MakerはWebサイトやUI、ポスター、ロゴやイラストなど様々な制作例を大量に用意したカラーパレットジェネレーターです。 大量の制作例があり、全て表示したりUIやWebサイトなどに限...

ノーコードでフォームを作成出来るオープンソースのTypeform代替・「snoopForms」

snoopForms snoopFormsはノーコードでフォームを作成出来るオープンソースのTypeform代替です。Next.js、React、Tailwind、Prismaを使用して構築されています。 ノーコードツールと...

ベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめた・「UI Buttons」

UI Buttons UI ButtonsはベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめたWebサイトです。 ボタンが押された時やマウスホバー時などの様々なエフェクトが用意されており、それぞれのペ...

アイデアや考えを視覚化するためのオンラインホワイトボード型ドローアプリ・「OkSo」

OkSo OkSoはアイデアや考えを視覚化するためのオンラインホワイトボード型ドローアプリです。シンプルなUIで直感的に操作できますが、カラー変更ボタンだけちょっと分かりにくかったです。右下のズームボタンの脇にあります。 物理的...

フルサイズでも縮小せずにダウンロードできる画像背景消去ツール・「Extract bg」

Extract bg Extract bgはフルサイズでも縮小せずにダウンロードできる画像背景消去ツールです。よくある、画像をアップロードすると自動で背景を削除して透過画像にしてくれるやつです。 以前にいくつかご紹介しましたが、...

研究者向けに開発された資料画像などを効率的に管理できるオープンソースの研究資料管理アプリ・「Tropy」

Tropy Tropyは研究者向けに開発された資料画像などを効率的に管理できるオープンソースの研究資料管理アプリです。写真を探す手間を省くために開発されたデスクトップアプリで、論文等を書く際にソースを探す時間を減らす事が出来る、という...
Ads