デザインチェック

【新人デザイナー向け】Webデザインチェックリスト【提出前の再確認】

NaoG
NaoG
やぁ!みんな!元気?

クリエイターの@NaoGです。

Webデザインで上司からのOKが貰えない、何回も同じ所を注意されてしまう。
Webデザインを行う上で意識するべき、チェックリストがあったらいいのにな…。

こういった疑問に答えます。

この記事の信頼性(著者は実務経験者)

  • デザイン歴は5年ぐらい
  • 現在の月単価60万超え
  • 現在はフリーランスのWebデザイナー

実際に仕事でWebデザイナーとして働いているので、信頼できるかと思います。

目次

  • 初心者向けWebデザインチェックリスト
  • その他のデザイナーとして心掛けたいこと
  • フリーランスのWebデザイナーになるには?

ではさっそく見ていきましょう。

初心者向けWebデザインチェックリスト

  • デザインの基礎
  • 文字周り
  • 修正確認
  • その他
  • ロゴの確認
  • バナー確認
  • トーン&マナーの確認
  • リサイズ対応
  • 版元確認

上記のとおり。
それぞれ順番に解説します。

デザインの基礎

  • 近接ができているか?
  • 整列ができているか?
  • 反復ができているか?
  • コントラストができているか?

上記のとおり。
それぞれ順番に解説します。

近接ができているか?

近接ができているかどうかの確認をします。

近接とは関連する情報をまとめてグループにすることです。

近接をすることで、情報がまとまって見えます。

近接については下記の記事で更に詳しく解説をしています。

【近接】デザインの基本4原則【無料の宿題+質疑応答】デザインの4原則って何だろう? 近接ってなんだろう? どういう時に使えばいいのかな? これからデザイナーになりたいので、近接について詳しく知りたいです。 こういった疑問に答えます。...

整列ができているか?

整列ができているかどうかの確認をします。

整列とは全ての要素を中央揃えや、左揃え、右揃えなど意識的に配置をすることです。

整列をすることで、全体に一体感が生まれます。

整列については下記の記事で更に詳しく解説をしています。

【整列】デザインの基本4原則【無料の宿題+質疑応答】デザインの4原則って何だろう? 整列ってなんだろう? どういう時に使えばいいのかな? これからデザイナーになりたいので、整列について詳しく知りたいです。 こういった疑問に答えます。...

反復ができているか?

反復ができているかどうかの確認をします。

反復とは、デザイン上の何かの特徴を繰り返すことです。

反復をすることで、デザインに一貫性が生まれます。

反復については下記の記事で更に詳しく解説をしています。

【反復】デザインの基本4原則【無料の宿題+質疑応答】デザインの4原則って何だろう? 反復ってなんだろう? どういう時に使えばいいのかな? これからデザイナーになりたいので、反復について詳しく知りたいです。...

コントラストができているか?

コントラストができているかの確認をします。

コントラストとは、異なるものをはっきりと異ならせることです。

コントラストを意識することで、メリハリが生まれデザインが面白く見えます。

コントラストについては下記の記事で更に詳しく解説をしています。

【コントラスト】デザインの基本4原則コントラストがあるものとコントラストがないものを見比べてみる ------------------------ コントラストの画...

文字周り

  • カーニングをしたか?
  • トラッキングをしたか?
  • 文字の字間や行間は適切か?
  • 文字が流し込まれただけになっていないか?
  • 文字の可読性は良いか?
  • 文字が潰れていないか?
  • 禁則処理はされているか?

上記のとおり。
それぞれ順番に解説します。

カーニングをしたか?

カーニングをしたかの確認をします。

トラッキングをしたか?

トラッキングをしたかの確認をします。

文字の字間や行間は適切か?

文字の字間や行間は適切かの確認をします。

文字が流し込まれただけになっていないか?

文字が流し込まれただけになっていないかの確認をします。

改行位置などの確認

文字の可読性は良いか?

文字の可読性が良いかの確認をします。

可読性とは読みやすさのことです。

可読性が悪いとお客さんに正しい情報を伝えられないからです。

可読性が良いものと悪いものを比べてみる

————————
可読性が悪いもの
————————
可読性が悪いもの
————————
可読性が良いもの
————————
可読性が良いもの

上記の通り。

一枚目は可読性が悪いが二枚目は可読性が良い

