新人向け。デザインの進め方とセルフチェック方法。

新人向け。デザインの進め方とセルフチェック方法。
こんにちは。デザイナーのこばやしです。
今回は弊社での主なデザインの制作物であるサイトデザインとバナーデザインを対象とした、新人デザイナー向けのデザインの進め方とセルフチェック方法をご紹介します。

要件をまとめる

制作物について、目的や作るものの概要などの情報を最初に集め、整理することでデザインの大枠を決められます。
また、整理した情報をディレクターと共有したり確認することでお互いの認識のずれをなくしていきます。
デザイン制作だけでなく、チェックにも必要なことなので、制作前に必ず確認しましょう。

  1. 制作物は何か

    Webページであっても、コーポレートサイト、採用サイト、ランディングページか特設ページなど、用途によって違います。
    最初に自分が作るものが何かを確認しましょう。

  2. どういった場所に使用されるか（流入経路・表示箇所）

    バナー制作の場合、スライドのように動く場所に表示される場合は、テキスト情報を1か所にまとめた方が視線の動きが少なくて済むなど、表示箇所によりデザインを変える必要があります。
    Webページ制作の場合、ランディングページではどういったワードで検索されたいかによって、情報の優先順位を工夫したりする必要があります。

  3. サイズ指定はあるか

    バナーであれば広告形態により予め指定されているサイズがあります。
    また、既存サイトの新ページを作る場合なども、サイトによって決まっているコンテンツ幅があるため、制作前に必ず確認しましょう。

  4. 制作物に期待されている効果は何か

    エンドクライアントがエンドユーザーにして欲しいことは何かを確認することで、情報の優先順位を決めやすくなります。

  5. エンドクライアントの事業・強みは何か

    事業内容や強みを知ることで、デザインのコンセプトや情報の優先順位を決めやすくなります。

  6. エンドユーザーの想定はあるか

    具体的な人物像があれば全体的なデザインのフォントファミリー、文字の大きさ、カラーの選択に落とし込めます。

  7. 提供素材・指定素材（ロゴマーク・写真など）、レギュレーションや禁止事項はあるか

  8. イメージしている参考デザイン、ライバル事業の参考デザインはあるか

    ある場合は具体的に「どのパーツ」の「どういったところか」まで落とし込んで確認できると認識のずれがなくなります。

  9. 既存サイトの新規ページや、既存バナーの別パターンなどを作る場合

    既存のルールに沿って制作する必要があるか確認する。
    ルールに沿う場合は以下を確認する。

    1. タイトル・本文テキストなど、要素ごとの
      • フォントサイズ
      • フォントファミリー
      • 余白
      • カラー
    2. 写真の色味・比率
    3. コンテンツ幅

上記でまとめた情報を整理し、デザインに落とし込んでいきます。
こちらで詳しく紹介されています。

デザインをセルフチェックする

先輩デザイナーやディレクターに見せる前に自分で制作物のデザインチェックをしましょう。

  1. 既存デザインがある場合、既存のデザインルールを守れているか

  2. 新規デザイン制作物の場合、デザインにルールは作られているか。また、守られているか。

    1. 全体の配色（キーカラー、ベースカラー）
    2. パーツ毎（タイトル、小見出し、パンくずなど）のフォントサイズ、フォントファミリー、余白、カラー
    3. 写真の色味
    4. 枠線、罫線の太さ、線のデザイン
    5. 角丸のサイズ
    6. イラスト・アイコンのテイスト

  3. 必要な情報の抜けはないか。

    テキスト情報などを整理している過程で抜けてしまったり、コピペミスで一文字足りないといったことが無いように、必ず確認しましょう。

  4. レギュレーションは守られているか。

  5. 禁止表現は使われていないか。

  6. バナーサイズ、コンテンツ幅に指定がある場合、守られているか。

  7. 下記のデザインは作られているか。

    1. ボタン・リンクなどのマウスオーバー、アクティブ時のデザイン
    2. 1行テキストの箇所が複数になったときのデザイン
    3. 一覧ページなどで、記事が多い場合、少ない場合のデザイン
    4. OGP画像
    5. favicon
    6. スマホ表示時、ボタンは押しやすいサイズか
    7. スマホ表示時、テキストは読めるサイズか

データ納品、コーディング担当者提出時、デザインデータを綺麗にしておく

デザインが確定してお客様にデザインデータを納品する段階、または、コーディング担当者にデータを渡す段階でデザインデータを綺麗にしておく必要があります。デザインのセルフチェック段階でしておいても問題ありません。

全ソフト共通

  1. 不要なデータを削除する

  2. オブジェクトの左上のポイントのxy座標を整数にする

  3. 長方形などのオブジェクトサイズを整数にする

Photoshopの場合

  1. バナーなど一枚画像として書き出さないデザインの場合、グループレイヤーにフィルター効果でカラーやシャドウをまとめて指定しない

    コーディングの際、テキストカラーを取得しづらいため

  2. スマートオブジェクトが埋め込まれているか確認する

Illustratorの場合

  1. アートボードの左上のポイントのxy座標を整数にする

  2. 写真などのリンクが切れていないか確認する

おわりに

自分が普段気を付けていること、気を付けたいと思っていることをあげさせていただきました。
何のために何を作るのか、作った後はどうなるかといったことを考えながら制作することが大事だなと日々思っています。それではまた。

[デザイン] カテゴリーの最新記事