デザインレビュー時の虫めがねポイント
チームでデザインレビューをする際に気をつけていることがあります。チェックするものによってフィードバックする内容や基準は変わってくるのですが、バナーやファーストビュー、施策用の画像など、グラフィック的なものの場合に見ていることを書いてみます。
そもそもの方向性については、各デザイナーの意図やあるいはディレクターのイメージを尊重したいので、大きく変えるような事はなるべくフィードバックしないようにしています。
意図を尊重し、その効果をよりよく出すために細部(ディティール)の確認を客観的な目で行い、適切にフィードバック、提案することに努めています。
みんな大好き『なるほどデザイン』では7つ道具その6「虫めがね」としての章がありますが、それにならって私の「虫めがねポイント」を紹介します。
デザインの最終的なクオリティを決めるブラッシュアップ。そこで使用する「虫めがね」は、デザイナーにとっての最終兵器です。
形
・際・境界
・触れているのか、離れているのか
・はみ出させるのか、収めるのか
・パースがおかしくないかどうか
・角丸が歪に伸ばされていないかどうか
この辺はまず基本的なチェックです。今は角丸が歪になることはツールの進化でほぼなくなりましたが、以前はPhotoshopで角丸の四角形をそのまま変形してしまって歪になってしまっていることがよくありました。
空間
・二次元的平面空間か
・e.g. フラットデザイン
・三次元的空間か
・どれくらいの奥行き(位置感)か
・奥の位置が特にない、宇宙的空間か
・限りなく薄いけど重なり、奥行きのあるセミフラットな空間か
・e.g.マテリアルデザイン
予備校で絵を勉強しているときに「平面だって空間だから平面としての空間を意識しないといけない」と言われたときになるほど、と思ったのを覚えています。フラットに収める場合は意外とそれぞれの要素の「位置感」が大事になってくるので、上手くまとめられない、完成度が上がらない人は「位置感」を意識してみるといいかもしれません。
線(境界線、外枠など)
・1pxか2pxか、もしくはもっと太くか
・「線」として必要かどうか
・色面の隣接だけではダメか
デザイナーとしてはやはり1pxまで責任を持ちたいものです。バナーで枠線をつけるような場合、1px, 2px, 3pxでは結構印象変わるのでどういう狙いなのか確認します。
また、色面の隣接や、上にある(手前にある)形のシルエットが作る線というのも客観的にどう見えるのか、別の形と変に繋がっていないかなど見ていきます。
文字・テキスト
・行間
・引用符(開始と終了で違う)
・表記揺れ
・視認性は十分か
・単調になっていないかどうか、リズムが作れているかどうか
事業やサービスによって全然変わってくると思いますが、うちの場合はディレクターやマーケからの依頼がテキスト多めなので、テキストの扱いも独自に苦労したり、ノウハウがあります。ジャンプ率だったり、「地」と「図」の関係だったりを他の絵的な要素と同様あるいはそれ以上に気を遣います。
あとデザインと直接関係ないのですが、表記チェックや場合によっては「方言」チェックなども。外に出るものですから、最後の門番のつもりでデザイナーは文言をチェックします。
色
・グレートーン
・無彩色のグレーか色味のあるニュートラルグレーか
・意図せずに飛び出て見えてしまっている色がないかどうか
・色価(バルール)
バルールというのは、絵画ではよく使うワードで色の相関を評価するものです。フランス語でバルール、英語だとバリューです。よく「明度」と同様に扱われることもありますが、絵画においてのバルールは明度だけには収まらないもので、これはまた別途記事にまとめたいと思いますが、絵画的な「位置感」「空間感」「形状」へのはまり具合を指すものだとざっくりイメージしてもらえれば良いかと。明度も関係しますし、彩度も関係しますし、隣り合う色、実際の絵の具の質感、量感も関係します。
バナーの場合、例えば「地」となる背景があり、「図」となる、要素(人物、モチーフ)や文言があり、それぞれに装飾要素があったりなかったり。小さいけれどこの四角い空間の中で各要素が収まるところに収まっている場合、「バルールが合っている」状態です。背景の装飾が強すぎて手前に見えてしまう場合などは「バルールが合ってない」状態です。
バナーやKVなどにおいては短時間での接触でのインパクト、「引き」もとても大事なので、あえてバルールを合わせない「違和感」を作ることを狙ってやる場合もありますが、どちらにせよ狙い通りになっているかは確認したい点です。
配置
・位置の中央か、見た目での中央か(左揃え、右揃えなども同じ)
・動き、ベクトル、重心
形の組み合わせによって、数値的に中心に置いていても中心に見えないことは多々あります。文字詰めなどもそうですが、中央にあるかどうかなどもツールや数値を過信せず、自分の目でしっかりと判断したいです。
ページ全体ではなく、バナーなどでは四角い画面が小さい範囲で限られていますので、その中での構成要素の傾きやベクトル的なものも意識したいです。
実際のレビューにおいて
いつもこれらを一個一個気にしてチェックしているわけではなく、何かまだ弱い、完成度がちょっと足りなく見える、なんかバランスが悪い、などちょっとした違和感を感じたときにデザイナーに聞いてみるようにしています。
デザインのレビューはSlackのオープンチャンネルで行っています。
レビュー自体は各デザイナーでペアのような形をとり、+シニアデザイナーに確認を投げる形が基本ですが、みんなわりと自由にコメントしたり、いいと思ったらSlackの絵文字でたくさん応援がついてたりします。
虫めがねポイントは人によって異なると思うので、それぞれに自分なりの虫めがねポイントが育ってくるのが理想ですね。
完成度をどう上げていくか悩んでいる方のヒントになれば幸いです。