422 件のツール · 17 件のセクション · 5 件のハブ

すべてのツールを、ひとつのキャンバスに

目録全体を1ページに、元の構成のまままとめました。入力しながら絞り込み、レイヤーレールでセクション間を移動し、任意のフレームを開いて細部まで確認できます。

422 件のツール

インスピレーション

ハブを開く

Webデザインのインスピレーションギャラリー

78セクションページ

60fps preview

60fpsギャラリー動きのあるインターフェースをとらえた画面録画を集め、UIアニメーションを学ぶためのインスピレーション源にしたギャラリー。

Awwwardsギャラリー優れたWebデザインとフロントエンドの技巧を毎日表彰する、アワードプログラム兼ギャラリー。

Cosmos preview

Cosmosギャラリー画像やリファレンスを集め、クリエイティブなインスピレーションボードを作れるビジュアルムードボード空間。

Curated Design preview

Curated DesignギャラリーWebサイトのインスピレーションをデザインのテイストごとにまとめ、求める見た目から探せるギャラリー。

Layers preview

Layersギャラリーデザイナーが自分の作品を公開し、フィードバックやインスピレーションを得られるプラットフォーム。

minimal.gallery

Minimal Gallery preview

Minimal Galleryギャラリーミニマルで抑制の効いたWebサイトを集めた、削ぎ落としたデザインのインスピレーションを求める人向けのコレクション。

Mobbin preview

Mobbinギャラリー実際にリリースされたプロダクトのモバイル・Webアプリ画面やユーザーフローを検索できるライブラリ。

Saaspo preview

Saaspoギャラリーマーケティングやプロダクトデザインのインスピレーション向けに厳選した、SaaSのランディングページギャラリー。

SEESAW preview

SEESAWギャラリーWebサイトのデザインインスピレーションをページのセクションごとにまとめ、ブロック単位で学べるコレクション。

Supahero preview

Supaheroギャラリーランディングページを設計する際のインスピレーションになる、Webサイトのヒーローセクションを厳選したコレクション。

Imageory preview

Imageoryギャラリー画像とその背景にあるプロンプトを組み合わせて見せる、クリエイティブなインスピレーション向けのビジュアルギャラリー。

backgrounds.supply

Backgrounds Supply preview

Backgrounds Supplyギャラリー手作業で作り込まれたWebサイト用背景のセットで、次のプロジェクトにそのまま使える。

backgrounds.venust.ai

Venust Backgrounds preview

Venust Backgroundsギャラリー生成に使った元のプロンプト付きで提供される、無料のAI生成Webサイト背景。

Details preview

Detailsギャラリー主要なデジタルプロダクトのマイクロインタラクションを細部まで分解し、ディテールを学ぶためのコレクション。

Sombra preview

SombraギャラリーダークモードのWebサイトインターフェースを集めた、暗めのパレットでデザインする人向けのショーケース。

Dribbble preview

Dribbbleギャラリーデザイナーがショットやコンセプトを投稿し、作品を共有しインスピレーションを得るグローバルなコミュニティ。

Behance preview

Behanceギャラリーさまざまなデザイン分野のクリエイティブなポートフォリオを公開・閲覧できる、Adobeのプラットフォーム。

Recent Design preview

Recent Designギャラリーアワード級のWebサイトを毎週セレクトし、途切れないデザインインスピレーションを届けるギャラリー。

navbar.design preview

navbar.designギャラリーサイトメニューを設計する際の参考になる、ナビゲーションバーのパターンを厳選したセット。

footer.design preview

footer.designギャラリー締めくくりのセクションのインスピレーションになる、クリエイティブなWebサイトフッターを厳選したセット。

Land-book preview

Land-bookギャラリーランディングページを業種別に整理した大規模ギャラリーで、自分のニッチに合ったデザインを探せる。

Collect UI preview

Collect UIギャラリー継続的なデザインチャレンジから生まれた、コンポーネント別にタグ付けされた日替わりのUIデザインインスピレーション。

siteinspire.com

SiteInspire preview

SiteInspireギャラリー丁寧に作り込まれたWebデザインを長年にわたり紹介し、スタイルやテーマで絞り込めるショーケース。

Lapa Ninja preview

Lapa Ninjaギャラリーレイアウトのインスピレーションを得るために閲覧できる、厳選されたレスポンシブなランディングページのセット。

UX Archive preview

UX Archiveギャラリーモバイルのオンボーディングフローを画面ごとにとらえた、UXリファレンス用のアーカイブ。

Screenlane preview

Screenlaneギャラリーさまざまなアプリのインターフェース画面を検索できる、UIインスピレーション向けのギャラリー。

Flowbase preview

Flowbaseギャラリーサイトレイアウトを構築するための、プレミアムなUIコンポーネントとインタラクションパターンの供給源。

Hover States preview

Hover Statesギャラリー独創的でインタラクティブなWebデザインを紹介し、サイトがモーションやホバーをどう扱うかを学べるショーケース。

SaaSFrame preview

SaaSFrameギャラリーランディングページのデザインインスピレーションとして集めた、数百点のSaaSマーケティングページのスクリーンショット。

landingfolio.com

Landingfolio preview

Landingfolioギャラリーレイアウトやマーケティングのインスピレーションを得るために閲覧できる、豊富なランディングページデザインのライブラリ。

Pttrns preview

Pttrnsギャラリーアプリが一般的な画面をどう扱っているかを参照できる、モバイルUIパターンのディレクトリ。

onepagelove.com

One Page Love preview

One Page Loveギャラリー一枚もののサイトを作る人向けに、シングルページのWebサイトデザインを紹介するショーケース。

designspiration.com

Designspiration preview

Designspirationギャラリーインスピレーションの糧になるビジュアルアートやデザイン画像を見つけられる検索プラットフォーム。

bestwebsite.gallery

Best Website Gallery preview

Best Website Galleryギャラリー際立ったWebデザインのリファレンスとして、優れたWebサイトを厳選したアーカイブ。

theinspirationgrid.com

Inspiration Grid preview

Inspiration Gridギャラリー分野を横断してクリエイティブなビジュアルデザインや作品を取り上げるオンラインマガジン。

Scrnshts preview

Scrnshtsギャラリーモバイルアプリのマーケティング時のインスピレーションになる、App Storeのスクリーンショットデザインを厳選したセット。

Are.na preview

Are.naギャラリービジュアルをブックマークし、リサーチを共有ボードにまとめられる共同作業型のプラットフォーム。

Appinspo preview

AppinspoギャラリーUIやインターフェースのインスピレーション向けに厳選した、モバイルアプリデザインのギャラリー。

darkmodedesign.com

Dark Mode Design preview

Dark Mode Designギャラリー暗めのインターフェースを設計する際のインスピレーションに、ダークモードのWebサイトに特化したショーケース。

Pinterest preview

Pinterestギャラリーあらゆるテーマのクリエイティブなアイデアを保存・発見できるビジュアルディスカバリープラットフォーム。

navbar.gallery preview

navbar.galleryギャラリーサイトメニューを設計する際に学べる、モダンなナビゲーションバーに的を絞ったギャラリー。

posts.design preview

posts.designギャラリー投稿やフィードのレイアウトのインスピレーション向けに厳選した、ソーシャルメディアのグラフィックデザインアーカイブ。

loadmo.re preview

loadmo.reギャラリー型破りで斬新なインスピレーションを求める人向けの、実験的なモバイルWebサイトデザインのギャラリー。

inspora.design preview

inspora.designギャラリーモダンなインスピレーションを得るために閲覧できる、現代的なビジュアルWebデザインのアーカイブ。

cta.gallery preview

cta.galleryギャラリーコンバージョン重視のインスピレーション向けに、コールトゥアクションのボタンやバナーを厳選したセット。

desengs.com preview

desengs.comギャラリーデザインエンジニアリングのポートフォリオと、それを作る人々の背景にあるストーリーを集めたディレクトリ。

isthereanytool.app

isthereanytool preview

isthereanytoolギャラリーデザイン、ものづくり、AIの作業に役立つ、あまり知られていないツールを紹介するディレクトリ。

designeng.tools

designeng.tools preview

designeng.toolsギャラリーデザインエンジニアリングのツール、リソース、インスピレーションを一か所にまとめた厳選ハブ。

bestdesignsonx.com

