WEBサイトのテストツール

  1. WEBサイトの公開・運用
  2. 33 view

WEBサイトのテストツール一覧

開発関連ツール

ブラウザ関発ツール

Chrome デベロッパーツールやFirefox デベロッパーエディションなど、ブラウザが提供する開発ツール
※ブラウザのエミュレータなどで活躍することが多い

Chromeデベロッパーツールの使い方

ページ上で右クリックすると表示

使ってみた感想
ブラウザ開発ツールは、WEBサイトを制作する上で必要不可欠のツールです。
制作した後実際にHTMLとCSSを検証・修正をすることで、
PC上やレスポンシブデザインの確認ができるので、非常に便利です。
この開発ツールにはかなりたくさんのツールがあるため、まだ全て理解し使いきれませんが、
徐々に慣れてスムーズに使用できるようにしていきたいです。

WEBサイト・エクスプローラー

サーバーにアップされたWEBサイトのフォルダー構造や情報設計、リンク切れ確認などの機能があり、
テスト時の調査に活用できる。

※動作OSはWindows10/8/7のみ

まだ試せていない。 2021.12.25現在

HTML Conformance Checker

現在はWHTWGが策定するリビングスタンダードがHTML標準となっているため、このツールで
チェックをするようにする。

HTML Conformance Checkerの使い方

1. HTML Conformance Checker のURL入力スペースにチェックするページのURLを入力する

2. Checkをクリックすると、数秒後にチェック結果が表示される。
チェックしたページのHTMLやCSSを注意や警告などの表示で報告してくれる。

使ってみた感想
自分のブログサイトをチェックしてみると、かなりエラーや警告が表示され、
特に必要とされていないコードのエラーが多かった印象でした。
大きなサイトや有名な企業のサイトもチェックしてみましたが、
意外とエラーや警告が表示されていて少し驚きました。
あくまでも自動解析ツールによる結果なので、解析結果でエラーや警告で指摘されていても、
人の目で確認しそのコードによってUIやUXがしっかりとできていれば、
必ずしも全て改善する必要はないと思いました。
人による確認で見落としがあった場合などに便利なツールだと思います。

Google PageSpeed Insight

WEBページの読み込み速度をGoogleのスコアで表示するWEBツール。
URLを入力するだけでWEBサイトのページ読み込み速度や改善ポイントが分析出来る。

Google PageSpeed Insight の使い方

1 . PageSpeed InsightにチェックしたいURLを入力する。

2 . 数秒後チェック結果が表示される。それぞれのユーザーの環境での評価や
  パフォーマンスの評価が数字で表示される。

使ってみた感想
指標が数字で表示されており、とても見やすい印象でした。
特にSEO対策にはもってこいのツールだと思います。
良好なUXを実現するためにパフォーマンスの高いページを作りたいと思います。


デザイン関連テストツール

PerfectPixel

デザインカンプとコーディングを比べる事ができるツール。
対応ブラウザはChrome、Firefox、Opera、Edgeの4種類。


PerfectPixelの使い方(Chromeの場合)

1 . PerfectPixelをwebストアでインストールし、拡張機能に追加。

2 . Chromeの拡張機能からPerfect Pixelを起動して、そこにデザインカンプを貼り付ける。

3 . 実際に制作したページに50%ほど透過したカンプを照らし合わせて、
  カンプとのpxやptなどのずれを修正する。

使ってみた感想
今のところデザインカンプを参照にWeb制作をしたことがないので、
実用性はまだ実感できていませんが、このツールを知らなかった
現役のWeb制作者に尋ねたところ、仕事上かなり使えそうとのことでしたので、
早く実践していきたいと思いました。

Just Right! 6 PRO

ジャストシステムが提供している校正ツール(有償)
誤字や脱字はもちろん文章の揺らぎなどもチェックできる。

Just Right! 6 PROでできること

様々な項目が様々なアプリケーション上でチェック可能。

主なチェック項目
※項目名に下線にあるものは詳細を公式HPにて閲覧可能。

