🧭 目的・スタイルで探せる、おしゃれフォント図鑑が登場!【いますぐ見る】

57のWebツールやテクを紹介中

Collective

Daily Doze

アイデアが止まらない、グラフィックデザイナーの秘密道具箱

57個のWebツールが見つかりました

カテゴリー
カテゴリー
+もっと見る
キーワード
キーワード
+もっと見る
スタイル
スタイル
+もっと見る
1日前
NEW
画像や動画、音声ファイル、さらにはドキュメントファイルまであらゆるファイルを最適化、圧縮できるオンラインツール。

ツール・ジェネレータ🛠️

1日前
NEW
Webページの見える部分 (フォールドより上) をレンダリングするために必要な最小限の CSS ルールのセット、「クリティカルCSS」をURLを入力するだけで生成してくれるツール。

ツール・ジェネレータ🛠️

HTML/CSS

1日前
NEW
オンラインにいるユーザーが10秒ごとに道順やラジオ局の変更について投票する、共同のストリートビュー・ロードトリップ・シミュレーター。

ツール・ジェネレータ🛠️

1日前
NEW
文字プロンプトからLEGOで組み立て可能なデザインをAIが生成してくれるオープンソースモデル。

ツール・ジェネレータ🛠️

AI

2日前
NEW
Tailwind CSSで利用できるクラス名をすべてまとめたチートシート。Tailwind v4にも対応済み。

ツール・ジェネレータ🛠️

Tailwind CSS

2日前
NEW
Reactとshadcn/uiで作られたボタンコンポーネントで、本当に押しているようなフィードバック付き。カスタマイズ可能なメタリックな外観は、ゴールドなどお好みの色に変更可能。

UIライブラリ

React

3日前
スクロールをはじめると、画像カルーセルが奥行き感たっぷりに回転するユニークなアニメーションコンセプト。

アニメーション🎞️

GSAP

4日前
AIを活用したプロトタイプ作成ツールで、プロダクトチームがUIデザインを迅速に作成し、ユーザーからのフィードバックやデータに基づいた意思決定を行い、チーム内でのコラボも可能。

ツール・ジェネレータ🛠️

4日前
ブラウザ上でCSSスタイリングのカスタマイズができるオンラインツール。立体的に回転する3Dアニメーションを実現可能。

ツール・ジェネレータ🛠️

HTML/CSS

4日前
CSSのmaskを利用して、カルーセルやスライダーの両端をフェードアウトさせるCSSテクニック。

スニペット✂️

HTML/CSS

5日前
ヨハネス・フェルメールの最も有名な絵画「真珠の耳飾りの少女」を108億万画素でスキャン、ブラウザ上で閲覧できます。絵の具が劣化によりひび割れした細部までくまなくどうぞ。

インスピレーション💡

6日前
コンテナ端の子要素の余白を自動的にトリミング、レイアウトを簡単にする新しい CSS プロパティ、margin-trim の使い方を紹介した記事。

チュートリアル📘

HTML/CSS

6日前
アーケードゲームのような遊び心あふれるデモ。カートのスピードなどをブラウザなどでカスタマイズ可能です。

ツール・ジェネレータ🛠️

1週間前
Figmaでプロンプトを入力すると、プラグインが実際のデザインに変換します。さらにすごいのは、結果をリアルタイムで確認できること。

プラグイン

Figma

1週間前
NotionをつかってCMSサイトを構築できるサービス。あらゆるタイプのウェブサイトやアプリの制作に対応しています。

ツール・ジェネレータ🛠️

1週間前
Tailwind CSSとMotionで作成された、美しいアニメーションが特長のUIコンポーネント集。コピペも簡単で、カスタマイズ可能。 オープンソースMIT。

アニメーション🎞️

JavaScript, Tailwind CSS

1週間前
97年に登場したWindows向けメディアプレイヤーのスキンテーマをひたすら集めたギャラリーサイト。

インスピレーション💡

1週間前
Claude AIとChatGPTを使い、Figmaのデザインをプロダクションレベルのコードに変換するプラグイン。React、SwiftUI、Tailwind、Flutterなどの複数のフレームワークをサポート。

プラグイン

Figma

1週間前
CSS APIとView TransitionをサポートしたアンカーポジショニングのためのTailwind CSS専用プラグイン。

Tailwind CSS

1週間前
Made With GSAPがGSAPのInertiaPluginを使ったホバーエフェクトのチュートリアルを公開しています。

アニメーション🎞️

GSAP

1週間前
GSAPが完全無料で商用利用も可能になりました。人気の高いSplitTextプラグイン、いままでは有料でしたがすべてのボーナスプラグインが無料となりました。

アニメーション🎞️

GSAP

1週間前
オンライン上で画像を細かく編集できるフォトエディターツール。編集した画像のダウンロードも可能です。

ツール・ジェネレータ🛠️

2週間前
凹凸のあるすりガラスを手軽に作成できるFigmaプラグイン。お好みの範囲にエフェクトを適用でき便利。

プラグイン

Figma

2週間前
サムネイルをクリックすると、パスを描きながら画像が繰り返し表示されながら拡大表示されるフレームアニメーション。

アニメーション🎞️

HTML/CSS

2週間前
ウェブサイトの基本となるUIデザインベースで利用する配色カラーパレットをCSS color-mix()をつかって作成する方法を紹介。デモ配色ジェネレーターも一緒にどうぞ。

配色🎨

HTML/CSS

2週間前
ジェン・シモンズ氏が、ウェブデザインにおけるタイポグラフィの見た目を改善する、新しいCSSラインハイト単位について説明しています。従来の設定との違いを分かりやすくデモを使って体験できます。

チュートリアル📘

HTML/CSS

2週間前
Mihael Miklosicがp5.jsを使って作成した、Perlinノイズ・グラフィック・ツール。色やシェイプなどカスタマイズ可能で、エクスポートまで。

ツール・ジェネレータ🛠️

2週間前
Reactの新機能とをつかった、スムーズなUI遷移の実装についてスニペット付きで詳しく紹介しています。

チュートリアル📘

React

2週間前
漫画などで用いられる集中線をCSSのみで表現でき、ヒーローセクションなどの背景にもおすすめ。

スニペット✂️

HTML/CSS

2週間前
CSSで描かれたスタイリッシュな背景パターン集。幾何学・グラデーション・サイバー風まで、全て商用利用OK&カスタマイズ自由。ライト・ダーク両対応です。

ツール・ジェネレータ🛠️

HTML/CSS

2週間前
HTMLシンボルや絵文字をコピー&ペーストするためのリソースで、すべて検索可能。

ツール・ジェネレータ🛠️

HTML/CSS

2週間前
CSSやTailwindでのCSSスニペットライブラリ。ボタンやカードチェックボックスなどさまざま。CSSだけでなく、Tailwind版が用意されているのがミソ。

スニペット✂️ ツール・ジェネレータ🛠️

HTML/CSS, Tailwind CSS