ベンチャー系など事業会社のインハウスデザイナーは、自社サービスのサイトやアプリやLPなど、様々なデザインに関わります。デザイナーはディレクターやエンジニアなどと協業することが多いので、デザイナー以外の人にも仕様がわかる必要があります。そこで、Figmaのデザインデータをエンジニアにわたす前に、気をつけるべきチェック項目をつくりました。
最近特に気をつけてることは、デザインデータだけでなく、仕様書を書く気持ちで書くようにしています。

デザイン確認（Figma）

デザイン意図を文書化する

なぜこのデザイン、レイアウト、フォント、色にしたかも明記します。文書化することにより、なんとなくデザインしてしまった部分がわかり、意図したデザインができると思います。

PCとスマホのデザイン

PCでのデザイン、スマホサイズでのデザイン、場合によってはタブレットのデザインも作成します。ブレイクポイントが決まっていればそれに従い、決まってない場合は例えばスマホ（375px）、タブレット（768px）、PC（1100px〜）など決めます。
また、スマホからタブレットの間（375〜767px）のデザインはどうするか、もエンジニアやディレクターと協議する必要があります。

ダミー箇所はコメントに書く

デザイン時には文章が決定していないときがあるので、ダミー部分はエンジニアもわかるようにします。

リンク先があれば明記する

個人情報保護方針、コーポレートサイトなどの遷移先があれば、追記します。ボタンのホバーのデザイン、変わるまでの時間も必要です。

ボタンのホバーも記載する

ホバー時のデザインも作成する。何秒で色が変わるかなども明記します。

フォーム、マイページ

確認ページ、サンクスページ、サンクスページからの遷移先も考えます。
エラーが出たときのデザインと文言も。

データの受け渡しが起きるページはCRUDを確認する

これはデザイナーの領域ではないかもしれませんが、マイページなど、ユーザーがデータを作成、削除などするときに必要なデザインも作成します。ユーザーが情報を記入する箇所があれば、作成ボタン、削除ボタン、トースト、エラー時などのデザインも後から追加で作成することにもなるので、あらかじめ考慮すると良いです。

CTAボタンを意識する

特にLPの場合はCTAボタンに視線がむくことを意識していきます。

SPはボタンの間隔、大きさを注意

タップしやすい大きさにする、ボタン同士を近づけないようにします。

部分的にデザインを変更する場合は、変える箇所、変えない箇所を明記する

デザイナーは変更する箇所は理解しているけど、エンジニアにも「ここだけ変更」することも記載します。

画像書き出し（Figmaの場合）

画像が並ぶ場合は同じ大きさのフレームに入れる

縦横比が違うイラスト、アイコンが並ぶ場合は、同じ大きさのフレームに入れます。

画像は書き出しできるようグループわけする

意外と忘れがちなので、フレームもしくはグループ化にする。

テキストにしなくても良い場所は明記する

テキストで実装するのは難しい箇所は、画像でも良い旨を伝えます。

動作確認

文言

組織によって確認する人がいると思いますが、デザイナーも文言確認します。

横幅の確認

下記の横幅の際の挙動を確認します。
SP：375px〜　Tablet：768〜1024px　PC：1024〜1200px　Large：1201px〜

リンク先

コンテンツ部分だけでなく、ヘッダー、フッターのリンク先の確認もします。

ボタンのホバー時

意図したデザイン通りのアニメーションになっているか確認します。

フォームは実際に記入してみる

必須項目、任意項目を確認し、実際に記入して動作するか確認します。全角/半角入力した際の挙動も確認します。

エラーが出たときの挙動

意図的にエラーをだし、その際のエラー文言や挙動を確認します。

こうみるとデザイナーの役割は、デザイン制作だけでなく、エンジニアが実装しやすいデータを作成する、動的な挙動をするページも想定する、実装後の確認まで並走する役割が大切になってきます。

参考図書