WEBデザインのレビューについて

はじめに

最近、WEBデザインのレビューを始めたばかりのWEBデザイナーが、レビューを通して学んだ（学んでいる）ことについての記録です。

「WEBデザインのレビュー」って何？

この記事を書くちょっと前にレビューを始めていた筆者ですが、ここで改めて「WEBデザインのレビューって何だろう？」と考えてみました。（以下は筆者なりの解釈）

他の方の制作物（バナー・LP等のデザイン）を見て、
「内容（間違っていないか）」の確認や、「こうすればもっと良くなる」などのアドバイスをすること。

基本的には、コードレビューと同じ考え方なのではないかと思います！

メリットについて

実際にやってみて、「レビューされる人」「レビューする人」それぞれにメリットがあると感じました。

レビューされる人のメリット

• 制作物に間違いがあった場合、納品前に気づく ことができる
• 自分では思い浮かばなかった デザインの発見 がある
• 制作物の クオリティ が上がる
• スキルアップ につながる
• 次回の制作物に活かす ことができる

レビューする人のメリット

• 内容を文章にしたり、口で伝えたりすることで、まとめる・伝える 能力を鍛えることができる
• 自分では思い浮かばなかった デザインの発見 がある
• コミュニケーション能力 を養える（はず）
• 次回の制作物に活かす ことができる

レビュー項目

では、具体的にどんな項目をレビューすると良いのか、紹介していきたいと思います。
今回は「バナー」についての項目です。
※筆者は初心者のため、不足があるかと思います。あくまでも一例を載せておきます。

文言・仕様のレビュー

• 作成サイズがあっている

サイズが間違っていると作り直しになってしまうため、必ず最初に確認しましょう。

• ロゴのレギュレーションを守れている

以下は一例です。会社によってレギュレーションは異なりますので、こちらも必ず確認しましょう。

• 色や形を勝手に変更しない
• 最小サイズ以下になっていない
• 余白（アイソレーション）が取れている
• 視認性が悪くなっていない

• 文言（日付、漢字など）の間違い がない

間違ったまま納品、そのまま掲載しミス発覚！という事態は避けたいですよね…。
重点的に確認するようにしましょう。

以下も合わせて確認しましょう。

• ファイル名 があっている
• ファイルの 拡張子（例：jpg/png/gif） があっている
• 画像容量を 圧縮 できている
• （規定の容量がある場合は）容量以下に圧縮 できている

「見た目」のレビュー

• 訴求したいものの 優先順位 が合っている

営業担当やクライアントから 「〇〇を一番強調してほしい！」 と要望があった場合は、必ず優先順位を守るようにしましょう。
逆に要望が無かった場合は、確認してみる or 自分なりに考えて提案してみると良いかと思います。

• 適切な 文字サイズ になっている

全部同じサイズだと 何を伝えたいのか分からない ものが出来上がってしまいます。
訴求の優先順位に合わせて2～3サイズ程度でまとめましょう。

• 訴求内容の 装飾 が適切にできている

筆者もよく悩むのですが、文字を置いただけだと「なんだか物足りない」仕上がりなってしまいます。
特に強調したい部分については、 背景（ざぶとん） を敷いてみたり、罫線 を引いてみたり、イラストを入れてみたり・・・色々工夫してみましょう。

• 色 を使いすぎていない

色を絞ることで 統一感 がでます。にぎやかな内容の場合は逆にカラフルにすることもあるので、ものによります。

• 余白 が取れている

ぎゅうぎゅう詰めのものよりも、適切に余白が取れているものの方が、各段に見やすく 目に留まりやすい です。

「制作データ」のレビュー

こちらは社内ルールに準じますが、参考までに記載します。

• データに不備がない（画像のリンク切れ、使用フォントなど）
• 最終データが社内の共有フォルダに格納されている

「WEBデザインのレビュー」のポイント

ここでは、レビュアーが事前に準備しておくとよい（準備しておけばよかったな）ものを、反省を踏まえてまとめていきます。

1. いきなり修正指示をしない

何も考えないまま修正指示を始めてしまうと、自分自身も迷いが出てしまい、結果的に無駄な時間が生まれてしまいます（反省）
レビュー依頼を受けたらすぐに結論を出そうとせず、 自分だったらどうレイアウトするか を考えてみましょう。

2. 理由を伝える

理由が無いデザイン修正指示は、ただ 自分好みの制作物へ誘導したもの（自己満） になってしまいます。 「◯◯な理由から、◯◯にした方がもっと良くなる」 など、理由を添えるようにしましょう。

3. 迷った場合は一緒に考える

一度見たときに、何となく違和感を感じたものは改善した方が良いことが多いです。
ただ、具体的にどう修正してもらったらよいか迷ってしまうこともあるかと思います。
ありのままを伝え一緒に考える ことで、新しいアイデアが生まれる こともあります。
（デザインに正解はありません！悩んだときは周りに相談しましょう）

4. 実際に配置してみる

サイズ感で迷った場合は、実際に載せるページに制作物を貼ってみて、確認してみるとイメージしやすいです。実際に貼れない場合は、ページのキャプチャーを取りその上に配置してみると良いです。

おすすめのツール

WEBデザインのレビューと関連して、使用していて便利だなと思ったツールをご紹介します。

Awesome Screenshot

chromeの拡張機能です。スクリーンショットを取った後で、枠・テキスト・矢印等を追記した状態で書き出すことができます。

MONJI

以前使用したことがあり、便利だったのでご紹介します。
画像読み込みやURLを入れることで、キャプチャーが表示されWEB上で修正指示などのコメントを入れることが出来ます。
URLを共有することで、遠方の方や外部とも修正内容を共有することができるツールです。

まとめ

いかがでしたか？
偉そうなことを書いてしまいましたが、筆者はこれから日々勉強していきたいと思っています！！
読んでいただきありがとうございました。