bestdesignsonx.com preview

bestdesignsonx.comギャラリーXから集めた、デザイン志向のクリエイターと際立った投稿の厳選フィード。

designbookmark.com

Design Bookmark preview

Design Bookmarkギャラリー役立つデザインリソースやリンクをブックマークし、一か所で見つけられるようにするディレクトリ。

rebrand.gallery

Rebrand Gallery preview

Rebrand Galleryギャラリーブランドのリデザインをビフォー・アフターで見せ、アイデンティティの変遷を学べるギャラリー。

curations.supply

Curations preview

Curationsギャラリープロジェクトで閲覧・活用できる、デジタルデザインアセットの厳選ライブラリ。

Landing Love preview

Landing Loveギャラリーモーションのインスピレーション向けに、アニメーションごとに整理した魅力的なランディングページのコレクション。

Motionimo preview

Motionimoギャラリーアニメーションや動きを学ぶための、モーションデザインクリップの豊富なライブラリ。

before.click preview

before.clickギャラリーApp Storeのマーケティングインスピレーション向けに、コンバージョンの高いアプリスクリーンショットのコンセプトを紹介するショーケース。

Swiped preview

Swipedギャラリーさまざまなソーシャルプラットフォームから集めた、際立ったデザイン投稿のコレクション。

Landdding preview

Landddingギャラリーレイアウトやマーケティングのインスピレーション向けに、毎日更新されるクリエイティブなランディングページのカタログ。

designengineer.tools

designengineer.tools preview

designengineer.toolsギャラリーデザインエンジニアの仕事に合わせて厳選した、必携ツールのまとめ。

Insposite preview

Inspositeギャラリーインスピレーションが必要なときに閲覧できる、デザインリファレンスやツールのディレクトリ。

loader-buttons.appllama.io

Loader Buttons preview

Loader Buttonsギャラリーマイクロインタラクションのアイデアを参照できる、25種類のローディングボタンアニメーションのギャラリー。

What Ships preview

What ShipsギャラリーXの投稿から集めた、際立ったプロダクトローンチのデモ動画コレクション。

GreatStuff preview

GreatStuffギャラリー良いものをより早く見つけられるよう集めた、クリエイティブツールの入念に厳選されたアーカイブ。

Great Apps preview

Great Appsギャラリーじっくり見る価値のある優れたiOSアプリを取り上げる、毎週更新のギャラリー。

curated.domains

Curated Domains preview

Curated Domainsギャラリーネーミングやブランディングのインスピレーション向けに、独創的なトップレベルドメインを使うブランドを集めたコレクション。

Sections.wtf preview

Sections.wtfギャラリー実際のWebサイトのセクションやヒーローレイアウトを、ブロック単位で参照できるギャラリー。

Browse.cool preview

Browse.coolギャラリー優れた手触りとインタラクションを基準に選んだWebサイトのセレクション。

Folios Gallery preview

Folios Galleryギャラリーインスピレーションのために学べる、傑出したデザイナーポートフォリオを厳選したディレクトリ。

wwwtf.site preview

wwwtf.siteギャラリー探索する価値のある、インタラクティブなWebの風変わりで実験的な一角を集めたギャラリー。

Early preview

Earlyギャラリー最初に注目する価値のあるアーリーステージのソフトウェアプロダクトを見つけるディスカバリープラットフォーム。

openalternative.co

OpenAlternative preview

OpenAlternativeギャラリー人気のSaaSツールと、そのオープンソースの代替を対応づけるディレクトリ。

everywhere.tools

Everywhere Tools preview

Everywhere Toolsギャラリー実践的なデザインやものづくりの作業に向けた、オープンソースのクリエイティブツールのコレクション。

gallery.jessyin.world

Jessy In's Gallery preview

Jessy In's Galleryギャラリー寄稿者が珍しいビジュアルの発見を集め、デザインインスピレーションを刺激する共有ムードボード。

wallofportfolios.in

Wall of Portfolios preview

Wall of Portfoliosギャラリーインスピレーションのために閲覧できる、デザインエンジニアリングやプロダクトのポートフォリオを並べたショーケースの壁。

Detail Design preview

Detail Designギャラリーソフトウェアのインターフェース全般に見られる、丁寧に作り込まれたマイクロインタラクションを記録したアーカイブ。

betwnstudios.com

Betwn Studios preview

Betwn StudiosギャラリーSaaSプロダクト向けにモダンなWeb体験を設計・構築するスタジオ。

saaslandingpage.com

SaaS Landing Page preview

SaaS Landing Pageギャラリーインスピレーションとして学ぶ価値のある、際立ったSaaSランディングページを厳選したショーケース。

bestsaaswebdesigns.com

Best SaaS Web Designs preview

Best SaaS Web Designsギャラリーデザインインスピレーションとして集めた、SaaSのWebサイトデザインを厳選したギャラリー。

A1 preview

A1ギャラリー次のプロジェクトのインスピレーションとして集めた、Webサイトデザインのギャラリー。

インターフェースデザインツールとUIラボ

11セクションページ

Figma preview

Figmaインターフェースデザインチームでインターフェースをデザイン・プロトタイピングする、コラボレーション向けのプラットフォーム。

Framer preview

FramerインターフェースデザインWebサイトをデザインし、そのままWebに公開できるビジュアルキャンバス。

make.design preview

make.designインターフェースデザイン書いたプロンプトを、洗練されたインターフェースデザインに変えるAIジェネレーター。

Penpot preview

PenpotインターフェースデザインSVGを軸に作られ、ブラウザで動作するオープンソースのWebデザインプラットフォーム。

Spline preview

Splineインターフェースデザイン物理演算を内蔵し、インタラクティブなシーンを作れる、ブラウザベースの3Dデザインソフト。

interfacecraft.dev

Interface Craft preview

Interface Craftインターフェースデザイン現代のデジタルインターフェースの背後にある技を探る、記事集。

UI Labs preview

UI LabsインターフェースデザインアニメーションするUIコンポーネントを分解し、その作り方を見せるラボ。

UIWTF preview

UIWTFインターフェースデザインWebの可能性を押し広げる、実験的なインターフェースパターンのショーケース。

Lab01 preview

Lab01インターフェースデザインあるデザインスタジオが公開する、洗練されたインターフェース実験集。

design.dev preview

design.devインターフェースデザインデザイントークンとシステムを構築・管理するための、AI支援のエディター。

UI Playbook preview

UI Playbookインターフェースデザインデザインの過程でUIコンポーネントがたどる、よくある状態をまとめたガイド。

Webデザインの学習リソース：ブログ・書籍・コース

33セクションページ

refactoringui.com

Refactoring UI preview

Refactoring UI読み物より良いインターフェースを設計・構築するためのテクニックが詰まった、実践的なガイドです。

practicaltypography.com

Practical Typography preview

Practical Typography読み物タイポグラフィのルールやテキストのレイアウト方法を扱うオンライン書籍です。

web.dev preview

web.dev読み物Webパフォーマンスや、最新のWeb標準に沿った構築についての実践的なガイダンスです。

inclusive-components.design

Inclusive Components preview

Inclusive Components読み物アクセシブルなインターフェースコンポーネントの作り方を学べるパターンライブラリです。

joshwcomeau.com

Josh Comeau preview

Josh Comeau読み物CSSの仕組みが実際どう動くのかをひも解く、インタラクティブなチュートリアルと記事です。

design-books.com

Design Books preview

Design Books読み物必読のデザイン書を分野ごとに整理したディレクトリです。

learn-kernels.com

Learn Kernels preview

Learn Kernels読み物GPUカーネルプログラミングの書き方と理解を深めるための、インタラクティブなガイドです。

designsystemchecklist.com

Design System Checklist preview

Design System Checklist読み物本番運用に耐えるデザインシステムに必要な要素を網羅した、詳細なチェックリストです。

Learn UI preview

Learn UI読み物ユーザーインターフェース設計の実践的な側面を教える動画コースです。

designspells.com

Design Spells preview

Design Spells読み物日常的なソフトウェアに隠れた細やかなデザインのディテールを読み解くコレクションです。

Good UI preview

Good UI読み物実データに裏打ちされた、エビデンスに基づくUIデザインパターンのライブラリです。

Abduzeedo preview

