現役Webディレクターの僕がよく使うツール20選【駆け出しディレクター必見!!】

2020年12月1日work


こんにちは、カズキです。



今回は「現役Webディレクターの僕がよく使うディレクションツール20種類」というテーマで記事を書きました😌

駆け出しディレクターの人
webで使うツールはなんだか種類が多すぎ、どれを使えばいいかよく分からない…。

便利なツールがあれば知っておきたいな。


今日の想定読者はこんな方です。

この記事を書く僕はというと

26歳の頃、異業種からWeb業界へ転職しまして、現在はディレクター歴4年目の中堅です🙇‍♂️

過去、一年半ほどのアシスタント期間を経てWebディレクターに昇格。

制作会社→広告代理店→事業会社」とWeb制作に関わる現場ほぼ全てでのディレクションを経験してきました。

会社規模としても「中小から大手企業」までの就業経験もあり、たくさんの現場を知っているため、実際に役に立つツールはよく知っているつもりです😌



現役webディレクターの僕がよく使うツール20選


僕がよく使うディレクションツールは以下の通り😌

ディレクションツール20選

(1)googleスライド
(2)miro
(3)googleスプレットシート 
(4)Adobe XD or Photoshop
(5)chromeデベロッパーツール
(6)Sublime Text3
(7)difff(デュフフ)
(8)Wappalyzer
(9)QRコード作成【無料】/QRのススメ
(10)invision
(11)googleキーワードプランナー 
(12)googleトレンド
(13)リレーテッド キーワード
(14)SimilarWeb
(15)PageSpeed Insights
(16)googleアナリティクス
(17)googleサーチコンソール
(18)googleオプティマイズ
(19)User Heat
(20)Full Page Screen Capture


