Designeer.org

ハブ · 122件のツール · 3件のセクション

UI・Webデザインのインスピレーション

白紙のキャンバスを開く前に、まずはここから。実際のWebサイトやランディングページのギャラリー、インターフェースをデザインするためのツール、そして優れたインターフェースが機能する理由を解説する読み物をまとめました。

01 / 03

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

78セクションを開く
60fps.design
60fps preview
60fpsギャラリー動きのあるインターフェースをとらえた画面録画を集め、UIアニメーションを学ぶためのインスピレーション源にしたギャラリー。
awwwards.com
awwwards.com
Awwwardsギャラリー優れたWebデザインとフロントエンドの技巧を毎日表彰する、アワードプログラム兼ギャラリー。
cosmos.so
Cosmos preview
Cosmosギャラリー画像やリファレンスを集め、クリエイティブなインスピレーションボードを作れるビジュアルムードボード空間。
curated.design
Curated Design preview
Curated DesignギャラリーWebサイトのインスピレーションをデザインのテイストごとにまとめ、求める見た目から探せるギャラリー。
layers.to
Layers preview
Layersギャラリーデザイナーが自分の作品を公開し、フィードバックやインスピレーションを得られるプラットフォーム。
minimal.gallery
Minimal Gallery preview
Minimal Galleryギャラリーミニマルで抑制の効いたWebサイトを集めた、削ぎ落としたデザインのインスピレーションを求める人向けのコレクション。
mobbin.com
Mobbin preview
Mobbinギャラリー実際にリリースされたプロダクトのモバイル・Webアプリ画面やユーザーフローを検索できるライブラリ。
saaspo.com
Saaspo preview
Saaspoギャラリーマーケティングやプロダクトデザインのインスピレーション向けに厳選した、SaaSのランディングページギャラリー。
seesaw.website
SEESAW preview
SEESAWギャラリーWebサイトのデザインインスピレーションをページのセクションごとにまとめ、ブロック単位で学べるコレクション。
supahero.io
Supahero preview
Supaheroギャラリーランディングページを設計する際のインスピレーションになる、Webサイトのヒーローセクションを厳選したコレクション。
imageory.in
Imageory preview
Imageoryギャラリー画像とその背景にあるプロンプトを組み合わせて見せる、クリエイティブなインスピレーション向けのビジュアルギャラリー。
backgrounds.supply
Backgrounds Supply preview
Backgrounds Supplyギャラリー手作業で作り込まれたWebサイト用背景のセットで、次のプロジェクトにそのまま使える。
backgrounds.venust.ai
Venust Backgrounds preview
Venust Backgroundsギャラリー生成に使った元のプロンプト付きで提供される、無料のAI生成Webサイト背景。
details.so
Details preview
Detailsギャラリー主要なデジタルプロダクトのマイクロインタラクションを細部まで分解し、ディテールを学ぶためのコレクション。
sombra.design
Sombra preview
SombraギャラリーダークモードのWebサイトインターフェースを集めた、暗めのパレットでデザインする人向けのショーケース。
dribbble.com
Dribbble preview
Dribbbleギャラリーデザイナーがショットやコンセプトを投稿し、作品を共有しインスピレーションを得るグローバルなコミュニティ。
behance.net
Behance preview
Behanceギャラリーさまざまなデザイン分野のクリエイティブなポートフォリオを公開・閲覧できる、Adobeのプラットフォーム。
recent.design
Recent Design preview
Recent Designギャラリーアワード級のWebサイトを毎週セレクトし、途切れないデザインインスピレーションを届けるギャラリー。
navbar.design
navbar.design preview
navbar.designギャラリーサイトメニューを設計する際の参考になる、ナビゲーションバーのパターンを厳選したセット。
footer.design
footer.design preview
footer.designギャラリー締めくくりのセクションのインスピレーションになる、クリエイティブなWebサイトフッターを厳選したセット。
land-book.com
Land-book preview
Land-bookギャラリーランディングページを業種別に整理した大規模ギャラリーで、自分のニッチに合ったデザインを探せる。
collectui.com
Collect UI preview
Collect UIギャラリー継続的なデザインチャレンジから生まれた、コンポーネント別にタグ付けされた日替わりのUIデザインインスピレーション。
siteinspire.com
SiteInspire preview
SiteInspireギャラリー丁寧に作り込まれたWebデザインを長年にわたり紹介し、スタイルやテーマで絞り込めるショーケース。
lapa.ninja
Lapa Ninja preview
Lapa Ninjaギャラリーレイアウトのインスピレーションを得るために閲覧できる、厳選されたレスポンシブなランディングページのセット。
uxarchive.com
UX Archive preview
UX Archiveギャラリーモバイルのオンボーディングフローを画面ごとにとらえた、UXリファレンス用のアーカイブ。
screenlane.com
Screenlane preview
Screenlaneギャラリーさまざまなアプリのインターフェース画面を検索できる、UIインスピレーション向けのギャラリー。
flowbase.co
Flowbase preview
Flowbaseギャラリーサイトレイアウトを構築するための、プレミアムなUIコンポーネントとインタラクションパターンの供給源。
hoverstat.es
Hover States preview
Hover Statesギャラリー独創的でインタラクティブなWebデザインを紹介し、サイトがモーションやホバーをどう扱うかを学べるショーケース。
saasframe.io
SaaSFrame preview
SaaSFrameギャラリーランディングページのデザインインスピレーションとして集めた、数百点のSaaSマーケティングページのスクリーンショット。
landingfolio.com
Landingfolio preview
Landingfolioギャラリーレイアウトやマーケティングのインスピレーションを得るために閲覧できる、豊富なランディングページデザインのライブラリ。
pttrns.com
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.club
Scrnshts preview
Scrnshtsギャラリーモバイルアプリのマーケティング時のインスピレーションになる、App Storeのスクリーンショットデザインを厳選したセット。
are.na
Are.na preview
Are.naギャラリービジュアルをブックマークし、リサーチを共有ボードにまとめられる共同作業型のプラットフォーム。
appinspo.com
Appinspo preview
AppinspoギャラリーUIやインターフェースのインスピレーション向けに厳選した、モバイルアプリデザインのギャラリー。
darkmodedesign.com
Dark Mode Design preview
Dark Mode Designギャラリー暗めのインターフェースを設計する際のインスピレーションに、ダークモードのWebサイトに特化したショーケース。
pinterest.com
Pinterest preview
Pinterestギャラリーあらゆるテーマのクリエイティブなアイデアを保存・発見できるビジュアルディスカバリープラットフォーム。
navbar.gallery
navbar.gallery preview
navbar.galleryギャラリーサイトメニューを設計する際に学べる、モダンなナビゲーションバーに的を絞ったギャラリー。
posts.design
posts.design preview
posts.designギャラリー投稿やフィードのレイアウトのインスピレーション向けに厳選した、ソーシャルメディアのグラフィックデザインアーカイブ。
loadmo.re
loadmo.re preview
loadmo.reギャラリー型破りで斬新なインスピレーションを求める人向けの、実験的なモバイルWebサイトデザインのギャラリー。
inspora.design
inspora.design preview
inspora.designギャラリーモダンなインスピレーションを得るために閲覧できる、現代的なビジュアルWebデザインのアーカイブ。
cta.gallery
cta.gallery preview
cta.galleryギャラリーコンバージョン重視のインスピレーション向けに、コールトゥアクションのボタンやバナーを厳選したセット。
desengs.com
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
Landing Love preview
Landing Loveギャラリーモーションのインスピレーション向けに、アニメーションごとに整理した魅力的なランディングページのコレクション。
motionimo.xyz
Motionimo preview
Motionimoギャラリーアニメーションや動きを学ぶための、モーションデザインクリップの豊富なライブラリ。
before.click
before.click preview
before.clickギャラリーApp Storeのマーケティングインスピレーション向けに、コンバージョンの高いアプリスクリーンショットのコンセプトを紹介するショーケース。
swiped.design
Swiped preview
Swipedギャラリーさまざまなソーシャルプラットフォームから集めた、際立ったデザイン投稿のコレクション。
landdding.com
Landdding preview
Landddingギャラリーレイアウトやマーケティングのインスピレーション向けに、毎日更新されるクリエイティブなランディングページのカタログ。
designengineer.tools
designengineer.tools preview
designengineer.toolsギャラリーデザインエンジニアの仕事に合わせて厳選した、必携ツールのまとめ。
insposite.com
Insposite preview
Inspositeギャラリーインスピレーションが必要なときに閲覧できる、デザインリファレンスやツールのディレクトリ。
loader-buttons.appllama.io
Loader Buttons preview
Loader Buttonsギャラリーマイクロインタラクションのアイデアを参照できる、25種類のローディングボタンアニメーションのギャラリー。
whatships.com
What Ships preview
What ShipsギャラリーXの投稿から集めた、際立ったプロダクトローンチのデモ動画コレクション。
greatstuff.fyi
GreatStuff preview
GreatStuffギャラリー良いものをより早く見つけられるよう集めた、クリエイティブツールの入念に厳選されたアーカイブ。
greatapps.fyi
Great Apps preview
Great Appsギャラリーじっくり見る価値のある優れたiOSアプリを取り上げる、毎週更新のギャラリー。
curated.domains
Curated Domains preview
Curated Domainsギャラリーネーミングやブランディングのインスピレーション向けに、独創的なトップレベルドメインを使うブランドを集めたコレクション。
sections.wtf
Sections.wtf preview
Sections.wtfギャラリー実際のWebサイトのセクションやヒーローレイアウトを、ブロック単位で参照できるギャラリー。
browse.cool
Browse.cool preview
Browse.coolギャラリー優れた手触りとインタラクションを基準に選んだWebサイトのセレクション。
folios.gallery
Folios Gallery preview
Folios Galleryギャラリーインスピレーションのために学べる、傑出したデザイナーポートフォリオを厳選したディレクトリ。
wwwtf.site
wwwtf.site preview
wwwtf.siteギャラリー探索する価値のある、インタラクティブなWebの風変わりで実験的な一角を集めたギャラリー。
early.tools
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
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.gallery
A1 preview
A1ギャラリー次のプロジェクトのインスピレーションとして集めた、Webサイトデザインのギャラリー。
02 / 03

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

