知ってると知らないで違う！webサイト作成時に超絶役立つwebアプリ10選

　　　スポンサーリンク

【ソフトバンク携帯のりかえでどこよりも高いキャッシュバックを保証します！】
【ソフトバンクのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】
【auのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】
【ドコモのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】

Webページを閲覧する環境というのは様々で、Webサイト作成時には様々な環境での表示を考慮しなければなりません。そんな時に環境ごとに表示テストをするのは至難の業です。

そこで今回は、Webサイト作成時に便利なツールを紹介していきます。

HTML・CSS

HTMLクイックリファレンス

HTMLタグを目的別、ABC順で探すことが出来るサイトです。ふとタグを忘れてしまった時に、探すのに役立つのではないでしょうか。タグの解説とともに、それぞれのタグの使用例も書かれています。HTMLだけでなく、CSSなどについての解説も同サイト内にありますので、合わせて見るといいかもしれません。

http://www.htmq.com/index.htm

Webクリエイターボックス

Webデザイン関連の記事を中心として執筆されているサイトです。HTMLやCSSだけでなく、デザイン関連の記事も充実しているので、非常に参考になります。

http://www.webcreatorbox.com/

カラーコード

WEB色見本 原色大辞典 – HTMLカラーコード

黒・白・赤などのカラーコードを実際の色とともに閲覧できるサイトです。原色にかぎらず、和色や洋色、パステルカラーなど幅広い色のカラーコードが掲載されています。

http://www.colordic.org/

ブラウザキャプチャ

Check Browser Compatibility, Cross Platform Browser Test – Browsershots

様々なブラウザ環境での表示をチェックすることが出来ます。特徴は、ブラウザのバージョンを細かく指定できることにあり、バージョンごとに細かくチェックしたい場合には便利ですね。

http://browsershots.org/

ブラウザキャプチャ【無料】

メニューが日本語に対応している、ブラウザキャプチャが出来るサイトです。先ほどとは違い、Chrome系・Firefox・Operaと数は少ないですが非常に使いやすいです。ただ、『Linux系OSでキャプチャをしています。WindowsやMACと表示（キャプチャ結果）が異なる場合があります。』とあるように、Linuxでキャプチャされているのでデザインは多少異なる可能性もあります。

https://www.cman.jp/BrowserCapture/

画像圧縮

TinyPNG

JPEGとPNG画像を圧縮できるツールです。見た目にほとんど違いがないのに、綺麗に画像を圧縮することが出来ます。

https://tinypng.com/

PunyPNG

JPEG、GIF、PNG画像を圧縮することが出来ます。先ほどのサイトと似ていますが、アップロード出来るファイルサイズに違いがあります。

http://www.punypng.com/

Webページ表示速度改善

PageSpeed Insights

Webページの読み込み速度を計測し、改善すべき点を指摘してもらえるツールです。JavaScriptやCSS、HTMLの圧縮など、どこを改善すればいいのか提案してくれます。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

JS Minifier・CSS Minifier

JavaScriptとCSSの無駄な記述を削除することにより、コードを軽量化させることによって、処理を高速化させることが出来ます。

https://syncer.jp/js-minifier

SEO対策

ferret

SEOやWebマーケティングについて学べるサイトです。

https://ferret-plus.com/

【ソフトバンクのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】

【auのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】

【ドコモのiPhoneⅩ、iPhone8、スマホを購入したい方はこちら】

販売店比較早見表