ディレクターの皆さんなら、もちろん全部知ってますよね?♪( ´θ`)ノ

というのは冗談でして、以下、用途ごとに分かりやすく解説します。

基本設計・プロトタイプ作成によく使うツール


構成案やワイヤーフレームを作るときなどは以下のツールがめっちゃ使いやすいのでオススメ😌

(1)googleスライド


googleが提供している無料のドキュメント作成ツールです。



ワークスペースの自由度が大変高いので、大抵の資料はこのツールで完結できます。



googleアカウントを持っていれば誰でも使用可能。

リンク:https://www.google.com/intl/ja_jp/slides/about/
ライセンス:無料
用途:提案資料、簡単なサイト構成案、修正指示書など


(2)miro


Miro社が提供するオンラインホワイトボードサービス。


何と言っても広大なワークスペースが魅力。


「大規模サイトのワイヤーフレーム」や「サイト導線図」などを一つのワークスペースに描画できるので、



制作ドキュメントの作成からプレゼンテーションにも幅広く使えます😌



また付箋機能やビジュアライズも豊富なので、ブレーンストーミングやアイディア出しにも重宝できたりします。



有料版もありますが、無料版でほぼ全ての機能が使えるので大変オススメです。

▼このサイトに詳しい使い方が載っていたので興味のある方はどうぞ


リンク:https://miro.com/
ライセンス: 無料版/有料版
用途:ワイヤーフレーム、プレゼン用資料など


(3)googleスプレットシート 


もはや有名すぎるので説明不要かと思いますが、googleスライドとセットでよく使われるツールです。



Excelのオンライン版といってもいいぐらいの再現率ですね。



こちらもgoogleアカウントを持っていれば誰でも使用可能。


リンク:https://www.google.com/intl/ja_jp/sheets/about/
ライセンス:無料
用途: スケジュール、デバッグシート、見積書、受発注書など


ワイヤーフレームやサイトマップなど、アウトライン作成についてまとめた記事は以下です。よかったらご参照ください。



実制作・デバッグ時によく使うツール


実際に制作するのはデザイナーやエンジニアなどの技術者ですが、

チェックの際はディレクターも専門ツールの使用を行う場合もありますよね😌


その際に役立つツールは以下の通り。

(4)Adobe XD or Photoshop


Adobe社が提供するWebデザイン作成ツール。



最近はPhotoshopよりもXDを使用するデザイナーが増えてきたと思います。



とはいえ、シェア率でいうとまだトントンぐらい。



なのでディレクターの方は両方インストールしておきたいですね😌

XDリンク:https://www.adobe.com/jp/products/xd.html
Photoshopリンク:https://www.adobe.com/jp/products/photoshop.html
ライセンス:有料
用途: デザインカンプ作成、クリエイティブバナーの作成など


(5)chromeデベロッパーツール


サイトの表示やタグ構造をチェックするのに使います。



クロームのブラウザをインストールすれば標準装備されているのでデバッグ時は活用必須ですね。



またレスポンシブモードでスマホデバイスでの確認ができるので結構便利です。

リンク: https://www.google.com/?hl=ja
ライセンス:無料
用途: コーディング実装時、デバック時など


(6)Sublime Text3


コーディング・プログラミング時によく使われるテキストエディタです。



データ納品の場合はディレクターでもhtmlファイルやcssファイルを触ることが多いので、

僕もエディタはSublime Text3を使います。



追加プラグインがかなり充実しているので、タグのハイライト化やエラー表示はもちろん、

「テンプレートの自動出力」「タグの予測変換」が可能でコーディング初心者でも使いやすい仕様です😌



有料版もありますが、無料でほぼ全ての機能を使えるのも魅力。

リンク:https://www.sublimetext.com/3
ライセンス: 無料版/有料版
用途:コーディング実装時、デバック時など


(7)difff(デュフフ)


データの差分チェックツールです。



過去データと修正版の文字やデータの差分をチェックできる便利すぎるツールです。



HTMやCSSの他、原稿資料とワイヤーフレームの文章を比較したり、

ワイヤーフレームの文章とテストアップ(コーディング)の文章を比較にも使えます。



また英語版の文章も比較できるのでかなり万能なツールですね😌

リンク:https://difff.jp/
ライセンス:無料
用途: 文字校正チェック、ソースチェック、デバック時など



(8)Wappalyzer


クロームの拡張ツールで無料で導入可能です😌



機能概要をざっくり説明すると、Webサイトで使用されている技術を教えてくれる神ツールです。

・どんなCMSを使っているか
・Webサーバーは何か
・APIは何を導入しているか
・分析ツールは何を使っているか


など、他にもWebに使われている技術を網羅的に教えてくれるので、サイト開発にあたりとても参考になります。

リンク:https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja
ライセンス:無料
用途:サイト開発前の参考



(9)QRコード作成【無料】/QRのススメ


これもかなり有名なので敢えて説明不要かと思いますが念のため😌



URLをフォームに入力するとQRコードを発行してくれる便利ツール。

リンク:https://qr.quel.jp/
ライセンス:無料
用途: サイトチェック、デバッグなど



(10)invision



inVisionApp社が提供するデザインビューアー&フィードバックツールです。



開発者同士のやりとりをオンライン上でコメントで対応可能。



また、PASSをかけてクライアントに提出してフィードバックをそのままもらえるので



ビューアーとしてはかなり充実度の高いツールだと思います。



無料版だとプロトタイプ数の制限があるので、継続的に使用する場合は有料版への切り替えをお勧めします😌



単発的に使用する場合は、過去のプロトタイプを使えば何度も使用できるので、とりあえずであればそれでもOKです。

リンク:https://www.invisionapp.com/
ライセンス: 無料版/有料版
用途:デザインレビュー、フィードバッグなど


マーケティングツールとしてよく使うツール


サイト制作にあたり競合調査などのマーケティング活動は必須。



この辺りは使用頻も結構高く、僕もよく使ってます😌



マーケティング担当者や上流の作業を担当するWebディレクターはぜひ押させておきたいツールです。

(11)googleキーワードプランナー 


googleが提供するキーワード撰出ツール。



月間の検索ボリュームやキーワードに対する広告単価の情報を得ることができます。



また無料版だと検索ボリュームが概算となってしまったり、



諸々制限が掛けられるのでプロジェクトによっては有料利用を推奨します。

→とは言え企業案件の場合はクライアントがアカウントを開けているので特別不要かも。



リンク:https://ads.google.com/intl/ja_jp/home/tools/keyword-planner/
ライセンス: 無料版/有料版
用途:マーケティング調査全般



(12)googleトレンド


goolgeキーワードプランナー と一緒に活用したいのがgoogleトレンド。



特定のキーワードに対して「時期や地域でどんな波があるか」を比較できます。



また関連のキーワードも提示してくれるため、新しいキーワード候補を考える際にも参考にしたいですね。

リンク:https://trends.google.co.jp/trends/
ライセンス:無料
用途: マーケティング調査全般



(13)リレーテッド キーワード


SEOでコンテンツマーケティングを行う方は絶対使った方がいいツール。



検索キーワードに対する組み合わせを検索エンジンの予測変換から自動で教えてくれます。



例えばブログで検索したユーザーの予測変換であれば、

ブログ 作り方
ブログ 稼げる


多分このような検索が行われます。



このように実際に検索が多いロングテールワード(組み合わせのキーワード)を複数パターン教えてくれるので、コンテンツマーケティングで記事を作成する場合は大変役立ちます😌

(14)SimilarWeb


SimilarWeb社が提供する競合Webサイト解析ツール。



これがとにかく凄い。



相手企業のサイト状況をざっくりではありますが丸裸にすることが可能です。



トラフィック状況からアクセス数、平均PVなどを知ることが可能です

(※精度については80%ぐらいと言われています。)



無料版でもある程度の機能は使えるので、僕も競合調査やクライアント提案時に参考ソースとしてよく活用しています。

リンク:https://www.similarweb.com/ja/
ライセンス: 無料版/有料版
用途:マーケティング調査全般



(15)PageSpeed Insights


googleが提供する無料のサイトページ速度の計測ツールです。



URLを入力するだけで自分のサイトはもちろん他社サイトのページスピードをgoogleが定めたランク数で知ることが可能。



最近ではサイトのスピードがSEO順位に与える影響が強いのでぜひ活用したいツールですね😌

リンク:https://developers.google.com/speed/pagespeed/insights/?hl=ja
ライセンス:無料
用途: マーケティング調査全般


効果検証・分析によく使うツール


サイトを公開したら、日々分析をおこなってサイト改善に励みますよね。



その際にお役立ちするのが以下のツールです😌

(16)googleアナリティクス


googleが提供する無料のサイト解析ツール。



サイトにgoogleのタグを入れるだけで、

サイトのアクセス状況からユーザーの行動状況まで定量的に知ることができます。



操作もいたってシンプルなのでサイト制作に当たって必須で使いこなしたいツールです。

リンク:https://analytics.google.com/analytics/web/
ライセンス:無料
用途: 自社サイトの分析など



(17)googleサーチコンソール


googleが提供する無料のサイト解析サービス。



googleアナリディクスがサイトのアクセス状況を知るツールだとしたら、

サーチコンソールは「どんなキーワードで検索してきたのか」、また「該当ページがしっかりgoogleにクロールされているページなのか」といったサイトに訪問するまでのユーザー状況サイトの健康状態を知ることが可能。


こちらはgoogleアナリティクスとセットで使うべきツールです。


リンク:https://search.google.com/search-console
ライセンス:無料
用途: 自社サイトの分析など



(18)googleオプティマイズ


googleが提供する無料のA/Bテストツール。



一つのURLで「コンテンツ違いのA/Bテスト」や、「複数URLを作成してのA/Bテスト」など幅広いテストを実地できます。



google広告やアナリティクスなどの連携も容易に行えるので、サイト改善にはぜひ使用したいツールです😌

リンク:https://marketingplatform.google.com/intl/ja/about/optimize/
ライセンス:無料
用途: A/Bテスト、自社サイトの分析など



(19)User Heat


User Local社が提供する無料のヒートマップツール。



ヒートマップツールとは、サイト訪問者の「熟読エリア」「クリックエリア」、「離脱エリア」などを直感的に知ることのできる解析ツールです。



実際の数値をもとに計測してくれるため、サイトリニューアルやページ改善にあたりデータとして大変参考になります。



またUser Heatは30万PVまでは無料で使用できるので中規模サイトまでであれば問題なく使用できるのもメリットです😌

リンク:https://userheat.com/
ライセンス:無料
用途: 自社サイトの分析など



(20)Full Page Screen Capture


クロームの拡張プラグインで無料使用が可能。



ページ全体のスクリーンショットを撮ってくれる便利ツールです。



jpg、pngでの書き出しが可能で、オフラインでのサイト比較やコンテンツ示唆などに使用できるのでとりあえず入れておいて損なしのツールです。

リンク:https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=ja
ライセンス:無料
用途: 自社サイトの分析など



使いやすいツールを試す→自分に合ったツールを導入しよう


上記で紹介したツールを「全て使いこなせれば良し」という訳ではありません。



実際の開発現場では必要ないツールだったり、

そもそも会社で独自に開発しているツールや他社システムを導入している企業もあると思います。



なので、必要に応じてツールを使いこなせればOKです。



その中で「これは使えるな」と思ったものを日々の業務に使ってもらえれば幸いです。



それでは記事は以上です😌



引き続きWebディレクション頑張りましょう~。

▼Webディレクターアシスタント向けの記事


▼Webディレクターにオススメの求人サイトをお探しの方はここから

work

Posted by kazuki