現役WEBディレクターお墨付き！マジで使えるおすすめツール10選。

Pastyは複数のリンクをクリップボードにコピーした状態で起動すると一気に開いてくれるというChromeの拡張機能です。
例えばExcel上にある複数のリンクを開かなければならない時に、いちいちエクセルとブラウザを行き来するのって手間ですよね。Pastyを使えば、クリップボードにあるリンクを一気に開いてくれるので、エクセルとブラウザを何度も行ったり来たりしなくて済みます！
大規模サイトのデバッグを行う際などに重宝する、インストール必須の拡張機能です！

＞「Pasty」（Chrome拡張機能）

The QR Code Extensionは、PCで閲覧しているサイトのQRコードを生成してくれるChromeの拡張機能です。
表示確認等でスマートフォンでサイトを閲覧する時って皆さんどうしてますか？直接URLを入力すると、一文字間違っているだけでも見たいページにアクセスできませんよね。そんな時に、The QR Code Extensionを使えばChromeで閲覧しているページのQRコードを一瞬で生成することができます。生成されたQRコードをスマートフォンで読み込めば、すぐにページを表示できるので、素早くページの確認をすることができてとても便利です。
筆者は、スマートフォンで表示確認をする時に最初これを知らなくて苦労しました……。

＞「The QR Code Extension」（Chrome拡張機能）

CliborはWindowsのクリップボードを拡張するツールです。
Windowsのデフォルトのクリップボードには、テキストを一つしか保存しておけませんよね。しかし、このCliborを使えばコピーしたテキストの履歴を100件以上も保存しておけるので、2回以前にコピーしたテキストもすぐにペーストすることができるのです。また、よく入力するものは「定型文」として保存しておけるので、必要な時にすぐに呼び出すことができます（Macユーザーには、同様の機能を持つツール「Clipy」がオススメ）。
URLとページタイトルのどちらもコピペしたいときなどに便利です！

＞「Clibor」（Win）
＞「Clipy」（Mac）

TrelloはFog Creek Software（米）が開発したタスク管理のためのWEBサービスです。
ディレクターであれば普段いろいろな業務が発生するもの。全部を頭で覚えておくことには限界がありますよね。Trelloは「カード」と「ボード」という2つの機能を使って、付箋のようにタスク管理をすることができます。海外製ではありますが、最近日本語化もされたためより使いやすくなりました！
筆者の場合は、ToDo（やること）、ASAP（やることのなかでもいますぐ、今日中にはやらないといけないこと）、Done!（完了したタスク）とボードを3つに分けて使っています！

＞「Trello」（Webサービス）

Alt & Meta viewerは閲覧中のページの画像のaltとMeta情報をページ上に表示することができるChromeの拡張機能です。
サイト上では目立つことはないものの、構築にあたっては大切な画像のAlt情報とMeta情報。Alt & Meta viewerを使えば開いているページ上でAltとMeta情報を確認できます。そして何と言ってもこのツールの便利な所は、Ctrl + Fで検索をかけられること！ これで元々のページリストの情報と差異がないかもしっかりチェックできます！
デバッグの時はこのCtrl + Fで検索をかけてチェックできるのが本当に便利です！

＞「alt&meta viewer」（Chrome拡張機能）

お次は差分チェックツール。CMSへの入力作業後などにテキストの入力ミスがないかなど確認する時に便利です。こちらはWinMergeとちゃうちゃう！という2つをご紹介。
WinMergeの特徴は行単位での厳密な差分チェックが可能であることと、テキスト同士だけではなく、ファイルやフォルダ同士でも差分を確認できるので、ページ制作後の検証時に正確な比較が可能です。
ちゃうちゃう！は改行の有無等は無視できるため、制作ページとPowerPoint／Exelとのチェックなどが容易です。
それぞれ特徴が違うので目的、用途に合わせて使い分けると良さそうですね。

＞「Winmerge」（Win）
＞「ちゃうちゃう！」（Win）

FireShotは閲覧しているページのスクリーンショットを撮ることができるChromeの拡張機能です。
スクリーンショットはチーム内での情報共有、ワイヤーフレームの作成、資料作成などさまざまな場面で使用するもの。もちろんWindowsに標準搭載されているPrtScキーを使ってもキャプチャーは可能ですが、FireShotを使えば縦長のページをつなげてキャプチャーしたり、キャプチャー後に線を引いたりすることもできます。
通常のPrtScキーでは縦長のページを丸々キャプチャーしたり、特定範囲のみキャプチャーすることはできないため、色々な形でキャプチャーを撮る方にはおすすめの拡張機能です！

＞「Fireshot」（Chrome拡張機能）

StrokesPlusはマウスのジェスチャー機能を拡張するツールです。
業務をしていればページのリロードに使うCtrl + Rや、戻る/進むのAlt + ←/→等々のショートカットキーの使用は増えてくるもの。ただ、同時にマウスも使っていると結局手を動かす量が増えて大変ではないですか？ StrokesPlusを使えば進む、戻る、ページのリロードなどをマウスジェスチャーで行うことができます！ マウスを持つ手の動きだけで頻繁に行う動作をこなすことができる、画期的なツールです。
個人的にはブラウザの進む/戻るがショートカットにしてもマウスでクリックするにしても押しづらいと思っていたのでこのツールを知ってから活用してます！

＞「StrokesPlus」（Win）

ColorZillaは閲覧しているWEBページ上の色を抽出することができるChromeの拡張機能です。
クライアント向けにサイト説明の資料を作成する時に、PowerPointで使用する色もサイトで使用している色に合わせたいですよね。そんな時にColorZillaを使えば、サイト上にある色を16進数でコピーすることができるんです！ これで正確な色を使った資料でプレゼンに臨めますね！

＞「Colorzilla」（Chrome拡張機能）

いかがでしたか？ ジャンルはさまざまですが、今すぐ使える便利なツールばかりです。ぜひ自分にマッチしたツールを見つけて使ってみてくださいね。

こちらの記事もどうぞ

こっそり教えるクリエイター掌握術

＞＞WEBディレクターが小声で教える、
クリエイターを動かす5つの極意

 

お客様とのいい関係の作り方。

＞＞クライアントになぜか好かれる
WEBディレクターたちの心がけ

 

修羅場に遭遇したらこう乗り切れ！

＞＞WEBディレクターが経験した
ヤバ〜い修羅場の乗り切りかた

 

だから、続けていられる。

＞＞入社7年目の私がWEBディレクターを続けている3つの理由