Abduzeedo読み物ビジュアルのインスピレーションを絶え間なく届ける、毎日更新のデザインブログです。

UX Collective preview

UX Collective読み物ユーザーエクスペリエンスデザインに関する鋭いエッセイを集めた、厳選されたメディアです。

smashingmagazine.com

Smashing Magazine preview

Smashing Magazine読み物Webデザイナーと開発者向けの、信頼できる記事やガイドのリソースです。

Codrops preview

Codrops読み物クリエイティブなフロントエンドの実験と実践的なチュートリアルを発信するブログです。

Muzli preview

Muzli読み物最新のデザイントレンドをひとつのフィードにまとめて届ける、毎日更新のダイジェストです。

boxesandarrows.com

Boxes and Arrows preview

Boxes and Arrows読み物情報アーキテクチャの実践とその背後にある考え方を扱う、長く続くジャーナルです。

designernews.co

designernews.co

Designer News読み物デザイナーが最新の話題を取り上げて議論する、コミュニティ主導のフィードです。

webdesignerdepot.com

Web Designer Depot preview

Web Designer Depot読み物Web標準やデザイナーが使うツールを扱うデザインメディアです。

Designmodo preview

Designmodo読み物Webデザインのための記事と実用的なツールの両方を提供するメディアです。

99designs Discover preview

99designs Discover読み物ブランディングと、その背後にあるクリエイティブな思考を掘り下げるデザインブログです。

Interfaces preview

Interfaces読み物デジタルインターフェースのデザインを探求する、月刊のデジタルメディアです。

makingsoftware.com

Making Software preview

Making Software読み物デザイナーが使うツールが、最終的に彼らのソフトウェアをどう形づくるのかを考察するエッセイです。

visualrambling.space

Visual Rambling preview

Visual Rambling読み物インターフェースデザインをひとつずつ掘り下げる、個人的なビジュアルエッセイです。

degreeless.design

Degreeless Design preview

Degreeless Design読み物プロダクトデザインの習得を目指すすべての人のための、厳選された学習ロードマップです。

SVG Guide preview

SVG Guide読み物SVGマークアップの書き方とアニメーションの付け方を解説する、デザイナーと開発者向けのガイドです。

Animations.dev preview

Animations.dev読み物本当に心地よく感じられるWebアニメーションの作り方を教えるコースです。

UI Skills preview

UI Skills読み物AIの力を借りてインターフェースを設計するテクニックを扱うコースです。

AI for UI preview

AI for UI読み物インターフェースデザインのプロセスにAIワークフローを取り入れる方法を学ぶコースです。

UI Land preview

UI Land読み物一流のデザインエンジニアたちに、その仕事ぶりを聞いたインタビューシリーズです。

Laws of UX preview

Laws of UX読み物インターフェースの使いやすさを左右する心理学的な原則を集めたコレクションです。

userinterface.wiki

User Interface Wiki preview

User Interface Wiki読み物インターフェースデザインのガイドラインやルールをひとつにまとめたナレッジベースです。

The Shape of AI preview

The Shape of AI読み物AI搭載インターフェースのためのデザインパターンに焦点を当てたパターンライブラリです。

コンポーネント

ハブを開く

React UIコンポーネントライブラリ

109セクションページ

ForgeUI preview

ForgeUIコンポーネントライブラリインターフェースをより速く構築するための、アニメーション付きReact・Tailwindコンポーネントと既成テンプレート。

RewampUI preview

RewampUIコンポーネントライブラリすぐに使えるUIコンポーネントを閲覧・再利用できるダッシュボード。

shadcn/ui preview

shadcn/uiコンポーネントライブラリパッケージとしてインストールするのではなく、自分のコードベースに直接コピーして使うUIコンポーネント。

Base UI preview

Base UIコンポーネントライブラリRadixとMUIの開発元による、スタイル未適用でスタイリングに対応したコンポーネントプリミティブ。

Radix preview

RadixコンポーネントライブラリReactのインターフェースを構築する際に自由にスタイリングできる、アクセシブルでスタイル未適用のUIプリミティブ。

21st.dev preview

21st.devコンポーネントライブラリ追加する前にコンポーネントをインタラクティブにプレビューできる、コミュニティ主導のshadcnレジストリ。

motion-primitives.com

Motion Primitives preview

Motion Primitivesコンポーネントライブラリインターフェースに動きを加えるための、Motionライブラリ上に構築されたアニメーション付きReactコンポーネント。

React Bits preview

React BitsコンポーネントライブラリReactプロジェクトにそのまま組み込める、アニメーション付きでクリエイティブなコンポーネントのコレクション。

component.gallery

Component Gallery preview

Component Galleryコンポーネントライブラリ異なるデザインシステムにまたがるコンポーネントを集めて比較できるリファレンス。

number-flow.barvian.me

NumberFlow preview

NumberFlowコンポーネントライブラリ変化する数値を滑らかにアニメーションさせ、モダンなフレームワーク全般で動作するコンポーネント。

fancycomponents.dev

Fancy Components preview

Fancy Componentsコンポーネントライブラリより生き生きとしたインタラクションのために、物理ベースのエフェクトを使った遊び心のあるReactコンポーネント。

opensourceui.in

Opensource UI preview

Opensource UIコンポーネントライブラリプロジェクトにそのまま組み込める、コピー&ペースト式のReact UIコンポーネントとデバイスモックアップ。

ui.spectrumhq.in

Spectrum UI preview

Spectrum UIコンポーネントライブラリSaaSのWebサイト構築に特化して設計された、洗練されたUIコンポーネント。

amicro.vercel.app

Amicro preview

AmicroコンポーネントライブラリReactのインターフェースにマイクロアニメーションを加えるための、軽量でそのまま使えるプリミティブ。

painterly.design-tools.workers.dev

Painterly preview

Painterlyコンポーネントライブラリキャンバスベースの芸術的なローディングアニメーションを、React向けのコンポーネントとしてまとめたもの。

Bencho preview

Benchoコンポーネントライブラリ手触りを細かく調整できるよう、物理挙動を調節可能にしたインタラクティブなUIブロック。

shadcnblocks.com

shadcnblocks preview

shadcnblocksコンポーネントライブラリshadcnスタイルで作られた、数千種類のすっきりしたすぐ使えるWebサイトブロック。

blocks.so preview

blocks.soコンポーネントライブラリコマンドラインから直接インストールできる、オープンソースのWebサイトブロック。

8bitcn preview

8bitcnコンポーネントライブラリshadcnプロジェクトにそのまま組み込める、レトロな8ビット風UIコンポーネント。

Evil Charts preview

Evil Chartsコンポーネントライブラリshadcn/uiのプロジェクトにきれいに収まるよう設計された、アニメーション付きのSVGチャートコンポーネント。

coss ui preview

coss uiコンポーネントライブラリBase UIのプリミティブライブラリ上に構築された、コピー&ペースト式のUIコンポーネント。

Rare UI preview

Rare UIコンポーネントライブラリReactのインターフェースを構築するための、個性的でアニメーション付きのUIコンポーネントのセット。

beUI preview

beUIコンポーネントライブラリインターフェース作業をより速く進めるために、Tailwind CSSでスタイリングされたアニメーション付きReactコンポーネント。

butter-nav.vercel.app

Butter Nav preview

Butter Navコンポーネントライブラリセクション間を移動すると、レイアウトが滑らかに変形するメガメニューコンポーネント。

Cult UI preview

Cult UIコンポーネントライブラリ滑らかなインターフェースモーションのために、Framer Motionで動くアニメーション付きReactコンポーネント。

daisyUI preview

daisyUIコンポーネントライブラリより速くスタイリングするために、Tailwind CSSを拡張するコンポーネントクラスのライブラリ。

HeroUI preview

HeroUIコンポーネントライブラリかつてNextUIの名前でリリースされていた、モダンなReact UIコンポーネントライブラリ。

Kibo UI preview

Kibo UIコンポーネントライブラリAIインターフェースの構築に向けたパーツを取りそろえた、コンポーネントレジストリ。

Magic UI preview

Magic UIコンポーネントライブラリランディングページの制作に特化してつくられた、アニメーション付きのUIコンポーネント。

ui.aceternity.com

Aceternity UI preview

Aceternity UIコンポーネントライブラリ目を引くWebページをつくるための、トレンド感のあるアニメーションコンポーネントとヒーローセクション。

