こんにちわ。Webデザイナーのえみです。
最近、構築案件をこなすことがあり、その際人のデザインデータを使った時に感じたことを自戒も含めてアウトプットしていきます。Webデザイナーとしてfigmaを使用し、活動していきたい方がいたらこの記事を参考にしていただけると幸いです。
Adobeフォント、ローカルフォントの使用は絶対やめよう
フォントって、全体の印象を決めるのにすごく重要ですよね。
Webページはそれが実装できるかできないかが肝なのですが、Adobeフォントやモリサワ、ローカルフォントを使用している場合どう実装するか？を考えた時にクライアント様にお金を負担していただく必要も出てきます。そこは現実的ではないですよね。ですし、figmaが主流になってきている現状的にもAdobe自体を持っていない人も増えてきています。
じゃあどうするか？答えは明白ですね、使わない！！です！！！！！！！！どうしてもテキストで組みたい場合のフォントはデバイスまたはグーグルフォントをご利用ください。
どうしても使いたいフォントがある場合はどうしたらいいの‥？
その場合、テキストコーディングは諦めて、画像で書き出しする形と考えてください。そして持ってない人が書き出しできるように書き出しを行って、デザインデータにここは画像でお願いしますと一言添えると尚親切だと思います。
みんな大好きNoto Sans。グーグルとAdobeが共同開発した文字がない時の□である豆腐をなくそう！という趣旨で作られたフォントです。読みやすいフォントなのでみなさんよく使われるのではないでしょうか。ですがAdobeフォントで提供されてるCJKはGoogleでは提供されていないため構築を行えない場合があります。また、Noto Sans自体が重いので気を付けたいところです。
デザインデータの階層は綺麗に作ろう
アートボード上のデザインは綺麗にし、レイヤー階層は汚いパターン。イラレに慣れてる方に多いイメージです。そもそもイラレはレイヤー概念が薄めなのであるあるですよね。ただこれWeb制作においてはNGです！ figmaで作ろうがフォトショで作ろうがXDで作ろうがイラレで作ろうがレイヤー階層は綺麗（わかりやすく）にする！これ絶対。
デザインがきれいにできてればいいのでは？
Web制作はいろんな人が触ることが前提にあります。デザイナーだけで完結する仕事はほぼないので人が触ることを考慮してデザインデータを作る必要があるんです。階層が汚いデータは無駄に作業工数が増え、それだけで印象が悪くなってしまいます。
かくいう私も、制作会社に入った頃はレイヤー階層を綺麗にできずに先輩にとても苦労をおかけしました。デザインの確認お願いします！からレスが遅くて、？と思ってたらフォトショのデータを全部綺麗にしていただいたり…😭そこから全てレイヤー階層は綺麗にするように心がけています。
figmaを使用する場合はできればオートレイアウトを使用、無理ならせめてグループ化やフレームを使用してコンテンツをひとまとめに。
もし命名のルールが会社やチームである場合はその命名ルールに沿った形にしたほうがいいです。コーディングの際にわかりやすいので。けど特にない場合はわかりやすければいいと思います…。正直そこまでデザイナーが考えているとえげつなく時間かかるので。。。（例）私がよくやるのはsectionか、コンテンツの名前つけます（よくある質問〜とか）。他の人が見た時にわかりやすくなっていれば満点！
画像名はわかりやすいものにしよう
そのままの名前で画像を配置してませんか？フィグマの場合Rectangle00になっていませんか？これ大量の画像を書き出す側からすると結構な手間になります。日本語でもいいのでわかりやすい画像名にしてあげると作業効率が断然アップします。もちろんそのまま使えるような名前にしてあげると尚喜ばれると思います！私は嬉しい。
連番とかではダメなの？
上から連番で名前をつけるのでもいいのですがあれ〜これどうやったっけ？ってなってデザインに戻って再度確認して‥だと若干時間がかかるので心優しい人はコンテンツ名-内容-数字とかそんな感じでつけてあげるといいと思います。
小数点がついている
画像の縦横幅、フォントサイズその他もろもろのpxサイズに小数点はついていないですか？拡大縮小ツールでやってるとなるパターンです。テキストコーディングだったら泣く。emでやればできないこともないのかもですがpxでしか指定できない場合はどうすることもできない。。。
画像書き出しなら横幅に小数点ついててもいいんじゃないの？
書き出した際に小数点のある方向が若干ぼやけるので全体のクオリティを左右するんです。画像のみの縦長LPの場合とか結構あるあるです。クオリティを上げるなら小数点は極力なくしていきたい。
便利プラグイン、figma to STUDIOを使用していますか？
figmaのデザインをSTUDIOに持っていってくれるすっご〜〜〜く便利なプラグイン。
個人的には部品を書き出すのに使用し、大枠は手で構築していくのが一番早いな、と思っています。
マルっと書き出すと、なんか違うな？ってなることが多く、逆に時間がかかったり。このプラグインもレイヤー階層が綺麗じゃないとうまく書き出されないんです。なのでfigmaで直すより手で作った方が早い時は手でやってます。
けどおかげ様で2割ぐらいは早くなってます。ありがとうSTUDIO🙏🙏
最後に
私自身、制作会社にいた時に怒られてきたことが多いので皆さんに共有できればと思い今回この記事を書きました。
figmaは使いやすい分、無駄な階層ができてしまったりして中々綺麗にするのは難しいですよね‥プラグインなども試してますが模索中です。もしこんなのあるよ〜っていうのがあったら是非とも教えてくださいね。
皆さん他の人に渡しても恥ずかしくないデータ制作を一緒に目指しましょう…！
それではこのあたりで。再見〜