項目説明
誤りチェック誤字脱字、仮名遣い、慣用表現、呼応表現、ら抜き表現、同音語誤り、二重敬語、西暦・和暦など
用語基準送り仮名、漢字基準、公用文、難しい語の言い換え、旧字体、商標・商品名、数字の表記など
表現洗練文体の統一、重ね言葉、同一助詞の連続、二重否定、修飾関係、並列関係など
字種統一単位、句読点、カタカナ、数字、記号、アルファベット
長さチェック文、句読点、ひらがな、カタカナ、漢字
環境依存文字外字と機種依存文字、JIS X 0213:2004で例示字形が変更された漢字
スペルチェック先頭のみ大文字の単語、すべて大文字の単語、数字を含む単語、全角を含む単語など
表記ゆれ外来語のみ/全部、全角半角・大文字小文字の区別を指摘する/しない
括弧対応、階層
印刷標準字体簡易慣用字体・デザイン差などの文字
ルールチェック『第三回』→『第3回』といった洋・漢数字の区別など、独自の条件設定が行えるルール辞書によるチェック

対応ファイル形式・連携可能アプリ

  • テキストファイル(.txt)
  • HTMLファイル(.html/.htm)
  • PDFファイル(.pdf)
  • Microsoft Word 2016/2013
  • Microsoft Excel 2016/2013
  • Microsoft PowerPoint 2016/2013
  • Microsoft Internet Explorer 11.0
  • Microsoft Outlook 2016/2013
  • Shuriken 2018/Pro7/Pro6
  • ATOK 2017/Pro 4/Pro 3/Medical 2/Medical for Windows

有償のためまだ使用はできていない。2022.1.12現在

その他のツール

SEO文字数(テキスト量)評価ツール

文字数カウントツールとは、Webサイトのコンテンツ(ブログ記事)の「文字数(テキスト量)」「総単語数」「ユニーク単語数」を上位10位平均と比較し、評価する無料のSEOツール。

もう少し簡単に‥‥
競合上位10サイト平均より自サイトの文字数が多いか?少ないか?を○×で判定し、かつ簡易アドバイスのコメントを表示する無料のSEOツール。

文字数、総単語数、ユニーク単語数とは

SEO文字数(テキスト量)評価チェックツールでは、文字数、総単語数、ユニーク単語数を以下のようにカウントする。

例文:「SEOの疑問を実験で解き明かすSEOブログ」

  • 文字数:21文字半角も全角も1文字としてカウントするので、「SEOの疑問を実験で解き明かすSEOブログ」は、文字数21文字となる。
  • 総単語数:6個「SEO」「疑問」「実験」「解き明かす」「SEO」「ブログ」に分解し、総単語数6個とカウントする。
  • ユニーク単語数:5個「SEO」「疑問」「実験」「解き明かす」「SEO」「ブログ」の6単語に分解され、ユニーク(重複を取り除く意味)なので「SEO」を1単語でカウントし、ユニーク単語数5個となる。

文字数カウントツールの使い方

1 . 文字数カウントの対策ページ入力スペースにチェックしたいURL入力。
  対策キーワード入力スペースには検索上位になりたいキーワードを入力。

2 . 文字数をチェックするをクリックすると自動で結果が表示される。
 (チェックページにより時間がかかる場合もある)

今回はSDGsのサイトの「ごみ」をキーワードにしてチェック。

使ってみた感想
このツールはブログ記事などのSEO対策にかなり向いているツールだと思いました。
瞬時に上位10個のサイトと文字数やキーワードと比べてくれる上に、検索上位に必要な文字数や、
タイトルタグの文字数、メタディスクリプションの文字数などのアドバイスも記載してくれます。
使い方も、表示の仕方もシンプルで使いやすいので文字数に関するSEO対策チェックはこのツールに
これから頼ろうと思います。

総務省 miChecker

国や地方自治体などのホームページが誰にとっても利用しやすいものになっているかチェックできるよう、総務省が提供しているWebアクセシビリティ評価ツール。

なお、miCheckerはWindowsのみで提供されており、以下のような実行環境が定められている。

  • OS:Windows 7,Windows 8.1,Windows 10
  • ブラウザ:Internet Explorer 11
  • メモリ:1GB以上(2GB以上を推奨)
  • ハードディスク空き容量:250MB以上(導入先フォルダにユーザーの書き込み権限が必要です)
  • Java実行環境:Java 32bit版 Version 8

miCheckerでできること

  • アクセシビリティ検証
  • 音声ユーザビリティの可視化
  • ロービジョンのシミュレーション

現在はiOS使用のため今後Windowsで使用することがあれば、活用していきたい。 2022.1.12現在

関連記事

SEOガイドライン

ホワイトハットSEOを行う際に必要な公式ガイドまとめ1.検索エンジン最適化(SEO)スターターガイドGoogle検索エンジン最適化(seo)スターター…

  • 9 view

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。