Resource - Webデザイナー向け

パフォーマンス重視でReact専用として作られたオープンソースのStorybook代替・「Ladle」

Ladle LadleはReact専用として作られたオープンソースのStorybook代替です。ControlsとCSFの互換があります。 ご存知の通りStorybookもオープンソースですが、Ladleはパフォーマンスを重視し...

白黒写真をカラー化するAIベースのWebアプリ・「Palette」

Palette Paletteは白黒写真をカラー化するAIベースのWebアプリです。開発者はGoogle Artsに所属するエンジニアで機械学習によるカラー化(ML colorized)に携わっているみたいです。 写真をアップロ...

TypeScriptで書かれたオープンソースのヘッドレスCMS・「Alinea」

Alinea AlineaはTypeScriptで書かれたオープンソースのヘッドレスCMSです。コンテンツはGitでバージョン管理されるGitベースとなっており、埋め込み型のSQLiteにインデックスされる事で高速なクエリと全文検索も...
Ads

任意の画像や絵文字等を使ってパターンを作成出来るWebアプリ・「Tylify」

Tylify Tylifyは任意の画像や絵文字等を使ってパターンを作成出来るWebアプリです。複数の絵文字や画像を使ってオリジナルのパターン画像を作成出来る、というもの。 実際にパターンとして利用した状態のプレビューが可能で、そ...

ホワイトボード感覚でアイデアとプロジェクトを視覚的に整理出来るクリエイター向けのノートアプリ・「xTiles」

xTiles xTilesはホワイトボード感覚でアイデアとプロジェクトを視覚的に整理出来るクリエイター向けのノートアプリです。 メモやリンク、動画や画像などのメディアやTodo、データなどをひとまとめにしてザッと見で状況を把握で...

オープンソースの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ライセンスの元でソース...

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

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

最近見かけるモダンなカーソルエフェクトを実装できるコードを配布する・「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以上用意...

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で直感的に操作できますが、カラー変更ボタンだけちょっと分かりにくかったです。右下のズームボタンの脇にあります。 物理的...
Ads