サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ

スポンサーリンク

Webサイトを制作して公開する際は
おかしいところが無いか、不備は
無いか不安になったり、という方も
少なくないのではないかと思います。
そこで、公開前に色々と確認出来たり、
最適化できる様なフリーのサービスや
フリーソフトをご紹介します。

ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。

では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。

ブラウザチェック

各ブラウザでどのように表示されているかの確認が可能なツールです。

BrowserLab

web-check01
今のところ、一番良さそうなWebサービスでしょうか。adobe提供のブラウザチェックツール。要ユーザー登録です。

BrowserLab

Browser Sandbox

web-check02
確認したいブラウザを個別にDL出来るサイトです。ChromeだとDL出来ないのでFx等でアクセスしてください。IE6~8、Firefox2~3.5、Mac Safari3~4、Chrome、Opera9~10があります。avast!で誤検知されます。。

Browser Sandbox

IETester

web-check03
フリーソフト。日本語で使えます。IE5~8までのチェックをタブブラウザ感覚で行えます。ローカル環境でもサクッと確認出来るので個人的にもお勧め。

IETester

Browsershots

web-check05
ブラウザ別にWebサイトのスクリーンショットを取ってくれます。ちょっと動作は微妙ですかね。。。

Browsershots

browsera

web-check04
要ユーザー登録。同時に複数ブラウザでチェック可能です。divがこうなってる、みたいな部分を指摘してくれます。無料はIE6、7、Fx2、3の4つと、回数制限があります。

browsera

Browsrcamp

web-check06
Mac Safariの表示チェック。全てのブラウザでチェック出来るのは有料のサービスになります。僕が試したら動きませんでしたが、一応・・

Browsrcamp

モニタの大きさ別チェック

様々なサイズのモニタで見え方が違う場合もありますが、そのチェックを行なえるツールです。

TestSize.com

web-check07
これ、凄くいいですね。百式さんで知ったサイト。自分のサイトの酷さを確認しました。

TestSize.com

browsersize.googlelabs

web-check08
TestSize.com程では有りませんが、大体の見え方の差が分かるので便利では無いかと。

browsersize.googlelabs

ViewLike.Us

web-check09
こちらも凄くいいサービスです。7種のモニターとWii、iPhoneでの表示チェックが可能です。

ViewLike.Us

表示スピードチェック

サイトの表示スピードはアクセスや回線次第で軽くも重くもなったりもしますが、早いに越した事は有りません。せっかくユーザーさんが見に来てくれても、表示が遅いと帰ってしまいます。極力早くしておくと良さそう。

Site24×7

web-check10
やや時間が掛かりますが、細かくチェックしてくれるサービスで、僕も良く使います。読み込み時間が掛かっている箇所を改善出来るようなら改善するといいかも。

Site24×7

webwait

web-check11
シンプルな方がお好きな方はコチラ。単純にロード時間を測定するWebサービスです。URLを入れてadd itするだけ。

webwait

Google Webマスターツール

web-check12
Webマスターツールユーザーはこちらがベストかも。管理画面のLabo→サイトのパフォーマンスで表示スピードをチェックしてくれます。日本語も対応。

Google Webマスターツール

Firebug

web-check13
FirefoxユーザーならFirebugでチェックが行なえますね。使い方はパシのSEOブログさんでどうぞ。

Firebug

ファイルサイズ計測ツール

web-check14
スピードでは有りませんが、ファイルの容量をチェックできます。ローカルからファイルをアップロードして容量を測ることも可能。

ファイルサイズ計測ツール

画像最適化ツール

表示スピードが遅い理由は様々ですが、画像が大きい場合も多々あります。使ってる画像のダイエットをしてみては如何でしょう。以下のサービスでは画像の容量を下げることが出来るサービスです。

punypng

web-check15
PNG, JPEG,GIFなどの画像ファイルを最適化してくれます。手軽なサービスで使いやすい。

punypng

Online Image Optimizer

web-check16
サーバー上でもローカル上の画像でもOK。また、コンバートも可能ですので重宝します。

Online Image Optimizer

RIOT

web-check17
フリーソフトです。ビフォーアフター機能で差を確認出来ます。クオリティも~%で決められ、jpg、gif、pngにそれぞれコンバートも出来ます。しかも動作も軽い。

RIOT

Smush.it

web-check18
最大5画像までまとめて行なう事が可能です。URLを指定するタイプ。ローカル上の画像は出来ません。FirefoxのアドオンYSlowでも使えます。

Smush.it

PNGGauntlet

