Webディレクターの愛用ツール!業務別のオススメ紹介:2021年版

スポンサーリンク
この記事は約10分で読めます。

Webディレクターの仕事が捗る便利ツールを業務別に紹介します。

Webディレクター以外の方にも役立つツールがたくさんあるので、よろしければお試しください。

Webディレクターの愛用ツール!業務別のオススメ紹介

スポンサーリンク
目次
  1. スケジュール管理・タスク管理ツール
    1. Backlog
    2. Trello
    3. Redmine(レッドマイン)
    4. Wrike(ライク)
    5. Jooto(ジョートー)
    6. Asana
  2. ファイル共有ツール
    1. ギガファイル便
    2. 定番のファイル共有ツール
  3. ドキュメント作成ツール
    1. Google製品
    2. Microsoft製品
    3. Mac製品
  4. テキストエディタ
    1. Visual Studio Code
  5. デザイン・ワイヤーフレーム・プロトタイプ作成ツール
    1. Adobe XD
    2. Sketch
    3. Cacoo(カク―)
    4. moqups(モックアップス)
    5. Figma
    6. FotoJet
  6. 検品・デバッグツール
    1. Chromeデベロッパーツール
    2. Web Developer
    3. Unicorn
    4. HTMLエラーチェッカー
    5. Check my links
    6. Classic Cache Killer
    7. Alt & Meta viewer
    8. WinMerge
    9. HTML差分(diff)チェックツール
    10. difff《デュフフ》
    11. Tag Assistant
    12. Chibineko
    13. The QR Code Extension
  7. SEOツール
    1. キーワードプランナー(Google広告)
    2. ラッコキーワード
    3. Keyword Tool(キーワードツール)
    4. Ubersuggest
    5. Ubersuggest(Chromeの拡張機能版)
    6. Googleトレンド
    7. PageSpeed Insights
    8. Lighthouse
    9. GRC
    10. Ahrefs
    11. Screaming Frog
  8. アクセス解析ツール
    1. Googleアナリティクス
    2. Pageアナリティクス
    3. Search Console
    4. AIアナリスト
    5. User Heat
    6. Ptengine
  9. 競合調査ツール
    1. SimilarWeb
    2. Wappalyzer
    3. Wayback Machine
    4. HTML5 Outliner
    5. META SEO inspector
  10. ライティング・制作・校正ツール
    1. 文章校正ツール
    2. 影武者
  11. 画面キャプチャ・スクリーンショットツール
    1. Gyazo
    2. FireShot
    3. Awesome Screenshot
  12. その他の便利ツール
    1. Aun
    2. Pasty
    3. Clipy
    4. TinyPNG
    5. Squoosh
    6. iLovePDF
    7. Placehold
    8. ダミーテキストジェネレーター
    9. iLoveIMG
    10. ColorZilla
    11. Adobe Color CC
    12. CSS Peeper
    13. サイトマップ作成ツール
  13. 情報収集ツール
    1. Feedly
    2. Googleアラート

スケジュール管理・タスク管理ツール

Backlog

プロジェクト管理、ファイル共有、バージョン管理などを簡単にできる。
無料あり。
Backlog

Trello

付箋を貼るようにタスク管理ができる。
無料あり。
Trello

Redmine(レッドマイン)

プロジェクト管理に。
有料。
Redmine(レッドマイン)

Wrike(ライク)

プロジェクト管理に。
無料あり。
Wrike(ライク)

Jooto(ジョートー)

付箋を貼るようにタスク管理ができる。
無料。
Jooto(ジョートー)

Asana

タスク管理、チャット機能。
外部サービスと連携して作業時間の計測もできる。
無料あり。
»Asana

スポンサーリンク

ファイル共有ツール

ギガファイル便

ユーザー登録不要のファイル転送サービス。
1ファイル200Gまでのファイル転送が可能。
ファイルはアップロード後最大60日間保持される。
無料。

ギガファイル便

定番のファイル共有ツール

  • OneDrive
  • Googleドライブ
  • Dropbox
スポンサーリンク

ドキュメント作成ツール

Google製品

  • Googleスプレッドシート …スケジュール管理等
  • Googleスライド …提案書、ワイヤーフレーム等
  • Googleドキュメント …原稿作成等

