デザインデータをエンジニアに渡す前に
ベンチャー系など事業会社のインハウスデザイナーは、自社サービスのサイトやアプリや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〜
リンク先
コンテンツ部分だけでなく、ヘッダー、フッターのリンク先の確認もします。
ボタンのホバー時
意図したデザイン通りのアニメーションになっているか確認します。
フォームは実際に記入してみる
必須項目、任意項目を確認し、実際に記入して動作するか確認します。全角/半角入力した際の挙動も確認します。
エラーが出たときの挙動
意図的にエラーをだし、その際のエラー文言や挙動を確認します。
こうみるとデザイナーの役割は、デザイン制作だけでなく、エンジニアが実装しやすいデータを作成する、動的な挙動をするページも想定する、実装後の確認まで並走する役割が大切になってきます。
参考図書
サポートしていただけたら、喜んで泣きます。