web-check19
多少時間は掛かりますが、複数の画像をまとめて最適化する事が可能なPNGファイル用のフリーソフトです。最適化した画像を入れるフォルダを指定してadd imageで選択、という流れで使います。PNG以外を選択するとPNGにコンバートしますのでかえって大きくなる場合があります。

PNGGauntlet

webresizer

web-check20
シンプルなサービスです。画質を下げずに最適化、切り取りなどもブラウザ上で行なえますし、なかなか動作も軽いです。

webresizer

css最適化

CSSを最適化してくれるサービスいろいろ。多少でも軽く、後で修正しやすいように、などなどの際に。cssまとめでも書きましたので重複しますがご了承下さい。

CSS Compressor

web-check21
圧縮レベルを選択できるWebサービス。若干レイアウトが崩れる恐れがありますが、なかなか高機能です。

CSS Compressor

styleneat

web-check22
オンラインでもローカルでも最適化、というか、見やすいように整形してくれる素敵なサービス。見やすいし、気に入っています。ソートの方法も指定可能。

styleneat

CSS Optimiser

web-check23
こちらもサーバー上でもロカールでも最適化を行なえるWebサービス。場所が凄く分かり難いんですが、4つのボックスの、右下の下部にあります。

CSS Optimiser

CSS SuperScrub

web-check24
アドレスを指定して最適化することが出来ます。使っていないセレクタなどを省いてくれます。こちらもサイトによって崩れる恐れ有り。因みにこことは別のサイトでは平気でした。

CSS SuperScrub

css minify

web-check25
海外サイトが苦手な方はこちら。国産のcss最適化サービスです。jsファイルも可能

css minify

CSS Sprite Generator

web-check26
こちらは複数の画像を1つにまとめるWebサービス。css spriteで表示する為のジェネレーターです。1つにまとめることで表示速度を上げることが出来るかも。海外サイトですが、日本語Verがあります。リンク先も日本語Verにしました。

CSS Sprite Generator

その他

その他いろいろ。

Another HTML-lint gateway

web-check27
HTMLチェックが出来ます。W3Cでもいいですけど、何となくこっちが好き。100点である必要はないけど近いに越した事は無いですね。とか言いながらこのサイトは31点ですが。

Another HTML-lint gateway

HAREL

web-check34
アクセシビリティの採点をしてくれる国産サービスです。このブログのようにcssが不適切だと採点してくれません。

HAREL

attentionwizard

web-check28
Webサイトのキャプチャー画像からユーザーの目線などを予想するユニークなサービス。キャプチャを読み込んで提案されるのでテキストは読み込んでいません。あくまで参考までに。

attentionwizard

fivesecondtest

web-check33
スクリーンショット等を取ってアップロード、そのサイトをはじめて見るユーザーに5秒見せて、記憶している事をフィードバックとして得る、というサービスです。画像をアップロードし、その画像のリンクをTwitterやFacebook、メールで投稿、5秒見たユーザーからフィードバックを得る、という感じで使用します。

fivesecondtest

Concept Feedback

web-check29
以前記事にしたWebサービス。公開前にキャプチャやロゴなどをアップロードしてフィードバックを募るソーシャルサービスです。英語が出来るなら試してみるのもいいかも知れませんね。

conceptfeedback

Notable

web-check30
こちらもキャプチャを取ってアップロード、評価してもらえるサービスです。無料版は3GBまで。

Notable

usabilla

web-check32
同じく、ユーザビリティのテストに役立ちそうなWebサービス。サイトを登録するとユーザーがフィードバックを返してくれます。

usabilla

以上、公開前に役立ちそうなツールやWebサービスのご紹介でした。他にもお勧めありましたら教えてくださいませ。あとは、サイト公開前に役立つ25のユーザビリティチェックリストウェブサイトでやってしまいがちなユーザビリティのミスなどを見て確認しておくと良さそう。これだけ紹介しておいて、このサイトは改善させてないです。いずれ。

URL :
TRB :

Comments & Trackbacks (12)

  1. Mana

    MacでIEのテストができる日を待ち望んでます:(

  2. 砂鉄

    IEのチェックは一番上で紹介されてる
    https://browserlab.adobe.com/index.html
    を使えば WinXP の ie6, ie7, ie8 の環境のテストができますよ~。

  3. Mana

    Browser Labだと表示の確認はできますがJavaScriptなんかの動作の確認ができないんですよね。。いつもIE testerを利用しています。こればかりはWin入れないとどうしようもなさそうです。

  4. シロ

    >お二人

    こにちは :-D

    SpoonはMac対応してないのか・・・むしろIEが無くなる事を望むべきかもw

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services