【デザイナー向け】修正を減らす！デザイン提出前チェック項目

クライアントや社内の依頼者にデザインを提出する際、こんな経験はありませんか？

依頼者がPhotoshopなどのデザインツールを利用していない場合、ちょっとした修正でも毎回デザイナーに戻してもらう手間が発生しますよね。急ぎの場合であれば、尚更避けたい事です。

円滑に制作を進行するためには、デザイン提出前に制作データを確認し、なるべく修正作業を減らす工夫をすることが大切です。

本記事では、基本的なところから見落としがちな細かい部分まで、デザイン提出前にチェックしておきたい項目を紹介します。

前提

まずは、前提となる要件やトンマナが守れているか確認しましょう。

要件を満たしているか

どんなにデザインが素晴らしくても、そもそも要件が満たされていなければ使用できなくなってしまいます。

制作前にこれらの認識のすり合わせを十分に行った上で、制作に入るのが理想的です。途中で不明点が出た場合は、早めに依頼者に確認を取りましょう。

要件に関しては、デザイナーだけでなく依頼者側もチェックしておきたいポイントです。

広告運用者向けのチェック項目は、こちらの記事で解説しています。

配信前にミスを防ぐ！バナーデザインが完成した時に広告運用者が確認すべきポイント

トンマナがズレていないか

トンマナとはトーン＆マナーの略で、コンセプトや雰囲気に一貫性を持たせるルールのことです。

配色やフォント、装飾、使用素材などはトンマナに合った選定になっていますか？デザインの方向性がズレていると、どんなにビジュアルが素敵でも修正依頼が来てしまう可能性があります。

このズレを軽減させるのが、参考イメージの共有です。イメージの中でも特にどの部分を参考にしたいのか、事前に確認しましょう。参考イメージがない場合、こちらから数枚用意し完成イメージを共有しておくとベターです。

また、制作する際も参考イメージを並べて制作すると、制作している内にトンマナがかけ離れないように予防することができます。

レイアウト・配色・余白

ユーザーがパッと見て理解できるクリエイティブになっているかチェックしましょう。

視線誘導を意識したレイアウトになっているか

視線誘導とは、ユーザーの視線の流れをコントロールし、情報を正しい順番でストレスなくユーザーに伝えるための手法です。

人は視線を動かすとき無意識に見る流れがあり、情報は見る順番によって伝わり方が変わります。視線誘導が意識されていないレイアウトだと、伝えるべき情報をユーザーが見逃してしまう可能性があります。

視線誘導にはパターンがあるので、こちらを参考にご確認ください。

【視線誘導とは？】バナーやLP、資料に活かせる！目線の動きを意識したレイアウトパターン

視認性を考慮した配色か

パッと見て内容が理解できるよう、視認性の高い配色にしましょう。

視認性がある配色は、基本的にモノクロにしたときに明度差があります。一度書き出し、モノクロにして明度差があるか確認してみましょう。

配色についてはこちらの記事で詳しく紹介しています。

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

余白は上下左右1pxでもズレているところがないか

余白を上下左右揃えたつもりでも、作業中に意図せずズレてしまっている場合もあります。

端に揃える・中央に揃える箇所など、ガイドラインを引き、ズレていないか確認しましょう。

アートボードの端に白い余白は残ってないか

背景に写真や図形を配置している場合、よく見ると1pxズレており白い余白が残っている場合があります。

拡大して確認し、整列して端まで詰めるようにしましょう。また、背景は作業中ズレないようレイヤーをロックしておくと便利です。

余白ではなくデッドスペースになっている部分はないか

ここで言うデッドスペースとは「不自然な余白」のことです。

整列するためでもなく、法則性もない、不自然に空いている余白はありませんか？良い余白はきちんと設計されており、目立たせるべき要素を引き立てますが、不自然な余白は、本来目立たせたい要素よりも悪目立ちしてしまいます。

引きで全体を見て、パッと見たとき悪目立ちしている余白がないか確認しましょう。

テキスト

文字が入っているクリエイティブの場合、チェックしておくべき項目を紹介します。

カーニングはできているか

カーニングとは、文字と文字の間隔を調整する字詰めのことです。カーニングをすることにより、可読性が高くなります。

文字間が広すぎる・狭すぎるなど調整漏れはありませんか？テキスト全体を引きで見て、違和感のある間隔はないか確認しましょう。

Adobeソフトの文字詰め機能である「メトリクス」または「オプティカル」の自動調整を活用すると便利です。（※デザイン上、あえて広く・狭くとっている場合を除きます）

改行は中途半端な位置でしていないか

コピーのテキスト量が多く2行以上になる場合、改行は適切な位置でしていますか？テキストの内容が合っていても、改行が中途半端な位置だと可読性が落ちてしまいます。

改行は「～が」「～の」「～と」など、助詞の後でするのが最も読みやすい表記です。助詞だけでなく、改行するなら文節でしましょう。

フォントのウェイトは適切か

ウェイトとは太さのことです。テキストが細すぎると、視認性が落ちる場合があります。引きで見て、視認できる太さか確認しましょう。

また、逆に太すぎると、漢字が潰れて見えてしまう場合があります。漢字部分だけでもウェイトを一つ細くするなど調整しましょう。

ジャンプ率は適切か

