MD-Blog_Web Creative

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の余白を基準に間隔をあける

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

02 線は内側に指定する

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

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

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

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

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

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

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

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

おわりに

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

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

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

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