コーディングしやすいデザインデータの作り方 ★Part１

デザインとコーディングの両方をするようになって気づいたこともあり、コーディングをしないデザイナーへ向けてポイントをまとめました。
※フォトショップをベースにお話しますが、イラレのことも少し書きます。

今回は、デザインを作り始める入る前に知っておきたいポイントを中心にまとめました。

目次

• カラーモードはRGB
• 単位はpx(ピクセル)
• 実寸サイズで作る
• 整数を使う
• 2倍サイズのデザイン作成のときに、奇数を使わない
• 最後に

カラーモードはRGB

モニターはRGB（赤緑青の三原色）で表示しているのに対し、印刷物はCMYKです。詳しい説明は省きますが、表示できる色数が違ので 途中でCMYKからRGBに変更すると色味が変わってしまうので、必ずはじめに設定しておきましょう。

新規作成の画面

単位はpx(ピクセル)

モニターはpxで表示しているためpxにしましょう。mmやptなどで作ると、pxに変換したり小数点が出てしまうなど作業が増えてしまいます。

Photoshopの環境設定

上部メニュー内の環境設定から、pxに設定しておきましょう。

実寸サイズで作る

PCは実寸サイズ、SPは倍サイズなどで作りましょう。
※もちろんRetina対応ならそれに対応したサイズで。

画面サイズそのまま（iphone7なら375px）で作ってしまうと、倍サイズで画像書き出さないといけなかったり、そのときに画像サイズが足りなくて荒れてしまう…なんて悲劇もあるかもしれないので、お気をつけください。

整数を使う

特にIllustratorのデータで多かったのですが、座標やオブジェクトのサイズに小数点がついてるのがありました。
小数点を使うと、オブジェクトの端がぼやけてしまったり、書き出しのときに「切り上げ or 切り捨て」によりサイズがずれたり、スライスに時間がかかってしまいます。イラレを使うときは、「ピクセルにスナップ」にチェックをお忘れなく。

※よくない例（小数点がいっぱい‥）

2倍サイズのデザイン作成のときに、奇数を使わない

スマホ用の2倍サイズのデザインであったのですが、本来 2倍サイズで作っているので、4pxの線なら 実装時は半分の2pxに。30pxの文字サイズなら15pxの表示になります。

ですが、文字サイズが10px（5pxは実装できないし、できても読めない）だったり、線の幅がなぜか1px（奇数）で作られていたり。ミスなのかあえてなのかわからない場合もあるので、お気をつけください。文字サイズの対策として、ぜひ実機確認してみて 可読性のチェクもしましょう(^^)

最後に

基本的なことが多く細かい内容でしたが、自分でも気をつけたい部分もたくさんあります。
まとめ出すのたくさん出てきたので、また次回！