Microsoft製品

  • Excel …スケジュール管理等
  • PowerPoint …提案書、ワイヤーフレーム等
  • Word …原稿作成等

Mac製品

  • Keynote …提案書作成等
スポンサーリンク

テキストエディタ

Visual Studio Code

拡張機能が豊富な高機能テキストエディタ。
軽い。
無料。
Visual Studio Code

スポンサーリンク

デザイン・ワイヤーフレーム・プロトタイプ作成ツール

Adobe XD

ワイヤーフレーム・プロトタイプ制作の代表格。
無料あり。
Adobe XD

Sketch

モックアップ作成、UIデザインツール。Macのみ。
無料あり。
Sketch

Cacoo(カク―)

オンラインでワイヤーフレームが作れる。
無料あり。
Cacoo(カク―)

moqups(モックアップス)

オンラインでワイヤーフレームが作れる。
無料あり。
moqups(モックアップス)

Figma

ブラウザでワイヤーフレーム、デザインなどが作れるツール。
無料あり。

Figma

FotoJet

オンラインでグラフィックデザイン、写真コラージュ、写真編集ができる。
無料あり。

FotoJet

スポンサーリンク

検品・デバッグツール

Chromeデベロッパーツール

Chromeのデフォルト機能。
ブラウザでソースコード、デバイスごとの表示、ページの読み込み速度などを確認できる。

Web Developer

Chrome拡張機能。
Altチェック、リンクチェック、バリデートなど。
Web Developer

Unicorn

W3C 統合検証サービス。
HTML、CSSの構文チェックに。
Unicorn

HTMLエラーチェッカー

Chromeの拡張機能。
今いるページのバリデーションが行える。
HTMLエラーチェッカー

Check my links

Google Chromeの拡張機能。
今いるページのリンク切れチェックができる。
Check my links

Classic Cache Killer

Google Chromeの拡張機能。
キャッシュを自動削除できる。
無料
Classic Cache Killer

Alt & Meta viewer

Chrome拡張機能。
altとmetaのチェックに。
Alt & Meta viewer

WinMerge

ソースコードや画像の差分チェックツール。
Windowsのみ利用可能。
WinMerge

HTML差分(diff)チェックツール

Chromeの拡張機能。
タブと別タブの差分チェックができる。
HTML差分(diff)チェックツール

difff《デュフフ》

ブラウザで差分比較できる。
difff《デュフフ》

Tag Assistant

Chrome拡張機能。
GoogleアナリティクスやGoogle広告などの計測タグが正しく設置されているか確認できる
無料。

Tag Assistant

Chibineko

シンプルなテスト業務支援ツール。
無料。

Chibineko

The QR Code Extension

Chrome拡張機能。
今いるWebページのURLをQRで出してくれるので、スマホのカメラからすぐにURLチェックできる。

The QR Code Extension

スポンサーリンク

SEOツール

キーワードプランナー(Google広告)

キーワードの月間平均検索ボリュームや関連キーワードがわかる。
キーワードプランナー(Google広告)

ラッコキーワード

Googleサジェストなどから関連キーワードを一括で取得できる。
無料。
ラッコキーワード

Keyword Tool(キーワードツール)

関連キーワード、検索ボリュームがわかる。
無料あり。
Keywordtool

Ubersuggest

キーワードの検索ボリューム、関連キーワード、SEOチェックを行える。
無料あり。
Ubersuggest

Ubersuggest(Chromeの拡張機能版)

Chromeの拡張機能。
検索結果画面、今いるページのキーワードボリューム、SEOチェックが行える。
Ubersuggest

Googleトレンド

キーワードのトレンド、最大5つの相対的な検索ボリュームを確認できる。
Googleトレンド

PageSpeed Insights

サイトの表示速度の改善に使用。
PageSpeed Insights

Lighthouse

Chromeの拡張機能。
ページのSEO、表示速度、アクセシビリティなどをチェックできる。
無料。
Lighthouse

GRC

対象キーワードの検索順位をチェックできる。
無料あり。
GRC

Ahrefs

特定のWebサイトの被リンク数、キーワード順位をチェックできる。
有料。
Ahrefs

Screaming Frog

URLを入力して、最大500のHTMLや画像ファイルのURL、meta情報や見出しタグなどが取得できる。
インストールして使用。
無料あり。

