BLOG
活用事例
2023.08.10

ソースコードチェックツールならhtml/css一括構文エラーチェッカーZig-zag

どうもこんにちは。EgoDiva Zig-zag事業部の中澤です。

今回は「ソースコードのチェック」に関するご案内です。
本記事では、下記のような方に役立つ内容となっております。
  • ・ページごとのHTML/CSSソースコードチェックにうんざりしている方
  • ・日頃WEBサイトのソースコードチェックに目を凝らして疲弊気味の方
  • ・社内のコーディングルールを策定したいと考える経営者やマネージャー
  • ・W3Cの基準に準拠するWEBサイト制作を求められているWEB制作現場の方

高まるクラウド環境でのソースコードチェックニーズ

近年の世情を反映して、WEB制作会社やWEBコンサル会社のスタッフもリモートで働く比率が急増しました。従来、スタッフがオフィスの一角に集まって、顔を突き合わせながら行っていたWEBサイトの検証業務さえも、在宅やシェアオフィスで対応するというケースもちらほら。

このような流れから、WEBサイトの検証業務も、クラウド環境で行い、「どこにいてもあらゆる検証ができる」「遠距離で働くスタッフ間できちんと検証結果を共有できる」そんな環境づくりに対するニーズが高まりました。

SlackやChatworkを開いてスタッフ間でコミュニケーションを取るように、WEBツールを開いてWEBサイトを分析・検証し、スタッフ間で即時結果を共有。スピーディーに次の具体的な改善アクションへと繋げていく。そんな高速PDCAをぶんまわす環境を実現する、それがWEBサイトの自動検証ツール「Zig-zag」です。

こんな企業にフィットします

Zig-zagはこんなニーズにも応えられるソースコードチェックツールです。
  • ・社内にある属人的な暗黙のコーディングルールを今一度整理し見直したい、
  • ・新人コーダーのトレーニング用ソースコードチェックツールが欲しい
  • ・自社の納品物としてのWEBサイトの水準を担保したい
ページごとにURLをコピペして地道な検証作業をしていた現場のご担当者様には大変喜びのお声を頂いています。また、SEOコンサル会社様からも、「SEO対策をやり切ったクライアントの次なる手立てとして、ソースを綺麗にすることで、Googleからのクロールの質と深さを向上できる」との声も頂いています。

このように、作業効率化、SEO対策、品質向上など、多くのメリットをもつWEBサイトのソースコードチェック。そんなツールの選択肢として、ぜひ簡単便利なZig-zagをお試しください。

Zig-zagならワンタッチ

WEB検証作業に便利なツールが「Zig-zag」です。
このツールでは、なんとソースコードチェックと同時に、下記の多角的なWEB検証が可能です。

Zig-zagによる実際の検証方法

しかも作業は「サイトのTOPページのURL入力のみ」と簡単です。
次に検証範囲と検証項目を選び、検証ボタンを押せばOK。 10数ページのサイトなら数分、100ページほどなら数十分、
1000ページなら数時間で検証は完了します。
検証結果はネット環境とPC端末があればいつでもどこからでも確認可能。
リモート環境にある制作チームでも抽出した要改善箇所を簡単に共有できます。

サイトクローリング機能で無駄のない検証を

Zig-zagには便利なサイトクローリング機能が備わっています。
例えば、お客様のWEBサイトのリニューアル提案をする際に「まずは現状のサイト構造とボリュームを把握したい」そんな時に効果的に使用できる機能です。
まずサイトクローリングによりWEBサイトのディレクトリ構造をZig-zagに登録し、ディレクトリやページごとの検証、またはそれらを除外した検証、さらにWEBサイト全ページ丸ごとの検証まで可能としています。

＜Zig-zagのQuality検証で出来ること＞
  • ・W3C HTML エラーチェック
  • ・W3C CSS エラーチェック
  • ・リンクエラーチェック
上記項目をチェックしてスコアリング。そして各項目のエラー・警告内容の確認、および場所の確認を行えます。

検証データによる現場へのディレクション方法

Zig-zagのQuality検証機能では、Markup Validation Service に準じたソースコードチェックが可能です。HTMLやCSSのソースコードのチェック、さらにリンクエラーチェックが可能です。検証結果はこのように表示されます。
サイト全体でW3Cの定義上の「エラーがあるページ」が一目瞭然で、ソート機能を使えば、さらに各エラーのあるページのみを絞り込むことができます。
さらに下段にある各ページのURLを叩くと各ページの検証結果詳細ページへと進みます。
赤＝エラー
黄＝警告
青＝情報
ここで、各ページにどのようなエラーが存在するのかを簡単に把握できます。
エラー件数が膨大に検出された場合は、慌てず、CSVデータを閲覧しましょう。
Zig-zagは各検証ごとにCSVでのレポート出力機能を備えています。
たとえばこの検証結果、WEBサイト全体で1,900件近いエラーが検出されました。
しかし、CSVで確認してみると「同じ種類の簡単に修正可能なエラー」が大量に存在することがわかります。
このように、エラー数とその内容を確認することで、改善効率を高めることが可能です。

WEB改善の効果的なディレクションを

筆者も某ツールで、目を細めながら、ページごとのチェックをシラミ潰しに行っていた時代がありました（遠い目）しかし、Zig-zagのようなツールを使うことで、体系的なチェックと効率的なソースコードの改善が可能となりました。

＜Zig-zagによるソースコードの改善手順＞
  • ・WEBサイトをURL入力のみで丸ごと検証（数分）
  • ・CSVデータの内容をソートしてエラー項目の全体に占めるシェアを把握（数分）
  • ・制作現場スタッフやコーディング担当者と共有し工数確認（数分）

エラー数の膨大さにおののいた場合も、きちんと内情を把握し、制作現場とコミュニケーションをとることで、意外にも下記のような仕分けが出来たりもします。
  1. 1. 文字列の「挿入」や「置き換え」などの対応で「数分で改善できる」エラー
  2. 2. 一定の「確認作業」が必要であり「ある程度の工数が必要」なエラー
  3. 3. 改修すべきかデザインやSEO対策含めサイト全体の観点で「協議が必要」なエラー
Zig-zagでは、このような具体的な改善に向けたアクションの土台となる問題定義を、誰でも簡単に数分で用意することが可能です。

WEBサイトの「要改善箇所＝のびしろ」を抽出する検証作業に時間をかけず、改善作業そのものに貴重なリソースを使えるのです。
ご興味頂けるようであれば、実際の画面操作を御覧いただきながら、
詳しくオンラインでご案内させて頂きます。

自社サイトやサービスサイトの改善はもちろん、
お客様のWEBサイト改善業務をされている企業様の分析業務にもお役立ちできます。


5分でわかる！WEB検証ツールのご案内動画

ソースコードチェックツール機能をもった多角的WEB検証ツール「Zig-zag」。
その機能や活用シーンをわかりやすく説明した5分の動画です。ぜひご参照ください。




まずは「気になるWebサイトのURL」を教えてください。
無料でWeb検証・アクセシビリティチェック分析させて頂き、その結果をサンプルとしてご案内いたします。



▼ご希望の際は、下記フォームよりご連絡ください▼



Web検証ツールを無料トライアルアカウントにてフル機能お試しいただけます。
ご希望の際は、下記フォームよりお申込みください。



[ecta id=’1′]
記事一覧へ戻る