クリエイティブな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のシェア数などをチェックできます。

まとめ

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