Webデザインの現場で「結局みんな何を使っているのか」。デザイン制作・写真素材・フォント・アイコン・配色の5分野について、現場で使われ続けている定番ツールと素材サイトだけを整理しました。新しくチームに入る人への共有用としても使えます。
デザイン制作ツール
| ツール | 向いている用途 | 料金 |
|---|---|---|
| Figma | UIデザイン・プロトタイプ・チーム共同編集の事実上の標準 | 無料枠あり |
| Adobe Photoshop / Illustrator | 写真加工・バナー・ロゴ・印刷物。入稿要件で必須になる場面も | サブスクリプション |
| Canva | SNS画像・資料などの量産。非デザイナーとの協業 | 無料枠あり |
| Affinity（Designer / Photo) | 買い切りでAdobe代替を揃えたい個人 | 買い切り |
UI設計が主戦場ならFigma、画像加工と入稿対応が必要ならAdobe Creative Cloud、というのが現在の基本形です。
写真素材サイト
- O-DAN — 海外の無料ストックフォトを日本語で横断検索。まずここから
- Unsplash — 高品質な海外系無料写真の定番
- 写真AC — 日本人モデル・日本の風景に強い無料素材
- PIXTA — 商用案件で「他とかぶらない」日本向け有料素材
無料素材は利用規約（商用利用・クレジット表記・モデルリリース）の確認が必須です。クライアントワークの主要ビジュアルには権利関係が明確な有料素材を推奨します。
フォント
- Google Fonts — Webフォントの第一選択。日本語はNoto Sans JP/Zen系など
- Adobe Fonts — Creative Cloud契約に含まれる。源ノ角ゴシックほか日本語が充実
- mojimo — フォントワークスの用途別パック。動画・同人誌などに
選定の基本は「本文は可読性、見出しは個性」。日本語Webフォントは容量が大きいため、サブセット化や表示戦略（font-display）もセットで検討しましょう。
アイコン
- Material Symbols — Google公式。網羅性と一貫性
- Iconify — 主要アイコンセットを横断検索できる
- Font Awesome — 老舗の定番。無料枠でも実用十分
配色
- Coolors — パレット生成の定番。スペースキー連打で探索
- Adobe Color — 色相環ベースの理論派。アクセシビリティチェックも
配色はWCAGのコントラスト比（本文4.5:1以上）を満たしているかまで確認するのが現在の標準です。
あわせて読みたい
※各ツールの最新の料金・プランは必ず公式サイトでご確認ください。
おすすめ新着記事
おすすめタグ