デザイン実施前 |
設計の確認 |
設計からデザインデータ(psd、ai、png、sketchなど)の内容を確認できる状態にできる。 |
実装可否の確認 |
実装をする際、不可能なことはほとんどないが要素に応じて相談が必要な箇所が存在する。 |
各端末の挙動について |
リキッド、レスポンシブ対応など |
デザイン・イラスト・画像・写真データの支給の有無 |
使用可能なデータの確認 |
デザイン・イラスト・画像・写真データの著作権、肖像権の確認 |
支給されるデータの著作権、肖像権に問題がないか、または制作側に不備がないか確認 |
デザインガイドラインの有無 |
デザインガイドラインが存在するか、または作成が必要か確認 |
モジュール・コンポーネントの有無 |
共通のパーツを用いてデザインが構成されている。 |
余白の指定 |
余白は機能であり、バラバラと都度設定、勝手に判断・変更しないこと |
エラー箇所と修正方法を明示 |
ユーザーがエラーを認識し、どこをどのように修正すれば良いか設計されている |
動画の取り扱い確認 |
動画がある場合、支給されるか、どのように取り扱うか |
動画のキャプション(字幕)を提供するか |
動画がある場合、音声を聞くことができなくてもコンテンツを理解できるか |
ホバー・アニメーションの有無 |
何らかのインタラクションが存在する場合は指示をもらうこと。 |
デザイン品質 |
全体のデザイン確認 |
デザインを確認し、Webでの再現性があることを前提とする |
全体のサイズ確認 |
デザインのサイズを確認し、指定のサイズ及び統一されていることを前提とする |
文字サイズ |
各種文字サイズが実装可能か、改行をしても耐えられるデザインか確認。 |
余白 |
余白に矛盾がないか、CSSフレームワーク、グリッドシステムなどと矛盾がないか確認。 |
カラー |
文字色、リンク色(デフォルト、ホバー、アクティブ、アウトライン)、背景色に不備がないか確認。文字色、背景色のコントラスト比に注意すること。コントラスト比を 3:1 以上にする。 |
情報を伝える色の使い方に注意する |
色だけで情報を伝えようとしていないか(グラフなど、色のみで差別化している、など)確認。 フォームなどのエラーなどで色のみで必須などを伝えようとしていないか。 |
要素の抜け漏れ |
設計から要素の抜け漏れがないか確認。制作者側で要素を勝手に削らないこと。 |
繰り返し処理 |
繰り返し処理をするような箇所がないか確認。繰り返した場合に表示が崩れる可能性があるかなど。リスト、サムネイル表示、文章表示がこれに該当する。 |
クリック範囲 |
デザインだけではどこがクリックできる箇所なのか、判断できない場合がある。明らかなボタンなどは良いが、画像にリンクを貼るのか、テキストはリンクなのか。リストのクリック範囲はどこなのか、など。 |
CSS |
CSSで再現が可能な角丸、ボーダー、グラデーションなどは可能な限り実装することを確認し、背景画像、アイコン、透過が必要な画像などを区別をつけておくこと。 |
RWD |
対応しない。もしくはRWDか、リキッドかの確認し、ブレイクポイントまで確認をしておくこと。 |
コンテンツの拡大縮小がされても問題がないか |
コンテンツが拡大されると表示が崩れるなど発生しないか確認が必要。 |
画像の書き出し品質 |
RWDチェックポイント |
画像比率 |
各デバイスで画像の比率があっているか。画像の出し分けをどのようにするのか確認。 |
背景画像の扱い |
背景画像の出し分けが必要か、ある程度画像がはみ出ても問題ないレイアウトか確認。 |
情報設計の矛盾 |
デザインを確認し、情報設計に矛盾がないか確認。HTML+CSSのワンソース・マルチユースで成立しない場合はソースの二重表記が許容されるか確認すること。 |
PC、SPの要素出し分け |
PCのときだけ、SPのときだけなど、各デバイス限定で表示する要素の有無を確認。場合によってはアコーディオン、ハンバーガーメニュー、カルーセルなどの切り替えが必要。 |
レイアウトの切り替えが3パターン程度耐えられるか |
PC、SPだけではなく、タブレット、または縦横比率が逆転した際など、最低でも3パターン程度の切り替えが考えられる。工数の問題で、2パターンが限界なことが多いためすり合わせが必要。 |
固定サイズではなく、コンテンツ量が常に変動する前提のデザインか |
メニュー、リスト、テーブル、カラムなど、テキストの量や画像サイズが統一されない場合を考えられているか。 |
改行位置 |
よくよく見るとPC、SPのデザインで改行位置が違う。ということがよくある。 |
コンテキストの矛盾 |
デバイス変更時、文章や状況に矛盾がないか確認。例で言えば文中に左側、と言いつつSP時には画像は上にあるなど。 |
テーブルのレイアウトに無理がないか |
テーブルはレイアウトの変更に弱い。SPからデザインしたほうが良い。表の情報がクライアント支給の場合は紙媒体、セルのマージがされることを前提に考えること。 |
JSの動作確認 |
PCで動作したあとにSPサイズにすると表示が崩れる、というのはよくある。逆もまた然り。 |