【永久保存版】デザイナーのための有益参考/素材サイト・便利ツール厳選100選

  • 2022.3.29.火
  • 2021.3.26.金

ふと、あの素材サイトなんだっけ?と思って探すのに手間がかかったことがあり、社内用にデザイン制作に必要な全てを網羅した有益参考/素材サイト、便利ツールをまとめることで「車輪の再発明」を無くしたいと思ったことがきっかけでした。

ただ社内だけに留めておくのは、もったいないので、全てのデザイナーのためにシェアできればと思いnoteにまとめました。

ただ普段自分が使用していて、主観的にこれは便利と判断したものを厳選しているだけなので「これもおすすめです!」などあればぜひコメント頂ければ随時アップデートしていきます。

「デザイン」はみんなのものです。

一緒に共創するデザインを目指しましょう🎉

共通

PinterestDiscover recipes, home ideas, style inspiration and other idewww.pinterest.jp

Pinterest

Dribbble – Discover the World’s Top Designers & Creative ProfessionalsFind Top Designers & Creative Professionals on Dribbble.dribbble.com

dribble

Search Projects | Photos, videos, logos, illustrations and branding on BehanceBehance is the world’s largest creative network for showcasinwww.behance.net

Behance

Webサイト

Awwwards – Website Awards – Best Web Design TrendsAwwwards are the Website Awards that recognize and promote thwww.awwwards.com

Awwwards

SANKOU! | Webデザインギャラリー・参考サイト集Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。業種・テイストなどで絞込検索可能。最新トレンドsankoudesign.com

SANKOU!

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG縦長のwebデザインをがむしゃらに集めています。muuuuu.org

MUUUUU.ORG

ランディングページ

ハイクオリティなランディングページデザインを集めました。WEBデザイナーさん必見!ランディングページのデザイン参考に活用出来ます★rdlp.jp

LPアーカイブ

Parts. – SaaS/LPのパーツ別Webデザイン集メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレpartsdesign.net

Parts. – SaaS/LPのパーツ別Webデザイン集

Web Design Clip [L] | LP・ランディングページのクリップ集Web制作の参考になるLP・ランディングデザインのリンク集lp.webdesignclip.com

WebDesignClip

UIデザイン

yui.designyui.designはUIデザイナーのためのリファレンスサービスです。実務で参考になるデザインのみを集めました。日頃のUIyui.design

yui.design

Mobbin – The world’s largest mobile app design reference librarySave hours of UI & UX research with our library of 50,000mobbin.design

Mobbin

Collect UIDaily inspiration collected from daily ui archive and beyond.collectui.com

Collect UI

Design PttrnsCheck out the finest collection of design patterns, resourcespttrns.com

Pttrns

ロゴ

Logopond – Logo, Brand & Identity Inspirationlogopond.com

logopond

ロゴストック|ロゴマークのデザインギャラリーロゴストックは、ロゴ好きの人やロゴマーク制作を考える人に参考となるロゴを集めているデザインギャラリーサイトです。ロゴ作成のlogostock.jp

logo stock

バナー

バナーデザイン専門ギャラリーサイト | レトロバナー「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーretrobanner.net

レトロバナー

http://banner.keizine.net/

バナーデザインアーカイブ

サムネイルが表示されない😭

PR・広告

PR EDGEPR・広告・プロモーション事例のデータベース「PR EDGE(ピーアールエッジ)」predge.jp

PR EDGE

写真素材

写真素材・ストックフォト | 日本最大級の画像素材サイト – PIXTAピクスタなら7,030万点以上の高品質の画像素材(写真やイラスト)を定額制プランなら最安1点39円から購入可能!ロイヤリテpixta.jp

PIXTA

