同じ色、同じ写真を使っていてもプロが作ったのか、アマチュアが作ったのかで見え方が変わると思います。見え方に大きな差があるわけではなく微妙な余白の取り方だったり、写真のトリミング具合などが若干異なります。今回は基礎的な制作方法をご紹介いたします。

作る前の準備

効率よく制作を進行するための準備をまとめましたx。

伝えたい情報を整理し、載せるものを最小限に

制作物を作ってから依頼者に確認するときに、「この情報を載せたい。」「この情報はいらない」「そもそもイメージが違う」など色々なフィードバックを受けることがよくあります。そのようなフィードバックを極力少なくするために作業前の確認が重要です。

事前に確認するのが難しいと思う人は作った制作物を使う人を考えるのがオススメです。「実際に使う人はどんな人か?」「どんな形で見られるのか?」「そもそもの目的は?」などどんなものを作れば良いかが浮かび上がってくると思います。似たような事例があれば参考をピックアップしてイメージを擦り合わせることもできます。あくまで最終的に使う人のことを考えた「For you」の精神で制作することが重要です。

イラストレーターの設定を形式に合わせて設定する

イラストレーターで作ったものが最終的な形で表現できるかを意識して作業することが重要です。WEBの場合、1px以下の細さの線、6px以下のフォントなど実、サイトにしてみると滲んでしまったり、小さすぎて見えないことがあります。
また、印刷物の場合、画面上と印刷した時の色が違ったり、印刷機によっては余白なしの印刷ができなかったりなど最終的な入稿先などを意識して作成する必要があります。
作る前にWEBはRGB形式のピクセルプレビューモード、紙モノはCMYK形式のオーバープリントモードで設定することをオススメします。
印刷物に関しては最終的な入稿先の形式を確認してから作成することが重要です。

ガイドを引く

レイアウトのガイドを引くことでデザインに集中できます。
ガイドを引くコツは以下の2つです。

  1. 文字や画像を置いてはいけない左右上下の余白のガイド
  2. 中心線、段組などの線の余白のガイド

単純ですがガイドを引いてから作業すると綺麗に効率よく作業できます。

作るときに気をつけること

まずは文字を置いてみる

考えすぎでなかなか作業が進まないという方は、載せたい文字や画像をとりあえず置いてみることをオススメします。イメージが決まらない、レイアウトが決まらないという人の中には内容に何が入るかイメージできていない人も多いと思います。
指示書やワイアーフレーム通りに文字や画像を配置することでどのように作成すれば良いか見えてきます。

文字の大きさは整合性を意識する

文字の整合性とは見出しと本文の関係がしっかりしていることを指します。「本文よりも見出しが目立たない」、「どこが見出しなのかわからない」とパッと見たときに伝わりづらくなってしまいます。「大見出し」>「小見出し」>「本文」を意識して文字の大きさや色を設定することで伝わりやすいデザインになります。

色は視認性を意識する

視認性の悪い文字ではせっかくの内容も読まれにくくなってしまいます。色には色相・明度・彩度の属性があり色が違ければ大丈夫というわけでもないので感覚を使むまではコントラストチェックのツールを利用することをオススメします。

オススメのコントラストチェックツール

まとめ

依頼内容・目的の確認、ガイドをひく、内容を置く、伝わりやすいように文字のサイズ・色を整える。文字に起こしてみるとすごくシンプルな方法でした。当たり前のような内容ですが皆様の制作クォリティの向上につながれば幸いです。