企業のWeb担当者さん、あるいはWebディレクターさん向けに、
Webサイト制作や運用に便利なツールをご紹介。
目次
こんにちは！ディレクターの待島です。
今日は日々の企画設計や素材収集、打ち合わせなど実務で使用するツールについてご紹介します。
サイト調査 編
自社サイトを分析したり、他社サイトの調査をしたり。そんな時に役立つツールのご紹介です。
課題点を洗い出すにも、改善ポイントを見つけるにも、Webサイトのページ一覧表があると便利です。
一覧表をある程度自動化して作れちゃうのがこちら。
Screaming Frog SEO Spider Tool & Crawler Software
https://www.screamingfrog.co.uk/seo-spider/
パソコンにインストールして使うタイプの無料ソフトウェア（有料プランもあり）です。日本語対応していないので、最初は腰が引けるかもしれませんが、使い方は至って簡単。
URLを入力して「Start」ボタンを押すだけで、1度に500個のHTMLや画像などのURLが取得できます。
ページURLだけでなくタイトルや、Description（検索結果ページに表示される概要文のことです）、h1などの見出しタグもセットで取得します。CSVファイルとして保存できるので、ExcelやGoogleスプレッドシートなどで開いて整形すれば、すぐにページ一覧を作ることができます。
500個以上のURLが存在する場合は、手動で対応するか、有償版であれば149ポンド※（約2万数千円）で1年間使用も可能です。（無償版で多くの場合は十分だと思います）
※2019年2月現在
「Screaming Frog 使い方」などで検索すれば、使い方が紹介されたページがすぐに見つかると思います。
一覧表を作成すれば、
- ページの情報が古い
- テキストばかりでわかりにくいので図を追加したい
- 写真がないので撮影が必要
などの、改善ポイントをページごとに記入していくことができます！
続いて、競合他社などの参考サイトがどのようなレイアウトを採用しているのかを分析するツールです。
Wirify – The web as wireframes
上記のサイトを開いて、「Wirify by Volkside」のリンクをブックマーク（お気に入り）に登録します。
お使いのブラウザがGoogle ChromeやFirefoxなどの場合はリンクをクリックしたまま上部にドラッグ＆ドロップすると登録できます。
Internet Explorerの場合は、右クリックして「お気に入りに追加」で登録できます。
その他のブラウザでも、リンクのURLをコピーして、お気に入りに登録することができれば使えるはずです。
↓ 使用方法 ↓
レイアウトを分析したいウェブサイトを開いた後、お気に入りに登録したWirifyを開いてください。
すると、下記のように要素が単純化された画面が表示されます。
グレーの四角は画像が入っているところ。その他、テキストや動画なども見た目で分かるようになります。
人気サイトや競合のサイトを分析するときに、お使いください。
OneTab [Chrome拡張機能]
続いて、Google Chromeの拡張機能のおすすめです。
参考サイトを調べていると、いつの間にかものすごい数のタブを開いていることがあります。
そうなると、ブラウザ（Chrome）の動作が重くなりがちなのですが、
OneTabを使うと、メモリ使用量を95％減少できるそうで、サクサク動くようになります。
例えば打ち合わせで自分のPCを他の方に見せなくてはならない時。OneTabを使えば一気に1つにまとまり、さくっと隠すことができます。
また、1つにまとめたWebページ一覧を書き出すこともできるので、社内外に共有する時にも使えます。
Tabman Tabs Manager [Chrome拡張機能]
たくさんタブを開いていて、見たいタブが見つけられない時に重宝しています。
開いているすべてのタブのタイトルを一覧で表示してくれます。地味に便利。
らくらくURL短縮ツール たんっ！ [Chrome拡張機能]
こちらは福岡の合同会社01waveさんが開発されている「たんっ！ – らくらくURL 短縮ツール 」の Chrome拡張機能版です。本記事のいくつかのURLもこの拡張機能を使って短縮しています。
1度LINEまたはメールで短縮を行って、発行されるAPIキーを登録する必要がありますが、一度登録しておけば、次からは不要でずっと使用できます。
下記のように「閲覧中のURLを反映させる」をクリックすると、すぐ下の欄にページのURLが自動で挿入されます。
「URLを短縮する！」のボタンを押して少し待つと、完了メッセージが表示され、短縮URLがクリップボードにコピーされます。貼り付けたい場所を開いて貼り付けしましょう。
「たんっ！」がすごいのが、
Webページ内のリンクのついたテキストやボタンを右クリックしても取得できるところです！
↓ 動画スクリーンショット ↓
ほかの無料の短縮URLサービスだと、
1)サービスサイトを開いて、
2)元URLを貼り付けて、
3)短縮して、
4)短縮したURLをコピーして、
5)メールなどに貼り付けて
・・といくつものステップが必要なんですが、
これだと右クリックして「たんっ！」を選んでちょっと待つだけで完結しちゃいます。超便利。
ぜひ使ってください。
デザインチェック 編
続いて、デザインチェックに使えるツールです！
Gyazo: スクリーンショットの瞬間共有
https://gyazo.com/about?lang=ja
数年前からめちゃくちゃ使っています。最初はインストールが必要です。
Ctrl+Shift+Cを同時に押すと、スクリーンショットする範囲を指定できるので、画面内のどこでもよいのでドラッグして選択してください。ブラウザの中だけではなく、ディスプレイに映っている範囲であればどこでもスクリーンショットできます。（Mac版は、ショートカットが使えないので、DockにGyazoアイコンを置いておくと使いやすいです）
短い時間ですが、動画のスクリーンショットも撮れるので、画面やマウスのポイントの動きも一緒に撮れてわかりやすいです。
これがあれば、修正箇所を別ファイルにまとめなくても、メッセージの本文に貼り付けるだけで相互に理解ができ、デザインチェック後の修正箇所の指示出しにも重宝します。
The QR Code Extension [Chrome拡張機能]
PCで見ているページを、スマートフォンでも見たい！という時ありますね。きっとありますね。
こちらの拡張機能をインストールすると、閲覧中のWebページのURLにアクセスできるQRコードを自動で表示します。
レスポンシブサイトのチェックでいちいち画面サイズを調整するよりもスマートフォンの実機でチェックする方が効率的で、おすすめです。
Web Developer [Chrome拡張機能]
こちらはいろいろなことができる拡張機能ですが、私は下記の3つを良く利用しています。
- 閲覧しているページ内のリンクURLを一括チェックする
- altタグを一括チェックする
- アクセス数が多い画面サイズに変形して、サイトの表示を確認・調整する
こちらも英語のツールですが、ポチポチ押していくと、わかると思います。
ColorPick Eyedropper [Chrome拡張機能]
続いて、画面上の色をスポイトで抽出できる拡張機能です。
- 閲覧中のページの色をスポイトで抽出できる
- 色コードとRGB値のどちらも取得できる
- △ ベタの1色以外はうまく抽出できない
といった特徴があります。
「この色」を使ってください、という時に明確に指示ができます。
PRINT LP
https://2843.jp/tools/print-lp/
こちらは岡山のニイハチヨンサンさんで開発されたツールです。
Webサイトのデザインって、紙に印刷するとすっごく小さくなってしまいますよね。
特にスマートフォンサイトのデザインだと、縦にずーーーっと長い画像になり、印刷しても読めないことがあります。
画像を分割して印刷する手段もなくはないですが、概ねとっても手間です。
そんな時、PRINT LPがあれば解決できます。
- 自動分割してレイアウトして印刷用に最適化
- 画像の間に余白を設けることで修正指示を書き込むスペースを確保
- 画像を分割する列（カラム）の数を指定できる
- 罫線をワンタッチで挿入できるので、ページデザインの余白が白でもわかりやすい
デザインチェックや、ヒートマップ分析など、ExcelやIllustratorなどで分割している・・という方は、絶対に楽になりますので一度使ってみてください！
プロジェクト管理 編
Backlog（バックログ）
- 通知機能のあるスマホアプリがあり、外出中でも一時返信が即対応できる
- 社内のやり取りを集約することで細かいタスクの見落としを削減
- 課題ごとに担当者を設定できるので、誰がどこで詰まっているのかが一目瞭然
私のBacklog愛についてはこのあたりを見てみてください笑（個人ブログです）。
- 通知と課題と愛憎のメイル – wattlaa – g.o.a.t
https://wattlaa.goat.me/dNCcXxWWtO - JBUG 札幌#2でお話してきました – wattlaa – g.o.a.t
https://wattlaa.goat.me/cAZGZi6yFW
インターネット会議 編
このあたりを使っています。
ハングアウトは2020年以降に別サービスに移行との噂ですね。いずれのサービスも当然ですが、
回線の速度が安定していないと、途切れたりビデオ画像が止まったりしてしまいます。
お客様との打ち合わせの時は、可能な限り有線ケーブルを準備するようにしています。
Zoomはまだちゃんと使ったことがないので近々使ってみます。
リリース前チェック 編
リンクチェッカー(リンク切れチェックツール) dead-link-checker.com
https://www.dead-link-checker.com/ja/
こちらは昔ながらのツールかと思いますが、今でも使えます。
Webサイトのリンク切れがないかチェックするのに便利です。
削除されたなどで存在しないURLのリンクが残っているページを洗い出してくれます。
公開前でパスワードがかかった状態だと使えないのと、ページ数が多いと完了するまでに数時間かかること、
電話番号リンクが問題ないのにエラー表記になることがあるのがちょっとマイナスポイントです。
テキスト比較ツール difff《ﾃﾞｭﾌﾌ》
こちらは、原稿テキストをコピーして、リリース前ページのテキストと比較して誤りがないかチェックするのに使っています。
終盤で原稿が差し替わることもままありますので、いかに見落とさないかという意味で、手動・目視でのチェックだけではなく、こういったツールを使うと安心です。
まとめ
ということで、ご紹介してきたのですが、「それよりもっと良いツールがあるよ！」という場合はぜひ教えてください。
私自身も良いものがあればアップデートしたいと思います！
ツールの一つひとつを使えるかどうか検証するのはとても面倒だと思いますので、
上記のシーンごとに使えるかな？と思った時に入れてみることをおすすめします。
使い方がわからない場合は、私かGear8メンバーにお聞きください。
＊SNSなどで繋がっている方は直接ご連絡いただいても大丈夫です。
次回は、Webディレクションの日々の作業を効率化する時短ワザについて書きたいと思います！
ではまた。
Gear8では札幌本社を拠点に、
国内やアジア圏で活躍するWebディレクターを募集しています。
北海道に戻りたい、札幌で働きたいという方が身近にいらっしゃいましたらお気軽にご連絡ください。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
ディレクターの具体的な仕事内容は、ウェブサイト制作に必要な要素の洗い出しや業務の全体像を見ながらの進行役。時にはブランディングや商品開発にまで深く関わりながら自ら手を動かして幅広く挑戦し、クライアントと長期的に信頼関係を築けるよう持てる力を思い切り注ぐことが求められます。
国内外どの拠点をメインに働いていても、将来的にはアジアの各拠点を行き来しながらスキルを磨くチャンスがあります。
【仕事内容】
■クライアントのヒアリング・要件定義
■ウェブサイト制作に関わるディレクション全般
■必要に応じて紙媒体やCI等も含むデザインワーク
【必須経験・スキル】
■ウェブディレクション実務経験3年以上
【歓迎経験・スキル】
■Photoshop/Illustratorを用いてのデザイン実務経験
■英語力及びアジア圏言語の語学力
