HTMLとCSSの書き方をお教えする時に合わせてお伝えしていることがあります。
マークアップに限ったことではないですが制作した後、作ったものに間違いがないか確認しますね。
では、どこをどう確認したら良いのでしょうか。確認といってもさまざまです。
また、何のためにその確認をしているのか、そういったことも合わせて伝えるようにしているのでこちらでご紹介したいと思います。
ユーザーが見る状態を確認します。
デザイナーが作ったデザインがある場合、デザイナーの意図に沿っているかを確認しましょう。
色、大きさ、余白、フォントなど、それぞれデザイナーが目的を持って作っていますので、ズレがないように再現できているか確認します。
出来上がった画面とデザインデータを重ねてみるとズレに気づきやすいです。
アニメーションなどの動きや速度については担当デザイナーにも確認してもらいます。
実機で確認することで操作のしやすさも確認できます。可能な限り実機で見ましょう。
【 おすすめのプラグイン（Chrome）：PerfectPixel by WellDoneCode 】
レスポンシブサイトでは特にそうですが、ウィンドウ幅が変わった時に崩れるところがないか確認します。
スマホではサイズがたくさんあるのでメインターゲットのサイズを中心に確認します。
※案件によっては動作保証対象以外は確認しないこともあります。
せっかく作ったサイトもリンクが切れていてはユーザーが回遊できません。
スタティックな部分は特にダミーのままになっていることもよくありますので気をつけましょう。
リンクのURLは正しく書かれていても、内容によっては他の要素が重なっていて押せない、ということもあります。
実際に押してみて確認しましょう。
metaタグで指定している画像が読み込めていない場合や、javascriptの記述ミスがあった場合、エラーが起きていても通常の表示では気づきにくいです。開発ツールなどでエラーが起きていないか確認しましょう。
操作して思った通りの動きになっていても、エラーがあると特定の操作によって何かが起きる可能性があるので見つけたら対処しましょう。
HTMLの文法や使用しているタグの意味が合っているか確認します。
文法が間違っていても表示に影響しないこともありますが、
マークアップを適切に行うことで検索エンジンに見つけてもらいやすくなります。
効果的なサイトを作る上でも重要な確認になります。
また、閉じタグがない・入れ子がズレているなどのミスもよくあります。
ブラウザがたまたま表示できただけなので後々大きな崩れが起きる可能性があります。正しく書きましょう。
【 おすすめのチェックツール： Markup Validation Service 】
【 おすすめのチェックツール２： Another HTML-lint 5 】
見出しのレベルが適切な構造になっているかなどを確認します。
これも文法と同じく、そのページの内容が意図したマークアップになっているかの確認です。
【 おすすめのプラグイン（Chrome）： heddingsMap 】
重たいページは見てもらえなくなります。重たいものはないか確認しましょう。
CSSの記述方法でも表示速度に影響します。
必要のないセレクタやプロパティの削除などもできると良いですね。
【 おすすめのチェックツール： 開発ツールのNetworkパネル 】
【 おすすめのチェックツール： google speed 】
社内で作っているマークアップのガイドラインがあります。
表示速度を向上させるための書き方の他に、運営管理がしやすい書き方などを示しています。
統一することで、担当者以外が見ても読み取りやすく、生産性の向上やミスの防止に繋がります。
WEBサイトはブラウザやアプリのWEBビューなど、本当に様々な環境で見られます。
スマホだとおでかけ中など通信状況があまりよくない場合もあり、対応させていくのにとにかく苦労しますね。
規格を統一してほしい、心が折れそうだ。
本音を言えばそんなところですが、ユーザーが快適にWEBサイトを使えるようするには、制作の最後の確認という工程はとても重要です。
思い込みで見逃してしまうこともあるので、できるだけ第三者に確認してもらうと良いです。
思い込み防止としては「何か間違えているはずだ」という意識をもって確認すると良いと思います。
また、人が作ったマークアップを確認すると自分の知らない書き方を知ることができるのでスキルアップにも繋がります。
しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！
.png)