なので繰り返しになりますが可読性が良いかの確認をします。

NaoG
NaoG
読みやすいかどうかの確認!

文字が潰れていないか?

文字が潰れていないかの確認をします。

文字を小さく扱う場合、文字が潰れてしまうことがあるからです。

潰れている文字と潰れていない文字を比べてみる

————————
文字が潰れているもの
————————
文字が潰れているもの
————————
文字が潰れていないもの
————————
文字が潰れていないもの

上記の通り。

一枚目は文字が潰れて読めないが、二枚目は文字が潰れていないので、ちゃんと読める。

なので繰り返しになりますが文字が潰れていないかの確認をします。

禁則処理はされているか?

禁則処理がされているかの確認をします。

修正確認

修正箇所に関係する部分も修正されているか?

修正箇所に関係する部分も修正されているかの確認をします。

修正の場所によっては全体の調整をする必要がある場合もあるからです。

その他

優先順位は適正か?

視線誘導は意図した様に行えているか?

全体のトンマナは合っているか?

構成案の意図を理解して作成されているか?

構成に引っ張られていないか?

構成はあくまでも情報

写真や素材の補正をしたか?

浮いている要素はないか?

全て同じ様なスタイルになっていないか?別にスタイル統一する必要ないよ?

ハレーションが起きていないか?

影の付け方はおかしくないか?

遠近感が出ているか?

手間は明るく、奥は暗く

余白が適度に取られているか、不要な余白がないか?

ロゴの確認

ロゴの可読性は良いか?

ロゴの可読性が良いかの確認をします。

ロゴが見ずらいとどこの広告か判断ができないからです。

ロゴの可読性が良いものと悪いものを比べてみる

————————
ロゴの可読性が悪いもの
————————
ロゴの可読性が悪いもの
————————
ロゴの可読性が良いもの
————————
ロゴの可読性が良いもの

上記の通り。

一枚目はロゴの可読性が悪いですが、二枚目はロゴの可読性が良い。

なので、繰り返しになりますがロゴの可読性の確認をします。

ロゴの周りに適度に余白があるか?

ロゴの周りに適度に余白があるかの確認をします。

企業によっては、ロゴの周りに余白をとらなければならない規定がある場合があるからです。

ロゴの規定を守れているか?

ロゴの規定を守れているか確認をします。

ロゴの周りの余白や可読性以外にも規定がある場合があるからです。
資料などがある場合はクライアントに提案する前に一度、ロゴの規定に目を通すと良いです。

バナー確認

バナーならではの「目立たせる」ができているか?

バナーならではの「目立たせる」ができているか?の確認をします。

なぜかというと、バナーは公式サイトなどのトーン&マナーよりも少し、誇張して派手にした方がクオリティが高く見えるからです。

トーン&マナーの確認

公式サイトの閲覧

公式サイトの確認をします。

公式サイトを確認することによって、デザインのトーン&マナー(デザインのルール)が明確になるからです。


https://kimetsu.com/

こちらは『鬼滅の刃』の公式サイトです。

公式ページから「和」のトーン&マナーと判断することが出来ます。

なので繰り返しになりますが、公式サイトの確認をします。

リサイズ対応

  • 縮小した際に、スタイルなどの調整を行なったか?
  • リサイズ前の文字組みに引っ張られていないか?
  • サイズに合った文字組み、レイアウトになっているか?
  • 背景画像など、リサイズを考慮して作成されているか?
  • 情報を全て入れようとしていないか?

上記のとおり。

リサイズ対応のチェックリストは下記の記事で更に詳しく解説をしています。

【新人Webデザイナー必見!】バナーリサイズ対応の極意。Webデザイナーの登竜門でもあるバナーリサイズで困っている方必見です!主な項目→1.スタイルの調整を行ったか? 2.サイズに合った文字組み、レイアウトになっているか? 3.背景画像やエフェクト等、リサイズを考慮しているか? 4.情報を全て入れようとしていないか?...

版元確認

キャラクター名の改行位置

キャラクター名の改行位置の確認を行います。

なぜかというとコラボ企画などで、キャラクター名がややこしくなっている場合があるからです。

体験談:コラボ企画でキャラクター名の改行位置を間違えてしまった。

実際に私はコラボ企画のデザイン担当をしている時に、元のキャラクター名を知らなかったが為にキャラクター名を変な位置で改行してしまいました。

