在宅Webデザイナーが仕事で使っていたツール10選【実務での使い方を紹介】

在宅Webデザイナーの仕事では、デザインソフトだけでなく、コーディングやサイト更新、社内でのやり取りなど、さまざまなツールを使います。
私が在宅Webデザイナーとして働いていたときも、Photoshopで画像を作るだけではありませんでした。
HTMLやCSSを修正したり、WordPressやMovable Typeでサイトを更新したり、Teamsで担当者と確認を取ったりと、仕事内容に合わせて複数のツールを使い分けていました。

求人を見ると「Photoshopが使える方」「WordPressの経験がある方」などと書かれていることがありますが、実際にどのような場面で使うのか、働く前はイメージしにくいですよね。

そこでこの記事では、私が在宅Webデザイナーの仕事で実際に使っていたツールを10個紹介します。
ツールごとに、どのような仕事で使っていたのかも具体的にまとめました。

在宅Webデザイナーの仕事では複数のツールを使っていた

私が仕事で使っていた主なツールは、次の10個です。

1. Photoshop
2. Illustrator・Adobe XD
3. Sublime Text
4. WordPress
5. Movable Type
6. Microsoft Teams
7. ブラウザの検証ツール
8. FFFTP
9. ChatGPTなどのAIツール
10. Git

毎日すべてのツールを使うわけではありません。

バナーを作る日はPhotoshop、Webページを修正する日はSublime Textやブラウザの検証ツール、サイトを更新する日はWordPressやMovable Typeというように、依頼内容によって使うツールが変わりました。
また、制作だけで仕事が完結するわけではなく、Teamsで修正内容を確認したり、作業の進捗を報告したりする時間もあります。

在宅勤務では近くに担当者がいないため、制作ツールだけでなく、連絡や確認に使うツールも欠かせませんでした。

1．Photoshop｜画像加工やバナー制作

Photoshopは、仕事の中でも特によく使っていたツールです。

主に、次のような作業に使っていました。

• Webサイトに掲載する画像の加工
• バナーの作成
• 画像サイズの変更
• 明るさや色味の調整
• 不要な部分のトリミング
• 文字や装飾の追加
• 画像の書き出し

たとえば、担当者から受け取った写真をWebサイトに掲載する場合、そのまま使用できるとは限りません。ページに合う大きさに変更したり、必要な部分だけを切り抜いたり、暗い写真を少し明るくしたりしてから掲載していました。

キャンペーンやお知らせ用のバナーを作ることもありました。決められたサイズの中に写真や文字を配置し、Webサイト全体の雰囲気に合わせて色やフォントを調整します。
完成した画像は、画質を保ちながらファイル容量が大きくなりすぎないように書き出していました。

画像が重いとページの表示速度にも影響するため、見た目だけでなくデータの容量も確認する必要があります。
Photoshopは、Webデザイナーらしい制作作業から日常的な画像修正まで、幅広く使っていたツールです。

2．Illustrator・Adobe XD｜素材の調整やWeb画面、紙媒体の作成

Illustratorは、ロゴやアイコンなどの素材を調整するときや、チラシなどの紙媒体を作るときに使っていました。
私の職場ではWebサイトの仕事が中心でしたが、Web以外の制作を依頼されることもありました。
Illustratorを使っていた主な作業は、次のようなものです。

• ロゴやアイコンなどの素材調整
• Webサイトで使うパーツの作成
• 図形や装飾の作成
• チラシなどの紙媒体の作成
• Illustrator形式で届いたデータの確認や修正

Photoshopが写真の加工に向いているのに対して、Illustratorはロゴや図形、線を使ったデザインを扱いやすいツールです。
既存のデータから一部のパーツだけを取り出したり、色を変更したり、Web用に書き出したりする場面でも使っていました。

Adobe XDは、Webページの画面デザインを作るときに少し使用していました。
職場から制作ツールを細かく指定されることはあまりなかったため、新しいツールにも慣れておこうと思い、Webページのレイアウトを考えるときに取り入れていました。

初めは操作に戸惑う部分もありましたが、使っていくうちに、ボタンや画像、文章を配置しながらWebページ全体の完成イメージを作れるようになりました。
ただし、すべての案件でXDを使っていたわけではありません。簡単な修正であれば、既存ページを確認しながら直接HTMLやCSSを変更することも多かったです。