Animate UI preview

Animate UIコンポーネントライブラリMotionアニメーションライブラリで動きを加えた、アクセシブルなshadcnコンポーネント。

FlyonUI preview

FlyonUIコンポーネントライブラリ最新のTailwind v4ですぐに使える、セマンティックなTailwind CSSコンポーネント。

TailGrids preview

TailGridsコンポーネントライブラリTailwind CSSでページを手早く組み立てるための、レスポンシブなUIブロック。

Flowbite preview

Flowbiteコンポーネントライブラリインターフェース制作向けに、Tailwind CSSをベースに構築された大規模なコンポーネントライブラリ。

HyperUI preview

HyperUIコンポーネントライブラリTailwind CSSプロジェクトにコピーして使える、無料でオープンソースのUIコンポーネント。

Preline UI preview

Preline UIコンポーネントライブラリ複雑なダッシュボードインターフェースの構築に適したTailwind CSSコンポーネント。

Float UI preview

Float UIコンポーネントライブラリマーケティングサイトのページを組み立てるためにつくられたTailwind CSSコンポーネント。

Meraki UI preview

Meraki UIコンポーネントライブラリ右から左へ記述する言語に対応したTailwind CSSコンポーネント。

Tremor preview

Tremorコンポーネントライブラリダッシュボードインターフェースをまるごと組み立てられる、モジュール式のReactコンポーネント集。

Headless UI preview

Headless UIコンポーネントライブラリTailwind Labsのチームが手がけた、スタイルなしでアクセシブルなUIコンポーネント。

Base CN preview

Base CNコンポーネントライブラリshadcnのコンポーネントワークフローに組み込めるよう再構成されたBase UIのプリミティブ。

Easy UI preview

Easy UIコンポーネントライブラリインターフェースを素早く組み立てるための、コピー&ペースト式コンポーネントライブラリ。

Eldora UI preview

Eldora UIコンポーネントライブラリWebのランディングページを素早くつくるために最適化された、アニメーション付きのUIコンポーネント。

velora.colorlib.com

Velora UI preview

Velora UIコンポーネントライブラリ再利用できる、Tailwind CSSコンポーネントと作成済みページセクションの無料セット。

Watermelon UI preview

Watermelon UIコンポーネントライブラリshadcnのツールエコシステムに馴染むように構築されたReactコンポーネントライブラリ。

beautifului.dev

Beautiful UI preview

Beautiful UIコンポーネントライブラリWebアプリのフロントエンドを構築するための、洗練されたコピー&ペースト式UIコンポーネント。

Hexter UIコンポーネントライブラリshadcnプロジェクトですぐに使える、整理された清潔感のあるコンポーネント集。

Lightswind preview

Lightswindコンポーネントライブラリ際立つUIのための、ライティングやグロー効果を備えたTailwind CSSコンポーネント。

Reverse UI preview

Reverse UIコンポーネントライブラリReactとTailwind CSSでインターフェースを構築するためのコンポーネントライブラリ。

Smooth UI preview

Smooth UIコンポーネントライブラリ自分のプロジェクトにそのままコピーできる、動きの豊かなReactコンポーネント。

Tailark preview

Tailarkコンポーネントライブラリマーケティングサイトの構築を狙いとしたTailwind CSSのページセクションとコンポーネント。

UI Layouts preview

UI LayoutsコンポーネントライブラリTailwind CSSですぐに組み立てられる、フルページレイアウトとヒーローセクション。

Kokonut UI preview

Kokonut UIコンポーネントライブラリshadcnのフォーマットで動くようにまとめられた、クリエイティブでインタラクティブなUIコンポーネント。

Nex UI preview

Nex UIコンポーネントライブラリモダンなスタートアップを構築するチームに向けた、拡張性の高いUIコンポーネントライブラリ。

Ninja UI preview

Ninja UIコンポーネントライブラリWebサイトを軽快に、素早く読み込めるように保つための軽量なUIコンポーネント。

Sera UI preview

Sera UIコンポーネントライブラリshadcnのコマンドラインツールから直接インストールできるよう設計されたReactコンポーネント。

Re UI preview

Re UIコンポーネントライブラリBase UIのプリミティブライブラリの上に構築された、アクセシブルなUIコンポーネント。

Syntax UI preview

Syntax UIコンポーネントライブラリランディングページを素早く組み立てるための、アニメーション付きコピー&ペースト式UIコンポーネント。

shadcn-cssinjs.com

shadcn-cssinjs preview

shadcn-cssinjsコンポーネントライブラリCSS-in-JSによるスタイリングを使うプロジェクトに合うよう作り直されたshadcnコンポーネント。

transitions.dev

Transitions preview

Transitionsコンポーネントライブラリ再利用できる、厳選されたCSSトランジションのレシピとイージングカーブ集。

23rd preview

23rdコンポーネントライブラリReactとSvelteのどちらのプロジェクトでも使える、shadcnスタイルのコンポーネント。

Oneko preview

Onekoコンポーネントライブラリページ上でカーソルを追いかけてくる、相棒のようなピクセルアートの猫。

rolling.kitlangton.dev

Rolling Number preview

Rolling Numberコンポーネントライブラリ数字をなめらかに回転するエフェクトでアニメーションさせるReactの数値カウンター。

Annnimate preview

AnnnimateコンポーネントライブラリGSAPアニメーションライブラリで構築された、本番環境で使えるモーションコンポーネント。

GetLayers preview

GetLayersコンポーネントライブラリサイト向けに映画のようなページセクションを生成するAIプロンプト集。

Scritto preview

ScrittoコンポーネントライブラリUIに組み込める、文字が回転するテキストトランジションのためのコンポーネントライブラリ。

ogimagecn preview

ogimagecnコンポーネントライブラリSatoriを基盤とした、Open Graphのソーシャル共有画像を生成するためのコンポーネント。

Dither Kit preview

Dither Kitコンポーネントライブラリレトロで懐かしい雰囲気を出すために、ディザリングしたピクセルで描画されるチャートコンポーネント。

shieldcn preview

shieldcnコンポーネントライブラリプロジェクトのドキュメントを引き立てる、shadcnの雰囲気に合わせてデザインされたREADMEバッジ。

unlumen UI preview

unlumen UIコンポーネントライブラリコマンドラインからインストールして追加する、ミニマルなReactコンポーネントライブラリ。

Bearnie preview

BearnieコンポーネントライブラリAstro向けに構築され、Tailwind CSSでスタイリングされたUIコンポーネント集。

fluidfunctionalism.com

Fluid Functionalism preview

Fluid Functionalismコンポーネントライブラリ意図を持った物理ベースのアニメーションで動きを表現するUIコンポーネント。

termcn preview

termcnコンポーネントライブラリInkとOpenTUIを基盤に、ターミナル風のユーザーインターフェースを構築するためのReactコンポーネント。

framecn preview

framecnコンポーネントライブラリEditframeを基盤とした、Reactプロジェクト向けのプログラムによる動画レンダリング。

emailcn preview

emailcnコンポーネントライブラリReact Email、MJML、JSX Emailで動作するレスポンシブなメールコンポーネント。

startercn.vercel.app

startercn preview

startercnコンポーネントライブラリドキュメント、ランディングページ、エージェント対応を備えた、フォークしてすぐ使えるshadcn/uiレジストリのスターター。

pdfcn preview

pdfcnコンポーネントライブラリTakumiとFormeの上に構築された、PDFドキュメントを生成するためのReactコンポーネント。

editorcn.vercel.app

editorcn preview

editorcnコンポーネントライブラリTiptapフレームワークを基盤とした、Reactアプリにそのまま組み込めるリッチテキスト編集UI。

shadcn-labs.com

Shadcn Labs preview

Shadcn Labsコンポーネントライブラリshadcn/uiエコシステム向けの、オープンソースのレジストリとツール群。

FramebloxコンポーネントライブラリFramer内で組み合わせて完成したサイトに仕上げられる、モジュール式のセクションとテンプレート。

Nexvyn UIコンポーネントライブラリデジタルインターフェースやアプリにそのまま組み込める、洗練されたUIコンポーネント。

gradient-spin.vercel.app

gradient-spin.vercel.app

Gradient SpinコンポーネントライブラリReactプロジェクト向けの、グラデーションで塗られた回転するローディングインジケーターコンポーネント。

