デザインから分析まで|Webデザイナーの実務ツールまとめ

皆様こんにちは。ベイちゃんです!
今回は学生さんからもよく質問をいただくことがある「実際の業務で使っているツール」について、Webデザイナーの私がジャンル別に紹介したいと思います!

制作ツール

Illustrator・Photoshop

グラフィック案件や素材作成にはIllustrator、バナー制作などにはPhotoshopを使用しています。
使いこなすうえでおすすめしたいのが、ショートカットキーを覚えることとレイヤーをきちんと整理する習慣をつけることです。
学生のころは自分しか見ないファイルだったので、あまり気にしていなかったのですが、仕事では他のデザイナーさんが同じファイルを触ることも多いです。「このレイヤー何…?」とならないよう、わかりやすい名前をつけて整理しておくことが大切だと実感しています。

Figma

WebサイトやLPなどのUI/UX関連のデザインは、すべてFigmaで作成しています。
Figmaが使えるようになるとサイト制作の幅が広がるので、身につけておくと安心です。

WordPress

ブログ記事の作成に使用しているツールです。
この記事もWordPressで作成しています!

分析・改善ツール

GA4・Microsoft Clarity

「デザイナーなのに分析ツール?」と思われるかもしれませんが、インハウスデザイナーにとっては欠かせない存在です。
GA4でアクセス解析を行い、Clarityでユーザーがどこをクリックしているか、どこで離脱しているかを確認することで、作ったデザインがユーザーにきちんと伝わっているかを検証し、改善につなげています。
実際に、GA4やClarityを見て気づいた課題から改修案を提案・実行することで、サイトのパフォーマンスが向上した案件もあります。
「作って終わり」にしないために、日々分析することが大切だと感じています。

AIツール

主に私が業務で活用しているのは以下のAIです!

  • ChatGPT:テキスト生成・添削・アイデア出し・分析
  • Claude:案出し・壁打ち・分析
  • NotebookLM:資料をまとめて理解・整理したいとき
  • Adobe Firefly / Gemini(Nanobanana):画像生成・素材作成
  • Figma Make:構成案の作成

目的に応じて複数のAIを使い分けるようにしています。
AIによって得意分野があるため、それを理解して使い分けることで作業の質や効率を高めることができます。

すべてを使いこなせているかというと…まだまだ勉強中ですが、AIを取り入れてから作業スピードが格段に上がったと実感しています。

コミュニケーション・管理ツール

  • Slack:社内の連絡・やり取り
  • Outlook:メールやMTGのスケジュール管理に使用
  • Zoom:東京オフィスのメンバーとのMTGで毎日使用
  • Notion:ドキュメントの作成・共有に活用

まとめ

今回は、Webデザイナーの私が、日々の業務で使用しているツールを紹介しました。
改めて見ると、かなり多くのツールを使っていますね…!

私自身、ここで紹介したすべてのツールを最初から使えていたわけではなく、入社してから少しずつ覚えていったものです。

社内ではAIやツールに関する勉強会があったり、業務での活用方法を共有する機会も多く、そうした環境の中で少しずつできることが増えていったように感じています。

入社当初はIllustratorやPhotoshopくらいしか触れませんでした


この記事が、これからWebデザイナーを目指す方や、実務で使われているツールが気になっている方の参考になれば嬉しいです。

この記事を気に入ったら

ベイちゃん

ベイちゃん

最近は漫画にハマっています。

この人が書いた記事を見る >>