Web制作会社でWebディレクターとして働いているaoと申します。
Webディレクターとして仕事をするうえで知っておくと便利なサービスやツールが沢山あります。
この記事では新人Webディレクターにブックマークしてほしいサービス・ツールをご紹介していきます。
Webディレクターになったばかりの方や、これからWebディレクターを目指す方は参考にして頂ければ幸いです。
また、これからWeb業界で活躍していくための準備として何から始めたらよいのか、Webディレクターの仕事内容なども別の記事でまとめておりますので良ければご覧ください。
Webサイト調査効率化
Webサイトを制作する前に、制作対象となるWebサイトの構造調査、検索順位の状況、ヒューリスティック分析等を行い、現状の把握と改善箇所の洗い出しを行います。
また、クライアントのWebサイトに限らず競合となる会社のWebサイトも分析を行うケースが多いため、全て人力で作業を行うのではなく、調査内容によってツールなどを活用することで作業の効率化を図ることができます。
Website Explorer
指定したWebサイトの階層構造を調査できるソフトです。
サイトマップを管理していない会社のWebサイトを担当するときや、コンペ案件などで受注前のためサイトマップの受領ができない場合など、階層構造を洗い出す際に人力で行うのとWebsite Explorerを利用するのでは作業時間にかなりの差が出ます。
個人的な使用感としては非常に便利である反面、大規模なサイトの場合は調査に時間がかかりすぎて途中で止まってしまったりすることもあり、万能ではないという印象もありますが、無料で利用可能なため、まず知っていて損はないツールです。
SimilarWeb
SimilarWeb(シミラーウェブ)は、ブラウザ上で調査したいWebサイトのURLを入力してボタンをクリックするだけで、トラフィックデータの概要や競合となりうる類似Webサイトなどを表示してくれるサービスが無料で利用できます。
注意すべき点としては、一定のトラフィックがあるWebサイトでなければ情報を見ることができないことと、Googleアナリティクスなどの計測ツールのようにWebサイト内にタグを埋め込んで計測しているわけではないため、あくまでも参考値となります。
有料版はさらに詳しい情報を得ることができますが、参考値としてWebサイトの傾向や競合他社の情報を把握するだけであれば無料版でも十分価値があるサービスです。
検索順位チェックツールGRC
調査対象のWebサイトが任意で設定したクエリで検索した際に、検索エンジンのGoogle/Yahoo/Bingで何位に表示されるのか調査してくれるツールです。
長期的な運用においてSEO改善をクライアントから求められる場合、定量的なデータをもとにコンテンツの改善を図る必要があるため、特定のクエリを一度設定しておけば以降は簡単に計測が可能です。
WF(ワイヤーフレーム)作成効率化
ADOBE XD
言わずと知れたADOBE XDのため、細かな説明は不要かと思いますが、従来はパワーポイントでWFを作成する機会が多かったのですが、最近はXDで作成することが増えてきました。
WFを作成するだけでなくモックアップとして実際にどのような動きをするのかデバイスでチェックすることもでき、クライアント/デザイナー/コーダーとの意思疎通が圧倒的に測りやすくなりました。
また、XD特有の機能(プラグインやリピードグリッドなど)が沢山あり作業効率が非常に高まるので、是非勉強して利用できるようになっていただくと良いかと思います。
STUDIO
こちらもモックアップ作成として利用することがあるサービスです。無料で利用可能なサービスのため、モックアップとはどんなものかを学ぶ際はこちらを触ってみてもよいかと思いますが、ADOBEアカウントを所有しているのであれば実践の場で活用する機会が多いXDを練習することをお勧めします。
STUDIOはそもそもモックアップとして利用することが目的ではなく、ソースコードを書けない人でもWebサイトを作成でき、かつ公開作業までSTUDIO上で出来てしまうことがすごい点と捉えています。
サーバ等のインフラがSTUDIOに依存してしまうため、セキュリティ要件が厳しいクライアントの案件で利用することは難しいかもしれませんが、個人規模のショップなどのWebサイトを制作・運用するのであればおすすめのサービスです。
Webサイト検証効率化
Remote TestKit
Remote TestKit(リモートテストキット)はクラウド上のスマホをレンタルし、実機検証が可能なサービスです。Webサイト制作の現場では、様々なブラウザ、OS、端末での表示検証が求められます。昔ほどではないものの未だにブラウザ依存、端末依存による表示の崩れなどが存在するためです。
制作会社であれば、大量の実機端末を所有している会社も多いかと思いますが、昨今は在宅勤務などが増えて会社に出社することが難しい場合や、他の人が端末を利用しているときに待ち時間が発生してしまうなど、検証の際に現場で感じていたモヤモヤを解消できるツールです。
デザインチェック
カラー・コントラスト・アナライザー
カラー・コントラスト・アナライザーは、色のチェックツールです。例えば、文字色と背景色の配色が多くのユーザーにとって視覚的に適切なコントラストになるかを定量的に判断することが可能です。
最近はユニバーサルデザイン(障害の有無や年齢、性別、人種などに関わらず、出来るだけたくさんの人々が利用できることを目指した製品・情報などのデザインのこと)を重視するクライアントが増えてきており、デザインにおいても視覚的に理解しやすい配色になっているか否かを示すエビデンスとしてカラー・コントラスト・アナライザーのようなツールを利用する機会が増えています。
日本工業規格の「JIS X 8341-3:2016」で決められている基準を達成しているか否かを判断してくれるため、インターフェースも分かりやすいと思います。
テキストチェック
テキスト比較ツール difff《デュフフ》
デュフフはテキストを比較して差を可視化するツールです。
ディレクターは、クライアントからの支給テキストとデザインデータ、または支給テキストとテストアップ画面でテキストに誤植が無いか校正確認を行う必要があります。
その際にすべてを目視確認することは効率が非常に悪くなってしまうだけでなく、ヒューマンエラーにつながる可能性もあります。
そこで、テキスト比較ツールを使用して機械的にテキストに誤りが無いか確認を行うことで、作業の時短+ヒューマンエラーの防止につなげることが可能になります。
操作は簡単。左右の入力項目にテキストをコピー&ペーストして「比較する」を押すだけです。
まとめ
知らないツール・サービスはあったでしょうか。
新たなツール・サービスが日々現れては消えていくため、常にアンテナを張って新しい情報を取り入れつつ、効率的な作業ができるようにしていきましょう。