初めまして！Webディレクターの山西と申します。
突然ですが、私が入社1～2年目の新人ディレクターの頃に同期や先輩からよく言われた言葉を紹介します。それは、「それ手作業でやってるの？これ使えば一発じゃん」という言葉です。そしてこの言葉と一緒に、私の知らない便利なツールを教えてくれるのでした。一方でそのツールを別の先輩に教えると、長くWebディレクターをしている方でも全く知らないツールだったりします。このようなことから、「便利なツールを知っている人はたくさんいるのに、ツールを共有する場はあまり無いんだな」とよく感じていました。
なので今回はWebディレクターの方に向けて、日々の細かいタスクが少しでも効率化される無料の便利ツールや拡張機能を10個紹介します！今回は使用頻度の高いツールを紹介しているので、熟練のディレクターの方から見たら当たり前すぎるツールばかりかもしれませんがご了承ください。属人的な作業はどうしてもミスが出てしまうので、便利なツールはどんどん使って作業時間を短縮していきましょう！
- 1.活用しないともったいない！「単語登録」
- 2.テキスト内容を一瞬で比較！「WinMerge」
- とにかく必須な画面キャプチャツール
- 5.コピーした複数リンクを一括で開いてくれる！「Pasty」
- 6.ブラウザで開いている全タブのタイトルやURLを一括取得。「GetTabInfo」
- 7.スマートフォンの画面検証に必要不可欠！QRコード生成ツール「The QR Code Extension」
- 8.ワンクリックで文法をチェック！「HTMLエラーチェッカー」
- 9.meta情報とAltのテキストを一覧で確認できる！便利なブックマークレット
- 10.ページで使われているカラーコードを知りたいときに。「ColorZilla」
- おわりに
1.活用しないともったいない！「単語登録」
どんなパソコンにも入っている機能「単語登録」。この機能、しっかり活用できていますか？
ディレクターという仕事は、お客様とのやり取りで1日に何通もメールを送ったり、デザイナーさんやコーダーさんに作業指示を出したり… 。多くの人とコミュニケーションを取らないといけない立場なので、特に文字を打つことが多い印象です。
なので、よく使う言葉は単語登録しておきましょう。 タイピング量が減って時間短縮できるだけでなく、タイピングミスによる誤字を減らすこともできます。
例えば私の場合…
「おつ」⇒「お疲れ様です。山西です。」
「よろ」⇒「よろしくお願いいたします。」
「こーで」⇒「コーディング」
「かくに」⇒「確認」
など、よく使うワードや言い回しはすぐに登録して呼び出せるようにしています。
＜単語の登録方法＞
1.タスクバーの右下にある「あ」や「A」のアイコンの上で右クリックし、「単語の登録」を選択
2.単語の登録画面が表示されたら、「単語」に変換後の正しい単語、「よみ」に呼び出したいワードを入力
3. 「登録」をクリック
※Windowsでの登録方法になります。
これで単語の登録が完了です。 単語登録は上手く使いこなすとかなりタイピング時間が短縮できるので、ぜひ使ってみてください。
2.テキスト内容を一瞬で比較！「WinMerge」
ディレクターの仕事には、エンジニアの方が修正してくれたソースコードの修正前と後の比較や、お客様からいただいた原稿とサイトに掲載されているテキストが同じかのチェックなど、「テキストを比較して確認する」というタスクがすごく多いです。
そこで役に立つのが「WinMerge」というツールです。 「WinMerge」はテキストやソースコードの比較をすることができます。全角半角、改行の違いまで拾ってくれるので、精度は非常に高いです。
使い方はまずWinMergeを立上げ、左上の「新しいドキュメント」のアイコンをクリックします。 左右のウィンドウに比較したいテキストを入力してF5キーを押すと差分比較が行われます。差分がある部分は色付きで表示されます。
他にも、左側のテキストを右側にコピーしたり、画像ファイルやディレクトリ単位での比較をしたり、Gitを使用している場合はGitのDiffツールにWinMergeを設定することも可能です。
色々な応用方法がありますので、インストールしておくと便利です。
とにかく必須な画面キャプチャツール
ディレクターが信じられないほど使う画面キャプチャツール。 修正指示を出すときや提案書を作るとき、お客様と認識を合わせるときなど、画面キャプチャを撮るタスクは非常に多いですよね。そこで画面キャプチャツールのおすすめを2つ紹介します。
3.ページ全体のキャプチャに。「FireShot」
ページ全体を一枚の画像としてキャプチャする場合は「FireShot」というChromeの拡張機能がおすすめです。FireShotには、「ページ全体をキャプチャ」「今表示している画面範囲のみキャプチャ」「選択範囲をドラッグで指定してキャプチャ」の3つのメニューがあります。使用用途に応じて使い分けるといいと思います。
4.狭い範囲のキャプチャや、キャプチャのコピーに。「Rapture」
狭い範囲の画面キャプチャや、取ったキャプチャをすぐにコピーしたい時におすすめなのが「Rapture」です。おにぎりのアイコンをしています。
「Rapture」のアイコンをクリックし、キャプチャしたい範囲をドラッグすると簡単にキャプチャを撮ることができます。さらにCtrl＋Cでキャプチャのコピーも可能です。タスクバーに固定させ、いつでも起動できるようにしておくとワンクリックでキャプチャが撮れるため非常に便利です。また、ブラウザ以外のキャプチャも取得できるため、アプリのキャプチャを撮る際にも便利です。
画面キャプチャを取得するタスクは非常に多いので、こちらの2つのツールを導入して、効率化してみてはいかがでしょうか。
5.コピーした複数リンクを一括で開いてくれる！「Pasty」
画面確認をしている際、複数のURLを一括でブラウザで開きたいという時はありませんか？ そんな時に便利なのが、「Pasty」というChromeの拡張機能です。
使い方は、開きたいURLをコピーして「Pasty」のアイコンをクリックするだけです。するとコピーしたリンクが一気にChromeで立ち上がります。リンクの量が多すぎるとブラウザが固まってしまうので、コピーするリンクは多くても10～20個程度にしましょう。
6.ブラウザで開いている全タブのタイトルやURLを一括取得。「GetTabInfo」
今ブラウザで開いているすべてのタブのURLやページタイトルが一括で取得できたら…という時、ありませんか？ URLはアドレスバーからコピーできますが、ページ数が多いと大変ですよね。
そんな時におすすめなのが「GetTabInfo」というChromeの拡張機能です。そのウィンドウで開いている全てのタブのタイトルとURLを一括取得してくれます。
インストール後、「GetTabInfo」のアイコンを押すと下記のウィンドウが立ち上がります。「Template」にコピーしたい内容のテンプレートを設定すると、「Preview」にテンプレート通りのテキスト形式ですべてのタブの情報がまとめて表示されます。この内容をコピーすることで、タイトルやURLの情報を一括取得できます。
7.スマートフォンの画面検証に必要不可欠！QRコード生成ツール「The QR Code Extension」
QRコード？何に使うの？と一見思いそうですが、スマートフォンで画面確認を行うときに使用します。スマートフォンでテスト画面のURLを1文字ずつ入力するのは大変ですよね。そこで便利なのがQRコードです。
「The QR Code Extension」は、閲覧している画面のQRコードを生成してくれるChromeの拡張機能です。アイコンをクリックするだけでQRコードが生成され表示されます。このQRコードをスマートフォンで読み込めば、URLを入力しなくても一発で画面にアクセスできるのです。
ちなみに、Chromeではこの拡張機能をインストールしなくても、QRコードを生成することができます。アドレスバーの右端にある「このページを共有」というアイコンをクリックし、「QRコードを作成」を選択するとQRコードを生成することができます。
アナログな手法と思いがちですが、実はものすごく便利なQRコード。URLを手入力している方はぜひ使ってみてください。
8.ワンクリックで文法をチェック！「HTMLエラーチェッカー」
Webサイトの制作をしている上で、画面のレイアウトが崩れているのに、調査をしても原因が分からないということを経験したことはありませんか？そんな時に多い原因は、実はHTMLの開始タグや終了タグが漏れているという文法のミスだったりします。
そんな時に役立つのが、簡単にHTMLのタグの文法チェックをしてくれるChromeの拡張機能、「HTMLエラーチェッカー」です。まずインストールをしたら、オプションの「自動チェックを有効にする」をオンにしておきましょう。
使い方は、文法チェックをしたいページを開いて「HTMLエラーチェッカー」のアイコンをクリックするだけです。チェックが終わるとチェック結果が表示されます。
チェックして問題が無い場合は「タグはおそらく完璧です」という画面が表示され、問題がある場合は「〇行目：XXXタグが閉じていません」のようなエラー文が表示されます。
どんなページでも簡単にチェックができて便利なので、インストールしておくことをおすすめします。
9.meta情報とAltのテキストを一覧で確認できる！便利なブックマークレット
「meta情報」とは、検索エンジンやブラウザに対して情報を伝えるHTMLタグのことです。meta情報を適切に設定すると、Webサイトが検索エンジンから評価されて検索にインデックスされやすくなるため、SEO対策にはとても大事な要素です。
「Alt」とは、画像の代わりとなるテキストのことです。画像が表示されない時に画像の内容を示したり、音声読み上げ機能使用時に読み上げられる内容になります。例えば「今なら〇〇ポイントプレゼント中！」と書かれたバナーがある場合、Altを正しく設定しなければ、目の見えない方にはこのキャンペーンの情報が伝わりません。アクセシビリティ向上のために、Altの設定は必要不可欠なものです。
meta情報も画像のAltも非常に大事な要素ですが、ページチェックの際に見落としがちな部分でもあります。ソースコードから画像のAlt部分をピックアップして一つずつ確認するのは大変ですよね。
そこでおすすめするのが、株式会社カンナート様のブログで紹介されている、metaタグとAltのチェック用ブックマークレットです。こちらのブログページに載っている「スマートにチェック！」というリンクをブックマークバーにドラッグすると、チェックツールをブックマークに追加できます。
このチェックツールを使用すると、ワンクリックでページ内のmeta情報と、ページ内のすべての画像のAlt・画像サイズ・画像パスが表示されます。ソースを表示することなく、meta情報と画像のAltを一覧で確認することができます。
10.ページで使われているカラーコードを知りたいときに。「ColorZilla」
画面の確認をしていて「この色のカラーコード何だろう？」と思ったり、顧客用のドキュメントを作成していて「コーポレートサイトで使用されている色が知りたい」と思うことはないでしょうか？CSSファイルやデベロッパーツールを確認すれば調べられますが、色を知りたいだけなのでそこまで手間をかけずに確認したいですよね。
そんな時に便利なのが「ColorZilla」というChromeの拡張機能です。
ページを開いて「ColorZilla」のアイコンをクリックするとマウスカーソルが十字キーになります。
色を調べたい部分に十字キーを合わせるとその部分のカラーコードが表示され、その色の上でワンクリックすると16進数のカラーコードをクリップボードにコピーすることができます。
おわりに
いかがでしたでしょうか。Webディレクターの方にとって少しでも参考になれば幸いです。
最後に私が新人の頃に先輩に言われて印象深かった言葉をお伝えします。それは「人は絶対にミスをするから、一つでも多くの仕事を機械に任せたほうがいい」という言葉です。システムを活用するということは人為的なミスが減るということだと思います。 Webディレクターはこまごまとした仕事が多いので、どんどん機械に任せて自分の作業を減らしていきましょう。
最後までお読みいただきありがとうございました。