【非エンジニアでもOK】Webサイト確認に使えるチェックツール9選!

2020年12月11日work


こんにちは、カズキです。



皆さん、Webサイトの確認について、自信ありますか??


いかがでしょう。コーディングやプログラミングが分からないといって、表示確認をするだけのざっくりのチェックになってませんでしょうか😌



当時の僕はというと、

よく分からないけど、このエンジニアさんは優秀だから、ざっくりチェックすれば大丈夫だよね??


うーん、気になる箇所があるけど、知識が無いからうまくツッコメないな…。


ここの記述って合ってるの?でもHTMLやCSSがイマイチ分からないからな~。


こんな感じの雑魚だったんですよね。



今思えば、ただ単にディレクションを放棄してただけ。



それではディレクターの意味はないですよね。

さて、本記事を読んで欲しいのはこんな方。

過去の自分

初心者でもカンタンにWebサイトの確認ができるツールが知りたい。

納品前に抜け漏れないようにチェックしたいな…。

クライアント先でも気が利いた発言ができたら…。


こう言った疑問にお答えします😌



本記事で紹介するツールを使えば、精度の高いサイト確認がカンタンにできるようになります。



5分ほどで読み終わる記事なのでぜひ最後までお付き合い頂けると嬉しいです。



【非エンジニアでもOK】Webサイト確認に使えるチェックツール9選!


サイト確認をするタイミングといえば、以下のようなシチュエーションですよね。


サイト確認をするタイミング

・エンジニアからテストアップが上がってきた時

・競合サイトを調査している時

・自社サイトをレビューする時


こんなときも、本記事で紹介するツールを使って、正しいフィードバッグをしましょう。

制作もサクサク進められるので、クライアントにも気の利いたコメントができるようになりますよ😌



それでは、早速紹介していきます。



(1)Wappalzer


Webサイトで使用しているシステムやAPIを丸裸にしてくれるツール。



例えば、この「kazublog」はWordpressで構築されていまして、計測タグはGoogleアナリティクス、広告はアドセンスを使用しています。



このようなサイト情報はWappalyzerを使えばボタン一つでカンタンに取得できます。



APIやサーバー、データベースなどの情報も知れるので、運用に関わる情報もほぼ分かるはず。