O-DAN (オーダン)- 無料写真素材・フリーフォト検索高品質な無料写真素材・フリーフォトを40以上の有名ストックフォトサイトから日本語で横断検索できるサービス「O-DAN(オーo-dan.net

O-DAN

Adobe Stock 無料コレクション : 写真、ベクター、ビデオ | Adobe Stock無償の Adobe Stock 写真、ベクター、ビデオの素晴らしい、多様なコレクション。ダウンロードは無償、商用利用は許可stock.adobe.com

Adobe Stock

写真素材、イラスト、ビデオ – iStockiStock公式ウェブサイトでしか手に入らない、数百万点ものロイヤリティフリーのストックファイルをご覧ください。 プロジェwww.istockphoto.com

iStock

モックアップ

Mockup World | The best free Mockups from the WebTons of free and legal, fully layered, easily customizable phwww.mockupworld.co

Mockupworld

Phone Mockup From 1 Million Angles – Rotato導Generates instant 4K PNG, MOV, MP4 from MOV, PNG, PSD + 100 mwww.rotato.app

Rotato

アイコン

Free Icons and Stickers – Millions of resources to downloadDownload Free Icons and Stickers for your projects. Resourceswww.flaticon.com

Flaticon

Material IconsGet Material Iconsmaterial.io

Material Design

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONOicooon-mono.com

ICOOON MONO

Free Clip Art Images & Vector Illustrations For Your WebsiteExplore a beautiful library of royalty-free clipart vector imicons8.com

icons8

Simple Icons1872 Free SVG icons for popular brands.t.co

Shimple Icons

ピクトグラム

EXPERIENCE JAPAN PICTOGRAMS日本観光を楽しむすべての人へ。EXPERIENCE JAPAN PICTOGRAMSは、デザインの視座から、日本観光の魅力experience-japan.info

EXPERIENCE JAPAN PICTOGRAMS

クオリティが高い😭

イラスト

unDraw – Open source illustrations for any ideaThe design project with open-source illustrations for any ideundraw.co

unDraw

IRA Design by Creative TimBuild your own amazing illustrations.iradesign.io

IRA Design

Loose Drawing | 無料で商用利用可なフリーイラストシンプルなイラストが見つかるフリー素材サイト Loose Drawing。広告、フライヤー、ポスター、企画書、スライド資料loosedrawing.com

Loose Drawing

商用可・フリーイラスト素材|ソコスト商用利用可なフリーイラスト素材サイト。Web・広告・企画書・資料などご自由にお使いください。soco-st.com

ソコスト

ちょうどいいイラスト大体どんなシーンにもはまる、「ちょうどいい」フリー素材イラストを配布しています。商用利用可、クレジット表記不要。tyoudoii-illust.com

ちょうどいいイラスト

Free to Use Clip Art Images & Vector Illustrations | ManyPixelsDownload our 2,500+ editable and royalty-free SVG and PNG illwww.manypixels.co

manypixels

絵文字

Let’s EMOJILet’s EMOJIは、絵文字を活用するための総合サイトです。スマホでは簡単に入力できる絵文字をWindowsやMacなlets-emoji.com

Let’s EMOJI

よく使います🕺

画像比率

METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算]黄金比や白銀比を計算するWebアプリ。このツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金voidism.net

METALLIC RATIO

アスペクト比計算ツール(縦横比/16:9/4:3/3:2/2:1/黄金比) | WordPressやWebデザインなど紹介 Ocadwebアスペクト比計算ツール(縦横比/16:9/4:3/3:2/2:1/黄金比)は、画像サイズを16:9や3:2、4:3、黄金比ocadweb.com

アスペクト比計算ツール

フォント

Google FontsMaking the web more beautiful, fast, and open through great tfonts.google.com

Google Fonts

Fonts for Print, Products & Screens | MyFontsWelcome to MyFonts, the #1 place to download great @font-facewww.myfonts.com

MyFonts

DaFont – Download fontsArchive of freely downloadable fonts. Browse by alphabeticalwww.dafont.com

dafont.com

フォントフリー – 無料の日本語フリーフォント投稿サイト日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明fontfree.me

Font Free

Free Fonts | 88,000+ Font Downloads | FontSpaceFree downloads of legally licensed fonts that are perfect forwww.fontspace.com

FontSpace

