Web制作時の検証でよく利用するツールをまとめてみました。

制作がひと段落したぞ！さて検証するか。

Webサイトの制作が完了したら、さっそく取り掛かりたいのが検証。
いろんな端末、ブラウザやブラウザバージョンで確認をしていかないとなりませんね。
そんな時に重宝するツールをまとめてみました。

Browserling

https://www.browserling.com/
昔のブラウザで実機確認ができる優れモノです。
1024×768でしか見れなかったり、無料版だと3分の時間制限がありますが、パッと見る分には重宝しそうですね。

QRコード作成

http://apps.site-study.com/?contid=qrcode
サクッとQRコードを作成するのに便利。
細かな調整はあまりできないですが、URLを入れるだけでパッとQRコードが生成されるので、簡単に利用できます。
他にも文字数チェック等いろんなツールがあります。

モバイル フレンドリーテスト

https://search.google.com/test/mobile-friendly
サイトがスマートフォンに対応出来ているかをチェック。
レスポンシブだとあまり気にすることは少ないですが、別ファイルで対応する場合はしっかりチェックしたいですね。

Markup Validation Service

http://validator.w3.org/
HTMLをコピペするだけで、文法ミスがないかチェックできます。
他にもURLの入力や、ファイルの読み込みにも対応。

CSS Validation Service

https://jigsaw.w3.org/css-validator/
上記のマークアップ同様で、CSSも簡単にチェックできます。

OGP画像シミュレータ

http://ogimage.tsmallfield.com/
OGP画像がどんな風にトリミングされるか一覧で見ることができます。
OGPはリリース後にしかチェックできないため、しっかり反映されそうか先にチェックできるのはうれしいですね。

Can I use

https://caniuse.com/
CSSで何か問題があったときに、どのブラウザバージョンから対応しているかチェックできます。

やっと検証完了！フィードバックをまとめないと。

検証した後に何か問題があった時は、制作者向けにフィードバックをまとめないといけないですよね。
そんな時に重宝するツールをまとめてみました。

AUN

https://aun.tools/
画面キャプチャにコメントをつけ、まとめたフィードバックをURLをシェアできるツール。
いちいちパワポやエクセルにペタペタ貼る手間もかからず、URLをサクッとメールするだけなのでとても簡単。
通常のやり取りであれば会員登録しなくても使えるのが嬉しいですね。

chirami(beta version)

https://www.chirami.io/
HTMLをアップしてURLを発行してくれるツール。
タイトルにある通りベータバージョンなので、まだまだ改良の余地はありそうですが、
LP等の静的なページの共有がとても簡単に行えます。（PHP等は対応していません）

リリースしたぞ！早速OGPの検証だ。

OGPはリリース後に最終チェックを行いますが、そんな時に重宝するツールをまとめてみました。

シェアデバッガー

https://developers.facebook.com/tools/debug/
こちらはFacebookが提供するOGPチェックツール。
OGP画像を変更したのに、シェア画像が切り替わらないときのキャッシュを切るためにも利用します。

Card validator

https://cards-dev.twitter.com/validator
Twitterカード用にOGPがしっかり設定されているか確認できるツール。

無事リリース完了！そして運用へ。

運用時は検索エンジンへの最適化や、現在の順位等をチェックしていきたいですよね。

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
昨今検索エンジン対策として重要視されてきているページの表示スピードを確認できるツール。
どのように改善したら良いかも出てくるので、SEO順位上げ等に役立ちます。

Gyro-n SEO

https://www.gyro-n.com/seo/
検索順位を日次でレポートしてくれるツール。
無料版だと1サイトのみ登録可能です。

SEOチェキ！

http://seocheki.net/
基本的なSEO内部対策のチェック項目から、GoogleやYahoo!の検索順位、SNSのシェア数などをチェックできます。

まとめ

いかがでしたでしょうか。
流れに沿ってまとめてみましたが、紹介した以外にもたくさんのツールがあります。
きっと検証が楽になるはずですので、是非自分に合ったツールを探してみてください。