logo

back DEVELOPMENT

iPhoneアプリのデザイン指示書について

2013年08月06日

最近になってようやく、その他の開発のために止まっていたlogのアプリ開発が少しずつ動き始めました。デザインはほぼFIXしていたので早速実装に取り掛かっています。やはり自分が作ったデザインがアプリケーションという形に落とし込まれていくのは、デザインに命が吹き込まれているようで毎度感動させられますね…。 さて今回の記事の内容は、そんなデザインに命を吹き込む過程でスマホアプリ開発に必要な、デザイナーからエンジニアへ受け渡されるデザイン指示書についてまとめてみたいと思います。

デザイン指示書とは

マークアップの世界ではわりとPSDファイルを渡せば自前のPhotoshopなりで素材を切り出したり、大きさを測ったりすることはわりと一般的ですが、スマホアプリ開発ではマークアップ的な見た目実装に加えて機能も同時に実装する必要があるので、全体の作業量なども考慮して素材の切り出しや余白・文字の大きさの指定などはデザイナーが担当することも多いようです。 きっかけはフィードテイラーのsumihiroさんのツイートから。

どうやらこのような素晴らしい指示書は全体の効率・クオリティにかなり影響しそうなので、メタ・グラマーさんがTwitterやFacebookで公開されている資料の一部をもとに、どういうふうにこういったデザインの指示をすれば効率よく開発できるのかをまとめてみました。

メタ・グラマーさんから(勝手に)学ぶ良いデザイン指示書

余白がピクセル単位で細かに指定されている

フォトショップを扱えないエンジニアさんは画面上の定規を持っていないことが多いので、その場合目分量で実装してしまうことがあります。デザイン通りの余白を再現してもらうためにも、しっかりpx単位で明記します。

余白だけでなく要素の大きさも指示

余白ももちろんですが、UIの実装のほとんどは余白と要素のサイズを同時に指定することが多いので、計算する手間やミス予防に大きさも明記します。

指示文は小さく、細かく

指示書の文章はかなり小さめのフォントで、細かく指示します。とはいえ冗長なのはいけませんが、プレゼン資料のように大きめであっさりしているよりかは良さそうです。

フォント指定は書体、サイズまで

フォントはサイズだけでなく書体も指定します。ここで忘れがちなのが、太字指定。たとえばヒラギノならW3とW6のどちらのウェイトかも指定します。

ボタンなどの画像もファイル名と、ホバー時のものも明記 アイコンやボタンなど画像で実装して欲しいところは、書きだした画像のファイル名を明記して画像を目視で探す手間を省きます。画像の大きさに関しては、とくに明記しなくともよさそうです。

【おまけ】色指定は色セットを作って指定する

これはメタ・グラマーさんの指示書ではなくぼくの経験でよかったなと思った指示方法ですが、色は毎度RGBカラーで指定するのではなく、UIColorで呼び出せるようなカスタムカラーのセットを予め用意しておくと便利でした。例えば「ここの色はlogNavyColor01で」のように指示すると、何度も使うような色はXcodeの補完で容易に呼び出せるので実装も楽になりました。

まとめ

ぼくも指示書作りに慣れていないのでまだまだですが、しっかりした指示書をデザイナーが作っていれば効率はもちろん最終的なプロダクトのクオリティにも大きく影響することは確実なので、もっとエンジニアさんが開発しやすいような指示書づくりを心がけていきたいですね。

シェアしてね

2013年08月06日

, , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.