デザインデータに最低限含めておいてほしい3つのこと
こんにちはフロントエンドエンジニアの峯です。
デザインシステムやUIガイドラインを作成する場合は、デザイナーと共同してコンポーネントを整理し、しっかりとルールを定義することができます。
しかし、プロジェクトによってはデザインシステムやUIガイドラインを必要としないケースも存在します。基本的にコードは運用されることを前提としているため、そのようなデザインシステムを作成しない場合でも、運用性・変更可用性を考慮して開発する必要があります。
今回は、このようなプロジェクトでも、デザインデータに最低限含めてあるとエンジニアとしてデザイン意図を最低限受け取ることができ、開発過程で大変助かることを3つ紹介したいと思います。
どうか、怠惰なフロントエンドエンジニアのわがままを聞いていただけると幸いです。。
カラーコード一覧がある
フレームワークを活用した開発が中心となり、色の指定を利用箇所それぞれで指定するというような作り方は基本的には行いません。
カラーコードは1箇所で定数として定義し、コンポーネント別にその定数を呼び出すような形で開発します。こうしておくことで、「サブカラーを変更したい」といった場合や「グレーの明度を落としたい」という時に、1箇所を変更すれば適応箇所すべての変更が可能になります。
カラーコード一覧がデザインデータに含めてあると、まずはそのカラーコードを設定ファイルに設定してそこから開発を進めることができて非常に助かります。
カラーコードの命名については、以前の記事で紹介しているのでそちらもぜひ読んでいただければと思います。
サブフォントが定義されている
Webでは、利用しているOSなど環境によって適応されるフォントが異なるため、Mac、Windows、iOSなどOS別に標準フォントを定義されている状態が理想です。
デザイナーが利用している端末には豊富なフォントが入っていたり、Macを使っている方が多いからなのか、特殊なフォントやMacの標準フォントのみが指定されていることが多い印象があります。
Webフォントなど特殊なフォントを利用する場合は、サービス側に導入が必要になります。発行元も共有いただけると助かります。Google Fontsなのか、モリサワなど購入が必要なものなのかなど。
OSの標準フォント選びには、よく以下のサービスを利用してサブフォントの指定を行っています。
タイポグラフィにサイズと高さがセットで定義されている
タイポグラフィについてもカラーコードと同じように、サービスで利用するfont-size、line-heightを一覧にしてあると助かります。
こちらも、標準のpタグ、見出しタグ（h1、h2 etc...）それぞれ設定ファイルに事前に定義したものを呼び出すようにして開発します。
タイポグラフィにはフォントサイズとフォントの高さをセットで定義されている状態が理想です。よくある事例として、タイポグラフィではfont-sizeが18px、line-heightが21pxと定義されているが、デザイン上ではfont-size18px、line-heightも18pxになっている（この組み合わせがタイポグラフィ一覧には存在しない）ということがあります。
エンジニアがフォントの高さを重要視するのには、要素の高さを定義する時に矛盾が生まれうケースがあったりするからです。文字列が改行された時にline-heightが狭いと重なりあったりします。
上記のような事が原因で少しづつズレを生み、出来上がってみるとイメージと違うという事が起こります。これは本当によくあるケースです。
また、タイポグラフィの見出しタグの定義でよくある間違いとして、フォントサイズが大きいものから順に「h1」、「h2」…と割り当ててしまっていることがあります。あくまでhタグは見出し要素なので、フォントサイズによって定義されるものではありません。
さいごに
以上、デザインデータに最低限含めておいてほしい3つのことを紹介しました。
デザイナーがデザインした渾身のアウトプットをしっかりユーザーに届けるための設計図となるのがデザインデータだと思っています。それを正しくエンジニアが受け取理、開発するために、どこまで共通認識を持てるかというのが非常に重要です。
今後もデザイナーとエンジニアのコミュニケーションがよりよくなるような取り組みにチャレンジして何かまたヒントになりそうなことがありましたら紹介していきたいと思います。
・・・
🤝メンバーを募集しています！【ストーリーを実現するUXデザインカンパニー｜アジケ】✒️
現在、アジケでは、一緒に”人にとって豊かな体験をデザインすることで、「味気ある世の中」をつくる ”同志を募集しています！
＜働き方＞
・フルリモートOK
・フレックスタイム制
＜現在募集中のポジション＞
・リードエンジニア（テックリード）
＜アジケってどんな会社？を3分でお伝えします＞
<数字で見るアジケ紹介 〜こんな社員が働いています〜>
選考の前段階として、お互いについてざっくばらんに知る面談のセッティングも可能です！
「まだ応募までは決めきれないけど、会社のことを知りたい」という方もぜひご連絡ください🙌
採用に関するご不明、ご質問などがございましたら、お気軽にrecruit@ajike.co.jpまでご連絡ください📩
▼アジケのカルチャーを知りたい方｜アジケのカルチャーデック
▼アジケの事業内容と今後の展望を知りたい方｜アジケの事業紹介
サポートしていただけましたら、ゴルフ費用に使おうと思います。笑