BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. 素人っぽく見えるデザインをプロ級へ変える、新人さん向けデザインクオリティチェックリスト
by かわさき かわさき

素人っぽく見えるデザインをプロ級へ変える、新人さん向けデザインクオリティチェックリスト

素人っぽく見えるデザインをプロ級へ変える、新人さん向けデザインクオリティチェックリスト

こんにちはかわさきです。なんと、マグネッツブログ平成最後の記事当番があたってしまいました。

さて、最近新しいスタッフも増えまして、前にも増して人のデザインをチェックする機会が増えました。これまで新人さんやインターン生のデザインをみているときに「ここは最低限クリアしてほしい」や「あーここをこうするとグっと良くなるのに…!」というポイントがありまして、今回はそれをまとめてみました。Webやグラフィックのデザインを勉強している方、最近デザイナーになった方の参考になると幸いです。

まずはここをチェック!最低限のチェックポイント

サイズは合っているか

印刷物なら用紙のサイズ、バナーなら掲載場所のサイズなど。Webサイトだと厳密なサイズ指定はないことが多いですが、事前に確認はしておきましょう。

基本的にサイズが決まっている場合、1mm・1pxでもずれるたらNGですので、作成スタート時点でサイズを意識しておくことが重要です。

揃っているか

左揃え・右揃え・センタリングはきっちり揃えましょう。

逆にずれている場合は、意味を持ってずらしているのかチェックしてみてください。(デザイン上のアクセント・全体の中でバランスを取るため…など)

余白は適切か

空きすぎていないか、詰まりすぎていないか。均一に空いているか…など。

よく見受けられるのが、余白をグルーピングに適切に活かしきれていないパターンです。

全て同じ余白だとわかりにくいので、見出し下とグループ下は差をつける

見出し→本文→次の見出し…が全て同じ余白ですと、どこで途切れるのかわかりにくいので、見出しと本文下の余白には明確に差をつけたほうがグループがわかりやすいですね。

イラストや写真がぼけていないか・ジャギってないか

提供素材が小さすぎた…など、悲しい事情がある場合を除き、ビットマップオブジェクトがボケたりジャギっているのはアウトオブアウトです。マジギルティ。

雑な切り抜き・ぼけたビットマップ素材の一例

使用サイズがはっきり決まっていないときは、少し大きめのサイズでスマートオブジェクト化しして、拡大縮小での劣化を防ぐといいですね。

また、切り抜きが雑だったり、ベクターデータのパスが汚い…なども気になるポイントですので入念に仕上げましょう。

字詰め・行間は適切か

素人っぽさが特に出るのは、文字周りの処理かもしれません。最初は特に、「」、!などの前後が不自然に空いていないか?を見てあげると一気にプロっぽい仕上がりになります。

きれいな字詰めの一例

行間も詰まりすぎていないか、逆に広がりすぎていないかチェックしましょう。

誤字脱字はないか

これはデザインに限りませんが、入っているテキストは一通り間違いがないかチェックしましょう。もし、原稿からコピペしたとしても、原稿に誤字や脱字があった…なんてこともあるかもしれないので、おかしいところがないか合わせて見ると更によいですね!

特に金額、電話番号、社名、人名…などは要チェックです。

文字は読めるか

サイズが小さすぎたり色のコントラストが低すぎたり…。

コントラストにより読める文字・読めない文字の一例

厳密にはデザインをモノクロにしてチェックしたり、ツールを使ったり…と方法がありますが、薄目で見るだけでも結構わかるのでオススメです。

印刷物の場合は、画面で見ていると拡大縮小出来るために実際のサイズ感がわかりにくいので、一度プリントアウトしてチェックしましょう。

書き出し/保存するときの画質やファイル形式は間違っていないか

Webページの場合に多いのですが、きれいに作っているのに書き出した画質が低すぎてしょんぼりな仕上がりに…ということがまま見受けられます。書き出した結果を見比べながら、最適な画質で書き出しましょう。

広告用のバナーなどは厳密にファイル形式(.jpg/.png/.gif 等)やファイルサイズが決められている場合が多いので、媒体が定めた規定とも照らし合わせてチェックしましょう。

さらなるクオリティアップ!…のためのチェックポイント

色使いは適切か

あるあるなのは、色々目立たせたいがために色が多くなりすぎるパターン。まずはメインカラー、アクセントカラーの2色を決めて、そこから濃淡や無彩色を加えていく形で考えるとまとまりがよくなると思います。

以前書いた色に関する記事↓

フォント使いは適切か

フォントも初心者のうちは1つのデザインに色々使いすぎてしまいがちなので、メインで使うフォントを決めて、アクセントで使うのはこれ!補足の文字で使うのはこれ!…という風に展開させていきましょう。

写真は適切に加工されているか

基本的に写真素材はもらったまま使用せず、デザインに合わせて補正・加工して使用します。最低限の補正はもちろんですが、優しい雰囲気のデザインなら明るく柔らかいトーンに、食品系だったら鮮やかにシズル感を出す、力強いデザインにしたいならコントラスト・シャープネスを強めに…など。

写真加工の一例(撮ったそのままの写真を明るく補正したり、レトロ風に加工したり)

メリハリがあるか

載せているからには全部見てほしいもの…ではありますが、何もかもを目立たせようとするとかえって何も目立たないつまらないデザインとなってしまいます。まずは何を一番強調すべきなのかを決めて、それ以外の要素は基本的にそれを邪魔しないようにデザインしていきましょう。

そのデザインである理由を人に説明できるのか

これまでと毛色の違う項目ですが、これが出来るか出来ないかでデザインの説得力が大きく変わります。

私は人のデザインをチェックするとき、なんだか違和感があるな…と思った箇所に関しては「なぜそうしたのか」を確認するようにしています。

例えば、デザイン全体だけではなくひとつひとつのパーツにおいても、なぜその色にしたのか、そのフォントにしたのか、その装飾を入れたのか、その線の太さにしたのか、など。デザインの中にある要素に意味のないものは1つもないはずなので、本来は「なぜそうしたのか」を全て説明できるはずです。

…とはいえ、作るときはいちいち理由を考えながら、こうだからこう!!!と決めつけてデザインする必要はないと思います。(むしろ決めつけすぎると、理屈先行で作るのでつまらないデザインになりそう…)

「後から人に説明できるか」というのがキモでして、作っているときはプロデザイナーもそこまで細かくじっくりとは考えていないと思います。少なくとも私は考えていな…ゴニョゴニョ……… 後から見返したときに「なぜそうしたのか」を言語化できるか、というのが大事なのです。制作途中にすばやく最適解を取捨選択して根拠のあるデザインを作れる、というのも「センス」のひとつなのかもしれませんね。

今回はここまでです。それでは皆様、よい令和をお迎えください!

ページの先頭に戻る