Libraries.dev preview

Libraries.devコンポーネントライブラリAIエージェントが使うことを想定して設計された、UIエフェクトとコンポーネントのコレクション。

Sona UI preview

Sona UIコンポーネントライブラリコードベースにコピーして、完全に自分のものとして自由にスタイルを変えられる、アニメーション付きのReactコンポーネント。

text-effects.colorion.co

Colorion Text Effects preview

Colorion Text Effectsコンポーネントライブラリインターフェースにそのままコピー&ペーストできる、アニメーション付きのテキストエフェクト。

dotmatrix.zzzzshawn.cloud

Dot Matrix preview

Dot Matrixコンポーネントライブラリshadcnプロジェクト向けに作られた、50種類を超えるドットマトリクス風ローディングアニメーション集。

sacred.computer

SRCL preview

SRCLコンポーネントライブラリレトロなDOS時代のターミナルインターフェースの見た目を再現するコンポーネントキット。

Prompt Kit preview

Prompt KitコンポーネントライブラリチャットをはじめとするAIインターフェース体験を構築するためのプリミティブコンポーネント。

Shoogle preview

Shoogleコンポーネントライブラリ数多くのshadcnレジストリにまたがってUIコンポーネントを索引化する検索エンジン。

interior.dev preview

interior.devコンポーネントライブラリクリックした瞬間に反応を感じられるよう丁寧に調整されたマイクロインタラクション。

soundcn preview

soundcnコンポーネントライブラリインターフェースに音を加えるための、コピー&ペースト式のUIサウンドエフェクト集。

cuelume preview

cuelumeコンポーネントライブラリブラウザのWeb Audio APIでリアルタイムに生成される、小さなインターフェースの音のキュー。

Canvas UI preview

Canvas UIコンポーネントライブラリ表現豊かなUIビジュアルのための、GPUアクセラレーションによる液体物理エフェクトとcanvasシェーダー。

Odyssey UI preview

Odyssey UIコンポーネントライブラリshadcnのコンポーネントシステムの上に構築された、アニメーション付きのReactコンポーネント集。

Spell UI preview

Spell UIコンポーネントライブラリモダンなWebアプリケーションを構築するための、丁寧につくられたインタラクティブなUIコンポーネント。

Skiper UI preview

Skiper UIコンポーネントライブラリTailwind CSSで組み合わせ、スタイリングできるよう設計された、アニメーション付きのUIプリミティブ。

devl preview

devlコンポーネントライブラリモダンなWebインターフェースを構築するための、ミニマルで実験的なUIコンポーネント。

Uiuno preview

Uiunoコンポーネントライブラリshadcnコンポーネントを整理・管理するための、AI支援付きワークスペース。

vengeanceui.com

Vengeance UI preview

Vengeance UIコンポーネントライブラリスクロール駆動のインタラクションやエフェクトを中心に構築された、アニメーション付きのReactコンポーネント。

sensory-ui preview

sensory-uiコンポーネントライブラリshadcn/uiコンポーネントに音のフィードバックを加えるサウンドデザインシステム。

amacro.vercel.app

Amacro preview

Amacroコンポーネントライブラリわずかな設定でReactアプリに追加できる、そのまま使えるページ表示アニメーション。

evilbuttons.com

Evil Buttons preview

Evil Buttonsコンポーネントライブラリ押した瞬間にインタラクティブで手触りを感じられるようにつくられたボタンコンポーネント。

componentry.dev

Componentry preview

ComponentryコンポーネントライブラリReactインターフェースを構築するための、カスタマイズ可能なUIプリミティブとコンポーネント。

Great UI preview

Great UIコンポーネントライブラリReactで構築され、Tailwind CSSでスタイリングされたコピー&ペースト式コンポーネント。

Ruru UI preview

Ruru UIコンポーネントライブラリReactアプリケーションを構築するための、アクセシブルでカスタマイズ可能なUIコンポーネント。

shadcnstudio.com

Shadcn Studio preview

Shadcn Studioコンポーネントライブラリshadcn/uiコンポーネント、作成済みブロック、フルテンプレートをそろえたライブラリ。

shadcn-animated.vercel.app

Animated shadcn/ui preview

Animated shadcn/uiコンポーネントライブラリアニメーション付きのインターフェース向けに、標準のshadcn/uiコンポーネントをMotionで動かしたバージョン。

Pin UI preview

Pin UIコンポーネントライブラリReactとTailwind CSSで構築された、個性的なコピー&ペースト式コンポーネント。

loading.dev preview

loading.devコンポーネントライブラリReactアプリ向けの、ローディングインジケーターとスピナーの軽量ライブラリ。

React・Web向けアニメーションライブラリ

11セクションページ

Motion preview

MotionアニメーションWeb上のReactアプリにモーションを組み込む、本番運用に耐えるアニメーションライブラリ。

GSAP preview

GSAPアニメーション業界で広く使われている、タイムラインを軸としたJavaScriptアニメーションエンジン。

Rive preview

Riveアニメーションステートマシンで駆動する、インタラクティブなベクターアニメーションを作るツール。

lottiefiles.com

Lottie preview

LottieアニメーションベクターアニメーションをWebに届けるための、軽量なJSONベースのフォーマット。

easingwizard.com

Easing Wizard preview

Easing WizardアニメーションWebアニメーション向けのカスタムなCSSスプリングイージングを作る、ビジュアルジェネレーター。

Morphrig preview

Morphrigアニメーションアイコンのモーフィングアニメーションの仕組みを、順を追って解説するインタラクティブなマニュアル。

Theatre.js preview

Theatre.jsアニメーションDOM要素をまたいだモーションデザインを演出する、ビジュアルシーケンサー。

morphicons preview

morphiconsアニメーションスプリング物理で自然な動きを生み、アイコンをモーフィングさせるアニメーションライブラリ。

glimm preview

glimmアニメーションNext.jsプロジェクトのナビゲーションに動きを与える、シェーダー駆動のページトランジション。

devouringdetails.com

Devouring Details preview

Devouring Detailsアニメーションマイクロインタラクションを設計する技を教える、インタラクティブな書籍。

textmotion preview

textmotionアニメーションWebにロール式のテキストアニメーションを加える、依存関係ゼロのプリミティブ。

開発ツール

ハブを開く

AIコードエディタと開発者ツール

24セクションページ

Claude Code preview

Claude Code開発者ツールコマンドラインのターミナル内で直接動作する、エージェント型のコーディングアシスタント。

Cursor preview

Cursor開発者ツールソフトウェアの記述とリリースを加速するために設計された、AIファーストのコードエディタ。

Zed preview

Zed開発者ツール低遅延で快適な編集を実現するために設計された、高性能なコードエディタ。

v0 preview

v0開発者ツールプレーンテキストのプロンプトを動作するshadcn/uiのコードに変換する生成AIツール。

Bolt.new preview

Bolt.new開発者ツールフルスタックアプリケーションを構築・実行できる、ブラウザ内のサンドボックス。

Vite preview

Vite開発者ツールモダンなWebプロジェクト向けの、高速なフロントエンドビルドツールと開発サーバー。

Biome preview

Biome開発者ツールWeb開発プロジェクト向けにRustで構築された、高速なコードフォーマッター兼リンター。

Playwright preview

Playwright開発者ツールブラウザを自動化し、信頼性の高いエンドツーエンドテストを実行するためのフレームワーク。

buildertools.sh

BuilderTools preview

BuilderTools開発者ツールソフトウェアをより速くリリースできるよう助ける、目的を絞った開発者ツール群。

nuqs preview

nuqs開発者ツール型安全なURLの検索パラメーターを読み書きするためのReactライブラリ。

better-t-stack.dev

Better T Stack preview

Better T Stack開発者ツールモダンなフルスタックのTypeScriptプロジェクトの雛形を生成するコマンドラインツール。

AI Stack preview

AI Stack開発者ツールAIアプリの構築に使われるモダンな技術スタックを比較するディレクトリ。

Alumnium preview

Alumnium開発者ツールMCPを通じて提供され、平易な自然言語でエンドツーエンドテストを記述できる。

vercel-doctor.com

Vercel Doctor preview

Vercel Doctor開発者ツールNext.jsアプリのパフォーマンスのボトルネックを特定する診断ツール。