Adobe FontsAdobe Fonts partners with the world’s leading type foundriesfonts.adobe.com

Adobe Fonts

フォント比較

WordmarkWordmark.it helps you choose fonts by quickly displaying yourwordmark.it

Worldmark.it

ためしがきためしがき – 日本語のフリーフォントを検索できるサイト日本語のフリーフォントを好きな言葉・文章で試せるサイト日本語のフリーフォントを好きな言葉・文章で試せるサイトtameshigaki.jp

ためしがき

iOS Fontsiosfonts.com

iOS Fonts

フォントリサーチ

写真をベクターに変換するiOS、Android用アプリ | Adobe CaptureAdobe Captureを使用してクリエイティブプロジェクトで利用できるカラーテーマ、Look、ベクター画像、カスタムブwww.adobe.com

ADOBE CAPTURE

Fonts NinjaSpeed up your design workflow!chrome.google.com

Fonts Ninja

Fonts In Use – Type at work in the real world.A searchable archive of typographic design, indexed by typefafontsinuse.com

FONTS IN USE

フォントデータ変換

OTF TTF 変換。オンライン フリー — Convertio数秒でOTFをTTFファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかconvertio.co

Convertio

Coolors – The super fast color palettes generator!Generate or browse beautiful color combinations for your desicoolors.co

Coolors

Paletton – The Color Scheme DesignerIn love with colors, since 2002. A designer tool for creatingpaletton.com

Paletton.com

Color Picker Tool | 0to255Choose colors for your logo, website, business, room, or prinwww.0to255.com

0to255

タイトル未設定color.adobe.com

Adobe color

Adobeさんタイトル設定忘れてます…😭Color Hex – ColorHexa.comColor hex encyclopedia providing information about any color.www.colorhexa.com

ColorHexa

uiGradients – Beautiful colored gradientsuiGradients is a handpicked collection of beautiful color grauigradients.com

uiGradients

コントラストチェック

Contrast for UIA macOS app for quick access to WCAG color contrast ratios.usecontrast.com

Contrast

アニメーション

https://codepen.io/trending

CodePen

サムネイルが表示されない😭

ディレクトリマップ

Mogyura(モギュラ)はディレクトリマップを自動作成するクラウドサービスです。Mogyura(モギュラ)はディレクトリマップを自動作成するクラウドサービスです。mogyura.com

Mogyura

サイトマップ

VisualSitemaps | Autogenerate Beautiful Sitemaps & ScreenshotsVisualSitemaps automatically generates high-quality visual sivisualsitemaps.com

VisualSitemaps

サイト分析

Google Search ConsoleSearch Console で所有権に関する Google 検索結果データを監視できます。search.google.com

Googleサーチコンソール

ウェブサイトのトラフィック分析と競合他社の情報| SimilarWebオールインワンのウェブサイト分析と競合他社のインテリジェンスプラットフォーム-ウェブサイトのトラフィックとパフォーマンスをwww.similarweb.com

SimilarWeb

Keywordmap|Webマーケティングの調査・分析ツールKeywordmap(キーワードマップ)は、関連キーワード・共起語・検索順位の調査からコンテンツ作成など10時間の作業を2keywordmap.jp

Keywordmap

人工知能がWebサイトを分析アクセス解析を自動で行う人工知能「AIアナリスト」は、「Googleアナリティクス」のアクセス解析データを元に、自動でWewacul-ai.com

AIアナリスト

ヒートマップ

Microsoft Clarity – Free Heatmaps & Session RecordingsClarity is a free user behavior analytics tool that helps youclarity.microsoft.com

Clarity

ヒートマップ解析ツール User Heatヒートマップ解析ツール開発企業のユーザーローカルが提供する、無料ツール。アイトラッキングを疑似体験。userheat.com

User Heat

ユーザー行動分析

Build a More Perfect Digital Experience | FullStory | FullStoryFullStory’s intuitive digital experience analytics provide yowww.fullstory.com

fullstory

チート級のツールです😎

ABテスト