案件の内容や受け取ったデータに合わせて、Photoshop、Illustrator、XDを使い分けていました。

3．Sublime Text｜HTML・CSS・JavaScriptの修正

Sublime Textは、HTMLやCSS、JavaScriptなどのコードを編集するためのテキストエディターです。

私が在宅Webデザイナーとして行っていたコーディング作業では、主にSublime Textを使っていました。実際の仕事では、次のような修正がありました。

• 見出しや文章の変更
• 画像の差し替え
• リンク先の変更
• ボタンの追加や削除
• 文字サイズや色の調整
• 余白や横幅の調整
• レイアウト崩れの修正
• パーツの表示・非表示
• 新しい項目やコンテンツの追加

すでに完成しているWebサイトの一部を修正する仕事が多かったため、ゼロからすべてのコードを書くというより、既存のHTMLやCSSを確認し、必要な箇所を探して変更する作業が中心でした。
JavaScriptについては、複雑なシステムを一から開発するというより、既存の記述を確認したり、簡単な動きを調整したりする場面で触れていました。

コードを少し変更しただけでも、別の場所の表示に影響することがあります。
そのため、修正箇所だけを見るのではなく、ページ全体の表示やスマートフォンでの見え方も確認しながら作業していました。

実際にどこまでコーディングを担当していたかは、こちらの記事でも詳しく紹介しています。

4．WordPress｜サイトのお知らせやページを更新

WordPressは、Webサイトを管理・更新するためのCMSです。
専門的なコードを毎回書かなくても、管理画面から記事や固定ページを編集できます。
仕事では、WordPressを使って次のような更新を行っていました。

• お知らせ記事の追加
• 文章や見出しの変更
• 画像の差し替え
• リンクの設定
• 固定ページの修正
• 公開日時やカテゴリーの設定
• 更新後の表示確認

一見するとブログを投稿するような簡単な操作に見えますが、実務では間違えて別のページを編集しないように注意が必要です。
公開前には、文章の誤字脱字だけでなく、画像の大きさやリンク先、パソコンとスマートフォンの両方で表示が崩れていないかも確認していました。

また、WordPressのサイトでも、管理画面だけでは対応できない修正があります。
その場合は、テーマファイルやCSSなどを確認し、Sublime Textやブラウザの検証ツールも使いながら対応していました。
WordPressが使えることに加えて、HTMLやCSSの基本が分かると、対応できる修正の幅が広がります。

5．Movable Type｜大学サイトなどの更新

WordPress以外に、Movable TypeというCMSも使っていました。
私が担当した仕事では、大学サイトなどの更新に使われていました。

Webサイトの更新という点ではWordPressと似ていますが、管理画面の構成や更新方法には違いがあります。
初めて操作するときは、どこからページを編集するのか、変更後にどのような手順で公開するのかを確認しながら進めました。

Movable Typeでは、内容を変更したあとに「再構築」という処理が必要になることもあります。
編集画面では正しく変更できていても、再構築が終わるまで実際のページに反映されない場合があるため、更新後の確認が大切でした。

また、大学のようにページ数が多いサイトでは、似た名前のページや複数のカテゴリーがあり、更新する場所を間違えないように注意する必要があります。
CMSはWordPressだけではありません。

実務では会社やクライアントによって異なるCMSを使うことがあるため、初めてのツールでも画面を確認しながら覚えていく力が必要だと感じました。

6．Microsoft Teams｜修正依頼や質問、進捗報告

在宅勤務では、Microsoft Teamsを使って社内の担当者とやり取りをしていました。

主な用途は、次のとおりです。

• その日の作業内容の確認
• Webページの修正依頼
• 不明点についての質問
• デザインや表示の確認
• 作業の進捗報告
• 修正完了の連絡
• ミーティングへの参加

出社していれば、その場で画面を見せながら確認できることもあります。
しかし、在宅勤務では文章や画像を使い、相手に伝わるように説明しなければなりません。

「修正しました」だけで終わらせず、どのページのどの部分を変更したのか、確認してほしい点は何かを分かりやすく伝えるようにしていました。
分からないことがあるときも、ただ「分かりません」と聞くのではなく、自分で確認した内容や、どこまで作業できたのかを添えて質問するようにしていました。