OSS Perks preview

OSS Perks開発者ツールオープンソースプロジェクトのメンテナー向けに、無料のクラウドクレジットや特典を集めたハブ。

Vinext preview

Vinext開発者ツールCloudflare上でNext.jsアプリケーションを構築・実行できるようにするViteプラグイン。

evlog preview

evlog開発者ツールWebアプリケーションのイベントを記録するための構造化ロギングフレームワーク。

audio.raphaelsalaja.com

@web-kits/audio preview

@web-kits/audio開発者ツールWebアプリケーションに音を追加し、制御するための宣言的なライブラリ。

Nue preview

Nue開発者ツールReactのより軽量な代替として位置づけられた、軽量なWebフレームワーク。

Umami preview

Umami開発者ツールCookie同意バナーなしで動作する、プライバシー重視のWebアナリティクスツール。

torph.lochie.me

Torph preview

Torph開発者ツール依存関係なしで、モーフィングするトランジションでテキストをアニメーションさせるライブラリ。

x.ai/bot preview

x.ai/bot開発者ツールxAIのWebクローラーの仕様を明記したドキュメント。

Tracwell preview

Tracwell開発者ツールサイトの訪問者とコンバージョンを追跡するための、目的を絞ったアナリティクスツール。

DialKit preview

DialKit開発者ツール作業しながらパラメーターをリアルタイムに調整できる、アプリ内のフローティングツールバー。

AIコーディングエージェントとMCPサーバー

35セクションページ

Dray preview

Drayエージェント・MCP複数のコーディングエージェントを実行・管理するための、統合されたデスクトップワークスペース。

styles.refero.design

Refero preview

Referoエージェント・MCPAIエージェントにデザインの指針を与える、構造化されたDESIGN.MD仕様ファイル。

designmd.me preview

designmd.meエージェント・MCPAIコーディングエージェントが解析し、開発の基準にできる機械可読なデザイン仕様を生成する。

Open Design preview

Open Designエージェント・MCPデザインシステムを、AIエージェントが読み取って適用できる標準フォーマットにまとめる。

designmd.supply

designmd.supply preview

designmd.supplyエージェント・MCP狙いどおりの見た目とルールへAIアシスタントを導く、DESIGN.MDテンプレートのライブラリ。

getdesign.md preview

getdesign.mdエージェント・MCPAIコーディングエージェントが従うべきデザインルールを作成する、インタラクティブなジェネレーター。

design-md.hyperbrowser.ai

Hyperbrowser Design.md preview

Hyperbrowser Design.mdエージェント・MCP既存のWebサイトからデザインルールをそのまま抽出し、DESIGN.MDファイルを生成する。

Aura preview

Auraエージェント・MCPAIエージェントが拠りどころにできる明確なガイドラインを備えた、構造化されたデザインシステムを構築する。

Neuform preview

Neuformエージェント・MCPレイアウトから整った実用的なコードを出力する、AI支援のインターフェースデザイン。

typeui.sh preview

typeui.shエージェント・MCP型付きのUIコンポーネントの雛形を生成し、整った状態から開発を始められるコマンドラインツール。

Webclaw preview

Webclawエージェント・MCPあらゆるWebページを、AIエージェントが読みやすい整った構造化markdownに変換する。

Ghostex preview

Ghostexエージェント・MCP複数のバックグラウンドのコーディングエージェントのセッションを、一か所からまとめて実行・調整する。

is-agentic.com preview

is-agentic.comエージェント・MCP指定したWebサイトが、クローラーや自動エージェントにどれだけ対応できているかを評価する。

Herdr preview

Herdrエージェント・MCPコーディングエージェントのジョブを管理・スケジューリングする、分散型ランナー。

soubi.vercel.app

Soubi preview

Soubiエージェント・MCPエージェントのスキル定義を、使用可能なビルドへと変換するコンパイラー。

agentcn preview

agentcnエージェント・MCPReactプロジェクトにそのまま組み込める、本番運用に耐えるカスタマイズ可能なAIエージェントのレシピ。

skills preview

skillsエージェント・MCPshadcnのレジストリと日々の開発ワークフローのために作られた、エージェントスキル。

mcpcn preview

mcpcnエージェント・MCPChatGPT、Claude、MCPアプリのインターフェースを構築するためのReact UIコンポーネント。

integrations.sh

integrations.sh preview

integrations.shエージェント・MCPAIエージェントが参照し、開発の土台にできるAPI連携仕様のリポジトリ。

fx preview

fxエージェント・MCPZigで作られた、コマンドラインから動作する高性能なコーディングエージェント。

hyperframes.dev

HyperFrames preview

HyperFramesエージェント・MCPブラウザ画面を表示せずに、HTMLをMP4動画へレンダリングするヘッドレスエンジン。

Foglamp preview

Foglampエージェント・MCPレイテンシーと運用コストを見守る、オブザーバビリティツール。

Distill preview

Distillエージェント・MCP散らばったリサーチメモを集めて整理する、AIエージェント。

Agentation preview

Agentationエージェント・MCP画面上のUIへの注釈を、AIエージェントが行動に移せるコンテキストに変換する。

OpenCode preview

OpenCodeエージェント・MCPターミナルに常駐し、コマンドラインから動作するオープンソースのAIコーディングエージェント。

impeccable.style

Impeccable preview

Impeccableエージェント・MCP優れたUIへの感覚をAIエージェントに授ける、デザインインテリジェンスのスキル。

SkillSync preview

SkillSyncエージェント・MCP使用している複数のコードエディター間で、エージェントのコンテキストを同期し続ける。

bb preview

bbエージェント・MCPコーディングエージェントの実行とテストのために作られた、オープンソースの開発環境。

Capacity preview

Capacityエージェント・MCPプロンプトをフルスタックアプリに変える、自然言語のワークスペース。

Lafys preview

Lafysエージェント・MCP平易な説明をUIコンポーネントに変える、ビルダー向けのプロンプト駆動ジェネレーター。

Efecto preview

Efectoエージェント・MCPMCPを通じて連携ツールに接続する、エージェントファーストのビジュアルWebキャンバス。

Arc labs preview

Arc labsエージェント・MCP模擬技術面接を実施して練習を助ける、AIキャリアスイート。

Scira preview

Sciraエージェント・MCPWeb全体から答えを探す、無駄をそぎ落としたオープンソースのAI検索エンジン。

Kombai preview

Kombaiエージェント・MCP与えられたコンテキストからUIコードを書く、AIデザインエンジニア。

Causal preview

Causalエージェント・MCPメモを取り、計画を練るための、AI搭載のキャンバスワークスペース。

デプロイ・ホスティングプラットフォーム

5セクションページ

Vercel preview

VercelデプロイNext.jsアプリをデプロイしてWebに公開するためのクラウドプラットフォームです。

developers.cloudflare.com

Cloudflare preview

Cloudflareデプロイアプリをデプロイするために、グローバルなエッジネットワーク上でサーバーレスのWorkersを実行します。

Netlify preview

Netlifyデプロイ継続的デプロイのパイプラインを通じてサイトを配信する、Webホスティングプラットフォームです。

Railway preview

Railwayデプロイアプリやデータベースのデプロイを簡単にするインフラプラットフォームです。

Fly.io preview

Fly.ioデプロイユーザーに物理的に近い場所に配置されたサーバー上で、Dockerコンテナを実行します。

デザインアセット

ハブを開く

React・Web向けのアイコンライブラリ

30セクションページ

Lucide preview

LucideアイコンFeatherからフォークされ、インターフェース向けに数千のグリフを備える、コミュニティ運営のオープンなアイコンセット。

phosphoricons.com

Phosphor preview

Phosphorアイコン一貫した6種類のウェイトで揃う、インターフェースデザイン向けの柔軟なアイコンファミリー。

Iconify preview

Iconifyアイコン膨大な種類のアイコンに即座に手が届く、統一されたフレームワーク。

Rune Icons preview

Rune Iconsアイコンインターフェース向けに5種類のスタイルで揃う、ミニマルなアイコンセット。

Icon Museumアイコン際立ったモバイルアプリのアイコンに込められた職人技を称える、アーカイブ。

Tabler Icons preview

Tabler Iconsアイコンユーザーインターフェースを構築するための、数千点のアウトラインスタイルのアイコンライブラリ。