11セクションを開く
figma.com
Figma preview
Figmaインターフェースデザインチームでインターフェースをデザイン・プロトタイピングする、コラボレーション向けのプラットフォーム。
framer.com
Framer preview
FramerインターフェースデザインWebサイトをデザインし、そのままWebに公開できるビジュアルキャンバス。
make.design
make.design preview
make.designインターフェースデザイン書いたプロンプトを、洗練されたインターフェースデザインに変えるAIジェネレーター。
penpot.app
Penpot preview
PenpotインターフェースデザインSVGを軸に作られ、ブラウザで動作するオープンソースのWebデザインプラットフォーム。
spline.design
Spline preview
Splineインターフェースデザイン物理演算を内蔵し、インタラクティブなシーンを作れる、ブラウザベースの3Dデザインソフト。
interfacecraft.dev
Interface Craft preview
Interface Craftインターフェースデザイン現代のデジタルインターフェースの背後にある技を探る、記事集。
uilabs.dev
UI Labs preview
UI LabsインターフェースデザインアニメーションするUIコンポーネントを分解し、その作り方を見せるラボ。
uiw.tf
UIWTF preview
UIWTFインターフェースデザインWebの可能性を押し広げる、実験的なインターフェースパターンのショーケース。
lab01.dev
Lab01 preview
Lab01インターフェースデザインあるデザインスタジオが公開する、洗練されたインターフェース実験集。
design.dev
design.dev preview
design.devインターフェースデザインデザイントークンとシステムを構築・管理するための、AI支援のエディター。
uiplaybook.dev
UI Playbook preview
UI Playbookインターフェースデザインデザインの過程でUIコンポーネントがたどる、よくある状態をまとめたガイド。
03 / 03

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

