デザイン部の永島です
事務の傍ら、デザイン指示書の作成をお手伝いをしています。
私が指示書作成時に注意しているポイントを簡単に紹介します。
デザイン指示書とは
フェンリルではデザイナーからエンジニアに実装を依頼する際、デザイン指示書というデザインの意図をまとめたレイアウト等を指定するドキュメントを作成しています。
エンジニアにどうコーディングしてほしいかを伝える手段の1つとして作成しており、デザイナーとエンジニアとの情報共有の基準となります。
記載してる内容
案件や、エンジニアによって記載する内容については差異はありますが、最低限、デザイン指示書に記載してる基本的な内容は以下です。
- カラー
- フォント
- マージン
- アセット名
- 状態変化
iOS、Android の場合は、各 OS の標準を覚えよう！
iOS であれば、Human Interface Guidline 、Android であれば Material Design、どのプラットフォームもガイドラインが用意されてます。
OS 標準の UI を採用している場合は、エンジニアに pt や dpi のサイズを指定するより、OS の標準に準ずる旨を記載することで、効率的な指定ができます。
要素をまとめて定義付けしよう！
カラーや見出し、リストなど、ルールを整理して定義付けしておけば、毎回の指示が省略できます。
複数の画面で、同じ要素を使いたい時に便利です。
さいごに
私は初めの頃、ありとあらゆる数値を書き込んで、エンジニアさんを困らせることが何度もありました。
今は上記のポイントを意識して指示書を作成してます。
また、アニメーションやレスポンシブでの指定に困った時は、参考 URL を記載しましょう。
「同じ動きにしてください。」と添えるだけでエンジニアさんが作ってくれたりもします。（感謝！）
最近はデザイナーのツールも Sketch が多くなり、エンジニアへの共有もとても便利になりました。
Sketch では自動で、マージンや色味などを抽出してくれるプラグインが存在します。
ですが、デザイナーの細かな指示や配置を伝えるには不十分なところもあります。
そのため、デザイン指示書を作り、エンジニアとデザイナーとの無駄なやり取りを減らしています。
今後も Adobe XD など、新たなツールがどんどん出てきていますが、エンジニアが必要な情報にツールは関係がありません。
フェンリルとして、最低限必要な情報をまとめておくことで、新しいツールを試すハードルを下げたり、効率のいい開発ができるように努力しています。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！
関連記事
