本記事では、こんな悩みに答えます。
本記事の執筆者
本記事を書いている僕はWebディレクター歴９年になります。業務効率化を図るためWebディレクターに役立つあらゆるツールを使用してきました。
Webディレクターは、Webに関する幅広いスキルを持ち、プロジェクト遂行のために案件の進捗管理やクライアントとの日程調整を行います。
あらゆるタスクをこなす為には、Webディレクターはツールを幅広く使いこなす必要があります。
結論、本記事で紹介するおすすめのツールは以下になります。
Webディレクターに役立つツール
- パワーポイント・エクセル
- Googleスプレッドシート
- Adobe XD（アドビ エックスディ）
- Googleアナリティクス/サーチコンソール
- Chrome（デベロッパーツール）
- slack（スラック）
- バックログ（タスク管理ツール）
- Googleカレンダー
- diff（差分チェックツール）
本記事では、上記ツールの紹介、どんな時に役立つのかをボクの経験をもとに紹介していきます。
今回紹介するツールが参考になり、実際に使用してみて業務がスムーズになりましたら幸いです。
Webディレクターにおすすめ必須ツール
Webディレクターにおすすめ必須ツール
Webディレクターに役立つツールについて紹介します。
Webディレクターに役立つツール
- パワーポイント・エクセル
- Googleスプレッドシート
- Adobe XD（アドビ エックスディ）
- Googleアナリティクス/サーチコンソール
- Chrome（デベロッパーツール）
- slack（スラック）
- バックログ（タスク管理ツール）
- Googleカレンダー
- diff（差分チェックツール）
1. パワーポイント・エクセル
パワーポイント・エクセル
PowerPoint（パワーポイント）・Excel（エクセル）は、画面設計書や仕様書を作成するのに使うツールです。
PowerPointは企画書・画面設計書の作成に使用して、Excelは見積書・ディレクトリマップ、スケジュールを作成するのに重宝するサービスです。
※Microsoft PowerPointページに飛びます
※Microsoft Excelページに飛びます
2. Googleスプレッドシート
Googleスプレッドシート
Googleスプレッドシートも、PowerPoint・Excelと同じように画面設計書・仕様書・ディレクトリマップの作成に使用することが多いです。
Googleスプレッドシートはインターネットを介して使用できるため、PowerPointを利用していないクライアントやメンバーがいても、使用できるのが良いところです。
※Googleスプレッドシートのページに飛びます
3. Adobe XD（アドビ エックスディ）
Adobe XD（アドビ エックスディ）
Adobe XD（アドビ エックスディ）は、スプレッドシートやPowerPointと同様に画面設計書の作成に使います。
Adobe XDはWebサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。
スプレッドシートやPowerPointと比べても現場で一番よく使うツールでして、メンバー同士で一緒に作業をする際にはかなり重宝するツールです。
XDのメリットをまとめると以下の通りです。
XDのメリット
- 動作・ファイルがとにかく軽い
- プラグインがどんどん増えていく
- デザイン内容の確認をURLでできる
- 直接コメントでフィードバックをもらえる
- 写真の差替えはドラッグのみで作業が簡単
デザイナーさんとのやり取りはもちろん、クライアントとデザインを共有する際にURLを送れば、デザインの画面を見ることができるます。
そして、プラグインが増えており、自分が欲しいと思った機能を自由にダウンロードすることができ自分仕様にカスタマイズできるのがメリットです。
また、PhotoshopやIllustratorと比べるとXDファイルのデータ量は少ないので、動作が軽く立ち上げ時のストレスが少ないです。
※Adobe公式ページに飛びます
4. Googleアナリティクス/サーチコンソール
Googleアナリティクス/サーチコンソール
Googleアナリティクスは、「アクセス」「セッション」「直帰率」「離脱率」などサイトの健康状態を分析に重宝するツールです。
またGoogleサーチコンソールは、SEOやオウンドメディアを担当しているディレクターに役立つツールでして、WebサイトのSEO分析や改善に役立ちます。
Googleサーチコンソールでできることは以下です。
Googleサーチコンソールでできること
- Google検索キーワードの表示回数
- Google検索キーワードの順位の推移
- Google検索キーワードの検索順位
- サイトがインデックスされているかをチェック
記事コンテンツのリライトをする際に、Googleサーチコンソールでキーワード分析をしてコンテンツの改善をします。
-
-
【5分で完了！】ブログでGoogle Search Consoleを設定する方法【WordPress編】
続きを見る
-
-
【ブログ初心者】WordPressでGoogleアナリティクスを設定する方法
続きを見る
5. Google Chromeデベロッパーツール
Google Chromeデベロッパーツール
デベロッパーツールは、Google Chromeに搭載されている開発者用の検証ツール（デバッグツール）です。
主に開発者がHTML, CSSなどサイトのコードをその場でチェックしたり、サイトのレイアウト崩れの原因を調査するのにい重宝するツールです。
その他にもWebサイトの表示スピード、通信状況などを確認できたり、タブレット等での表示・見え方のシミュレーションが可能です。
デベロッパーツールを起動する際には、Google Chromeメニューから以下の方法で起動できます。
- Mac：「表示」→「開発/管理」→「デベロッパーツール」
- Windows：「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」
6. slack（スラック）
slack（スラック）
Slack（スラック）は、ちょっとした短いメッセージを送ったり、画像などを共有したりするオンラインコミュニケーションツールです。個人間でのメッセージのやりとりはもちろん、チャンネルを作ることでグループ間での会話ができます。
使用用途は、現場スタッフへのデザインの修正や必要な資料を共有、クライアントへの要件のヒアリングをする際に利用が可能です。
※slack公式ページに飛びます
7. バックログ（タスク管理ツール）
バックログ（タスク管理ツール）
backlog（バックログ）はプロジェクトの進捗状況やスケジュール、現状ある課題を管理するのに使用するツールです。
社内メンバーはもちろん、クライアントと案件の進捗状況やタスクを整理・管理するのに役立ちます。誰でも直感的に使いやすいUIになっていて、操作もシンプルなのでストレスなく仕事ができます。
プランは「スターター」「スタンダード」「プレミアム」「プラチナ」の４つがあり、プロジェクト数の制限や容量によって金額が変わってきます。
どのプランでも30日間お試しできますので、プロジェクトの管理やタスク漏れを無くしたいWebディイレクターには利用する価値がありますよ！
※Backlog公式ページに飛びます
8. Googleカレンダー
Googleカレンダー
クライアントやメンバーとの会議をセッティングするのに役立つのがGoogleカレンダーです。
また、Google Meetを使うことでテレビ電話ができます。テレワークで会議をやることが増えた企業さんも多いと思うので、テレビ電話のセッティングが簡単にできるのはありがたいです。
※Googleカレンダーのページに飛びます
9. diff（差分チェックツール）
diff（差分チェックツール）
diffはWeb上のテキストの差分チェックができるツールです。最新のテキストと古いテキストを比較して変更した部分がちゃんと直っているのかチェックしたい時に使えます。
例えば、クライアントから支給された原稿でどこが更新されたか不明な時がありますが、diffツールを使用することで変更箇所を洗い出すことができます。
また、バグが発生したときなんかには、修正前後のHTML、CSSのコードを比較することができ変更箇所の確認をする際に重宝します。
※diffのページに飛びます
Webディレクターに役立つツールを使って業務効率化を図ろう！：まとめ
Webディレクターに役立つツールを使って業務効率化を図ろう！：まとめ
Webディレクターが業務で役立つツールを使用することで、クライアントとのコミュニケーションがスムーズになったり、進行管理がしやすくなります。
最後に今回紹介しましたWebディレクターに役立つ必須ツールを再掲しておきます。
Webディレクターに役立つツール
- パワーポイント・エクセル
- Googleスプレッドシート
- Adobe XD（アドビ エックスディ）
- Googleアナリティクス/サーチコンソール
- Chrome（デベロッパーツール）
- slack（スラック）
- バックログ（タスク管理ツール）
- Googleカレンダー
- diff（差分チェックツール）
テレワークでの仕事が増えている中で、本記事で紹介したツールをうまく使い分けながら効率よく仕事ができたらなと感じました。
今回は以上です。
ここまで読んでいただきありがとうございました！
