制作時に気を付けたい！デザインデータのポイント ― コラムーベイクロスマーケティング株式会社

綺麗なサイト、かっこいいサイト、ああしたいな、こんなのはどうだろう…。
普段デザインをするにあたり、どのように考え、作っていくでしょうか？

デザインからコーディング、一人で一貫して行うなら直面しないかもしれませんが
デザインのみを渡すことになった際や、データを受領した際などに気がつく
気をつけていきたいポイントをあげていこうと思います。

レイヤーの整理

レイヤー名をつけ、分かりやすくする
要素ごとにフォルダ分けをする
未使用・非表示レイヤーは削除する

ついつい私も、自分しか触らないし触ればわかるから、と
時間短縮も含め蔑ろにしてしまう作業ですが、いざ人に触ってもらうとなると、話は別！

不要なレイヤーが大量だったり、自動選択で思った所が
選択されないけれど、名前がついていないからどこなのか手探り…
もし私がやられてる側であれば「どうなっていやがる…」とダメージを受けます。

スライス（切り出し）作業からお願いする場合や、クライアントへ渡すことになった際には
きちんと整理をしておかないと、受け取った側の作業コストは膨れ上がってしまいます。
思いやりの心をこめて、整理していきましょう。

RGBで制作する

PhotoshopやIllustratorのカラーモードを確認する

ごく稀に、イラストレーターで作られたデザインカンプが「CMYKだった…」ということがあります。
WebではRGBですので、この場合、デザイナーの思い描いていた色は
再現できないことになってしまいます。

まだトップページだけ…という段階であれば、RBGへの変更は可能ですが、
多くのページが完成してしまっている段階では、
時間がかかってしまい、納期などによっては調整が厳しくなります。

CSSを指定する要素にフィルター効果を使わない

乗算・オーバーレイを使用をしない
透過して色味の調整をしない
明度や彩度の補正フィルターを使用しない

効果やフィルターを使用しての色指定は、
css指定するにあたりカラーピッカーで色をとってきたりしなければなりません。

また、何色が使われているのか、実際にこの色の指定なのか、という調べ物も増えてしまいます。
コスト削減のためにも、css指定したい色が明確に、
すぐに分かるように作るように心がけたいですね。

要素（部品）の統一を意識する

ボタン加工の仕方を統一する（サイズやシャドウ効果）

ファイルごとに個々に加工されている場合や、サイズが微妙に異なったりするケースは
作業効率が悪くなることは勿論、ユーザーの見辛さにも繋がりかねません。
同じパーツの場合は、できるだけ統一して使用しましょう。

実寸でデザインする

最小単位は1px
mmで作るのではなくpx指定で制作する
実寸サイズで制作する

基本的なことかもしれませんが、カンプがIllustrator納品で単位がmmだった、ということも
珍しくはありません。また横幅サイズも割り切れる数字ではなく、1001pxだった…など
ちょっとしたハプニングになっちゃいますよね。

mmの単位指定だった場合、実寸とも異なってきますから、
縮小するのに時間がかかり、文字サイズはどうか、余白はどうかのチェックなど、
作業時間は膨れ上がる一方です。

さらに、Illustratorでは小数点以下のサイズが普通に指定できてしまうので
使用されているケースもありますが、こちらも調整に時間がかかってしまいます。

まとめ

もっと気を付けたいポイントはありますが、今回は5つにしぼってご紹介しました。

ただ私は個人で使うだけと思うと、途端に手癖だけのデータを製造してしまうので気をつけていきたい所在です。
もちろん、些細な疑問でもコミュニケーションで補える部分は補うことも大切であり大前提ですが、
よりスムーズに作業を進行する為にあたって、重要なポイントですね。

Written by Baycross Marketing