Heroicons preview

HeroiconsアイコンTailwind CSSフレームワークを手がけるチームが作る、手仕事によるSVGアイコン。

fonts.google.com

Material Symbols preview

Material Symbolsアイコンインターフェース向けに3種類のスタイルを選べる、Googleのバリアブルアイコンフォント。

icons.getbootstrap.com

Bootstrap Icons preview

Bootstrap IconsアイコンBootstrapフレームワークと組み合わせて使う、公式のSVGアイコンライブラリ。

Remix Iconアイコンアウトライン版と塗りつぶし版の両方が揃う、ニュートラルな見た目のアイコンライブラリ。

Iconoir preview

Iconoirアイコン均一で一貫したストロークの太さで描かれた、オープンソースのSVGアイコンセット。

Ionicons preview

IoniconsアイコンWebとモバイルのインターフェースで使えるよう設計された、洗練されたアイコンパック。

simpleicons.org

Simple Icons preview

Simple Iconsアイコン3,000以上の人気ブランドロゴを、それぞれSVG形式で揃えたコレクション。

theSVG preview

theSVGアイコンすぐに使える整ったブランドロゴを厳選し、SVG形式で提供するセット。

feathericons.com

Feather preview

Featherアイコンすべてのグリフを24ピクセルのグリッド上に描いた、ミニマルでオープンソースのアイコンセット。

carbondesignsystem.com

Carbon Icons preview

Carbon Iconsアイコンエンタープライズ級のプロダクトデザインを構築するために作られた、IBMの公式アイコンライブラリ。

Boxicons preview

Boxiconsアイコン3種類の異なるビジュアルスタイルで作り込まれた、ベクターアイコンのセット。

mx-icons.vercel.app

MX Icons preview

MX IconsアイコンReactコンポーネントとしてパッケージされた、大規模でカスタマイズ可能なアイコンコレクション。

akveo.github.io

Eva Icons preview

Eva Iconsアイコンインターフェース向けに、アウトラインと塗りつぶしの両スタイルで揃う400点のアイコンパック。

Devicon preview

Deviconアイコン人気のプログラミング言語と開発者向けツールを網羅した、アイコンセット。

css.gg preview

css.ggアイコンSVGではなく純粋なCSSだけで描画される、700点の軽量なアイコンセット。

HugeIcons preview

HugeIconsアイコンストロークとソリッドの両スタイルで揃う、幅広いアイコンライブラリ。

Reicon preview

Reiconアイコン2種類のウェイトでアイコンを提供する、ツリーシェイキング対応のReactアイコンライブラリ。

Iconsax preview

IconsaxアイコンUI制作向けに6種類のビジュアルスタイルで揃う、汎用性の高いアイコンセット。

icons0 preview

icons0アイコン200,000点を超える選択肢の中からアイコンを探せる、検索エンジン。

heroicons-animated.com

Heroicons Animated preview

Heroicons Animatedアイコンホバーで動くアニメーションを加えてリメイクしたHeroiconsで、インタラクティブなUIに最適です。

Icons.download preview

Icons.downloadアイコン16種類の異なるテイストから選べる、厳選されたアイコンライブラリです。

lucide-animated.com

Lucide Animated preview

Lucide Animatedアイコンマイクロアニメーションを組み込んでリメイクしたLucideのアイコンセットで、生き生きとしたインターフェースを演出します。

iconfoundry.store

Icon Foundryアイコンさまざまなファミリーのアイコンを集めた、検索可能なアーカイブです。

Inkword preview

Inkwordアイコン単語をひとつ入力するだけで、それに合ったイラストを生成します。

Webサイト向けのフォント・タイポグラフィツール

7セクションページ

Fontshare preview

Fontshareフォント商用プロジェクトでも無料で使える、プロ品質のフォントのライブラリ。

Klim preview

KlimフォントWeb全般で使える現代的な書体を手がける、タイプファウンドリー。

Fontsource preview

Fontsourceフォントオープンソースフォントをnpmパッケージとしてプロジェクトに導入し、セルフホストする。

wakamaifondue.com

Wakamai Fondue preview

Wakamai Fondueフォントフォントファイルを調べ、それぞれが対応している機能を明らかにするツール。

Utopia preview

Utopiaフォントすぐに使えるCSSのclamp値を出力する、流体タイポグラフィの計算ツール。

Velvetyne preview

Velvetyneフォント実験的で自由にライセンスされた書体を配布する、オープンソースのタイプファウンドリー。

departuremono.com

Departure Mono preview

Departure Monoフォントターミナルになじむよう設計された、ピクセル調の等幅書体。

インターフェースデザインのためのカラーツール

5セクションページ

OKLCH preview

OKLCHカラー知覚的に均一な色空間を基盤に、UIの色を選ぶためのカラーピッカー。

Color.review preview

Color.reviewカラーアクセシブルさを保つカラーパレット作りを助ける、コントラストチェッカー。

huetone.ardov.me

Huetone preview

Huetoneカラーコントラスト比を調整し、UIの色をアクセシブルに保つパレットジェネレーター。

APCA preview

APCAカラー実際の目の色の見え方に沿った、現代的なコントラストアルゴリズム。

Ramps preview

RampsカラーOKLCH空間でなめらかなカラーランプを生成する、デザイントークンツール。

Web向けの3Dツールとアセット

6セクションページ

Three.js preview

Three.js3DWebGLを用いてブラウザで3Dグラフィックスを作成・表示する、JavaScriptライブラリ。

r3f.docs.pmnd.rs

React Three Fiber preview

React Three Fiber3DThree.jsのシーンをコンポーネントとして構築できる、宣言的なReactレンダラー。

drei.docs.pmnd.rs

Drei preview

Drei3DReact Three Fiberのプロジェクトを加速させる、既製のヘルパーコンポーネント集。

Blender preview

Blender3DWeb向けの3Dモデリング、アニメーション、シーンのレンダリングを行う、オープンソースのスイート。

gltf.report preview

gltf.report3DglTFアセットを検査・軽量化し、Web上で3Dモデルをより速く読み込めるようにするブラウザツール。

Poly Haven preview

Poly Haven3DCC0ライセンスのテクスチャを無料でダウンロードし、どんなプロジェクトでも再利用できる公開ライブラリ。

WebGLシェーダーとシェーダーグラデーション

7セクションページ

thebookofshaders.com

Book of Shaders preview

Book of Shadersシェーダーフラグメントシェーダーの書き方を段階的に教える、実践的でインタラクティブなガイド。

compute.toys preview

compute.toysシェーダーWGSLのコンピュートシェーダーを書き、試せるオンラインのサンドボックス。

Shaderfrog preview

Shaderfrogシェーダーグラフのノードをつないでシェーダーを作る、ノードベースのビジュアルエディター。

shadercn preview

shadercnシェーダーvgpuとTypeGPUの上に作られた、プロジェクトにそのまま組み込めるReactのシェーダーコンポーネント。

shaders.paper.design

Paper Shaders preview

Paper ShadersシェーダーWebプロジェクト向けに、依存関係ゼロですぐにインポートできるシェーダー。

openshaders.com

OpenShaders preview

OpenShadersシェーダーWebプロジェクトにそのまま組み込める、オープンソースのWebGLシェーダーライブラリ。

orbkit.zzzzshawn.cloud

Orbkit preview

Orbkitシェーダーブラウザでアニメーションするオーブエフェクトを作る、WebGL搭載のレンダラー。

ユーティリティ

ハブを開く

デザイナー・開発者向けWebユーティリティ

34セクションページ

SVGOMG preview

SVGOMGWebユーティリティSVGファイルを最適化してクリーンアップする、ブラウザベースのグラフィカルツールです。

RegExr preview

RegExrWebユーティリティブラウザ上で正規表現を書いてテストできる、インタラクティブなプレイグラウンドです。

Squoosh preview

SquooshWebユーティリティブラウザ上で画像を圧縮し、ビフォーアフターを並べて比較できます。

Fffuel preview

FffuelWebユーティリティSVGのテクスチャやグラデーション、背景パターンを生成できるブラウザ用ツールキットです。

ui.camera preview

ui.cameraWebユーティリティソフトウェアのインターフェースを見せるための3Dモックアップや演出シーンを作成できます。

Ray.so preview