ジャンプ率とは、文字や画像などのデザイン要素で、大きい要素と小さい要素の大きさの比率です。ジャンプ率を高くすることで、サイズを大きくした文字の内容が優先的に伝わるようになります。

また、ジャンプ率により与える印象も異なり、一般的にジャンプ率が高いと「躍動的」「賑やか」「若年向け」の印象に、 ジャンプ率が低いと「高級感」「大人っぽい」「落ち着いた」印象になると言われています。

伝えたい情報が優先順で視認できるジャンプ率になっているか、イメージに合った大きさか、引きで全体のバランスを見て確認しましょう。

フォントの種類によっては同じ大きさに設定していても、文字の高さが違い上下に飛び出る場合もあります。ガイドラインで確認し、調整しましょう。

素材

クリエイティブ内で使用する素材に関するチェック項目です。

ウォーターマークが入ったままになっていないか

ウォーターマーク（透かし）とは、写真素材やイラスト素材などの著作権を守るために加えられているマークのことです。有料の場合、購入前の素材には白い半透明の文字で「Sample」などのテキストが入っていることがほとんどです。

たとえば、最初に仮で素材をサンプルのまま配置した場合、デザイン決定後は購入後のものと差し替え忘れないよう注意が必要です。ウォーターマークを残したまま使用すると無断使用になり、著作権侵害や違約金などが発生します。

素材は予め商用利用可能であるか確認の上、有料の場合は必ず購入後のものを使用しましょう。

画像素材は拡大・縮小の際、変形して歪んだりしていないか

特に人物や商品写真を使用する場合は要注意です。

縦横比を保ったまま拡大縮小したつもりでも、設定によってはドラッグで拡大縮小する際に最後までShiftキーが押せておらず、僅かな歪みに気付かないこともあります。

少しでも歪んでいないか、元データを並べて見比べましょう。

写真素材の場合、画質は粗くなっていないか

写真の拡大や縮小を繰り返している内に、画像は粗くなっていませんか？

Photoshopのスマートオブジェクト（オリジナル画像を保持する機能）などを活用し、拡大縮小しても画質が粗くならないようにしましょう。

素材はきれいに切り抜けているか

特に人物の髪など細かい箇所や、境界線が曖昧な箇所は要注意です。

拡大して見ても切り抜きが雑な箇所がないか確認しましょう。

写真素材に文字が含まれている場合、左右反転させていないか

写真素材に文字が含まれている場合、気付かず反転して使用してしまうと不自然になってしまいます。

素材自体を反転させないか、映り込んでいる文字の部分を他の要素で隠すか、文字を消すようにしましょう。

保存

せっかくのクリエイティブも、画像のファイル形式の取り扱い方ひとつで、台無しになってしまうことがあるので注意しましょう。

最適な画質とファイル形式で保存されているか

「JPEGで書き出したつもりが、PNGで書き出していた」「書き出し後の画像が粗い」ということはありませんか？保存形式によって画質やファイルサイズは左右されます。

保存後は書き出しデータを開き画質に問題はないか、最適な拡張子で保存されているか確認しましょう。

ファイル形式の選び方については、こちらの記事をご参照ください。

JPEG・PNG・GIFの違いとは？広告運用者も知っておきたい、最適な画像ファイル形式の選び方

その他細かい要素

最後に、少し細かいですが、よくあるミスとその対策を紹介します。

グラデーションをかけている場合、境界線が見えてないか

背景などにマスクで途中まで半透明のグラデーションをかけて、境目を自然に馴染ませたい場合に注意です。グラデーションが端までしっかりかかっておらず、境目が見えてしまっていないでしょうか？

境界線が見えて不自然になっていないか拡大して確認しましょう。（※デザイン上、意図的である場合を除きます）

クリッピングマスクをかけた場合、外れていないか

作業中意図せずレイヤーの順序が変わり、クリッピングが外れてしまっている場合があります。

適切なレイヤーにクリッピングされているか、レイヤー一覧を見て確認しましょう。

ドロップシャドウや光彩が近接する要素の上にかかっていないか

テキストや図形にドロップシャドウや光彩で装飾をかけている場合、近接する要素にもかかっていませんか？

サイズや距離、レイヤーの順序変え、かからないよう調整しましょう。

図形に意図しない枠線が表示されてないか

図形に枠線を付けない場合、同系色だと枠線が表示のままになっていることに気付かない場合があります。

図形をクリックし、枠線が非表示になっているか確認しましょう。

没案になった要素のレイヤーは表示のままになっていないか

図形や素材など候補のパターンを複数用意し、最終的にどれかに決定した際、不要になったレイヤーは削除し忘れていませんか？余分なレイヤーをいくつも残したままだとデータも重くなり、他の人に引き継ぐ際もややこしくなってしまいます。

不要なレイヤーが表示されたまま残されていないか、レイヤー一覧から確認しましょう。

まとめ

「デザインを提出するたびに毎回この項目を確認するのは大変……」と感じるかもしれません。しかしこの工程が、後々の修正作業を減らすことに繋がります。

デザインを作成する際は、これらのチェックを行う時間も確保した上で、スケジュールを組みましょう。

修正をゼロにするのが理想的ですが、現実的にはなかなかそうもいきません。少しでも修正作業を減らしてスムーズに進行できるよう、早期発見の仕組みづくりを行うのが大切です。