CHECK
その他
- ページ内で使用しているテキストの、半角・全角の使用は適切ですか?
(英数字は半角統一が望ましいです)
- 機種依存文字を使用していませんか?
(①や㈱、♡などの絵文字記号など)
- 複数のブラウザで、動作確認をしましたか?
( IE / Edge / Firefox / Chrome / Safari など )
- 複数のOSでの動作確認をしましたか?
( Windows7 / 8 / 8.1 / 10 / MacOS / Android / iOS など )
- 下層ページはフォルダで管理していますか?
( about.html などファイル名で下層ページのリンクを作成するのはNG )
- 下層ページでは、共通した場所にページタイトルを配置していますか?
- 専門用語はわかりやすい言葉に置き換えていますか?
- 貰った(用意した)素材テキストに、誤字脱字はありませんか?
- サーバー内に日本語や全角のファイル・フォルダはありませんか?
- サーバーにアップロードする前に、非表示・不可視ファイルが含まれていないか
必ず確認しましょう(特にMacOSを利用している場合は注意が必要です)
- 金額など数値の表記は、3桁毎に『 , (カンマ)』を付けていますか?
Illustrator & Photoshop
- 画像の比率を変えたり、引き伸ばしたりしていませんか?
- 画像は傾いていませんか?
- ロゴデータ内等の文字データは、アウトライン化されていますか?
- Illustratorでのデザインカンプ作成時、ピクセルプレビューをオンにしていますか?
- Illustrator作業時、オブジェクトの座標や幅・高さに小数点は発生していませんか?
- Illustratorで作成した線やオブジェクトの境界線がにじんでいませんか?
- スライス領域に、重なった領域が発生していませんか?
- Web用に保存する際、適切な画像フォーマットを選択していますか?
- 画像の修正時、コントラストを上げすぎたり明るくし過ぎたりしていませんか?
- フォントの設定は適切ですか?※htmlテキストは『游ゴシック』や『メイリオ』等です。
(html用テキストと、画像書き出しテキストに使用できるフォントの種類は異なります)
- FacebookやTwitterなど、外部サービスをページ内に組み込む予定はありますか?
(組み込めるサイズか確認するためにコードを取得し、実寸をデザイン上に反映させる)
html
- ウェブページ先頭に適切な属性がありますか?
(lang属性やdir属性)
- ページタイトルで、ウェブページの概要が分かりますか?
(<title>タグ内の文字です)
- 各ページタイトルは、ページの内容に合わせて変更していますか?
- 各ページのkeywordsやdescriptionはページに合わせて設定されていますか?
- <meta>タグで、適切なviewportの設定はされていますか?
- favicon.icoの設定はされていますか?
- ページ上部に見出し1(<h1>タグ)は使用されていますか?
- 各下層ページに、見出しタグによるページタイトルは配置していますか?
- 見出しの使用順に誤りはありませんか?
(見出し2の次が見出し4になっているなど)
- 各下層ページタイトルの表示位置がズレていたりしませんか?
- Dreamweaverのバリデートチェックでエラーは出ていませんか?
- オンラインlintチェックで、減点されていませんか?
- idやclass名は、名前を見ただけで内容や機能を予想出来る名前になっていますか?
(出来ればローマ字読み等は避けましょう class="setsumei"など)
- 現在記述されているidやclassによる区別は、本当に必要なものですか?
- 全角スペースや半角スペース、連続した<br />タグ等でレイアウト調整をしていませんか?
- リンクテキストの内容で、どのようなページ又はファイルにジャンプするか分かりますか?(URLのみ等の場合はNG)
- リンクに#(NULLリンク)を使用していたり、リンク切れを起こしていませんか?
- 伝えたい地図や写真、画像文字などがサーバーにアップしたページでも表示されていますか?
- <img>タグで貼られた全ての画像には、代替テキストであるalt属性が設定されていますか?
- <table>タグ関連のタグ内にwidthやheightの記述はありませんか?
(html内に直接幅や高さの記述はNGですのでCSSで設定しましょう)
- 手順等、順番が存在する部分には<ol>タグを使用していますか?
- ©や¥マークなどは文字参照コードで記述されていますか?
- 機種依存文字を使用していませんか?
( ○の中に1など )
css
- 複数のcssファイルをリンクしている場合、リセット→共通→個別ページ専用という順番にリンクさせていますか?
- 必要ないcssの設定の記述は削除していますか?
- 同じ様な設定が書かれたcssが複数記述されていませんか?
(classを上手く利用してcssソースの効率化を目指しましょう)
- 全てのページで統一されたフォントで表示されていますか?
(ゴシック体や明朝体を混在させ過ぎない)
- 一般的ではないフォントを指定していませんか?
(通常日本語は、游ゴシック・ヒラギノ角ゴ・メイリオを指定します)
- 全てのページで統一された適切な行間が設定されていますか?
- フォントサイズをpxで指定していませんか?
(今回は%を使用した相対設定でサイズを指定しましょう)
- 文字サイズを小さくし過ぎていませんか?※基本の文字サイズは12px以上が推奨
(日本語ゴシック体は最低でも10px相当必要で明朝体は最低12px相当)
- heightで高さの指定をしていませんか?
(テキストが入っている個所の高さ指定は基本的にNG)
- 文字の大小の変化でレイアウトが崩れたりしませんか?
- 文字の大小の変化で上下左右隣り合ったコンテンツに文字が重なったりしていませんか?
- ナビゲーションの位置は全ページ通して同じ位置で統一されていますか?
- ナビゲーション等のホバーやカレント設定はされていますか?
- ナビゲーションホバー時、ボタンがズレたりレイアウトが崩れたりしませんか?
- ページ内にスクロールバーが発生するコンテンツを配置していませんか?
(通常タッチスクリーン端末ではスクロールバーが表示されないためNG)
- ウィンドウサイズを変更しても、レイアウトは崩れませんか?
- flex、floatを使用する際は必ずwidth、またはflexプロパティを指定していますか?
Javascript
- 組み込んだスクリプトが想定通りの動きをしていますか?
- スクリプト機能をオフにしても必要なコンテンツが見えますか?
(見えなくなってしまうコンテンツが無いか)
- スクリプト機能をオフにして、行けなくなるページがありませんか?
(ドロップダウンメニュー実装時など)
- 複数のブラウザで、全て同じ動きになっていますか?
- バージョン違いで複数のjQuery本体を読み込んでいませんか?
- 余計なスクリプトを読み込んでいませんか?
- 動かなくなっているスクリプトはありませんか?
- jQuery等の本体ファイルは、ダウンロードしたものを読み込んでいますか?
(今回は外部サイトからの読み込みは避けて下さい)
- html内に直接記述しているスクリプトはありませんか?
(基本的にスクリプトは外部ファイルを使用してください)