なのでキャラクター名の改行位置の確認を行います。

キャラクター名の改行位置の確認は下記の記事で詳しく解説をしています。

————————
記事準備中
————————

キャラクターに過度な演出を加えてないか?

キャラクターに過度な演出を加えていないかの確認をします。

ソーシャルゲーム等のキャラクターを扱う案件は規定が厳しい場合があるからです。

キャラクター規定の例

  • キャラクターの色味を変更しないで下さい。
  • キャラクターのエフェクトを調整しないで下さい。
  • キャラクターを反転して使用しないで下さい。
  • キャラクターにエフェクトを追加しないで下さい。

例えば、上記のとおり。

規定の情報やpdfを共有してくださる場合がほとんどですが、もし共有などがない場合は事前に確認をしておくと良いです。

なので、繰り返しになりますがキャラクターに過度な演出を加えてないか?の確認を行います。

キャラクターの優先度の確認は行ったか?

キャラクターの優先度の確認を行います。

キャラクターを複数人扱う場合はメインに扱ってほしいキャラクターやサブで扱うキャラクターなど、キャラクターに応じて優先度がある為です。

デザインの目的にもよりますが、アニメ内の主要キャラクター等は基本的に優先度は高くなります。

『ONE PIECE』を例に考えてみる

このポスターの場合は手前にルフィが大きく配置されていてその周りに主要キャラクターが集結しています。

『ONE PIECE』においては主人公のルフィを端に追いやるとかは駄目です。
海賊王を目指す船長である男は真中に「ドン!!」です。

知らないアニメやゲームは調べる

知らないアニメやゲームは調べます。

単純に知らないアニメは、どのキャラクターが主人公でどのキャラクターがサブキャラか分からないからです。

なので繰り返しになりますが、キャラクターの優先度の確認をします。

キャラクターの性別や年齢に合わせて適切なサイズ感か?

キャラクターの性別や年齢に合わせて適切なサイズ感かの確認をします。

キャラクターにはそれぞれ設定された身長等があるからです。

『サザエさん』を例に考えてみる

このデザインは適切なサイズ感で調整されています。

もしもこれが、カツオくんやワカメちゃんが浪平さんと同じ身長だと年齢や子供という設定が壊れてしまいます。

NaoG
NaoG
因みに「タマ」はオス猫らしいです!

なので、繰り返しになりますがキャラクターの性別や年齢に合わせて適切なサイズ感かの確認をします。

コピーライトは入っているか?

コピーライトが入っているかの確認をします。

コピーライトは基本的に入れる必要があるからです。

体験談:コピーライトを入れ忘れた

実際に仕事で構成案にコピーライトが入っていなかったので、そのまま対応してしまったらコピーライトが必要とお客様からの戻しがあった。

構成案を作るディレクターの方もコピーライト等を入れ忘れる可能性もあるので、デザイナー側で事前にコピーライトが入っているかの確認を行うと良いです。

なので繰り返しになりますが、コピーライトが入っているかの確認をします。

その他の心掛けたいこと

  • 数値を気にしすぎてデザインしてないか?
  • 毎回同じ様なデザインになっていないか?

上記のとおり。
それぞれ順番に解説します。

数値を気にしすぎてデザインしてないか?

数値を気にしすぎてデザインしていないか心掛けます。

数値はあくまで目安であって、最終的な微調整はデザイナーが行います。

体験談:数値を気にしすぎてよく分からなくなった。

実際に私もデザインの仕事を始めたばかりの頃、位置の値やフィルター等の数字を気にしすぎて戸惑っていました。

バナーなどの画像を扱う場合はレイヤーの位置や大きさなどを整数にする必要はありません。

なので、繰り返しになりますが数値を気にしすぎてデザインしていないかを心掛けます。

毎回同じ様なデザインになっていないか?

毎回、同じ様なデザインになっていないか心掛けます。

同じデザインを作っていると、デザインの幅が広がらないからです。

体験談:皆、企業のトーン&マナーを守りながら、デザインの見せ方を思考錯誤していた。

私がWebデザイナーとして働いていたゲーム制作会社では、デザイナーは皆、ゲームのトーン&マナーを守りながら、デザインの見せ方がマンネリしない様に思考錯誤してデザインを作成していました。

毎回同じ様なデザインだと作り手もユーザーも飽きてしまうから。