Website, A/B Testing & Optimization Tools – Google OptimizeGoogle Optimize offers A/B testing, website testing & permarketingplatform.google.com

Googleオプティマイズ

サイト表示速度

PageSpeed Insightsdevelopers.google.com

PageSpeed Insights

モバイルサイトの速度を比較しましょう他のトップブランドとご自身のモバイルサイトの速度を比較して、より速く快適なモバイルサイトを構築しましょうwww.thinkwithgoogle.com

Test My Site

ファビコン

ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。ファビコン(ファブアイコン)faviconを作ろう!。16×16と32×32と48×48ピクセルのマルチアイコンが簡単に作ao-system.net

ファビコン作成

FREE Icon Maker – generate stylish flat icons in just a few minutes. SVG, PNG, ICO exportFree Online Icon Maker. SVG, PNG, ICO. Create Icon Set in 30iconsflow.com

ICONSFLOW

OGP

https://cards-dev.twitter.com/validator

Twitter

ファビコン、OGPみんな忘れがち😂シェアデバッガー – Facebook for Developersdevelopers.facebook.com

Facebook

Iframely – Embeds codes for today’s InternetIframely gives you simple APIs to have all the Web’s best mediframely.com

iframely

画像圧縮

【無料】PDFを圧縮しサイズを縮小 – Adobe 公式 | Adobe AcrobatPDF 圧縮:アドビ公式オンラインツールで、今すぐPDFを圧縮し、PDFサイズを縮小。PDFをドラッグ&ドロップすwww.adobe.com

Adobe(PDFを圧縮)

FigmaでPDFを書き出して、まとめるときに超便利🤔TinyPNG – Compress WebP, PNG and JPEG images intelligentlyMake your website faster and save bandwidth. TinyPNG optimizetinypng.com

tinyping

類似画像検索

YandexYandex is a technology company that builds intelligent producyandex.com

Yandex

ロゴの類似リスクを防ぐために弊社では利用してます😊

URL短縮

Bitly. The power of the link.app.bitly.com

bitly

流入経路も分かるので、おすすめ😎

https://cutt.ly/ja

Cuttly

QRコード作成

QRコード作成器 (Quick QR)Chrome上で高評価のQRコード作成器、ページをそのままQPコードにすることも、どんな文章でもURLでも作成可能。自分のchrome.google.com

QRコード作成器

QRコード作成【無料】/QRのススメ誰でも無料で簡単にQRコードを作成できるサイトです。累積発行数No.1で、商用利用も無期限・無制限です。EPS画像生成や、qr.quel.jp

QRのススメ

字数カウント

【文字数カウント】【本文の文字数・改行数を表示できます】www1.odn.ne.jp

文字数カウント

デザインデータファイル変換

Design Converter – Convert PSD designs to Sketch | AvocodeSwitching from Adobe Photoshop to Sketch, but don’t have theavocode.com

avocode

Photopea | Online Photo EditorPhotopea Online Photo Editor lets you edit photos, apply effewww.photopea.com

Photopea

XD2Sketch – Convert Adobe XD to SketchXD2Sketch converts Adobe XD files to Sketch in one click! Impxd2sketch.com

magicul

おすすめChrome拡張機能

GoFullPage – Full Page Screen Capture余分な権限を要求することなく、現在のページのスクリーンショットを完全に確実にキャプチャできます。chrome.google.com

GoFullPage

Pinterest 保存ボタンオンラインで見つけたお気に入りのアイデアを保存すると、いつでも簡単にアクセスすることができます。chrome.google.com

Pinterest 保存ボタン

HTMLエラーチェッカーHTMLの開始・終了タグの過不足などを検出する拡張機能です。エラーがある場合、数値が表示されます。JSでソースを確認するのchrome.google.com

HTMLエラーチェッカー

WhatFontThe easiest way to identify fonts on web pages.chrome.google.com

Whatfont

ColorZillaAdvanced Eyedropper, Color Picker, Gradient Generator and othchrome.google.com

ColorZilla

CSS PeeperExtract CSS and build beautiful styleguides.chrome.google.com

