デザインミスを防ぐチェックリスト

デザイナーとして働いてるゆた（@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倍で書き出す

• アイコンの名前は、形の形状を表すものになっているか

• ファーストビューがどこまで入るか決めているか

• 入力フォームの未入力、入力中、入力後のデザインの用意

まとめ

私が日々の業務で使うリストをまとめてみました。
これからチェックリストは日々更新してブラッシュして、より良い品質で制作業務を進めていきたいと思います。