クライアント訪問時や、制作前のミーティングでこの辺りを即時にクリアリングできれば話し合いもスムーズに進みますよね♪( ´θ`)ノ

種類:Chrome拡張機能(無料)

URL:https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

備考:Chromeブラウザをダウンロードしていれば誰でも使用可能



(2)Whatfont


Webサイトで使っているフォント名を取得できるツール。


ちょっと見づらいかもですが、上記画像の赤枠で表示されているのがフォント名です。


Whatfontをアクティブ状態にしておけば、マウスホバーした時に該当テキストのフォント名を自動で教えてくれます。



フォントと言えば、サイトの顔です。

フォントは奥が深くて、デザインイメージや親しみやすさはもちろん、視認性も左右する重要な要素ですよね。

このツールを使えば、競合サイトをみて気に入ったフォントがあれば参考にすることができます。

次に紹介するChromeデベロッパーツールのソースコードから「css > font-family」を確認してもいいですが、イチイチサイトが変わる度にソースコードからチェックするのは面倒なのでこちらのツールがとても便利ですね。

種類:Chrome拡張機能(無料)

無料インストールURL:https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

備考:Chromeブラウザをダウンロードしていれば誰でも使用可能



(3)Chromeデベロッパーツール


有名すぎるツールなのでわざわざ説明不要かもですが、最悪コレさえ使えれば困らない最強ツール。



ソースコードの確認や、デバイスごとの表示確認などサイト状態を網羅的に知れるツール。

種類:Chrome拡張機能(無料)

インストールURL:なし

備考:Chromeブラウザをダウンロードしていれば誰でも使用可能



(4)TeamViewer


遠隔で対象のPCやスマホにアクセスして、そのPCを操作することができるツール。



操作するっていうとハッカーっぽいですが、例えばあなたがサイトの表示確認をしているとしましょう。



そのとき、サイトの表示をWindowsのOSから確認したくなっても手元にWindowsPCがなければ確認できませんよね。



でもTeamViewerにあらかじめ使う予定のデバイス(※WindowsPC)を登録しておけば、

他のPCから「ID・PASS」を入力するだけでカンタンにアクセスすることが可能なんです。



PCに写る画面はWindowsPCの画面と同じ状態になるので、Windows側からの表示確認ができます。



リモートワークが主流になってきた昨今、利用機会が増えそうなツールです。



種類:アプリケーション(無料・有償)

ダウンロードURL:https://www.teamviewer.com/ja/

備考:有償利用と無料版が存在。接続するデバイス数や接続頻度によって変わります。



(5)difff


インストール不要、ブラウザ版で原稿(文字)の差分チェックができるツールです。



日本語や英文はもちろん、マークアップやプログラミング言語にも対応しているので、ワイヤーフレームとテストアップサイトの原稿を見比べる際などに使います。



対象のテキストをコピペするだけなので、簡単にエラー個所が分かります。



種類:ブラウザツール

URL:https://difff.jp/

備考:なし



(6)Dead-link-checker.com


サイト上でリンクエラーになってるページを調べられるツール。



ペラ一のLPや数ページ程度のサイトだと不要ですが、コーポレートサイトなど中規模程度のサイトの場合、1Pづつリンクチェックするのは面倒ですよね。



このツールは、ドメインを入力するだけで全ページを出力して、エラーページをマーカーしてくれるので、

リンクのスペルミスやそもそも存在していないページの洗い出しに活用すると良し。



種類:ブラウザツール

URL:http://dead-link-checker.com/ja/

備考:なし



(7)W3C Markup Validation Service


W3Cが提供するWeb標準化によるマークアップ確認用ツール。



HTML5とCSS3を基準に記述の精度や、すでにサポート終了しているタグ構造を一通りチェックしてくれる開発者向けのツールとなります。



結構チェックが厳しいためエンジニア泣かせではあるものの、開発段階で、修正時間があるようなら一通り確認してみても良いですね。



このツールを知ってるだけで、けっこう上級者っぽい感じです😌



種類:ブラウザツール

URL:https://validator.w3.org/

備考:なし



(8)PerfectPixel by Well DoneCode


テストアップが完成したら、デザインと見比べて表示確認をするのも大事ですが、細部の確認は目視だと大変ですよね。


こちらのツールを使えば「jpg」または「png」で書き出したデザインカンプをドラッグ&ドロップするだけで、デザインとテストアップの差異を1px単位で洗い出してくれます。


大きな崩れに関しては目視でも良いですが、このような1px単位のズレが発見できるツールなので使い方をマスターしておいて損なしです♪( ´θ`)ノ

種類:Chrome拡張機能(無料)

URL:https://www.welldonecode.com/perfectpixel/

備考:Chromeブラウザをダウンロードしていれば誰でも使用可能



(9)Alt&Meta viewer



内部SEOとして、imgタグのAlt属性は抜け漏れなく入力したいところですよね。



でも、全部をソースコードから確認するのはぶっちゃけ面倒臭い…。


こちらを使えば直感的にAlt属性に入力しているテキストをナビゲーションしてくれるため、ソースコードの確認は不要です。



確認作業もカンタンにできるので時間短縮が期待できるはず。

種類:Chrome拡張機能(無料)

URL:https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja

備考:Chromeブラウザをダウンロードしていれば誰でも使用可能



ツールを使いこなして日々の業務を効率化しましょう


目視や手動で確認するのも良いですが、人間なのでちょっとしたミスは必ず発生します。



今回紹介させてもらった通り、Chrome拡張機能もかなり充実していたり、ツールとして便利なものもどんどん増えてきています。

普段行っている「目視+ソース確認」に加えて、チェックツールを使ってダブルチェックできれば抜け漏れも減らせそうですよね😌


ぜひ、皆さんの業務にお役立てくださいね。

work

Posted by kazuki