本文へジャンプ

MD流 XDデザインデータの作り方

Posted by 國分 椋太

MONSTER DIVEでは、クリエイターが各々で"オレオレルール"に陥りがちな事柄、「HTML5」「jQuery」「Sass」「Git」「サーバ環境」「ローカル開発環境」「デザインデータの制作ルール」などを標準化するために、それらの基礎をチーム内で共有する「Creator's Basic」というイベントを、月に1回、行っています。

今回は、そのなかでも、デザインデータの制作についてご紹介します。

その名も「Design Rule」と呼ばれる講座なのですが、これまでは主にPhotoshop(PSD)でのデザイン制作を前提としていましたが、弊社も業界の流れに沿って「Adobe XD」を用いた制作工程を取り入れており、先日、講座の内容を一新しました。

このブログでは、エンジニアメンバーからも意見をもらいながらデザインチームで定めた「XDデータのデザインルール」を抜粋してご紹介したいと思います。
意外と厳密にはルール策定していないという制作会社さんもいらっしゃるようなので、参考程度に、ご覧いただければと思います。

アートボード・レイヤー・レイヤー名の管理

01 アートボードの命名

  • ファイル名はわかりやすい名前で。日本語は使わない。
  • 頭に数字などを振ると、一覧などで、より見分けやすくなります。
  • 数字はPC用とスマートフォン用で分けています。

アートボードの命名

02 レイヤー名を整理する

  • "階層"を考えて、ヘッダー/コンテンツ/フッターなど、順番通りに並べておく。
  • 必要に応じてフォルダを追加する。
  • エンジニア側にきちんと意図が伝わるようなレイヤー名にする。

レイヤー名を整理する

03 アートボードの上部に現状のステータスを記載する

  • クラウドドキュメントでデータを共有するときに、どのページのデザインがFIXしているか、XD内でわかるようにステータスを表すバッジをつける。
  • 種類は「処理中」「展開中」「完了」の3種類。

アートボードの上部に現状のステータスを記載する

テキスト・シェイプ・ドキュメント

01 テキストのline-heightの余白を基準に間隔をあける

  • テキストボックスの下部に余白を出さない。
  • テキストが隠れている状態にしない。

テキストのline-heightの余白を基準に間隔をあける

02 線は内側に指定する

  • 外部のストロークを使用すると、図形の幅に影響を与える可能性がある。

線は内側に指定する

03 見出し・リストなどは、ボックスを分けて配置

  • テキストボックスは、タイトルと本文で分けてデザインする。
  • リストも、一列一列ボックスを分けて配置する(この方がエンジニアがマークアップ時に作業しやすいんだとか)

見出し・リストなどは、ボックスを分けて配置

カラー・文字スタイル・コンポーネントの登録

01 使用したカラーや文字スタイルはアセットに登録する

  • あとで修正しやすいように、アセットを活用して、登録しておく。
  • 必要に応じてアセット名も設定する。

使用したカラーや文字スタイルはアセットに登録する

02 複数回使用するパーツはコンポーネント化する

  • あとで修正しやすいように、コンポーネントを活用して、登録しておく。
  • 必要に応じてコンポーネント名も設定する。

複数回使用するパーツはコンポーネント化する

おわりに

XDは、次々と新機能やプラグインが出てきているため、このルールも随時アップデートが必要です。今回ご紹介したものは、あくまでその中から抜粋したものではありますが、弊社ではできるだけ社内共有するルールを作って、デザイン制作をしています。

まだまだ「CCライブラリ」(Adobeソフト間でデータ共有をできる機能)なども活用が出来ていないため、今後、もっと使い勝手が良くなってきたら試してみたいと思っています。

今後も、"後工程に優しいデザインデータ作り"ができるよう、精進したいと思います。

最後までお読みいただきありがとうございました。

Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
乃木坂・六本木 撮影配信スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。