ArchArchHTML/JavaScriptUI・UXインスピレーションダウンロード素材ツールTIPSディレクションデザインマーケティング雑記・お知らせ2011.12.19ページアップ後ディレクターがチェックすべきポイントと便利ツール5つHTMLページをアップ後にWebディレクターが特にチェックすべきポイントと、そのチェックをするために便利なツール5つをご紹介します。Validatorでチェックします。Validatorをダウンロードします。こちらの右下に赤で×印があると、コーディングにミスがあるということを示しています。(緑のチェックマークは、ミスがないことを表しています。)赤の×印をダブルクリックして、ソース画面を開きます。エラーのある行番号と、そのエラー内容がわかります。内容は英語なのですが、なんとなくわかるはず。この場合は、ID名が重複しているよ、ってことです。このエラー内容をコーダーさんに伝えて、修正をしてもらいます。JavaScriptエラーの有無を調べるJavaScriptのエラーについてJavaScriptのエラーは、Firefoxのアドオン、Firebugでチェックします。このアドオンをダウンロードします。対象ページで「F12」キーを押し、「有効化」をクリックします。タブメニューの「コンソール」をクリックすると、エラー内容が表示されています。(エラーがなければ何も表示されません。)コーダーさんに、エラー内容を伝えます。画面をキャプチャしたり、印刷したりして、こんなエラーが出てるんだけど、って伝えてあげると良いかと思います。Altが入っているかを調べるAltは音声ブラウザ用とSEO対策用に入れるもので、ほとんどの企業サイトでは入れるのが基本になっていると思います。Attributes」が便利です。このアドオンのダウンロードはこちらです。ダウンロード後、画像にマウスオーバーをすると、Altが表示されるようになります。リンク切れを調べる一見リンクされているように見えて、クリックして初めてリンクされていないとわかることがあります。いった場合は、上のコーディングミスを調べるツールでもわからないことがあるので、Xenuというリンクチェックツールを使います。Xenuをダウンロードし、起動します。URL」を選択します。するとウィンドウが立ち上がるので、対象ページのアドレスを入れます。リンク切れのアドレスは赤字で出てきます。このアドレスをページ内検索して、正しいアドレスに修正します。修正個所以外をさわってしまっていないかを調べる修正指示があった場所以外に、不要なタグや文字が混入する場合があります。このような場合は、差文比較ツールのWinMergeを使ってチェックします。WinMergeをダウンロードし、起動します。「ファイル」→「開く」を選択します。今回の修正ファイルと前回のファイル(今回の修正が反映される前のファイル)をそれぞれドラッグし、「OK」を押します。(もしくは、「参照」からファイルを選択します。)すると、両ファイルのソースで異なっている部分がハイライトされるので、その部分が正しいかチェックします。不要なタグや文字が混入していた場合は、コーダーさんに伝えて削除してもらいます。以上、ページアップ後ディレクターがチェックすべきポイントと便利ツール5つでした。コーダーさんもチェックはしていると思いますが、さらに自分のダブルチェックでぬかりなく。品質を保持していきたいですね。2013のボランティアスタッフに参加して良かったこと2013.12.02UI変更が不評な時に役立つ原因の切り分け方2013.11.29About@kanako29WebサービスのUI・UXデザインなどをやっています。