デザインチェックのポイントは6つだけ【現役Webディレクターが分かりやすく解説します】

2020年8月2日work

こんにちは、カズキです。

今回はWeb業界で働くディレクターさん、それから事業会社などでWeb担当をしている方へ向けた記事です😌

本記事を読むべき人はこんな人。

デザインチェックの重要性→まずはここを意識しよう

デザインと一言で言っても、種類はさまざま。

ホームページやペラ１のランディングページ、バナー、Webアプリ、動画など、デザインに関わるものは沢山あります。

デザインが出来上がった後、それぞれの用途に合わせて、動きを付けたり、実際にシステムが動くように設計したりします。

でも、デザインチェックの観点はすべて同じ。

表現や見せ方は違うものの、

作成したデザインが実際に市場公開され、ユーザーの目に触れるものになることに変わりはありません。

要するにデザインは、完成品とほぼ同じなんですよ。（実際に現時点で使えるか、使えないかの違いです）

そのため、デザイン段階で100%の完成イメージを持つことが大切。

デザインチェックって、非常に重要で責任ある作業なんですよね😌

デザインチェックのポイントは6つだけ【現役Webディレクターが分かりやすく解説します】

それではさっそく本題。

デザインチェックとして見るべきポイントは以下の6つ。

（1）デザインサイズは合っているか

まずは、デザインサイズが規定通りかチェック。

当たり前のことではありますが、意外と抜けてしまってる人が多いです。

Webサイトならサイト幅1000px~1300pxぐらいが現在の主流です。

バナーなら出稿サイズの規定をチェックして、しっかりと依頼通り作られているか確認しましょう。

また、レスポンシブデザインでの依頼であれば、

スマホデザインと、必要であればタブレットデザインのサイズも規定通りか合わせて確認。

デザインサイズはデバイス幅やブレイクポイントにも関わってくるUI上欠かせない部分なので、抜け漏れなくチェックしましょう。

（2）デザイン崩れ・誤字はないかどうか

続いて、デザインが崩れている箇所と文章の誤字がないかどうか確認しましょう。

デザインはパッと見て明らかに崩れている箇所があればチェック。

→意図的に崩しているように思えるデザインの場合は、念のためデザイナーに確認しておくと良いかもです。

文章の誤字は、比較的骨が折れる作業ではありますが、手を抜かずしっかりやりましょう。

誤字や文章間違いがあると、サイトとして、一気に信頼性を失うことになるので。

そうゆう細かい部分の積み重ねって結構大事です😌

（3）トンマナ・ブランドレギュレーションは規定通りか

次に、サイトカラーやブランドイメージにあった配色になってるかどうかチェックしましょう。

キーカラーやブランドの色彩ルールが用意されていれば、それが指標になります😌

カラーコードの確認はphotoshopのスポイトツールで抽出可能。

また画像の切り出しをして以下ツールに挿入してもカラーコードのチェックができるので便利です。

このあたりは、企業やブランドによっても厳しくレギュレーションが設けられている場合が多いです。

なので、デザインチェック段階で必ず潰しておきましょう。

（4）視認性・可読性が保たれているか

上記を基準にチェックしましょう。

具体的なチェックとしては、

・文字サイズは適正かどうか☑️

・タイトルや見出しは目立つかどうか☑️

・ページを流し見するユーザーに対して対策できているか☑️

→フックになるようなギミック要素があるか

このようなイメージですね😌

あと、最近では画面を暗くして見るユーザーも多いのでブラウザの明暗を調節して、

可読性が担保されているかどうかチェックすることも合わせてできるとベストですね。

（5）ビジュアライズイメージがユーザーに伝わるか

ビジュアライズは、直接見ることのできない事柄や関係性を絵にしたりグラフィカルに表現することで、

直感的に伝えやすくすること。

要するに伝えたいこと（メッセージ）をデザインすること。

この認識でOKです。

例えば、商品の流通フローなんかをよくグラフにすると思います。

でもそれだけだと何となく伝わりずらいですよね。

そんな時、そこにイラストを加えればインフォグラフィックスというデザインになり、ビジュアライズされたことになります。

例えば、以下のようなデザインがインフォグラフィックスと呼ばれます。

