引き継ぎしやすいデザインデータって何?コーダー目線で考えるデザインカンプ

デザイナーがカンプを作るうえで、「コーダーにどう引き継いだらいいのだろう?」と考えることはありませんか?紙媒体であればIllustratorでレイヤー管理は3つ前後、または印刷所の規程に沿って統合などをかけます。では、webデザインでは具体的に“分かりやすく”をどう判断してけばよいのでしょうか。

この記事では、データを作れるようになってきたデザイナーが一皮向けるための“出力できるwebデザイン”をテーマに、見通しのよいデザインの一例をあげています。PhotoshopやIllustrator、Xd問わず応用できるテクニックにしましたので、ぜひ参考にしてみてください。

おさえておくとコーダーが泣かなくなる6つのポイント

情報量が多く、素早い修正対応やパターン出しに追われるデザイナー。60%でデザインを提出し、すり合わせをしながら完成させていく人も多いと思います。未完成でも見通しのよくなる最低限のポイントをおさえておけば、疑問だしをされたときもスムーズに対応できるはず。まずは、下記の6点をおさえることからはじめてみましょう。

1.アートボード外に指示は書かない。指示書はPDFなどで別途明記する

 

▲【悪い例】何かが入っているがUIの色と同化しわからない

▲【悪い例】アウトライン化すると指示が入っているのがわかる

稀に、個人的なメモなのか指示なのかわからない状態でアートボード外に滑り込ませるカンプを見かけますが、これはNG行為です。PhotoshopやIllustratorのユーザーインターフェイスはCS6より白や黒などの変更が可能になりました。指示のテキストと色がかぶり、見えなくなるので、絶対にやってはいけません。

2.レイヤー名は“レイヤーのコピー”などで放置しない

 

▲【見通しの悪い例】レイヤー順序もレイヤー名決まっていない状態

3.レイヤーは多くても3階層までにおさえる

 

▲整理をすると細かいオブジェクトもすぐに見つけられるようになる

グループの中の入れ子が深くなると、レイヤーの見通しが悪くなります。イラストなどベクターデータなどで作り込んだ素材は画像化し、スマートオブジェクトなどで管理しましょう。グループ化やグループの解除などを繰り返していると、命名に苦労しますが、1日に1回は時間をとって命名するよう心がけると良いです。

4.共通設定がどれでどこにおいてあるのか明確にする

大型案件などでは、使い回しのきくパーツをコーダーが並行して組み立てつつデザインも完成させていくスタイルが多々あります。ワイヤーフレームまで完成させたらモジュールリスト(共通化してあるスタイル)を別途つくり、場合によってはシンボル機能をつかってスタイルをコピーしていくと、修正にも柔軟な対応が可能な制作ができるようになります。

5.色の設定はスポイトでコピーせずカラーコードで記述する

 

▲左のスポイトマークから色のコピーは極力控える

つい使いがちなスポイト機能ですが、コーディングでは全てカラーコードで管理してるため、カラーコードが1つ違うと共通設定として扱えなくなってしまい、イチから組み立てる作業が発生します。スウォッチパターンは一度リセットし、Illustratorなどではグローバル化して一括変換にもできるような状態にしておきましょう。

6.データはデバイス毎の管理ではなく、ページ毎に管理すると吉(推奨)

 

コーディングは元になるデータから、キレイに統一感をもってレスポンシブにします。共通部分とそうでない部分の違いを照らし合わせながら作業することが多いので、データの管理はデバイスごとよりページ毎の管理の方が良いとされることも。ただし、ここは好みが別れる部分があるので、あらかじめどのように作成するかコーダーに一言確認すると良いでしょう。

次のページ:
レイヤー整理のタイミング
みんなはどう考えているのか?

 

この記事を書いた人

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。