突然ですが、チェックツールを使用したことはありますか。
チェックツールとは、入力ミスやエラーなどをプログラムが自動的に判別してくれる機能です。
チェックツールは、文章・HTML・CSS・レスポンシブ表示など様々なモノがあります。
このようなツールを活用することで、入力ミスやエラーなどを公開する前に修正することが可能です。
また、チェックツールを使えば、見直しにかかる時間を短縮することもできます。
ぜひ、チェックツールを有効活用してください。
文章のチェックツール
Enno
誤字脱字・変換ミスなどをチェックするツールです。
WEBサービスになりファイルやアプリをインストールする必要がないので、手軽に始めることができます。
無料で使用することができ、すぐにチェックした結果を知れるのがメリットです。
しかし、チェックの精度は100%ではないので、自分の目でもう一度チェックすることが必要になります。
サイトURL:https://enno.jp/
ValuePress プレスリリース校正ツール
入力ミスに加えてわかりにくい表現がないかなども同時にチェックするツールです。
また、チェックした結果を赤色・黄色・青色の3つに分けられます。
それぞれの色分けの結果はこのようになっています。
赤色・・・表記・表現の間違いや不適切な表現に関する指摘
黄色・・・わかりやすい表記にするための指摘
青色・・・文章をよりよくするための指摘
孤児脱字の指摘だけではなく、文章を改良するポイントを提案できるのが他のツールよりも優れているところです。
このツールは、アカウントを作成してログインすることで使用することができます。
サイトURL:https://www.value-press.com/proofreader/
日本語校正サポート
シンプルなユーザーインターフェイスで使いやすいのが特徴の日本語校正サポートです、
チェックできる文字が1万文字までになっています。
日本語校正サポートは、レベルを3段階に設定できる仕様になっています。
なので、自分の好きなチェックレベル設定することが可能です。
| レベル1 | ・誤字・誤変換 ・言葉の誤用 ・禁忌・不快語 ・外国地名表記の間違い ・固有名詞表記の間違い ・人名表記の間違い ・登録商標など不用意に使うべきではない言葉 ・ら抜き言葉 ・環境依存文字(機種依存文字) |
| レベル2 | ・仮名表記が望ましい当て字 ・常用漢字表外の漢字 ・暗語 ・一般的には平易な表記が望ましい言葉 |
| レベル3 | ・二重否定 ・助詞不足 ・冗長表現 |
このツールはチェックした結果だけではなく、改善した方がよい理由も教えてくれます。
例えば、「この部分は一般的には平易な表記が望ましい言葉」など改善の仕方・理由も知ることができます。
このツールも無料で使用できるので、気になった人は気軽に利用してみてください。
サイトURL:http://www.kiji-check.com/
文賢
Amazonで大ヒットした「沈黙のWebマーケティング」や「沈黙のWebライティング」を出版しているウェブライダーが開発したツールです。
主な機能は、「校閲支援機能」「文章表現機能」「推敲支援機能」「アドバイス機能」の4つになります。
校閲支援機能のチェック項目
・誤った言葉のチェック
・誤った敬語のチェック
・気をつけるべき商標と固有名詞のチェック
・差別語や不快語のチェック
・誤用しやすい言葉のチェック
・ら抜き言葉のチェック
・重複表現のチェック
文章表現機能の例
・アリーナ1列目をゲットしたときのようなうれしさ
・カップラーメンを待っている間にとった電話で「あ、これ長くなる」と察したときのような焦り
・まだ半月もあるのにパケット制限されたときのような絶望感
・アナゴさんがマスオさんよりも年下だと知ったときのような衝撃
・給食を配るときに汁物の配分に失敗し、自分の分の味噌汁がなくなってしまうような切なさ
推敲支援機能のチェック項目
・接続詞をハイライトし、論理展開がスムーズかどうかのチェック
・同じ助詞の連続使用のチェック
・同じ文末表現の連続使用のチェック
・二重否定表現のチェック
・一文に読点が4つ以上存在していないかどうかのチェック
・50文字以上の文に読点がないかどうかのチェック
・漢字で書くほうがよい言葉のチェック
・ひらがなで書くほうがよい言葉のチェック
・カタカナで書くほうがよい言葉のチェック
・句点や記号のあとに改行がないかどうかのチェック
・句点や記号以外で改行しているかどうかのチェック
・記号が全角に統一されていないかどうかのチェック
・英数字が半角に統一されていないかどうかのチェック
・ユーザーが設定した任意の文字列を使っていないかどうかのチェック
アドバイス機能の例
・【箇条書き】を用いて、スッキリと整理できる箇所はありませんか？
・もっと短くシンプルに表現できる文章はありませんか？
・【結論→理由】【疑問（問い）→結論（答え）→理由】という並びを意識し、読み手の興味を持続させることを意識していますか？
・【たしかに●●です。しかし～】を用いて、読み手からの「反論に対する反論」の準備ができていますか？
・この文章を「誰が書いたか」という【話者】は明らかにしていますか？
・読み手が共感できるよう、【感情表現】は入っていますか？
・読み手の【自分事】となる言葉や表現は入っていますか？
・指示代名詞を使いすぎていませんか？
・係り受け（修飾語と被修飾語、主語と述語）の距離は近いですか？
・長い修飾語や大きい状況を示す言葉ほど先に置いていますか？
・複数の言葉を「と」「や」を使って列挙する場合は、「AとB、C、D」「AやB、C、D」という形になっていますか？
・炎上リスクはありませんか？第三者の視点で読んだとき、知らない間に誰かを傷つけていませんか？
参考：文賢
このツールは有料ツールになり、初期費用(10,800円)+月額費用(1,980円)が必要です。
文章を全体的にスキルアップしたいという人におすすめツールになります。
サイトURL:https://rider-store.jp/bun-ken
HTMLのチェックツール
HTMLエラーチェッカー
HTML記述のエラーをチェックできるツールがHTMLエラーチェッカーです。
このツールはGoogleの拡張機能になり、Chromeのブラウザを使用していれば誰でも簡単に利用できます。
入力ミス・タグの閉じ忘れなどをチェックすることが可能です。
簡単な操作でチェックできるのがこのツールの魅力です。
また、オリジナルのチェックルールを追加することもできます。
オリジナルのチェックルールは以下の手順で追加することが可能です。
1.HTMLエラーチェッカーの設定画面を開く
2.「オリジナルの警告ルールを追加する」をONにする
3.「フィルタリング用のキーワードを設定」の下にある入力欄に追加したいルールを記述する
このような手順で警告ルールを追加することが可能です。
無料で使用で簡単に利用できるるおすすめツールになります。
Another HTML Lint
Another HTML Lintは、チェックしたいURLを入力して、クリックするだけでHTMLの記述をチェックできます。
HTMLの文法に点数をつけて、評価されるのが特徴です。
点数は、0~9までの9段階にわかれており、数字が大きいほど欠陥が多いことになります。
(0がベストスコアになり、数字が大きくなるほど修繕点が多い)
フィードバックは、スコアだけではありません。
「エラーの行数」、「エラーの詳細と解決策」、「エラー理由の説明」なども教えてくれます。
また、HTMLをチェックする際、HTMLのバージョンを指定することも可能です。
指定できるバージョンは、HTML1~5の他にも「Microsoft Internet Explorer 5.0」、「Compact HTML」など特殊なバージョンを指定できます。
チェックする項目も指定できるので、自分の好みに合わせてカスタマイズすることが可能です。
サイトURL:http://www.htmllint.net/html-lint/htmllint.html
Markup Validation Service
このツールは、「World Wide Web Consortium」、通称W3CというWeb技術の標準化を行う非営利団体が提供しているツールです。
権威のある団体が提供しているツールなので、チェック精度は他のツールよりも高くなっています。
こちらのツールもチェックしたいWEBサイトのURLを入力して、「Check」ボタンをクリックするだけチェックされます。
簡単な操作でチェックすることが可能ですが、使用されている言語が全て英語なのがデメリットです。
また、チェックするページによってはチェックするのに時間がかかることもあります。
サイトURL:https://validator.w3.org/
Validator.nu (X)HTML5 Validator
こちらのツールもチェックしたいWEBサイトのURLをA「doress」の右側にある入力欄に入力して、「Validate」をクリックするだけチェックされます。
エラーがでている箇所・行数などが表示されます。
非常に手軽に使用することができますが、表記が英語のみになります。
しかし、シンプルで使いやすく、無料で利用できるおすすめツールです。
サイトURL:https://html5.validator.nu/
HTML5 Outliner
HTML5 Outlinerは、エラーチェックツールではなく、WEBサイトの見出しや階層を改めて確認するためのツールです。
なので、文法の間違いや入力ミスなどのチェックをすることはできません。
見出しや階層を正しく設定することで、巡回しているクローラーに正確な情報をわたすことができます。
反対に、見出しや階層を正しく設定されていないと、SEOに悪い影響を与えてしまい、検索結果の順位が低くなります。
WEBサイトを公開する前に1度このツールを使って、正しく設定できているのか確認しましょう。
サイトURL:https://gsnedders.html5.org/outliner/
リンク切れをチェックするツール
リンク切れチェックツール
リンク切れをチェックしたいWEBサイトURLを入力して「Check」ボタンをクリックするだけで、簡単にリンク切れをチェックできます。
リンク切れをチェックするのにかかる時間は、30秒程度です。
チェック項目は、以下の6つです。
・全リンク数
・チェック総数
・エラーのリンク(4xx)
・応答がないリンク(5xx)
・転送されているリンク(3xx)
・正常なリンク(2xx)
この中の「エラーのリンク(4xx)」、「応答がないリンク(5xx)」、「転送されているリンク(3xx)」などに表示されているリンクを修正しましょう。
リンクが切れている箇所は入力ミスやリンク先のWEBサイトが閉じれていないかなどを確認するのがおすすめです。
Broken Link Checker
WordPressのプラグインとして提供されているリンク切れのチェックツールといえば、Broken Link Checkerです。
このプラグインを導入していれば、自動的にリンク切れを自動的にチェックされます。
また、リンク切れがあった場合、メールで通知することも可能です。
WordPressを利用している人は、リンク切れをチェックするにはこのプラグインを利用するのがおすすめです。
このプラグインの導入方法・設定方法を説明します。
1.まず、WordPressの管理画面にアクセスして。「プラグイン」から「新規追加」を選択
2.次は右上にある入力欄に「Broken Link Checker」と入力してエンタキーをクリックしてプラグインを検索
3.検索結果の画面に表示されているBroken Link Checkerの右上に表示されている「今すぐインストール」をクリック
4.インストールが完了したら、インストール済みのプラグイン一覧の中からBroken Link Checkerをクリックして「有効化」を選択
5.Broken Link Checkerを自分の好みの設定に変える
Broken Link Checkerの設定にはこのような項目があります。
・検索をおこなう時間間隔
・新たに検出されたリンクエラーについてメールを受け取る
・リンクエラーにカスタムCSSを適用する
・削除したリンクにカスタムCSSを適用する
・リンク切れに代わるものを提案する
・不確実または軽微な問題を「リンクエラー」ではなく「警告」として表示
細かく設定できるのが、このプラグインのメリットです。
サイトURL:https://ja.wordpress.org/plugins/broken-link-checker/
Check My Links
Chromeの拡張機能でリンク切れをチェックできるのがCheck My Linksです。
Chromeの拡張機能なので、Firefox・Safari・InternetExplorerなど他のブラウザで使用することはできません。
リンク切れをチェックしたいWEBページを表示させて、「Check My Links」のアイコンをクリックすれば調べることができます。
無料で手軽に利用できるのがこのツールのメリットです。
サイトURL::https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en-GB
LinkChecker
LinkCheckerは、Firefoxで利用できるアドオンです。
Firefoxのブラウザのみで利用できます。
Chrome・Safari・InternetExplorerなどのブラウザでは利用できないので、注意が必要です。
アカウント登録なども不要で、すぐに使い始めることができます。
サイトURL:https://addons.mozilla.org/ja/firefox/addon/linkchecker/
CSSのチェックツール
W3C CSS Validation Service
先ほど紹介した「W3C Markup Validation Service」を同じ団体が運営しているのが、W3C CSS Validation Serviceです。
このツールは、CSSをチェックするためのツールになります。
使い方は非常に簡単で、CSSをチェックしたいWEBサイトのURLを入力して「検証する」ボタンをクリックするだけです。
エラーがでている文や行数などを日本語で教えてくれます。
また、CSSのバージョン別に結果を表示されます。
サイトURL:https://jigsaw.w3.org/css-validator/
CSS and JS code coverage
このツールはChromeのデベロッパーツールに含まれている機能です。
そのため、このツールを使用するにはChromeのデベロッパーツールを開く必要があります。
デベロッパーツールを開く方法は、2つあります。
1つは、マウスを使って開く方法です。
まずは、ブラウザのChromeを開きます。
マウスを右クリックして、メニュー欄の中にある「検証」をクリックすると、デベロッパーツールが開きます。
もう1つの方法は、キーボードを操作して開く方法です。
Windowの人は、キーボードの「Controlキー」＋「Altキー」＋「i」をクリックしてデベロッパーツールを開きます。
(Macの人は、「Commandキー」+「Optionキー」+「i」をクリックします。)
デベロッパーツールの右側にあるその他のメニューのアイコンをクリックして、「More tools」をクリックします。
More toolsの中にある「Caverage」を選択。
レコードボタンが表示されます。
そのレコードボタンをクリックすれば、CSSをチェックが開始されます。
チェックの結果は、赤と緑で表示。
赤色は未使用のCSS、緑色は使用しているCSSを示しています。
赤色で表示されているCSSは、未使用なので、修正が必要です。
レスポンシブの表示を確認するためのツール
レスポンシブWebデザインチェックツール
レスポンシブWebデザインチェックツールは、パソコン・タブレット・スマートフォンの3種類のデバイスで表示確認ができます。
特にスマートフォンの場合は、大中小3つのサイズで確認することが可能です。
表示確認したいWEBサイトのURLを入力して「RWD Check」をクリックすれば、確認ができます。
パソコン・タブレット・スマートフォンの3種類のデバイスを同時に確認できるので、表示確認の時間短縮に役立ちます。
サイトURL:http://lqd.jp/lab/rwd.html
Responsive Checker
12種類の画面サイズで表示確認できます。
表示確認できるデバイス一覧。
・ iPhone5 縦
・iPhone5 横
・iPad mini 縦
・iPad mini 横
・iPad 縦
・iPad 横
・Galaxy Tab 10.1 縦
・Galaxy Tab 10.1 横
・Xperia AX SO-01E 縦
・Xperia AX SO-01E 横
・HTC Aria 縦
・HTC Aria 横
豊富な画面サイズが用意されているだけでなく、デバイスの色を白と黒で選ぶことができます。
表示確認したいWEBサイトのURLを入力して「enter」をクリックするだけで表示確認が可能です。
サイトURL:http://html5-lab.jp/checker/
The Responsinator
とてもシンプルで使いやすいのが、The Responsinatorの魅力です。
表示確認したいWEBサイトのリンクを入力して「GO」ボタンをクリックするだけで表示確認ができます。
表示確認できる画面サイズは、375pxで固定されているのがデメリットです。
使いやすいシンプルな表示確認ツールを探している人におすすめ。
サイトURL:http://www.responsinator.com/
resizeMyBrowser
たくさんの画面サイズで表示確認したい人におすすめなのが、resizeMyBrowserです。
以下の画面サイズで表示確認ができます。
・320×480(iPhone 3G/3GS)
・480×720(Meizu M8)
・480×800(Google Nexus one)
・640×960(iPhone 4)
・768×1024(iPad)
・480×320(iPhone 3G/3GS)
・720×480(Meizu M8)
・800×480(Google Nexus one)
・960×640(iPhone 4)
・1024×768(iPad)
・1024×600(Most Netbooks)
・1280×800(Macbook air 08)
・1366×768(Some Laptops)
・1440×900(MacBook Pro 15 inches)
デスクトップコンピューターなど大きな画面サイズで表示確認できるのがメリットです。
すでに定義されている画面サイズの他にも自分の確認したいサイズを定義することができます。
サイトURL:http://resizemybrowser.com/
レスポンシブ・デザインモード
Safariのブラウザを利用している人におすすめなのが、レスポンシブ・デザインモードです。
レスポンシブ・デザインモードは、Safariに標準搭載された表示確認するためのツールになります。
レスポンシブ・デザインモードをSafariで使用するためには、デフォルトの設定を変更しなければなりません。
Safariでレスポンシブ・デザインモードを使用するための手順を解説します。
まずは、Safariを開きます。
Safariを開いたら、画面上部にあるメニューバーから「Safari」をクリック。
メニューの中にある「環境設定」を選択します。
環境設定のメニューの中から「詳細」をクリックして、一番下に表示されている「メニューバーに開発メニューを表示」にチェックを入れます。
レスポンシブ・デザインモードを表示するための設定は、これで完了です。
ブラウザを起動したときの画面に戻り、画面上部のメニューバーの中にある「開発」をクリック。
メニューの中にある「レスポンシブ・デザイン・モードにする」を選択します。
すると、レスポンシブ・デザイン・モードが表示されます。
このツールでは以下の画面サイズで確認することが可能です。
・iPhone SE
・iPhone 8
・iPhone 8 Plus
・iPad mini(7.9インチ)
・iPad(9.7インチ)
・iPad Pro(10.5インチ)
・iPad Pro(12.9インチ)
・800×600
・1366×768
・1920×1080
「iPhone」、「iPad」などアップル製品の表示確認に最適なツールです。
まとめ
本記事では、様々なチェックツールを紹介しました。
いかがでしたか。
公開する前にチェックツールを使用して、入力ミス・エラーがないかなどを確認しましょう。
そうすれば、入力ミス・エラーを未然に防ぐことができます。