33セクションを開く
refactoringui.com
Refactoring UI preview
Refactoring UI読み物より良いインターフェースを設計・構築するためのテクニックが詰まった、実践的なガイドです。
practicaltypography.com
Practical Typography preview
Practical Typography読み物タイポグラフィのルールやテキストのレイアウト方法を扱うオンライン書籍です。
web.dev
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.com
Learn UI preview
Learn UI読み物ユーザーインターフェース設計の実践的な側面を教える動画コースです。
designspells.com
Design Spells preview
Design Spells読み物日常的なソフトウェアに隠れた細やかなデザインのディテールを読み解くコレクションです。
goodui.org
Good UI preview
Good UI読み物実データに裏打ちされた、エビデンスに基づくUIデザインパターンのライブラリです。
abduzeedo.com
Abduzeedo preview
Abduzeedo読み物ビジュアルのインスピレーションを絶え間なく届ける、毎日更新のデザインブログです。
uxdesign.cc
UX Collective preview
UX Collective読み物ユーザーエクスペリエンスデザインに関する鋭いエッセイを集めた、厳選されたメディアです。
smashingmagazine.com
Smashing Magazine preview
Smashing Magazine読み物Webデザイナーと開発者向けの、信頼できる記事やガイドのリソースです。
tympanus.net
Codrops preview
Codrops読み物クリエイティブなフロントエンドの実験と実践的なチュートリアルを発信するブログです。
muz.li
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.com
Designmodo preview
Designmodo読み物Webデザインのための記事と実用的なツールの両方を提供するメディアです。
99designs.com
99designs Discover preview
99designs Discover読み物ブランディングと、その背後にあるクリエイティブな思考を掘り下げるデザインブログです。
interfaces.dev
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
SVG Guide preview
SVG Guide読み物SVGマークアップの書き方とアニメーションの付け方を解説する、デザイナーと開発者向けのガイドです。
animations.dev
Animations.dev preview
Animations.dev読み物本当に心地よく感じられるWebアニメーションの作り方を教えるコースです。
ui-skills.com
UI Skills preview
UI Skills読み物AIの力を借りてインターフェースを設計するテクニックを扱うコースです。
aiforui.dev
AI for UI preview
AI for UI読み物インターフェースデザインのプロセスにAIワークフローを取り入れる方法を学ぶコースです。
ui.land
UI Land preview
UI Land読み物一流のデザインエンジニアたちに、その仕事ぶりを聞いたインタビューシリーズです。
lawsofux.com
Laws of UX preview
Laws of UX読み物インターフェースの使いやすさを左右する心理学的な原則を集めたコレクションです。
userinterface.wiki
User Interface Wiki preview
User Interface Wiki読み物インターフェースデザインのガイドラインやルールをひとつにまとめたナレッジベースです。
shapeof.ai
The Shape of AI preview
The Shape of AI読み物AI搭載インターフェースのためのデザインパターンに焦点を当てたパターンライブラリです。
UI・Webデザインのインスピレーションサイト（122） — Designeer