frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Webサイトの実装ページを確認する時の8つの自己チェック

スポンサードリンク


スポンサードリンク


Webサイトのコーディングは、実装が完了して終わりではありません。
ミスは人間である以上逃れられないものなので、それを未然に防ぐチェックというものが不可欠になります。

またいかに効率よくチェックできるかがカギとなりますので、自己チェックする点とツールを紹介します。

テキスト

テキストのチェックは最もミスしやすいところだったりします。MS製品をそのままコピーすると空白が入ったりとコピーしたからといって間違えてないとは限りません。検索してもよいのですがもっと効率的なのは比較ツールのWinmergeなどです。ソースの比較ソフトとして有名ですが、テキスト比較にも使えますね。
WinMerge 日本語版

title、description

メタ情報の確認をします。
ちなみにkeywordは不要です。
ogtagもあればそちらも確認しましょう。

validator

バリデートエラーのチェックでタグの閉じ間違えやミスがないかのチェックをします。

アンカーリンク、リンク

リンクのチェックは、Firefoxで「情報」→「リンクのパスを表示」でパスが表示されます。

画像、alt

altのチェックは、Firefoxで「画像」→「altの属性値を表示」でaltが表示されます。

JSoff時の挙動

アクセシビリティ的にはJSoffした時に情報が表示してなければいけません。
例えばいい例では、slick.jsなどのカルーセルです。
slick.jsはJSOFF時、隠れていた画像がすべて表示されるようになっています。

JSなどの動き

またそのJS自体も、挙動がおかしくないか確認します。
確認ポイントは機能によって違うので割愛します。

尚、title、description、validator、リンク、画像、alt、JSoffは下記crome アドオンweb-developerでチェックできます。
chrome.google.com

  • validator(Validate HTML)
  • JS無効(Disabled JavaScript)
  • 画像、alt(Display Alt attribute)
  • アンカーリンク、リンク(Display Link Details)
  • title、description(View meta tag infomation)

崩れ、スマホ

モジュールやコンポーネントを組み合わせた時、テキスト量が増えた時など設計者が意図ししていない崩れが発生する可能性があります。
その為に、レスポンシブデザインであれば、タブレットやスマホのwindowサイズでも崩れがないかチェックすると良いです。

こちらはPerfectPixelを使用します。
chrome.google.com