本記事は
Design Week 2023
7日目の記事です。
🌈
6日目
▶▶ 本記事 ▶▶
8日目
💐
はじめまして。Webディレクターの三田と申します。
主にサイト運用やエンハンス業務を行っており、リニューアル案件や改修の提案なども行っています。
ネットコム入社当時はSE職として開発などを行っていましたが、3年目でWebディレクターへ転向し、今年でWebディレクター歴9年目となります。
お客様やユーザーにとって便利で使いやすいサイトにするための情報設計はもちろん、制作においても効率よく品質の高いものを作ることをモットーにして日々奮闘しています。
運用におけるディレクターのチェックについて
運用担当のディレクターのみなさんは、コーダーさんから上がってきたモックや静的ページをブラウザで確認をする際、どんなツールを使っていますか？
運用ではパターン違いで似たようなLPを作ったり、同じページに更新をかけたりすることが多いと思います。
いくらチェックシートを用いていてもやはり目検での確認には限界があり、チェックする人によって品質に差が出てしまっては意味がありませんよね。
運用という 繰り返し同じチェックが必要な作業 があるならば、なるべく機械的で確実かつ手早くチェックできる手段を選びましょう。
目検が多いと感じてる方、いろんなツールを使っているけどなんだか手間がかかってると感じている方、おすすめのツールがありますよ。
今回はブラウザ確認で便利なChromeのアドオンとその使い方を紹介したいと思います。
便利なアドオンとその使い方
Web Developer
画面上で画像やリンクテキストのすぐそばにaltやリンク先URLなどが表示され、設定した内容を視覚的に確認できる便利なツールです。
ソースを開かなくても確認できるのでとても便利です。
このアドオンはディレクターならば絶対使っているといっても過言ではありませんが、こんな使い方はご存知でしょうか。
- informationタブ ＞ Display Links Details ⇒ 設定したリンクを可視化する
- imagesタブ ＞ Display Alt Attributes ⇒ 設定したaltを可視化する
- imagesタブ ＞ Display Image Dimensions ⇒ 画像のwidth、heightの値を可視化する
リンクURLにはパラメータを付与している場合や、別ウィンドウで開く設定をしている場合もあるかと思いますが、そういった場合もひと目で確認できますよ。
フォームのある画面検証をする場合はこんな機能も使えます。
- formタブ ＞ Check All Checkboxes ⇒ チェックボックスを全てチェック状態にする
- formタブ ＞ Uncheck All Checkboxes ⇒ チェックボックスの値を全てクリアする
- formタブ ＞ Clear Radio Buttons ⇒ 入力済みのラジオボタンの値を全てクリアする
- formタブ ＞ Clear Form Fields ⇒ 入力済みのフォーム内の値を全てクリアする
- formタブ ＞ Display Passwords ⇒ パスワード入力欄が非表示設定のものを表示設定にかえて表示する
地味ではありますが、ラジオボタンのクリアは助かるのではないでしょうか。。
注意したい点としては、チェックボックスのON／OFF時にJSが動くように作り込んでいる場合、JSは作動しません。
つまり画面上で入力状態がONかOFFに表示だけが切り替わるということですね。
このツールで可視化した状態でブラウザ上の検索機能も使えるので、正しいテキストで検索する、なんてこともできます。
修正依頼する時は、画像やリンクテキストとセットになっているのでキャプチャも撮りやすいですよ。
たくさんの機能があって何がどんなツールなのか迷うツールでもありますが、まずは上記機能から使っていってみてくださいね。
Check My Links
この画面でリンク切れが起きている箇所はあるか？をさっと探せるツールです。
アドオンのアイコンをクリックすると画面内のリンクのチェックが開始し、画面上でリンク疎通OKならば緑色、リンク切れならば赤色で塗りつぶされ、画面右上の一覧表に計上されます。
ハンバーガーメニュー内など初期表示で隠れているパーツ内もチェックしてくれるので、あちこち開かなくてもチェックできます。
ワンクリックでリンク切れの有無を手っ取り早く判断できるのでとてもおすすめです。
ちなみに、リンク切れがあった時に一覧表からその場所に飛んでくれればもっと便利なのですが、それはできないので画面上で赤くなってるところをくまなく探す必要があります。
HTML差分チェックツール
画面と画面を比較してHTMLの差分がどこにあるか一発で確認できるツールです。
アドオンのアイコンをクリックし、比較したい画面をクリックするだけで差分画面が表示されます。
例えば、ローカル環境と本番環境の同じページを比較し、必要な箇所を更新できているかを確認する用途や、テスト環境と本番環境を比較することでテスト環境にアップしたファイルが正しくリリースされているかを確認できます。
このツールを使えば、
①比較ツールを立ち上げて
②比較したい画面を表示して
③それぞれのソースを表示して
④ツールに貼り付けて
⑤比較ボタンをクリック
という工程を全てなくしてくれますよ。
また、「ドメイン名の組み合わせ設定」にURLを設定しておくと、自動で比較先を検知して差分を取ってくれます。
書き方も「https://www.nri-net.com,http://localhost:10xx」のように、テスト環境とローカル環境、テスト環境と本番環境、といった比較したい組み合わせで並べて記載するだけなので簡単です。
リリース時の確認も機械的に実施できるので、静的サイトを運用している方には特におすすめですよ。
文章校正と表記ゆれチェックツール
画面内のテキストをチェックして、表記ゆれの有無を挙げてくれるツールです。
アドオンのアイコンをクリックするだけで表記ゆれのリストが表示されます。
画面内の表記を統一したいという基本の使い方はもちろん、運用担当の方におすすめしたい使い道は、会社名やサービス名などの絶対に間違ってはいけない言葉をチェックする用途です。
スペースの有無や半角・全角、日本語表記か英語表記かといったような目視では見落としがちな言葉もチェックできます。
表記はプリセットで260語程度初期登録されていますが、全てカスタマイズで登録することもできます。
カスタマイズの方法は、正しい表記と誤りがちな表記を羅列して正誤表のファイルを読み込ませます。登録はタブ区切りのフラットファイルで登録する形になりますので、ややこしくなってきたら一度エクセル等に記載してからテキストファイルに戻すと作りやすいですよ。
正規表現を使うこともできるので細かい設定も可能です。作ってしまえばあとはワンクリックでチェックできるので、間違えられない名称の確認をしている方はぜひ使ってみてください。
また、作成した正誤表のファイルをチーム内に展開すれば同じ条件でチェックできるので業務効率もアップしますよ。
読み込みだけなら手間もかかりませんし、もし別のプロジェクトに参画することになって表記ルールが変わった場合でも正誤表を差し替えるだけなのでそういった面でも便利です。
とある企業のサイト運用の中で毎月キャンペーンLPを作成していたことがあるのですが、そのサイトの表記ルールが記憶しきれないほど膨大にありました。
なかでも特に苦戦したのは、記号でも英語表記でも記載できるサービス名のチェックでした。
目検では判断できず一つ一つ比較ツールに貼り付けては正しい表記になっているか確認する方法しかとれず、機械的に探すことが困難でした。
このツールを導入してからは自動で判断してくれるので、一つ一つ確認する手間も見落としもなくなり、作業効率がぐっとあがりました。
あまり複雑な設定をすると正しい表記なのに誤りとして上げられてしまう欠点もありますが、そんな時はスルーするパターンを決めたりそこだけ目検で確認するようにすれば良いので、ぜひ使ってみてください。
その他の便利なアドオンについて
下記もぜひ使ってほしい便利なツールですが、こちらのツールの使い方やその他便利なアプリは、山西さんの記事で紹介されていますので、こちらも併せてチェックしてくださいね。
山西さんの記事はこちらからチェック！ ⇒ Webディレクター必見！地道な作業を効率化するおすすめ無料ツール10選 - NRIネットコムBlog
chrome.google.com chrome.google.com
番外編（力技）
アドオンではないので余談ですが。。
かつて参画したプロジェクトで、「デザインとモックを完全一致させないといけない」というミッションがありました。
完全一致というのは、要素の順番や配置・サイズ・テキストの改行位置を一致させるのは当然として、デザインで設定されているすべての余白をモックで1px違わず完全に再現しなければならないというものでした。
余白は基本的にそれぞれの要素にCSSでmarginやpaddingで設定しますが、その際他の要素の余白と被ってちょっとだけ増減したり、画像自体に余分な余白エリアがあって数ピクセルずれることはよくあると思います。それを加味して最初から完全一致させるのは難しく、その確認も簡単ではありません。
この問題をどういった方法で確認することができるかチーム内で考えた結果、
①XDやPhotoshopなどで作成したデザインファイルをそのツール上で開き
②そこにフルスクリーンキャプチャしたモックをそのまま貼り付けて
③キャプチャの透過率を上げて（50％くらい）
③出来上がったキャプチャをデザインの上に重ねて透かしながら目視確認する
という手段を取りました。
とても原始的な方法ですが、どの手段よりも早く正確に確認できたと思います。
（その時のコーダーさんへの修正指示書は、モックのキャプチャを紙に印刷して、手書きでここ1px減らして、とか書いてました。スピード重視だったので何よりも手書きが早く、再確認するときもその紙と照らして確認するのが早かったのです。）
どうしても一致させないといけない状況になった時はこんなやり方もあるので参考にしてみてください。
ただし、あくまでも目検なのでとても目が疲れます。こんなチェックをすることにならないように事を運ぶことが一番大事です。。
おわりに
ご存知のツールや普段使っているツールもあったのではないかと思いますが、知らなかった！これ使ってみようかな？というツールが一つでもあれば幸いです。
定常的な運用作業は、なるべく手間をかけず、効率的に、確実に実施することで品質を高く保ち、サイト内のコンテンツをより一層充実させたり集客率を上げたりするような、お客様にもユーザーにも喜んでもらえる取り組みに時間を使いたいものです。
地道に手作業でチェックしている部分でも、ツールを使うことで楽にできることもあるので積極的に活用していきましょう。
また、「運用」とひとくちに言っても、その手順やルール、使用しているツールはサイトや運用担当者によって意外とまちまちなことも多く、中にはちょっと便利なツールを使ったり、少しやり方を変えるだけで劇的に作業を効率化できたりする場合もあります。
運用担当の方は、もっと作業が楽になる方法はないかという目線でツールや手順を模索したり、他のサイト運用を行っている担当者と運用について会話して情報を集めたりしていくと、もっと作業を楽にできる方法が見つかるかもしれません。
今までのやり方にとらわれずに様々な方法を試しながら、運用作業を楽にする方法を探していきましょう！