こちらの文章やツールは仮で微妙かもですが、

5つの要素から電球のツールが構成されていることが視覚的に分かりませんか？

多分、文章だけだとまとまりがないと思うんですよね。

これがビジュアライズの本質です。

説明が必要なデザインって、ビジュアライズとして機能していないので、

そういった場合は修正をお願いすることも必要という話です😌

（6）一貫性が保たれているか

最終段階です。

すべてのパーツに統一感があり、一貫性が保たれているか、

これらを基準に最終チェックです。

たとえば、同じサイトで同じ商品を説明していたのに、急に見出しの色やフォントが変わっていたりしたら注意です。

そういったデザインだと、ユーザーは違和感を感じて離脱する可能性が高いので。

Webデザインではユーザーが違和感を感じないような一貫性の高いデザインを作ることが大切です。

おまけ：「Zの法則・Fの法則・ジャンプ率」などチェックできればもはやプロです。

必須ではありませんが、デザインチェックの観点として知っておいて損なしです😌

Zの法則とは？

こちらの画像をご覧ください。

Zの法則は、広告や流通業界ではよく使われる考え方で、

人の視線は左上→右→左下→右と「Z」の順番に視線を動く、という法則です。

この法則を利用して、視線が動くタイミングに強調させたいコンテンツを配置するのがポイントです。

Yahooジャパンとかはまさにこのレイアウティングですよね😌

Fの法則とは？

続いてこちら。

Webサイトでは「左上」から「右」に目線が動いた後、
「左上の場所」から「少し下」に移動し、また「右」に移動する「F」の法則も有効と考えられています。

アマゾンとか商品ページのレイアウトによく使われていますね。

デザインの目的にもよりますが、こういった観点からもデザインを見ることができるんですよね。

ジャンプ率とは？

ジャンプ率は、本文の文字サイズに対する「見出しの文字サイズ」などの比率のことです。

これを利用することで訴求の強弱や情報を受け取る際のインパクトも変わるので、

この辺りに注目してデザインチェックすると更に丁寧かと思います😌

デザインチェックによく使うツール

最後に、デザインチェック時によく使う便利ツールをまとめたのでシェアします😌

invision

invision社が開発したデザインビューアー＆フィードバッグツールです。

デザイン書き出しデータ（jpg/pngなど）をドラッグ&ドロップするだけで、

URL発行をしてくれてインターネット上で見ることができます。

またコメントのやりとりも可能なので、

修正指示や追加依頼など合わせて行えるため大変便利です😌

ベーシック機能はすべて無料です。

PEKO STEP

先にも紹介しましたがデザインのカラーコードを自動抽出してくれる神ツール。

登録・インストール不要、もちろん無料なので気軽に使用できます。

Google Chrome用スクリーンレコーダー

Chromeの拡張機能ですね。

Chromeをインストールしていれば誰でも無料で使用可能。

近頃のサイトだとサイト内にアニメーションを使っていたり、動的コンテンツがある場合もありますよね。

このツールを使えば、瞬時にコンテンツを録画でき、データを保存することが可能。

アニメーションの修正依頼などが見つかった時、いちいち口で説明するのも面倒なので、僕も重宝してます😌

FireShot

こちらもchromeの拡張機能です。

サイトページなどをスクリーンショットして保存できるツールです。

いや、スクショなんてショートカットで出来るじゃん。

と思いがちですが、サイト全体をスクリーンショットできるので結構便利です😌

ペラ１のLPとかだと縦長になるのでショートカットのスクショだとちょい厳しいです＞＜

おわり：デザインチェックは重要です！

サイト開発の場合、デザインを基準にコーディング、プログラミングを行います。

ペラ１の広告LPの場合はほぼデザインから画像を書き出して描画します。

バナーの場合はデザインができたら完成です。

なので修正があればデザイン段階で対応する必要があるんですよね。

だからある意味、デザインチェックはしっかりとした制作物を作り上げるに当たって、

キーになってくるんですね😌

これからデザインチェックを任される新人ディレクターやWeb担当者の方は、

ぜひこのことを念頭に置いて日々の業務に取り組んでください。

それでは長くなりましたが、記事は以上です。

▼関連記事は以下の通り