• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2020/10/15
書いた人:
futappa_staff
カテゴリ:
デザイン
186 views

デザインとコーディングの両方をするようになって気づいたことを 紹介します!コーディングをしないデザイナーさん向けの内容です。

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

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

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

目次

カラーモードはRGB

good_design_img_rgb

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

新規作成の画面

good_design_img01_2

単位はpx(ピクセル)

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

good_design_img01

Photoshopの環境設定

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

good_design_img02

実寸サイズで作る

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

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

整数を使う

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

※よくない例(小数点がいっぱい‥)

good_design_img03

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

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

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

good_design_iphone

最後に

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


この記事を読んだ人はこんな記事も読んでいます