Resource - Webデザイナー向け

Figmaでも利用可能の、400以上のミニマルなアイコンを無料で使えるアイコンセット・「Figicon」

Figiconは400以上のミニマルなアイコンを無料で使えるアイコンセットです。プロジェクトページでは各アイコンの個別DLやSVGのコードのコピーが可能ですが、Figmaで使える.fig拡張子で一括DLも可能です。※メールアドレスが必要

1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできる・「CSS Generators: Tooltips & Speech Bubbles」

CSS Generators: Tooltips & Speech Bubblesは1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできるWebサイトです。

Tailwind.cssとの併用も可能な、ミニマルで汎用的なCSSコンポーネント・「Winduum」

WinduumはTailwind.cssとの併用も可能な、ミニマルで汎用的なCSSコンポーネントです。単体でも利用可能ですがTailwind.cssのプラグインとしても使えるようになっています。リセットを含むレイアウト向けのCSS、各ユーティリティ、各UI、コンポーネントなどなどWinduumだけでしっかり様々なタイプのWebサイトやWebアプリに対応できるようになっています。
Ads

OSSでコードも公開の、シンプルで扱いやすいベクターベースのモーショングラフィックスアニメーションツール・「Wiggle Animate」

Wiggle Animateはシンプルで扱いやすいベクターベースのモーショングラフィックスアニメーションツールです。HTML/CSS/JavaScriptで書かれており、OSSとしてソースコードも公開されています。

ユーティリティでclamp()を簡単に生成できるようにするTailwindプラグイン・「Fluid for Tailwind CSS」

Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします

コピペで簡単利用も出来るオープンソースのTailwindベースUIコンポーネントライブラリ・「Tailframes」

Tailframesはシンプルで使いやすいオープンソースのTailwindベースUIコンポーネントライブラリです。コピペで簡単利用できるよう各コンポーネントのコードやサンプルも公開されています。

FigmaとTailwind.cssをベースに大量のUIコンポーネントを備えたオープンソースのUIライブラリ・「Pagedone」

PagedoneはFigmaとTailwind.cssをベースに大量のUIコンポーネントを備えたオープンソースのUIライブラリです。Figmaでデザインされ、Tailwind.cssのutility-classes上に構築されたコンポーネント集で、モーダルやドロップダウン、タブ、ツールチップにトーストなどインタラクティブに動作させるUIのためのJavaScriptも含まれています。

任意のカラーパレットを作成、管理、共有、プロジェクトと統合出来るオープンソースのカラーパレット管理プラットフォーム・「Hue Harbor」

Hue Harborは任意のカラーパレットを作成、管理、共有、プロジェクトと統合出来るオープンソースのカラーパレット管理プラットフォームです。WebサイトにGoogleアカウントでログインし、変数を割り当てられるカラーパレットを作成したり、プロジェクトサイトを登録して作成したパレットを割り当てたり、APIキーの発行やCDNの管理及びパレットをプロジェクトで利用するためのReactコードの発行などが出来るようになっています。

Tailwind.cssの様々なUIコンポーネントのデザインサンプルを大量に公開している・「Tailwind CSS Components」

Tailwind CSS ComponentsはTailwind.cssの様々なUIコンポーネントのデザインサンプルを大量に公開しているプロジェクトサイトです。プロジェクトサイトでは特に何か機能がある訳ではなく、純粋にCSSスタイリングのサンプルを表示しているのみで、ソースコードはGithubで公開しています。

Vue.js開発者向けのオープンソースのプロトタイピングツール・「PreVue」

PreVueはVue.js開発者向けのオープンソースのプロトタイピングツールです。CI/CDパイプラインにおける共通の課題である、デザイナーとデベロッパー間の遅延を解決するために開発されました。

Googleフォントとアイコンを組み合わせてシンプルなロゴを作成出来るオープンソースのWebアプリ・「Wordmark」

