Web制作会社の中でもWebディレクターの仕事内容は多岐にわたり、複数のプロジェクトを同時進行することが多くあります。そのため、Webディレクターは時間や納期に追われることが多いのではないでしょうか。
今回は、そんなWebディレクターの業務を効率化するツールを紹介します。
下記の6つの作業分類にわけておすすめの業務効率化ツールを紹介します！
- 調査業務の効率化
- ワイヤーフレーム作成業務の効率化
- タスク管理の効率化
- 作業指示の効率化
- 確認作業の効率化
- 日常業務の効率化
Webディレクターの調査業務の効率化
Webディレクターは、クライアントへの提案前に現在のWebサイトの状況や競合サイトの状況、キーワードの検索需要などを事前に調査する必要があります。
このようなWebディレクターの調査業務を効率化するツールを6つ紹介します！
- Wappalyzer
- Similarweb
- Wayback Machine
- aguse
- Ubersuggest
- ラッコキーワード
Webページで使われている技術などがわかる「Wappalyzer」
Wappalyzerは、Webページで使われている技術やフレームワーク、サービスを一覧で表示してくれるChrome拡張機能です。
調査したいWebページにアクセスして、拡張機能のアイコンをクリックすると下記のような画面が表示されます。
例えば、Webサイトリニューアルの相談があった場合に、現在どのCMSを使用しているか、Google Analyticsは導入されているかなどを事前に把握することが可能です。
Webサイトのアクセス状況の推計値がわかる「Similarｗeb」
Similarwebは、Webサイトの分析に利用できるツールです。Chromeの拡張機能を追加することで、ワンクリックで分析が行えます。
調査したいWebサイトにアクセスして、拡張機能アイコンをクリックすると下記のような画面が表示されます。
あくまで推計値ではありますが、下記のようなデータを閲覧することが可能です。
- 訪問者数
- 直帰率
- 平均ページビュー
- 平均滞在時間
- 流入元ソース
Webサイトリニューアルの相談を受けるときに、Google Analyticsのデータを開示いただけない場合に、Similarwebの推計値を参考にしたり、競合サイトの調査を行うときに活用できます。
過去の時点のWebページのアーカイブを閲覧できる「Wayback Machine」
Wayback Machineは、非営利団体のInternet Archiveによって保存された、過去のWebページを閲覧できるツールです。
Wayback Machineのサイトにアクセスして、URLを入力すると下記のような画面が表示されます。
アーカイブされている日付がカレンダーに丸印で表示されるので、ここをクリックするとその時点のWebページを閲覧することができます。
例えば、参考にしていたWebサイトやWebページが削除されて見れなくなってしまったという時に便利です。
また、その会社がどのくらいの頻度でWebサイトをリニューアルしているかを把握したいときの調査にも活用できます。
Webサイトで使用しているサーバーがわかる「aguse」
aguseは、WebサイトのURLから関連する情報を表示するサービスで、下記のような情報を確認することができます。
- サーバーのIPアドレス
- サーバーのホスト名
- 検出されたマルウェア
- サーバーの位置情報
aguseのWebサイトにアクセスしてURLを入力し、「調べる」ボタンを押すと調査結果が表示されます。
例えば、Webサイトのリニューアルを新規で依頼される場合、CMSの導入などを検討するときに「どのサーバーを使用しているか」という情報が重要です。
しかし、お客様はどのサーバーを使っているかわからない場合があります。
そういった時に、このツールを活用することで使用しているサーバーを把握することができます。
Webサイトへの流入キーワードがわかる「Ubersuggest」
Ubersuggestは、キーワード調査やサイト調査、被リンク調査などが行えるSEOツールです。
URLを入力するだけで、下記のような調査結果が表示されます。
スクロールすると、そのWebサイトで上位表示されているキーワード、検索ボリューム、検索順位、流入見込みを確認できます。
Ubersuggestは無料で使用できますが、1日の使用回数に制限があります。
あくまで推計値ですが、Googleサーチコンソールの権限をいただかないと確認できない流入キーワードを確認できるため、とても便利です。
サイトリニューアルの提案時や競合サイトの調査を行う時に活躍します。
サジェストキーワードを調査できる「ラッコキーワード」
ラッコキーワードは、Googleのサジェストキーワードを調査できるツールです。
例えば、Web制作というキーワードでサジェストキーワードを調査すると下記のような画面が表示されます。
こういったサジェストキーワードは、ブログ記事の参考にしたり、ユーザーのニーズを把握したいときなどに役立ちます。
Webディレクターのワイヤーフレーム作成業務の効率化
Webディレクターは、お客様のご要望や立案したWeb戦略にもとづいてWebサイトのワイヤーフレームを作成する必要があります。
ワイヤーフレームの作成業務を効率化するためのツールを紹介します！
- Adobe XDのワイヤーフレームテンプレート
- O-DAN
車輪の再発明をなくすための「Adobe XD ワイヤーフレームテンプレート」
Adobe XDは、Webサイト制作やアプリ制作に適したデザインツールです。
このAdobe XDを使用すると、ワイヤーフレームを楽に作成することができます。
しかし、毎回0から作成するとどうしても時間がかかってしまいます。
そんな手間を削減するためには、ワイヤーフレームのテンプレートを活用するのが良いでしょう。
自社独自のテンプレートを作成するのも良いですが、配布されているものを活用する方法もあります。
ウェブ制作会社の株式会社ベイジさんが「BtoBサイトの標準ワイヤーフレーム」のXD版を無料配布しており、こちらのテンプレートがおすすめです。
それぞれのページについてどのように設計していくか、下記の配布ページで詳しく解説されています。
また、最近ではAdobe XDからFigmaに移行している方も多いかもしれません。
株式会社caroaさんが「BtoBサイトの標準ワイヤーフレーム」のFigma版の配布を行っているので、こちらを使用しましょう。（株式会社ベイジさんに許可をいただいてFigma版を作成したと記載されていました。）
フリー画像素材をまとめて検索できる「O-DAN」
ワイヤーフレームに仮の画像を掲載したい場合は、フリー画像素材を使用するのが良いでしょう。
そういったときには、40以上の画像素材サイトを横断検索できる「O-DAN」というサービスが便利です。
当ブログでは、他にもおすすめの画像素材サイトを紹介していますので、こちらも合わせてご確認ください。
Webディレクターのタスク管理の効率化
Webディレクターは、複数のプロジェクトを同時に進行させ、クライアント、デザイナー、コーダーなど多くの関係者とやり取りをしなければなりません。円滑にディレクションを進めるためには、それぞれのタスクを管理することが重要です。
Webディレクターのタスク管理を効率化するためのツールを紹介します！
- Microsoft Planner
- 依頼管理ツール「トコトン」
かんばん方式で直感的にタスク管理できる「Microsoft Planner」
Microsoft Plannerは、クラウド型のタスク管理ツールで、かんばん方式でタスク管理ができるのが特徴です。
誰がいつまでに行うべきタスクなのか、そのタスクの進捗状況はどうなのかを把握することができます。
Teamsのチームチャンネルのタブに追加することができるため、Microsoft 365を契約していてTeamsを使っている方におすすめです。
Microsoft 365に契約していない場合や、Teamsを使用していない場合は、Trelloというツールで代用することができます。
Webサイトの更新依頼管理を効率化する 依頼管理ツール「トコトン」
依頼管理ツール「トコトン」は、弊社が開発・提供を行っている、Webサイトの更新依頼管理を効率化するためのツールです。
お客様からメールやチャット、電話でWebサイトの更新内容を受け付けると、情報の伝達ミスが発生したり該当の依頼を探すのに時間がかかったりと非効率な対応となってしまいます。
依頼管理ツール「トコトン」からお客様からの依頼を受け付けることで、依頼を一元管理することができ、業務効率化につながります。
また、作業指示に応じてポイントを消費していく仕組みを提供しているのも特徴的です。
Webサイト保守／運用に効果的！制作業務の「ポイント課金制」とは？
無料デモ体験やスタッフによるオンライン説明も実施中です。詳しくは下記からご確認ください。
Webディレクターの作業指示の効率化
Webディレクターは、日々、デザイナーやコーダーに作業指示や修正指示を行っています。
口頭やテキストで指示を行うと、内容を理解するのに時間がかかったり、間違った理解をされてしまう可能性があります。
そういったことを防ぎ、指示内容を的確にかつ効率的に伝えるためのツールを紹介します！
- AUN
- Dropbox Capture
- スクリーンショットのショートカットキー
ふせん紙の感覚でサイトや画像にメモを貼り共有できる修正指示ツール「AUN」
修正指示ツール「AUN」では、WebサイトのURLからスクリーンショットを撮影し、そこにコメントや作業指示をつけたURLを発行することができます。
プロジェクトを進行していくなかで、修正指示のやりとりをするときに便利です。
こういった指示書をExcelなどで作成するのには、どうしても時間がかかってしまいます。
弊社が行った調査では、Excelで3分かかる指示書の作成がAUNでは30秒で作成することができました。
また先ほど紹介した、依頼管理ツール「トコトン」上からもAUNを利用できます。
トコトン上からAUNを使用した場合は、プレミアム11プランと同等の機能を利用可能です。
画面録画や音声録音をして共有できる「Dropbox Capture」
Dropbox Captureは、デスクトップのスクリーンショットや画面の録画を、Dropboxに保存して共有できるツールです。
画面の録画機能では、カメラで動画を撮りながら操作画面を収録することもできます。
静止画では伝えられてない作業指示がある場合に力を発揮します。
他にもお客様向けのCMS操作マニュアルなどを動画で作成するときにも便利です。
スクリーンショットのショートカットキー
チャットなどで簡易的に修正箇所を伝えたいときには、ショートカットキーを使用するのが便利で早いです。
Windowsでは、「［Windows］+［Shift］+［S］」を使うと範囲選択をしてスクリーンショットを撮影できます。撮影後には、「[Ctrl] + [C]」でチャットに貼りつければすぐに送信できます。
Macでは、「[Command] + [Shift] + [Ctrl] + [4]」で同様のことを行えます。
Webディレクターの確認作業の効率化
Webディレクターは、テストアップされたWebページを日々確認しています。
こういったテスト確認作業は、人力で行うと非常に手間がかかってしまいます。
そんなWebディレクターの確認作業を効率化するツールを紹介します！
- WinMerge
- difff
- OGPタグ確認ブックマークレット
- OGP画像シミュレータ
- Alt Meta viewer
- Responsive Viewer
2つのテキストの差分を表示する「WinMerge」
WinMergeは、Windows用の比較・マージツールで、PCにインストールすることで使用できます。
下記のようにコピペでゼロから新規ページに入力して、差分を比較したり、ファイルの差分を比較したりすることができます。
例えば、コーディング時に流し込まれたテキストと原稿の内容が一致しているかを確認するときに便利です。
Webブラウザで利用できるテキスト比較ツール「difff」
difffは、WinMergeのように2つのテキストを比較できるツールですが、WinMergeとは異なり、Webブラウザで利用することができます。
左右に文章をコピペし「比較する」ボタンを押すと、差分に色がついて表示されます。
ブックマークバーからワンクリックでOGP確認できる「OGPタグ確認ブックマークレット」
ブックマークレットとは、Webブラウザのブックマークから何らかの処理を行うプログラムを起動できるものです。
OGPタグ確認ブックマークレットは、株式会社シナップさんがブログで公開しているブックマークレットで、OGPタグの確認をすることができます。
該当のWebページにアクセスして、登録したブックマークをクリックすると下記のようにOGPタグの情報が表示されます
複数のOGP画像サイズをシミュレーションできる「OGP画像シミュレータ」
OGP画像は、シェアされるSNSやOGP設定によって表示される画像サイズが異なります。
OGP画像シミュレータは、そのように異なるサイズでOGP画像を確認するためのツールです。
画像をアップロードすると、下記のように様々なサイズでOGP画像を確認することができ、実際にSNSでシェアされたときのイメージを深めることができます。
Webページ内の画像のAltタグを確認できる「Alt & Meta viewer」
Alt & Meta viewerは、Webページ内に設置されている画像のAltタグとWebページのMeta情報（タイトル、ディスクリプション、OGP）などをチェックするのに便利なChrome拡張機能です。
特に便利なのが、Altタグをチェックできる機能です。
該当のWebページで拡張機能アイコンをクリックし「画像のAlt表示」を選択すると、下記のように各画像上にAltに記載しているテキストと画像サイズが表示されるため、一気に確認することが可能です。
Alt & Meta viewerは、下記から拡張機能に追加できます。
Webサイトを複数のデバイスサイズで一括確認できる「Responsive Viewer」
Responsive Viewerは、様々なデバイスサイズでWebサイトを確認できるChrome拡張機能です。
複数サイズのデバイスを一つの画面で一括で確認できるのが特徴です。
確認するデバイスサイズが事前に決まっている場合は、新しいタブを作成して、該当デバイスを登録しておくことで、画面サイズを切り替えて確認するという手間が無くなります。
Webディレクターの日常業務の効率化
最後にWebディレクターの日々の業務全般を効率化するためのツールを紹介します。
- ユーザー辞書ツール
- Pasty
- Copy Selected Links
- GetTabInfo
- OneTab
- crxMouse Chrome™ Gestures
テキスト入力を時短できる「ユーザー辞書ツール」
Webディレクターは、社内外問わずメールやチャットで多くの人と高頻度にやり取りをします。
1日の中で、タイピングしてテキストを入力する時間も軽視できません。
ユーザー辞書機能を活用すると、タイピングが必要な量を少なくすることができて時短につながります。
例えば、下記のような定型文を登録します。
| 読み | 語句 |
|---|---|
| ごかあり | ご確認いただきありがとうございます |
| おてごか | お手数をおかけしますが、ご確認よろしくお願いいたします |
| いつおせ | いつもお世話になっております。株式会社◯◯の△△です。 |
他にも、メールアドレスや住所なども登録しておくと便利です。
Windowsでは、画面右下の「あ」や「A」などと表示されている箇所で右クリックをして、「単語の追加」を選択すると登録することができます。
Macの場合は、メニューバーの「あ」「A」などの入力変換アイコンをクリックして、「”キーボード”環境設定を開く」を選択して、ユーザー辞書をという箇所から登録することができます。
コピーした複数のURLを一括で開ける「Pasty」
Pastyは、コピーした複数URLをブラウザで一気に開くことのできるChrome拡張機能です。
例えば、下記のようにExcelでURLをまとめており、全てのページを確認したい場合があるとします。
この時、通常の方法では、一つ一つのURLをコピーしてアドレスバーに入力するか、Excelからリンクを一つ一つクリックしてページに飛ぶ必要があります。
数ページであれば、その方法でも問題ありませんが、20ページや30ページの場合は、とても時間がかかり非効率です。
拡張機能のPastyを使用すれば、エクセルのURLのセルをコピーして、拡張機能アイコンを1クリックするだけで、コピーしたURLを一括で開くことが可能です。
Pastyは、下記から拡張機能に追加できます。
選択範囲内のリンクURLを一括コピーできる「Copy Selected Links」
Copy Selected Linksは、ドラッグで選択した範囲内にあるリンクのURLを一括コピーできるようにするChrome拡張機能です。
テキストリンクやバナーなどリンク先URLをコピーしたい対象を選択して、右クリックし「Copy selected links」をクリックするとURLが一括でコピーできます。
先ほど紹介した、「Pasty」と組み合わせるとコピーしたリンクURLを一気にタブで開くことができてより便利です。
開いているタブのタイトルとURLを一括取得できる「GetTabInfo」
GetTabInfoは、開いているタブのタイトルとURLを一括で取得して加工できるChrome拡張機能です。
下記のように「Header」「Template」「Footer」を入力することができ、「Header」に入力したテキストは、Previewの一番上に、「Footer」に入力したテキストは、一番下に表示されます。
「Template」では、「%%TITLE%%」や「%%URL%%」などのタグを使って入力することができ、タブで開いているページのタイトルとURLが「Template」で指定した形式で、「Preview」に繰り返し入力されます。
例えば、テストアップしてお客様に確認いただきたい、タイトルとURLを一括でコピーして共有するという時に便利です。
増えすぎたタブを整理できる「OneTab」
調べごとをしていたら気付かないうちに、タブが増えすぎてとんでもないことに…でも後で見返したい…
OneTabは、増えすぎたタブを整理できる拡張機能です。
複数のタブを開いているChromeウインドウで、OneTabの拡張機能アイコンをクリックすると、開いていたタブが閉じ、下記のような画面が立ち上がります。
この画面で「すべて復元する」をクリックするとタブが開いた元の状態に戻ります。
また、タブのリストに名前を付けて保存することも可能です。
Chromeでタブをたくさん開いた状態にすると、メモリ使用量が増えてしまい、PCの動作が遅くなることがあります。
そういったことを防げるという面でも、OneTabは業務効率化に便利な拡張機能です。
OneTabは、下記から拡張機能に追加できます。
Webページ上でマウスジェスチャーが使える「crxMouse Chrome™ Gestures」
crxMouse Chrome™ Gesturesは、Webページ上でマウスジェスチャーを使えるようにするための拡張機能です。
マウスの右ボタンを押したままドラッグすることで様々な機能を実行できることができます。
例えば、右ボタンを押したまま「→」「↑」のようにドラッグすると、ページトップまでスクロールするなどです。
自分の使いやすように、マウス操作を設定し機能を割り当てることも可能です。
他にも「スーパードラッグ」という機能を活用すると、例えば、テキストを選択した状態で、左ボタンを押したまま「→」にドラッグするとGoogleでそのテキストを検索することもできます。
この機能もカスタマイズ可能で、GoogleではなくAmazonで検索するように設定することも可能です。
操作を覚えるまでに時間はかかりますが、覚えてからは作業スピードが格段にあがります。
まとめ
Webディレクターの業務を効率化するためには、作業内容にあったツールを導入することが近道です。
また、ツール導入だけではなく、「自動化できる工程はないか」「車輪の再発明をしようとしていないか」「日々の業務で効率化できることはないか」などのマインドを常に持っておくことも重要です。
業務効率化をするためのマインドについては、こちらの記事にまとめていますので合わせてご確認ください。