CSS Peeper

PerfectPixel by WellDoneCode (pixel perfect)この拡張機能は、ピクセル単位の精度でWebサイトを開発するのに役立ちます!chrome.google.com

PerfectPixel

Studio

DESIGN RECIPE | デザインが学べる、真似してできるレシピまとめノーコードでサイトがつくれるSTUDIOで使えるデザインを中心に、ボタンやパーツのデザインをまとめたサイトです。design-recipe.studio.site

DESIGN RECIPE

おすすめメディア

knowledge / baigie株式会社ベイジのマーケターやデザイナ、エンジニアがお届けする、マーケティング、デザイン、テクノロジー、組織作り、キャリアにbaigie.me

knowledge / baigie

Goodpatch Blog グッドパッチブログGoodpatchが運営するブログです。主にUI/UXデザインや、デザインパートナーとしての事例、デザイン思考に関するナレgoodpatch.com

Goodpatch Blog

ブログTOP | 株式会社LIG株式会社LIG(リグ)のブログページです。Webサイト制作、コンテンツ制作、ゲストハウス、コワーキング、教育、飲食、地方創liginc.co.jp

株式会社LIGのブログ

UX MILKUX MILKは国内外のUX情報をお届けする、全てのクリエイターのためのUXメディアです。デザイン、プログラミング、マーケuxmilk.jp

UX MILK

デザイン会社 ビートラックス: ブログ freshtraxサンフランシスコと東京に拠点を置くデザイン会社ビートラックスのブログです。スタッフによる独自目線で解説した、デザイン、イノblog.btrax.com

Freshtrax

PhotoshopVIP | フォトショップやデザインの無料素材、ニュースをお届けするブログPhotoshopVIPは、世界中からあつめた優れたフリーフォントなどの無料素材や、フォトショップの使い方、最新デザインニphotoshopvip.net

PhotoshopVIP

コリスWeb制作に関する最新の情報をご紹介coliss.com

coliss

おすすめnote

https://note.com/embed/notes/n55b521c01a14

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた

https://note.com/embed/notes/n681cf25349d8

非デザイナー向けにデザインのやり方・考え方をまとめようと試みた(+無料ツールやサイトまとめ)

おすすめYouTubeチャンネル

https://note.com/embed/notes/n4cd4e53504eb

分野別にピックアップ。デザイナーにおすすめのYouTubeチャンネル14選

おすすめTwitterアカウント

デザイン研究所 (デザ研)
原研哉
深津 貴之 / THE GUILD / note
山中俊治 Shunji Yamanaka
田川欣哉 / Takram
sogitani / baigie inc.
コリス🍡
すぴかあやか(角田綾佳)@キテレツ
小林 I Web Designer
カトウヒカル@1on1レッスン
土屋尚史 / Goodpatch
坪田 朋 / クラシル
カイシトモヤ
さい|図解×戦略×コーチング
上司ニシグチ
あらた | PowerPoint+
カワバタコウスケ/nanocolor inc.
ササキ🐱WEBデザイン上達の方法
かたおか@LP専門Webデザイナー
もち | WEB・UIデザイナー
のだかつき|デザインを発信

※他におすすめTwitterアカウントありましたらコメント頂けると幸いです🙇‍♂️

この記事を書いた人

TAKUNORI ADACHI

TAKUNORI ADACHI

LOOKING FOR
DESIGNER?

まだ要件が固まってない段階でもご安心ください。
Maslowの営業プロデューサーが、コーチング技術を活用したヒアリングで、企画から一緒に考えさせていただきます。

無料相談を申し込む

DOWNLOAD
COMPANY GUIDE?

まずは情報収集からしたい方はこちら。
Maslowの特長や他社との違い、料金体系、制作までの流れ、制作実績
などがご覧いただけます。

会社資料ダウンロード

LET’S JOIN OUR
DESIGN TEAM!

優秀なクリエイターからたくさん応募いただいてます。迷っている方はぜひ早めにエントリーください!

採用情報をみる