【永久保存版】デザイナーのための有益参考/素材サイト・便利ツール厳選100選
- 2022.3.29.火
- 2022.2.22.火
ふと、あの素材サイトなんだっけ？と思って探すのに手間がかかったことがあり、社内用にデザイン制作に必要な全てを網羅した有益参考/素材サイト、便利ツールをまとめることで「車輪の再発明」を無くしたいと思ったことがきっかけでした。
ただ社内だけに留めておくのは、もったいないので、全てのデザイナーのためにシェアできればと思いnoteにまとめました。
ただ普段自分が使用していて、主観的にこれは便利と判断したものを厳選しているだけなので「これもおすすめです！」などあればぜひコメント頂ければ随時アップデートしていきます。
「デザイン」はみんなのものです。
一緒に共創するデザインを目指しましょう🎉
INDEX
共通
PinterestDiscover recipes, home ideas, style inspiration and other idewww.pinterest.jp
Dribbble – Discover the World’s Top Designers & Creative ProfessionalsDribbble is where designers gain inspiration, feedback, commudribbble.com
Search Projects | Photos, videos, logos, illustrations and branding on BehanceBehance is the world’s largest creative network for showcasinwww.behance.net
Webサイト
Awwwards – Website Awards – Best Web Design TrendsAwwwards are the Website Awards that recognize and promote thwww.awwwards.com
SANKOU! | Webデザインギャラリー･参考サイト集Webデザイン制作の参考になるステキなWebサイト･LPを集めたギャラリー。業種･テイストなどで絞込検索可能。最新トレンドsankoudesign.com
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG縦長のwebデザインをがむしゃらに集めています。muuuuu.org
ランディングページ
ハイクオリティなランディングページデザインを集めました。WEBデザイナーさん必見！ランディングページのデザイン参考に活用出来ます★rdlp.jp
Parts. – SaaS/LPのパーツ別Webデザイン集メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレpartsdesign.net
Web Design Clip [L] | LP・ランディングページのクリップ集Web制作の参考になるLP・ランディングデザインのリンク集lp.webdesignclip.com
UIデザイン
yui.designyui.designはUIデザイナーのためのリファレンスサービスです。実務で参考になるデザインのみを集めました。日頃のUIyui.design
Mobbin – The world’s largest mobile app design reference librarySave hours of UI & UX research with our library of 50,000mobbin.design
Collect UIDaily inspiration collected from daily ui archive and beyond.collectui.com
Design PttrnsCheck out the finest collection of design patterns, resourcespttrns.com
ロゴ
Logopond – Logo, Brand & Identity Inspirationlogopond.com
ロゴストック｜ロゴマークのデザインギャラリーロゴストックは、ロゴ好きの人やロゴマーク制作を考える人に参考となるロゴを集めているデザインギャラリーサイトです。ロゴ作成のlogostock.jp
バナー
バナーデザイン専門ギャラリーサイト | レトロバナー「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーretrobanner.net
サムネイルが表示されない😭
PR・広告
PR EDGEPR・広告・プロモーション事例のデータベース「PR EDGE（ピーアールエッジ）」predge.jp
写真素材
写真素材・ストックフォト | 日本最大級の画像素材サイト – PIXTAピクスタなら7,030万点以上の高品質の画像素材(写真やイラスト)を定額制プランなら最安1点39円から購入可能！ロイヤリテpixta.jp
O-DAN (オーダン）- 無料写真素材・フリーフォト検索高品質な無料写真素材・フリーフォトを40以上の有名ストックフォトサイトから日本語で横断検索できるサービス「O-DAN(オーo-dan.net
Adobe Stock 無料コレクション : 写真、ベクター、ビデオ | Adobe Stock無償の Adobe Stock 写真、ベクター、ビデオの素晴らしい、多様なコレクション。ダウンロードは無償、商用利用は許可stock.adobe.com
写真素材、イラスト、ビデオ – iStockiStock公式ウェブサイトでしか手に入らない、数百万点ものロイヤリティフリーのストックファイルをご覧ください。 プロジェwww.istockphoto.com
モックアップ
Mockup World | The best free Mockups from the WebTons of free and legal, fully layered, easily customizable phwww.mockupworld.co
Phone Mockup From 1 Million Angles – Rotato導Generates instant 4K PNG, MOV, MP4 from MOV, PNG, PSD + 100 mwww.rotato.app
アイコン
Free Icons and Stickers – Millions of resources to downloadDownload Free Icons and Stickers for your projects. Resourceswww.flaticon.com
Material IconsGet Material Iconsmaterial.io
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONOicooon-mono.com
Free Clip Art Images & Vector Illustrations For Your WebsiteExplore a beautiful library of royalty-free clipart vector imicons8.com
Simple Icons1872 Free SVG icons for popular brands.t.co
ピクトグラム
EXPERIENCE JAPAN PICTOGRAMS日本観光を楽しむすべての人へ。EXPERIENCE JAPAN PICTOGRAMSは、デザインの視座から、日本観光の魅力experience-japan.info
クオリティが高い😭
イラスト
unDraw – Open source illustrations for any ideaThe design project with open-source illustrations for any ideundraw.co
IRA Design by Creative TimBuild your own amazing illustrations.iradesign.io
Loose Drawing | 無料で商用利用可なフリーイラストシンプルなイラストが見つかるフリー素材サイト Loose Drawing。広告、フライヤー、ポスター、企画書、スライド資料loosedrawing.com
商用可・フリーイラスト素材｜ソコスト商用利用可なフリーイラスト素材サイト。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
絵文字
Let’s EMOJILet’s EMOJIは、絵文字を活用するための総合サイトです。スマホでは簡単に入力できる絵文字をWindowsやMacなlets-emoji.com
よく使います🕺
画像比率
METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]黄金比や白銀比を計算するWebアプリ。このツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金voidism.net
アスペクト比計算ツール（縦横比/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
Fonts for Print, Products & Screens | MyFontsWelcome to MyFonts, the #1 place to download great @font-facewww.myfonts.com
DaFont – Download fontsArchive of freely downloadable fonts. Browse by alphabeticalwww.dafont.com
フォントフリー – 無料の日本語フリーフォント投稿サイト日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明fontfree.me
Free Fonts | 88,000+ Font Downloads | FontSpaceFree downloads of legally licensed fonts that are perfect forwww.fontspace.com
Adobe FontsAdobe Fonts partners with the world’s leading type foundriesfonts.adobe.com
フォント比較
WordmarkWordmark.it helps you choose fonts by quickly displaying yourwordmark.it
ためしがきためしがき – 日本語のフリーフォントを検索できるサイト日本語のフリーフォントを好きな言葉・文章で試せるサイト日本語のフリーフォントを好きな言葉・文章で試せるサイトtameshigaki.jp
フォントリサーチ
写真をベクターに変換するiOS、Android用アプリ | Adobe CaptureAdobe Captureを使用してクリエイティブプロジェクトで利用できるカラーテーマ、Look、ベクター画像、カスタムブwww.adobe.com
Fonts NinjaSpeed up your design workflow!chrome.google.com
Fonts In Use – Type at work in the real world.A searchable archive of typographic design, indexed by typefafontsinuse.com
フォントデータ変換
OTF TTF 変換。オンライン フリー — Convertio数秒でOTFをTTFファイルへ変換する最良の方法。 100％無料で、安全、そして使いやすい！ Convertio — いかconvertio.co
色
Coolors – The super fast color schemes generator!Generate or browse beautiful color combinations for your desicoolors.co
Paletton – The Color Scheme DesignerIn love with colors, since 2002. A designer tool for creatingpaletton.com
Color Picker Tool | 0to255Choose colors for your logo, website, business, room, or prinwww.0to255.com
Adobeさんタイトル設定忘れてます…😭Color Hex – ColorHexa.comColor hex encyclopedia providing information about any color.www.colorhexa.com
uiGradients – Beautiful colored gradientsuiGradients is a handpicked collection of beautiful color grauigradients.com
コントラストチェック
Contrast for UIA macOS app for quick access to WCAG color contrast ratios.usecontrast.com
アニメーション
サムネイルが表示されない😭
ディレクトリマップ
Mogyura（モギュラ）はディレクトリマップを自動作成するクラウドサービスです。Mogyura（モギュラ）はディレクトリマップを自動作成するクラウドサービスです。mogyura.com
サイトマップ
VisualSitemaps | Autogenerate Beautiful Sitemaps & ScreenshotsVisualSitemaps automatically generates high-quality visual sivisualsitemaps.com
サイト分析
Google Search ConsoleSearch Console で所有権に関する Google 検索結果データを監視できます。search.google.com
ウェブサイトのトラフィック分析と競合他社の情報| SimilarWebオールインワンのウェブサイト分析と競合他社のインテリジェンスプラットフォーム-ウェブサイトのトラフィックとパフォーマンスをwww.similarweb.com
Keywordmap｜Webマーケティングの調査・分析ツールKeywordmap（キーワードマップ）は、関連キーワード・共起語・検索順位の調査からコンテンツ作成など10時間の作業を2keywordmap.jp
人工知能がWebサイトを分析アクセス解析を自動で行う人工知能「AIアナリスト」は、「Googleアナリティクス」のアクセス解析データを元に、自動でWewacul-ai.com
ヒートマップ
Microsoft Clarity – Free Heatmaps & Session RecordingsClarity is a free user behavior analytics tool that helps youclarity.microsoft.com
ヒートマップ解析ツール User Heatヒートマップ解析ツール開発企業のユーザーローカルが提供する、無料ツール。アイトラッキングを疑似体験。userheat.com
ユーザー行動分析
Build a More Perfect Digital Experience | FullStory | FullStoryFullStory’s intuitive digital experience analytics provide yowww.fullstory.com
チート級のツールです😎
ABテスト
Website, A/B Testing & Optimization Tools – Google OptimizeGoogle Optimize offers A/B testing, website testing & permarketingplatform.google.com
サイト表示速度
PageSpeed Insightsdevelopers.google.com
モバイルサイトの速度を比較しましょう他のトップブランドとご自身のモバイルサイトの速度を比較して、より速く快適なモバイルサイトを構築しましょうwww.thinkwithgoogle.com
ファビコン
ファビコン作成。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
OGP
https://cards-dev.twitter.com/validator
ファビコン、OGPみんな忘れがち😂シェアデバッガー – Facebook for Developersdevelopers.facebook.com
Iframely – Embeds codes for today’s InternetIframely gives you simple APIs to have all the Web’s best mediframely.com
画像圧縮
【無料】PDFを圧縮しサイズを縮小 – Adobe 公式 | Adobe AcrobatPDF 圧縮：アドビ公式オンラインツールで、今すぐPDFを圧縮し、PDFサイズを縮小。PDFをドラッグ&ドロップすwww.adobe.com
FigmaでPDFを書き出して、まとめるときに超便利🤔TinyPNG – Compress WebP, PNG and JPEG images intelligentlyMake your website faster and save bandwidth. TinyPNG optimizetinypng.com
類似画像検索
YandexYandex is a technology company that builds intelligent producyandex.com
ロゴの類似リスクを防ぐために弊社では利用してます😊
URL短縮
Bitly. The power of the link.app.bitly.com
流入経路も分かるので、おすすめ😎
QRコード作成
QRコード作成器 (Quick QR)Chrome上で高評価のQRコード作成器、ページをそのままQPコードにすることも、どんな文章でもURLでも作成可能。自分のchrome.google.com
QRコード作成【無料】／QRのススメ誰でも無料で簡単にQRコードを作成できるサイトです。累積発行数No.1で、商用利用も無期限・無制限です。EPS画像生成や、qr.quel.jp
字数カウント
【文字数カウント】【本文の文字数・改行数を表示できます】www1.odn.ne.jp
デザインデータファイル変換
Design Converter – Convert PSD designs to Sketch | AvocodeSwitching from Adobe Photoshop to Sketch, but don’t have theavocode.com
Photopea | Online Photo EditorPhotopea Online Photo Editor lets you edit photos, apply effewww.photopea.com
XD2Sketch – Convert Adobe XD to SketchXD2Sketch converts Adobe XD files to Sketch in one click! Impxd2sketch.com
おすすめChrome拡張機能
GoFullPage – Full Page Screen Capture余分な権限を要求することなく、現在のページのスクリーンショットを完全に確実にキャプチャできます。chrome.google.com
Pinterest 保存ボタンオンラインで見つけたお気に入りのアイデアを保存すると、いつでも簡単にアクセスすることができます。chrome.google.com
HTMLエラーチェッカーHTMLの開始・終了タグの過不足などを検出する拡張機能です。エラーがある場合、数値が表示されます。JSでソースを確認するのchrome.google.com
WhatFontThe easiest way to identify fonts on web pages.chrome.google.com
ColorZillaAdvanced Eyedropper, Color Picker, Gradient Generator and othchrome.google.com
CSS PeeperExtract CSS and build beautiful styleguides.chrome.google.com
PerfectPixel by WellDoneCode (pixel perfect)この拡張機能は、ピクセル単位の精度でWebサイトを開発するのに役立ちます！chrome.google.com
Studio
DESIGN RECIPE | デザインが学べる、真似してできるレシピまとめノーコードでサイトがつくれるSTUDIOで使えるデザインを中心に、ボタンやパーツのデザインをまとめたサイトです。design-recipe.studio.site
おすすめメディア
knowledge / baigie株式会社ベイジのマーケターやデザイナ、エンジニアがお届けする、マーケティング、デザイン、テクノロジー、組織作り、キャリアにbaigie.me
Goodpatch Blog グッドパッチブログGoodpatchが運営するブログです。主にUI/UXデザインや、デザインパートナーとしての事例、デザイン思考に関するナレgoodpatch.com
ブログTOP | 株式会社LIG株式会社LIG(リグ)のブログページです。Webサイト制作、コンテンツ制作、ゲストハウス、コワーキング、教育、飲食、地方創liginc.co.jp
UX MILKUX MILKは国内外のUX情報をお届けする、全てのクリエイターのためのUXメディアです。デザイン、プログラミング、マーケuxmilk.jp
デザイン会社 ビートラックス: ブログ freshtraxサンフランシスコと東京に拠点を置くデザイン会社ビートラックスのブログです。スタッフによる独自目線で解説した、デザイン、イノblog.btrax.com
PhotoshopVIP | フォトショップやデザインの無料素材、ニュースをお届けするブログPhotoshopVIPは、世界中からあつめた優れたフリーフォントなどの無料素材や、フォトショップの使い方、最新デザインニphotoshopvip.net
コリスWeb制作に関する最新の情報をご紹介coliss.com
おすすめnote
https://note.com/embed/notes/n55b521c01a14
https://note.com/embed/notes/n681cf25349d8
おすすめYouTubeチャンネル
https://note.com/embed/notes/n4cd4e53504eb
おすすめ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
RELATED ARTICLE
2022.7.17誰が後任になっても大丈夫な作り方を
2022.7.7自分の性格ってなんだろう？
2022.6.27何もなかった私がSNSを通してノマドWebデザイナーにな……
2022.6.10Figma (Auto layout × Compone……
2022.6.6駆け出しwebデザイナーがコネなし・営業0で制作会社にジ……
2022.5.30Maslow ブログリレー始めます！
2022.3.18ユーザー理解と導線設計で、検索流入から離脱されないサイト……
2022.2.22デザイナーから経営者になるためにやってきた5つのこと
LOOKING FOR
DESIGNER?
まだ要件が固まってない段階でもご安心ください。
Maslowの営業プロデューサーが、コーチング技術を活用したヒアリングで、企画から一緒に考えさせていただきます。