※記事内に商品プロモーションが含まれる場合があります
- Webデザイン、UIデザインの作業をもっと楽にしたい！
- 便利なツールや小ワザを教えてほしい！
- Webデザイン、UIデザインに役立つツールやWebサービスを紹介するよ。
- Webデザイン、UIデザインの作業をいくぶん効率化できるよ。
詳しく見ていきましょう。
1.はじめに
ぼく
黒点
ぼく
Webデザイン、UIデザインは時間と手間がめちゃかかります。なるべく効率化したい…！
ということでこのページでは、WebデザインやUIデザインの作業を効率化する、
ちょっとしたWebサービスやツール、小ワザなどを紹介します。
ぼくが仕事で使って便利だと思ったものを紹介していきますので、
よければ参考にしてみてください。
なお、FigmaやPhotoshopといったデザインツールそのものの選び方は、こちら↓の記事で紹介しています。
2.デザインのインスピレーションを得る
ピンタレスト
デザインの参考用サイトとしては王道中の王道です。バナーやWebサイトだけでなく、写真とか名刺のデザインとか、いろいろ見ることができます。
ピンタレストのいいところは、「似たテイストの画像」をレコメンドしてくれるのと、画像の保存と管理がめっちゃラクなところです。
デザインを探して、見て、保存して、というのがかなり直感的にでき、つい楽しくなって長居してしまいます。
ぼく
Web Design Clip
https://www.webdesignclip.com/
Webサイトのギャラリーサイトです。
掲載数はそこまで多くないですが、LPのギャラリー、スマホサイトのギャラリーと分けて表示できたり、日本語サイトと海外サイトを分けて表示できるのが便利です。
ぼくはLPのデザインを作るときによく参考にしています。
MUUUUU.ORG
こちらもWebサイトのギャラリーサイトです。
Web Design Clipよりも掲載数が多く、サイトのカテゴリー分けもWeb Design Clipとは若干異なっています。
MUUUUU.ORGではECサイトを絞り込むことができるので、ぼくはECサイトの参考を探すときにたまに利用しています。
S5-Style
日本の田渕 将吾さんという方が運営しているWebデザインのギャラリーサイトです。
どちらかというとアーティスティックなサイトが多い印象です。
Awwwards
世界中の優れたWebサイトを紹介・表彰している、海外のギャラリーサイトです。
動きのある最先端のサイトが多く、Webデザインのトレンドをつかむのに役立ちます。
UI Pocket
https://www.ui-pocket.com/mobile
スマホアプリのUIデザインを集めたギャラリーサイトです。
アプリの画面デザインを考えるときに、ほかのアプリがどんなUIにしているのかを参考にできます。
国内の主要なアプリをベンチマークしているので、
一流のUIデザインや、UIデザインのトレンドを学ぶことができます。
3.AIツール
最近は、デザインの仕事でもAIツールが欠かせなくなってきました。
ぼくがよく使っているものを紹介します。
Claude
Anthropicが提供しているAIアシスタントです。
有料ですが、2026年10月時点で、精度はかなり良いと思います。
ぼくは考えをまとめたり、アイデアのブレストをしたり、資料を作ったり、実装をしたりと、幅広く使っています。
最近だとClaudeなしでは仕事がうまく進まなくなるくらい、依存しています。
Nano Banana
Googleが提供している画像生成AIです（Geminiの中で使えます）。
文章で指示するだけで画像を作ったり、手持ちの画像を加工したりできます。
当サイトのサムネイル画像も、最近はNano Bananaで生成をしています。
デザインツールのAI機能
普段使っているデザインツールにも、AIの機能がどんどん入ってきています。
たとえばPhotoshopの「生成塗りつぶし」を使えば、選んだ範囲を消して自然に埋めたり、
文章で指示した内容を描き足したりできます。
Illustratorでも、平面のイラストを回転させて、別の角度から見た姿を自動で作れる「ターンテーブル」という機能が登場しました。
Figmaも、AIの機能や、アニメーションを作れる「Figma Motion」など、新しい機能が次々に増えています。
ぼく
4.キャプチャをとる
グーグルのデベロッパーツールを使う
グーグルのデベロッパーツールを使うと、サイト全体の縦長キャプチャをとることができます。
以下、手順を説明します。
手順は以上です。
ちなみに画面に映っている部分だけをキャプチャしたい場合は、同様の手順で「Capture screenshot」をクリックすればOKです。
ぼく
Figmaの拡張機能（Google Chrome）
https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg
Figma公式が出しているGoogle Chromeの拡張機能です。表示しているWebサイトを、ページ全体でも一部分だけでも、そのままFigmaに取り込むことができます。
デザインのレイヤーとして取り込めば、テキストや色、レイアウトをFigma上で編集できるので、
競合サイトのUIを引っ張ってきたり、今のサイトをもとにデザインの改善案を作ったりするときにとても便利です。
Macの標準のキャプチャ機能
Macには、キャプチャを撮る機能が標準で入っています。
［command］＋［shift］＋［4］を押すと、範囲を自由に指定して、撮りたいところだけキャプチャを撮ることができます（［command］＋［shift］＋［3］なら画面全体）。
また、［command］＋［shift］＋［5］を押すとキャプチャのメニューが出てきて、画面の録画もできます。
さらに、［command］＋［shift］＋［5］のメニューの「オプション」から「タイマー」を設定すると、5秒後や10秒後にキャプチャを撮ることができます。
ぼく
Windowsなら、標準で入っている「Snipping Tool」で同じようにキャプチャを撮れます（［Windows］＋［Shift］＋［S］でも起動できます）。Snipping Toolにも、少し時間をおいてから撮る機能があります。
5.画像素材を探す
写真AC
ぼくがよく利用している、商用利用可のフリー写真素材をたくさん扱っているサイトです。
無料の会員登録が必要ですが、写真以外にもイラストを扱っている「イラストAC」、シルエット画を扱っている「シルエットAC」なども運営しており、数多くの無料素材を探すことができます。
ぼく
写真ACはいろいろと制限が多く、サイト内のキーワード検索も1日4回までとなっていますが（2026年10月現在）、グーグルの画像検索で「○○ 写真AC」と調べればフツ―に出てくるので、ご安心を。
フリー素材ドットコム
こちらも商用利用可能なフリーの写真素材が掲載されているサイトです。
当サイトを作っているときに、
ぼく
と思って探してたどり着いたのがこのサイトです。
けっこう使い勝手が良さそうなので、これからフリー素材を探すときは写真ACと併用して使っていこうかなと思っています。
ICOOON MONO & FLAT ICON DESIGN
ぼくが超愛用しているピクト素材、アイコン素材集サイトです。無料、商用可でありながらなかなかイイ感じのピクトグラムが揃っています。
TopeconHeroesという団体？が運営元なのですが、この2つのサイト以外にも数多くのフリー素材サイトを運営していて、かなりありがたいサービスとなっています。
icon-rainbow
こちらもよく愛用しているピクト素材集サイトです。ICOOON MONOよりも若干かわいらしいテイストになっています。
ICOOON MONOで見つけられなかったジャンルのものがicon-rainbowで見つかることがよくあります。
6.フォントを探す
Adobe Fonts
https://fonts.adobe.com/?locale=ja-JP
Adobe CCに契約しているユーザーなら無料で使うことのできるフォントライブラリです。
ここで同期したフォントはAdobeのデザインアプリ（PhotoshopやIllustratorなど）で使うことができるようになります。
Google Fonts
グーグルが提供している無料のWebフォントライブラリです。
ここからフォントをダウンロードして自分のPCで使うこともできますし、コードをコピペして自分の作ったWebサイトのheadタグ内に記載すればそのフォントをサイトに適用することもできます。
7.画像を切り抜く
Remove bg
デザイナーたるもの、フォトショップでの画像切り抜きは基本中の基本！とはいえ、大量の画像をひとつひとつ切り抜くのは手間ですし面倒…
そこで役に立つのがこのRemove bgです。ドラッグ＆ドロップするだけで自動で背景を切り抜いてくれる優れものです。髪の毛まわりの繊細な部分もきれいに切り取ってくれます。
ただ、切り抜き箇所はサイト側で自動判定されてしまうので、画像によっては思い通りに切り抜かれないことも多々あります。
ぼく
ちなみに今は、PhotoshopやFigmaにも、ワンクリックで背景を消せる「背景を削除」の機能が入っています。普段使っているツールで済ませられる場合も多いので、あわせて試してみてください。
8.データ形式を変換する
I ♡ PDF
他部署の人
ぼく
仕事をしていると、こんな感じの依頼をよく受けます（ぼくだけかもしれませんが…）。
Adobe Acrobatとかを使ってもPDFからJPGへの変換はできるのですが、Adobe Acrobatを持っていない方は「I ♡ PDF」というサイトを使って変換すると良さげです。ドラッグ＆ドロップでサクサク変換できるので、作業がラクです。
このI ♡ PDFですが、PDF⇀JPGの変換だけでなくJPG⇀PDFへの変換もできます。また、PDFのデータ圧縮、結合、分割保存もできるので、けっこう使い勝手が良いです。
9.画像のサイズを変える
プレビュー（Macユーザー）
Macユーザーの場合は、Macに標準搭載されている「プレビュー」アプリを使えば、画像のサイズを変えることができます。
簡単に手順を説明します。
I ♡ IMG
「データ形式を変換する」で紹介した「I ♡ PDF」の関連サイトで、「I ♡ IMG」というものがあります。
このサイトではJPGやPNGなどのサイズ変更、データ圧縮等ができるので、こちらで調整するのもアリです。
10.色を変換する・確かめる
原色大辞典のカラーピッカー
https://www.colordic.org/picker
CSSで色を指定するとき、特に背景色を半透明にしたいときは、RGBA値（「rgba(14, 142, 142, 1)」みたいなやつ）で色を指定します。
ただ、IllustratorやPhotoshopを使っているとカラーコード（「#0E8E92」みたいなやつ）で色を管理している場合があり、カラーコードからRGBA値への変換が必要なことが多々あります。
そんな時、このサイトでカラーコードを入力すればRGB値に変換してくれるので、あとはAの値（＝不透明度）を自由に設定すればOKです。
ちなみに原色大辞典の「色検索」というやつでカラーコードを入力し色を検索すると、CMYKの値も確認することができます。ロゴを作ったときとかに印刷用でCMYKの値を求められる時があるので、そういうときに役に立ちます。
コントラストチェッカー
文字の色と背景の色を入れると、文字が読みやすいかどうか（コントラスト比）を確かめられるツールです。Webアクセシビリティの基準を満たしているかもわかるので、ボタンや文字の色を決めるときに使っています。
コントラストチェッカーはいろいろありますが、ぼくはColorbaseのものを使うことが多いです。
https://colorbase.app/ja/tools/contrast-checker
ぼく
11.画像のデータサイズを下げる
Tiny PNG
ぼくがめちゃめちゃ愛用しているデータ圧縮サイトです。
JPGとPNGの画像データをドラッグ＆ドロップで簡単に圧縮することができます。
5MB未満のデータであれば、最大20枚まで、一括で圧縮することができます。
ぼく
I ♡ PDF
「データ形式を変換する」でも紹介したI ♡ PDFです。
Tiny PNGではPDFのデータ圧縮ができないので、PDFのデータを圧縮したいときにはこちらのI ♡ PDFを利用しています。
12.まとめ
- Webデザイン、UIデザインのお助けツールはいっぱいある。
- AIツールも、うまく使えば作業がぐっと楽になる。
- 積極的に使って作業を効率化しよう（もちろん不審なサイトは使わないように…！）。
以上でお助けツールのお話はおしまいです！
ぼく
