よく使うWebディレクターツールを一覧化しました。
全13ジャンルでまとめましたのでよければ参考にしてください。
スケジュール管理・タスク管理ツール
Backlog
プロジェクト管理、ファイル共有、バージョン管理などを簡単にできる。
無料あり。
≫Backlog
Trello
付箋を貼るようにタスク管理ができる。
無料あり。
≫Trello
Redmine（レッドマイン）
プロジェクト管理に。
有料。
≫Redmine（レッドマイン）
Wrike（ライク）
プロジェクト管理に。
無料あり。
≫Wrike（ライク）
Jooto（ジョートー）
付箋を貼るようにタスク管理ができる。
無料。
≫Jooto（ジョートー）
Asana
タスク管理、チャット機能。
外部サービスと連携して作業時間の計測もできる。
無料あり。
»Asana
ファイル共有ツール
ギガファイル便
ユーザー登録不要のファイル転送サービス。
1ファイル200Gまでのファイル転送が可能。
ファイルはアップロード後最大６０日間保持される。
無料。
定番のファイル共有ツール
- 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
ブラウザでワイヤーフレーム、デザインなどが作れるツール。
無料あり。
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広告などの計測タグが正しく設置されているか確認できる
無料。
Chibineko
シンプルなテスト業務支援ツール。
無料。
The QR Code Extension
Chrome拡張機能。
今いるWebページのURLをQRで出してくれるので、スマホのカメラからすぐにURLチェックできる。
SEOツール
キーワードプランナー（Google広告）
キーワードの月間平均検索ボリュームや関連キーワードがわかる。
≫キーワードプランナー（Google広告）
ラッコキーワード
Googleサジェストなどから関連キーワードを一括で取得できる。
無料。
≫ラッコキーワード
Keyword Tool（キーワードツール）
関連キーワード、検索ボリュームがわかる。
無料あり。
≫Keywordtool
Ubersuggest
キーワードの検索ボリューム、関連キーワード、SEOチェックを行える。
無料あり。
≫Ubersuggest
≫Ubersuggest（Chrome拡張機能版）
Googleトレンド
キーワードのトレンド、最大5つの相対的な検索ボリュームを確認できる。
≫Googleトレンド
PageSpeed Insights
サイトの表示速度の改善に使用。
≫PageSpeed Insights
Lighthouse
Chromeの拡張機能。
ページのSEO、表示速度、アクセシビリティなどをチェックできる。
無料。
≫Lighthouse
GRC
対象キーワードの検索順位をチェックできる。
無料あり。
≫GRC
Ahrefs
特定のWebサイトの被リンク数、キーワード順位をチェックできる。
有料。
≫Ahrefs
Nobilista（ノビリスタ）
Nobilista（ノビリスタ）は2021年10月20日に登場した最新のクラウド型のSEO順位チェックツールです。
今すぐ始められて、簡単・自動でSEOチェックできるのでおすすめ。
月額990円と安いのも良いです。
≫Nobilista（ノビリスタ） ※7日間無料
Screaming Frog
URLを入力して、最大500のHTMLや画像ファイルのURL、meta情報や見出しタグなどが取得できる。
インストールして使用。
無料あり。
アクセス解析ツール
Googleアナリティクス
基本のアクセス解析ツール。
無料。
≫Googleアナリティクス
Pageアナリティクス
Chromeの拡張機能。
Googleアナリティクスにログインした状態で使用。ページ内のクリックされたリンク箇所が視覚的に分かるのが良い。
Search Console
自社サイトへの検索クエリの順位の遷移、クリック率などをチェックできる。
AIアナリスト
Googleアナリティクスと連携してAIがアクセス解析してくれる。
無料。
User Heat
シンプルなヒートマップ。
無料。
Ptengine
ヒートマップ。
無料あり。
競合調査ツール
SimilarWeb
対象サイトのドメインを入力するだけで、アクセス数や流入経路の目安が分かる。
無料あり。
Wappalyzer
Chrome拡張機能。
そのサイトが使っているサーバー、CMS、言語、バージョンなどがわかる。
Wayback Machine
サイトのURLを入力すると、そのサイトの過去のデザインを確認できる。
HTML5 Outliner
Chrome拡張機能。
今いるページの見出し構造を素早くチェックできる。
META SEO inspector
Chrome拡張機能。
ページのmeta情報、見出し構造などを確認できる。
ライティング・制作・校正ツール
文章校正ツール
Web上で校正できる。
影武者
コピペチェックできる。
無料あり。
≫影武者
画面キャプチャ・スクリーンショットツール
Gyazo
スクリーンキャプチャや画像を取得して専用URLが発行されるので、共有がラク。
無料あり。
FireShot
Chrome拡張機能。
WebページをキャプチャしてPDF/JPEG/GIF/PNGで保存可能。
編集、注釈も入れられる。
Awesome Screenshot
Chrome拡張機能。
Webページの画像キャプチャ、動画撮影ができる。
画像はPNG、JPG、PDFで保存可能。編集・注釈も入れられる。
無料。
その他の便利ツール
Aun
Web制作の修正依頼ツール。
無料あり。
≫Aun
Pasty
Chrome拡張機能。
複数のリンクをコピーして、一気にブラウザで開ける。
Clipy
コピー履歴が残り、過去のコピー履歴から貼り付けることができる。
Mac用。
TinyPNG
オンライン上で画像圧縮できるツール。
JPGとPNGファイルを圧縮できる。
一度に最大20枚、一枚5MBまでの画像をアップロード可能。
無料。
Squoosh
オンライン上で画像圧縮できるGoogle製のツール。
JPEG、PNG、WebPなどに拡張子を変更可能。
無料。
iLovePDF
オンライン上でPDFの結合、分割、圧縮、PDFからJPGからJPG変換などできる。
無料あり。
Placehold
widthとheightをピクセル単位で入力するだけで簡単にダミー画像が作れる。
無料。
ダミーテキストジェネレーター
文字数を指定してダミー文字を生成してくれる。
無料。
iLoveIMG
オンラインでTIFFをJPGに変換できる。
無料。
ColorZilla
Chrome拡張機能。
Webページのカラーコードの確認・抽出ができる。
無料。
Adobe Color CC
基調色を選ぶだけできれいな配色を生成してくれる。
無料。
CSS Peeper
Chrome拡張機能。
今いるサイトで使用されているフォント、カラーコード、画像アセットなどが分かる。
無料。
サイトマップ作成ツール
サイトのURLを入力するだけで、自動的にページを取得してサイトマップを作成できる。
無料。
情報収集ツール
Feedly
RSSリーダー。
無料。
Googleアラート
RSSリーダー。
無料。
未経験からWebディレクターを目指している方はこちらの記事もご覧ください。
コメント