Ray.soWebユーティリティコードスニペットを数クリックで、洗練された共有向けの画像に変換します。

transform.tools

Transform preview

TransformWebユーティリティJSONや型定義を別のコードに変換する、複数フォーマット対応のコンバーターです。

Playgrnd preview

PlaygrndWebユーティリティ完全にオフラインで、ブラウザ内で動作するクリエイティブツール群です。

Anim8 preview

Anim8WebユーティリティMP4の画面録画を、軽量なアニメーションSVGグラフィックに変換します。

OGFolio preview

OGFolioWebユーティリティOpen Graphのソーシャルカードが共有時にどう表示されるかをプレビューして確認できます。

dotforge.vercel.app

DotForge preview

DotForgeWebユーティリティディザリング効果をリアルタイムに生成し、そのままWebプロジェクトに組み込めます。

ASCIInator preview

ASCIInatorWebユーティリティブラウザのウィンドウから離れることなく、画像をテキストベースのASCIIアートに変換します。

Vessa preview

VessaWebユーティリティブランドガイドラインを、チームで共有できる生きたWebページとして公開できます。

Icoon preview

IcoonWebユーティリティカスタムの3Dアイコンを必要に応じて生成する、AI搭載のツールです。

designminis.com

Design Minis preview

Design MinisWebユーティリティ小さなデザインユーティリティやスケールジェネレーターをひとつにまとめたコレクションです。

ascii.krackeddevs.com

ASCII (Kracked Devs) preview

ASCII (Kracked Devs)Webユーティリティブラウザ上で、プレーンテキストをすばやくスタイリッシュなASCIIアートに変換します。

literate-enigma-snowy.vercel.app

Dither Lab preview

Dither LabWebユーティリティ写真にヴィンテージ風のディザリングフィルターを適用するツールです。

usehallmark.com

Hallmark preview

HallmarkWebユーティリティ手作り感のあるページデザインを生み出すランディングページビルダーです。

Tooooools preview

ToooooolsWebユーティリティ画像のディザリングやピクセル化を行う、ブラウザベースのユーティリティ集です。

Screan preview

ScreanWebユーティリティアプリの掲載ページを魅せるための、App Store向けプロモーション用スクリーンショットモックアップを作成できます。

PostSpark preview

PostSparkWebユーティリティスクリーンショットを、ソーシャル共有向けのすっきりした背景で装飾できます。

Drawably preview

DrawablyWebユーティリティユーザーインターフェース向けに手描き風の図形を生成する、スケッチツールです。

Mesurer preview

MesurerWebユーティリティ実際のWebサイト上でピクセル間隔を測定・確認できる、画面上の定規です。

render-labs.evlog.cloud

render-labs.evlog.cloud

Render LabsWebユーティリティevlogチームがデザイナーと開発者のために作った、画像レンダリングツールです。

Butterfly preview

ButterflyWebユーティリティプロダクトのアイデアをすばやく検証するための、シンプルなランディングページビルダーです。

Corne preview

CorneWebユーティリティCorne分割キーボードに関するあらゆる情報を集めたドキュメントとリファレンス資料です。

Shiori preview

ShioriWebユーティリティコマンドラインから使え、Raycastとも連携するブックマークマネージャーです。

opensource-together.com

Open Source Together preview

Open Source TogetherWebユーティリティ開発者と、貢献できるオープンソースプロジェクトをつなぐプラットフォームです。

asciistudio.space

ASCII Studio preview

ASCII StudioWebユーティリティ画像と動画の両方をテキストのASCIIアートに変換する、ブラウザベースのスタジオです。

Tabbied preview

TabbiedWebユーティリティ幾何学模様を生成し、SVGとして書き出せるジェネレーティブツールです。

studio.rynix.in

Rynix Studio preview

Rynix StudioWebユーティリティ動画にリアルタイムのビジュアルエフェクトを適用して試せるプレイグラウンドです。

Mascofast preview

MascofastWebユーティリティ背景が透明なアニメーション付き3DマスコットをつくるAIツールです。

screenshot-studio.com

Screenshot Studio preview

Screenshot StudioWebユーティリティ平面的なスクリーンショットをリアルな3Dモックアップで包み込む、デザイナーや開発者に便利なブラウザユーティリティです。

Replay preview

ReplayWebユーティリティ実際の訪問者のセッションを記録し、サイトがどう使われているかを再生して確認できます。

デザイナー・開発者向けデスクトップアプリ

12セクションページ

Raycast preview

Raycastデスクトップアプリコマンド実行や検索ができる拡張可能なMac用ランチャーで、Spotlightの代わりになります。

Ghostty preview

Ghosttyデスクトップアプリ速度を追求してGPUアクセラレーションに対応した、コマンドライン開発者向けのターミナルエミュレーターです。

Warp preview

WarpデスクトップアプリRustで書かれたターミナルで、コマンド出力をブロック単位でまとめ、AIによる支援機能を備えています。

CleanShot X preview

CleanShot Xデスクトップアプリスクリーンショットの撮影と画面録画をひとつにまとめた、Mac用デスクトップユーティリティです。

Granola preview

Granolaデスクトップアプリ通話にボットを参加させることなく、会議の要約を作成するAIメモ帳です。

LocalSend preview

LocalSendデスクトップアプリローカルのWi-Fiネットワーク経由で、近くのデバイス間でファイルを安全に転送します。

Canario preview

Canarioデスクトップアプリコマンドラインのセッションを個別のペインに整理して配置するターミナルです。

CoolDock preview

CoolDockデスクトップアプリアプリと並べてモニタリングウィジェットを配置できる、セカンダリのデスクトップDockです。

Supaste preview

Supasteデスクトップアプリクリップボードを管理し、過去のスクリーンショットの履歴を保持するMacアプリです。

Runey preview

Runeyデスクトップアプリフリーランサーが請求書の送付とクライアント管理をひとつのアプリで行えるよう支援します。

Revone preview

Revoneデスクトップアプリさまざまなツールから支払い指標を集約し、ひとつの収益ダッシュボードにまとめます。

zen-browser.app

Zen Browser preview

Zen Browserデスクトップアプリ縦型タブと、集中しやすいシンプルなインターフェースを加えたFirefoxのフォークです。

画面録画・動画ツール

11セクションページ

Screen Studio preview

Screen Studio画面録画録画になめらかなカメラズームを自動で加える画面録画ツールです。

Remotion preview

Remotion画面録画Reactコンポーネントを使って、動画をプログラムで構築・レンダリングできます。

blackmagicdesign.com

DaVinci Resolve preview

DaVinci Resolve画面録画動画編集とカラーグレーディングをひとつのワークフローで扱える、プロ向けのアプリケーションです。

Descript preview

Descript画面録画文字起こしをテキストとして編集することで映像をカットできる、AI動画エディターです。

Gifski preview

Gifski画面録画元のフレームレートを保ったまま、動画を高品質なGIFに変換します。

Slant It preview

Slant It画面録画平面的な画面キャプチャを、角度のついた立体的なモックアップに変換します。

Remocn preview

Remocn画面録画動画制作にそのまま組み込める、既製のRemotion用アニメーションコンポーネントです。

bettershot.site

BetterShot preview

BetterShot画面録画録画にカーソルズームやキャプションを加える画面録画ツールです。

Recordly preview

Recordly画面録画洗練された開発者向けデモを作成するための画面録画ツールです。

Cursorful preview

Cursorful画面録画録画中にカーソルを自動で追尾する画面録画ツールです。

Tokokino preview

Tokokino画面録画このブラウザベースのエディターから、キャプチャをそのままデバイスモックアップにはめ込めます。

ホワイトボードとスケッチツール

4セクションページ

tldraw preview

tldrawホワイトボードReact SDKを通じて自分のアプリに組み込める、無限キャンバスのホワイトボードです。

Excalidraw preview

Excalidrawホワイトボードすべてを手描きのスケッチ風に描画する、共同編集対応のオンラインホワイトボードです。

Obsidian preview

Obsidianホワイトボードノートを視覚的なグラフでつなぐ、ローカルファーストのMarkdownナレッジベースです。

Linear preview

Linearホワイトボード作業の計画と追跡を行う、スピードを重視して作られたプロジェクト管理ソフトウェアです。

デザイン・フロントエンドツール全422個、ライブプレビュー付き — Designeer