デザインミスを防ぐチェックリスト
デザイナーとして働いてるゆた（@yuta837）です。
日々のWeb制作の業務は、油断するとミスが多発してしまいます。
機械で自動化できない箇所で、人が手を動かすと自覚症状なく無意識にミスが発生します。チェックリストをそのために、用意するのですが、かなり厳格に作ってしまうと確認工数が増え、大変になってきてしまいます。
そのため、最低限これだけは気をつけて行い、ミスをできるだけ防いでいくリストを自分用でもあるのですが、作成しました。
前提
できるだけ手打ちで文字を打ち込まない
メインデザインツールはfigma
ディスプレイだけではなく、紙にプリントアウトして確認する
ダブルチェックする
コンポーネントを使う
文字
font-familyを定義する(figma)
line-heightを定義する(figma)
テキストスタイルでフォントを定義する(figma)
手打ちせず、テキストスタイルで指定(figma)
行が複数になったときの見え方
文字量が増え過ぎたときの対処法
テキストを変更するときは、figmaプラグインのFind and Replaceを使う
通常のテキストとリンクテキストははっきり区別できるか
フォントサイズは11px以上になっているか
表記は統一されているか
余白
各要素のマージンは統一されているか
余白に一定のルールを設けているか
line-heightを考慮したマージンが考えられているか
配色
メインカラー、サブカラー、テキストカラーを定義する
背景色を定義する
罫線色を定義する
カラースタイルで色を定義する(figma)
手打ちせず、カラースタイルで指定(figma)
デザインデータ(figma)
変化のあるコンポーネントの要素も用意したか
見出し・ボックスの伸びた状態の見た目を作成したか
不要のレイヤーは削除したか、不要だと分かる状態にしているか
いらないレイヤー効果は消したか
レイヤーは整理されているか
テキストが増え過ぎたときの変化の想定
画像
画像は荒くなっていないか
画像に不要なものが入っていないか
画像を圧縮しすぎて荒くなっていないか
画像比率は、各ページ揃っているか
その他
hover、focus、transitionなどのアニメーションの作成
レスポンシブ時のヘッダーやメインビジュアルなどの見せ方の検討
SVGを1倍、2倍、3倍で書き出す
アイコンの名前は、形の形状を表すものになっているか
ファーストビューがどこまで入るか決めているか
入力フォームの未入力、入力中、入力後のデザインの用意
まとめ
私が日々の業務で使うリストをまとめてみました。
これからチェックリストは日々更新してブラッシュして、より良い品質で制作業務を進めていきたいと思います。