こんにちは。みなさん5月病になっていませんか？私は新人社員でもないのに半分陥りかけています。友達とぱーっと飲んだりしてストレス解消していますが、いい加減肝臓がやられてしまいそうなので自重気味です。。

さて、デザイン作業が平行すると、ついついPSD(Adobe Photoshop)ファイルの細かいところが疎かになりがちですよね。デザインプレビューのときは見えていない部分でも、コーディング作業をするエンジニアには「このデザインどうなってるの？」「ちゃんと考えて作ってよ！(当たり前ですが)」となんとなくでは作業出来ないことがたくさんです。今回はこれさえおさえておけばきっと大丈夫。エンジニアと険悪にならないPSDファイル作りについて書きます。基本中の基本ですが、忘れたりしてしまうんです…(すみません)

その1.マウスオン画像はある？

「すごく良いボタンを作れた！おしたくなるわこのボタン！」…で、これマウスオンするとどうなるの？そのデザイン用意してる？「してません。」未だにあるある第1位です。

かならずボタンとマウスオン画像はセットで用意しましょうね。ソフトライト白で手抜きなんてしちゃ駄目ですよ。

 

その2. ガイド、ずれてない？

「コンテンツ幅もしっかり決めた！あとはこのガイドにそって作っていくだけ！よろしく！」　…え？ちょっと、そもそもガイドにあってないんだけど…あとドロップシャドウで左右はみ出してるんだけど…。

うーんなぜだか気づくとずれている。最初あわせたはずなのに…ってこともあるかと思います。とくにドロップシャドウでガイドから２pxはみ出てるっていうのはよくやるパターンだと思います。コンテンツだけあわせて影おとして忘れちゃうんですよね。

 

その3. ピクセルまたぎしてない？

ピクセルまたぎとは…ピクセルの間と間にシェイプがまたいでしまって境界線がぼやけてしまうことです。スライス入れるときに困ります。調整してくれるエンジニアもいますが、毎回調整してもらうわけにはいきませんよね。気をつけましょう。最新のPhotoshopだと未然にピクセルをまたがないようにする機能があったりしますよね。でもその機能がないPhotoshopで開くと無効になったりするので、かならずチェックしましょう。

 

その4. メインビジュアルや背景はどんなモニターサイズでも大丈夫？

「メインビジュアルに広がる大きな空！大地！すっごく気持ち良いデザイン！」…うーん確かにデザイン良いんだけど、これ左右どうなってるの？そのまま切っちゃっていいの？

モニターサイズは様々なサイズがあるので、そのすべてのサイズのことを考える必要があります。もちろんデザインによっては左右をぴったり切るデザインもあります。左右がどうなるか、エンジニアに渡すときは幅を広めに作ってあげておくと良いですよ。

 

その5. レイヤー整理がされているか

どうしてもレイヤーが増えてくるとレイヤー整理に気がいかなくなることもあります。でもそんなカオス状態のレイヤーでPSDファイルを渡されて困るのは、やっぱりエンジニアです。細かく整理する必要はないので、せめてコンテンツごとくらいには分けてあげましょう。コーディングのことを考えて分けて整理してあげられると一番ですね。

 

その6. コンテンツ幅は偶数？

 

センター揃えなのにコンテンツが奇数…1px程度かも知れないけど、正確にセンターにならないよ…。コンテンツは偶数で作ってあげると良いですね。

 

以上6つ、かなり基本的なことでした。これでエンジニアと友好的な関係を築けるといいですね★