画面のスクリーンショットを付けると、言葉だけで説明するよりも状況が伝わりやすくなります。
在宅WebデザイナーにとってTeamsは、連絡用のツールというだけではなく、仕事をスムーズに進めるための大切なツールでした。

7．ブラウザの検証ツール｜表示崩れやCSSを確認

Google Chromeなどのブラウザには、WebページのHTMLやCSSを確認できる検証ツールがあります。

Webページの修正では、どのCSSが適用されているのか、なぜ余白や文字サイズが想定どおりにならないのかを調べるためによく使っていました。
たとえば、次のような場面で役立ちます。

• 文字の色やサイズを確認する
• 余白が広すぎる原因を探す
• レイアウトが崩れている箇所を確認する
• 適用されているCSSを調べる
• CSSを一時的に変更して見え方を試す
• スマートフォンの画面幅で表示を確認する

検証ツール上でCSSの数値を変えると、実際のファイルを編集する前に表示を試せます。
たとえば、余白を20pxから10pxに変更した場合の見え方や、文字サイズを少し大きくした場合のバランスを、その場で確認できます。

ただし、検証ツール上で変更した内容は、ページを再読み込みすると元に戻ります。
そこで、検証ツールで適切な数値を見つけたあと、Sublime Textなどで実際のCSSファイルを修正していました。
見た目の崩れを感覚だけで直すのではなく、原因となっているコードを探すために欠かせないツールでした。

8．FFFTP｜修正したファイルをサーバーへアップロード

FFFTPは、パソコンにあるファイルをWebサーバーへアップロードするためのFTPソフトです。
HTMLやCSS、JavaScript、画像などを修正したあと、Webサイトに反映するために使っていました。

作業の流れは、案件によって異なりますが、主に次のようなものでした。

1. 修正するファイルを確認する
2. 必要に応じて元のファイルを保存しておく
3. パソコン上でファイルを修正する
4. ブラウザで表示を確認する
5. FFFTPでサーバーへアップロードする
6. 公開されたページをもう一度確認する

FTPでのアップロードは、Webサイトのデータを直接変更する作業です。
間違ったフォルダーに入れたり、別のファイルを上書きしたりすると、ページが崩れたり表示されなくなったりする可能性があります。
そのため、アップロード先の階層やファイル名をよく確認し、必要なファイルだけを慎重にアップロードしていました。
アップロード後は、パソコンだけでなくスマートフォンでもページを開き、修正内容が正しく反映されているかを確認します。

デザインやコーディングだけでなく、公開作業まで担当する案件では、FTPソフトの基本的な使い方も必要でした。

9．ChatGPTなどのAIツール｜コードの確認やエラー解決

仕事では、ChatGPTなどのAIツールも補助的に使っていました。
主に、コードの確認やエラーの原因を考えるときに役立ちました。

• HTMLやCSSの記述を確認する
• JavaScriptのエラー原因を探す
• コードの意味を調べる
• 修正方法の候補を出してもらう
• 自分では気づかなかった確認ポイントを整理する

たとえば、コードを変更しても表示が変わらないときに、考えられる原因をAIに聞くと、「別のCSSが優先されている」「キャッシュが残っている」「セレクターの指定が違う」など、確認する項目を整理できます。
エラー文だけでは原因が分かりにくいときも、内容をかみ砕いて説明してもらうことで、次にどこを確認すればよいか分かりやすくなりました。

ただし、AIが出したコードが必ず正しいとは限りません。
そのままコピーして使用するのではなく、既存のコードへの影響を確認し、ブラウザで表示や動作をチェックしてから反映する必要があります。

また、社外秘の情報や個人情報、公開してはいけないコードを入力しないなど、会社のルールに従って使うことも大切です。

AIだけに作業を任せるのではなく、自分で調べたり判断したりするための補助ツールとして使っていました。

10．Git｜自分用の作業ログを残す

Gitは、ファイルの変更履歴を記録できるツールです。

チームで本格的なバージョン管理をする方法もありますが、私の場合は主に自分用の作業ログとして使っていました。Webページの修正では、複数のファイルを変更することがあります。