Screaming Frog

スポンサーリンク

アクセス解析ツール

Googleアナリティクス

基本のアクセス解析ツール。
無料。
Googleアナリティクス

Pageアナリティクス

Chromeの拡張機能。
Googleアナリティクスにログインした状態で使用。ページ内のクリックされたリンク箇所が視覚的に分かるのが良い。

Pageアナリティクス

Search Console

自社サイトへの検索クエリの順位の遷移、クリック率などをチェックできる。

Search Console

AIアナリスト

Googleアナリティクスと連携してAIがアクセス解析してくれる。
無料。

AIアナリスト

User Heat

シンプルなヒートマップ。
無料。

User Heat

Ptengine

ヒートマップ。
無料あり。

Ptengine

スポンサーリンク

競合調査ツール

SimilarWeb

対象サイトのドメインを入力するだけで、アクセス数や流入経路の目安が分かる。
無料あり。

SimilarWeb

Wappalyzer

Chrome拡張機能。
そのサイトが使っているサーバー、CMS、言語、バージョンなどがわかる。

Wappalyzer

Wayback Machine

サイトのURLを入力すると、そのサイトの過去のデザインを確認できる。

Wayback Machine

HTML5 Outliner

Chrome拡張機能。
今いるページの見出し構造を素早くチェックできる。

HTML5 Outliner

META SEO inspector

Chrome拡張機能。
ページのmeta情報、見出し構造などを確認できる。

META SEO inspector

スポンサーリンク

ライティング・制作・校正ツール

文章校正ツール

Web上で校正できる。

文章校正ツール

影武者

コピペチェックできる。
無料あり。

影武者

スポンサーリンク

画面キャプチャ・スクリーンショットツール

Gyazo

スクリーンキャプチャや画像を取得して専用URLが発行されるので、共有がラク。
無料あり。

Gyazo

FireShot

Chrome拡張機能。
WebページをキャプチャしてPDF/JPEG/GIF/PNGで保存可能。
編集、注釈も入れられる。

FireShot

Awesome Screenshot

Chrome拡張機能。
Webページの画像キャプチャ、動画撮影ができる。
画像はPNG、JPG、PDFで保存可能。編集・注釈も入れられる。
無料。

Awesome Screenshot

スポンサーリンク

その他の便利ツール

Aun

Web制作の修正依頼ツール。
無料あり。

Aun

Pasty

Chrome拡張機能。
複数のリンクをコピーして、一気にブラウザで開ける。

Pasty

Clipy

コピー履歴が残り、過去のコピー履歴から貼り付けることができる。
Mac用。

Clipy

TinyPNG

オンライン上で画像圧縮できるツール。
JPGとPNGファイルを圧縮できる。
一度に最大20枚、一枚5MBまでの画像をアップロード可能。
無料。

TinyPNG

Squoosh

オンライン上で画像圧縮できるGoogle製のツール。
JPEG、PNG、WebPなどに拡張子を変更可能。
無料。

Squoosh

iLovePDF

オンライン上でPDFの結合、分割、圧縮、PDFからJPGからJPG変換などできる。
無料あり。

iLovePDF

Placehold

widthとheightをピクセル単位で入力するだけで簡単にダミー画像が作れる。
無料。

Placehold

ダミーテキストジェネレーター

文字数を指定してダミー文字を生成してくれる。
無料。

ダミーテキストジェネレーター

iLoveIMG

オンラインでTIFFをJPGに変換できる。
無料。

iLoveIMG

ColorZilla

Chrome拡張機能。
Webページのカラーコードの確認・抽出ができる。
無料。

ColorZilla

Adobe Color CC

基調色を選ぶだけできれいな配色を生成してくれる。
無料。

Adobe Color CC

CSS Peeper

Chrome拡張機能。
今いるサイトで使用されているフォント、カラーコード、画像アセットなどが分かる。
無料。

CSS Peeper

サイトマップ作成ツール

サイトのURLを入力するだけで、自動的にページを取得してサイトマップを作成できる。
無料。

サイトマップ作成ツール

スポンサーリンク

情報収集ツール

Feedly

RSSリーダー。
無料。

Feedly

Googleアラート

RSSリーダー。
無料。

Googleアラート