WordmarkはGoogleフォントとFeatherをフォークしたオープンソースのアイコンセットのLucideを組み合わせてシンプルなロゴを作成出来るオープンソースのWebアプリです

シンプルで見やすく使いやすいオープンソースのReact UIライブラリ・「WoozDesign」

WoozDesign WoozDesignはシンプルで見やすく使いやすいオープンソースのReact UIライブラリです。Webアプリ用として設計されたみたいです。 無駄のないスタイルでフィンテックや解析、分析、など情報を正しく明...

レスポンシブでアクセシブルなUIコンポーネントのライブラリ・「Rafty UI」

Rafty UI Rafty UIはレスポンシブでアクセシブルなUIコンポーネントのライブラリです。デザインシステムの構築を簡単にしてくれるとの事です。 開発しているアプリのデザインシステムとシームレスに連携出来るように開発され...

生成AI系のアプリでよく使う任意のプロンプトを変数付きで設定し、スラッシュコマンドで呼び出せるオープンソースのブラウザ拡張・「PromptSnippets」

PromptSnippets PromptSnippetsはChatGPTなど生成AI系のアプリでよく使う任意のプロンプトを変数付きで設定し、スラッシュコマンドで呼び出せるオープンソースのChrome拡張です。 名前の通りで、い...

Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」

NeoBrutalismCSS NeoBrutalismCSSはWebにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワークです。 デザインにおける「ネオ・ブルータリズム」は20世紀半ば頃のブルータリズム建築運動(W...

高品質なピクセルアートをAIで生成するためのOSS・「Pixelfy」

Pixelfy Pixelfyは高品質なピクセルアートをAIで生成するためのOSSです。Next.js + PlanetScaleで構成されています。その他の技術スタックはリポジトリでご確認頂けます。 AIを搭載したプロンプトビ...

ブラウザで任意のプロンプトに沿って画像を生成、自由に利用できる無料の画像生成AIサービス・「unstock.ai」

unstock.ai unstock.aiはブラウザで任意のプロンプトに沿って画像を生成、自由に利用できる無料の画像生成AIサービスです。既にAI画像生成の方法は数多く存在しますのであえて選択する大きな理由は無いかもしれませんが、気軽...

ChatGPTを使ってカラーパレットを生成、何故その色を選んだかの解説や、プレビューやアクセシビリティなどを確認も出来る・「HueHive」

HueHive HueHiveはChatGPTを使ってカラーパレットを生成、プレビューやアクセシビリティなども確認出来るAIカラーパレット生成アプリです。スマホアプリやFigmaプラグインも提供しているみたいです。 任意のプロン...

直感的な操作で簡単なチャート作成やコード画像化など様々な画像を無料で作成、DL出来る多機能Webアプリ・「Picyard」

Picyard Picyardは直感的な操作で簡単なチャート作成やコード画像化など様々な画像を無料で作成、DL出来る多機能Webアプリです。 一言で言えば様々な画像ジェネレーターアプリ、という感じですが、よくあるチャート作成、Q...

CSVやJSON、Googleスプレッドシート等のデータセットを読み込んでプロンプトを入力し、AIによる任意のチャートを作成出来る・「ChartGen AI」

ChartGen AI ChartGen AIはCSVやJSON、Googleスプレッドシート等のデータセットを読み込んでプロンプトを入力し、AIによる任意のチャートを作成出来るWebアプリです。 AIベースのノートアプリを提供...

HTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリ・「Waveditor」

Waveditor WaveditorはHTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリです。 よくある、プレビューを見ながら直接編集できるもので、マウスホバーで編集したいエリアが分かるので任意のエリア...

1つのHTML要素で実装できるCSSローダーのコードを500以上紹介している・「CSS Loaders」

CSS Loaders CSS Loadersは1つのHTML要素で実装できるCSSローダーのコードを500以上紹介しているCSSローダーのコレクションサイトです。動作デモをクリックすればコードのコピーが完了します。 全てのロー...
Ads