作業を続けていると、「どのファイルを変更したのか」「どこを直したのか」が分かりにくくなることもあります。そこでGitに変更履歴を残しておくと、修正した箇所を確認しやすくなりました。

主に役立ったのは、次のような場面です。

• 変更したファイルを確認する
• 修正前と修正後の違いを見る
• 何のために変更したのかメモを残す
• 複数の修正内容を整理する
• 必要なときに以前の状態を確認する

特に、少しずつ修正を重ねる案件では、作業内容を記録しておくことで、自分自身が状況を把握しやすくなります。Gitというと難しいイメージがあるかもしれませんが、最初からすべての機能を使いこなす必要はありません。

まずは変更内容を確認し、作業の区切りごとに記録を残すだけでも便利でした。

ツールをすべて完璧に使えなくても仕事はできた

ここまで10個のツールを紹介しましたが、仕事を始める前からすべてを完璧に使えたわけではありません。

PhotoshopやIllustratorのように以前から使っていたツールもあれば、仕事をしながら操作を覚えたツールもあります。

Adobe XDは新しいツールにも慣れておこうと思って少しずつ使い始めましたし、Movable Typeも実際の更新作業を通して使い方を覚えていきました。

大切だったのは、ツールの機能をすべて暗記することではなく、依頼された作業を進めるために必要な操作を調べ、実際に試してみることでした。分からないことがあれば、まず自分で調べ、それでも判断できないときはTeamsで担当者に質問します。

新しいツールでも、何度か同じ作業を繰り返すうちに、少しずつ操作に慣れていきました。
Web業界では、新しいツールやサービスが次々に登場します。そのため、「すべてのツールを知っていること」よりも、「初めてのツールでも必要な使い方を調べられること」のほうが、実務では大切だと感じました。

在宅勤務ではツールを組み合わせて仕事を進めていた

実際の仕事では、1つのツールだけで作業が完結することはあまりありませんでした。
たとえば、Webページの画像と文章を差し替える場合は、次のように複数のツールを使います。

1. Teamsで修正依頼を確認する
2. Photoshopで掲載画像を加工する
3. Sublime Textで文章や画像の指定を変更する
4. ブラウザの検証ツールで表示を調整する
5. Gitで変更内容を確認する
6. FFFTPでファイルをアップロードする
7. 公開ページをパソコンとスマートフォンで確認する
8. Teamsで作業完了を報告する

WordPressやMovable Typeの案件であれば、CMSの管理画面から文章や画像を更新することもあります。一つひとつの操作は難しくなくても、依頼内容を正しく理解し、必要なツールを選び、確認しながら公開することが大切でした。

在宅Webデザイナーの仕事は、デザインソフトで見た目を作るだけではありません。
制作、コーディング、更新、確認、公開、報告まで、複数のツールを組み合わせながら進める仕事でした。

まとめ｜実務では仕事内容に合わせてツールを使い分ける

私が在宅Webデザイナーの仕事で使っていたツールは、次の10個です。

1. Photoshop：画像加工やバナー制作
2. Illustrator・Adobe XD：素材やパーツの調整、Web画面や紙媒体の作成
3. Sublime Text：HTML・CSS・JavaScriptの修正
4. WordPress：サイトのお知らせやページ更新
5. Movable Type：大学サイトなどの更新
6. Microsoft Teams：修正依頼、質問、進捗報告
7. ブラウザの検証ツール：表示崩れやCSSの確認
8. FFFTP：修正したファイルのアップロード
9. ChatGPTなどのAIツール：コードの確認やエラー解決
10. Git：自分用の作業ログや変更履歴の確認

在宅Webデザイナーを目指していると、「たくさんのツールを使えなければ仕事ができないのでは」と不安になるかもしれません。

しかし、すべての機能を最初から完璧に覚える必要はありません。
まずはPhotoshopやHTML・CSSなど、自分が取り組みやすいものから学び、必要になったツールを仕事の中で少しずつ覚えていくこともできます。
私自身も、実際の案件を担当しながら新しい操作を調べ、使えるツールを増やしていきました。

今回紹介した実務での使い方が、在宅Webデザイナーの仕事内容をイメージする参考になればうれしいです。