はじめまして！デザイナーのしょうきです。

デザイナーの方なら一度は経験があると思うのですが、「エンジニアにとってコーディングしやすいデータってどう渡せばいいんだろう？」と悩んだことはありませんか？

僕自身もまだ模索中ですが、エンジニアの方と話し合いながら進める中で「このデータはコーディングしやすい」と言ってもらえた工夫がいくつかあります。今回はその内容をまとめてご紹介します。

余白の数値を共通化しバラバラにしない

これはデザインの基本でもありますが、コーディングのしやすさにも直結します。

たとえば下記のような「h1」というタイトル要素があるとします。多くの場合、CSSではタイトルに対して上下のmarginが設定されます。つまり同じ「h1」が繰り返し出てくるとき、余白が統一されていれば同じクラス名でまとめられます。

逆に、同じ「h1」でも余白がバラバラだと、それぞれに別のクラスを付与して値を設定しなければなりません。結果的にコードが複雑になり、管理コストも増えます。

もちろん、すべてを固定化すると単調なデザインになってしまうので、必要に応じて柔軟に調整するのが大切です。

画面外にはみ出す要素は、サイズ変化時のデザインも伝える

よくあるのが、下記のように背景のテクスチャや装飾が画面外にはみ出しているケースです。
この場合、画面幅が広がったり狭まったりするとどうなるのかを明確にしておく必要があります。

なのでここで気をつけたいポイントは、

• 単純に拡大縮小されるのか
• 隠れている部分が表示されるのか

デザイナーにとっては「当たり前の挙動」と思っていても、そのままではエンジニアには伝わりません。

そのため、追加のデザインを用意するか、文章や口頭で意図を共有することが重要です。これだけでギャップや後戻りが減り、スムーズに進行できます。

アニメーションは実装可能か必ず相談する

当たり前に思えるかもしれませんが、アニメーションをデザインする際は必ずエンジニアと相談しながら進めることをおすすめします。

参考サイトで実現できている動きでも、実際の環境では再現が難しかったり、開発工数が大きく膨らむことがあります。もしフローの後半で「やっぱりできません」となると、納期や信頼にも影響しかねません。

そのため、参考動画や事例を共有しつつ「どのように動かしたいのか」を具体的に伝えることが大切です。

この記事全体を通して言えることですが、円滑な進行に欠かせないのはやはりコミュニケーションです。

オートレイアウトは全てに使えばいいものではない

Figmaを使う上で「オートレイアウト」は欠かせない機能ですが、「すべてに使えばいい」というわけではありません。

オートレイアウトの本来の目的は、

• デザイナーにとっては効率化
• エンジニアにとっては、より実装に近いデータにしてPhotoshopやIllustratorなどでは表現できない可変する領域の理解ができる

そのため、下記のような項目が増減するような「ヘッダー」「お知らせ一覧」「会社情報」などには効果的に使えます。

一方で、複雑なレイアウトにまで細かくオートレイアウトを設定してしまうと、逆に余白の調整やデータの扱いがしづらくなることもあります。その場合は、無理に使わない方がスムーズです。

最後に

結局のところ、どんなにデータを工夫しても「相手に伝わらなければ意味がない」と思います。だからこそ、今回紹介した内容も正解というより「ひとつの考え方」として捉えていただければ嬉しいです。デザイナーとエンジニアが歩み寄り、お互いの得意を活かしながら進めていくことが、結果としてより良いアウトプットにつながるはずです。僕自身もまだまだ模索中ですが、少しでも参考になれば幸いです！