デザインの指示に迷った時は、「要素に分解」がいいかもという話

こんにちは。
TRILL開発部で、webプロダクトのPO兼デザイン周りも担当しています、
yuaoです。

この記事は「dely #2 Advent Calendar 2020」21日目の記事です。

dely #1もありますので、こちらも是非ご覧ください。

昨日は akina.mさんの記事
「システム管理者に贈る「運用改善に役立った！」AWSの機能4選」でした！

tech.dely.jp

akina.mさんにはTRILLでもとってもお世話になっています。
私にとってシステムの領域はまだまだまだまだ未知の部分が多いのですが、
システム管理者さんの視点で書かれていて、とても勉強になりました。
akina.mさんいつも本当にありがとうございます！

さて、初めてこういったものを書かせていただきますが、
今回は、
デザインをデザイナーさんにお願いしたら
ちょっとイメージとちがうものが上がってきた、
そんな時に、どんな風に修正指示を考えるか…
というのをまとめてみました。

尚、今回指している「デザイン」とは
主に表層デザイン、ビジュアルデザインのことを扱っています。

どうしているか

結論から言いますと、タイトルの通りでして
デザインを要素（「色」「線」「形」などのこと）に分解して、
どこに違和感があるか、を
なるべく具体的に伝えるようにしています。

修正指示の話をする前に

まずは大前提として、制作をお願いする時は、
デザイナーさんとしっかり情報の認識合わせをする
というのが必須です。
上がってきたデザインが、イメージに合わせて貰えているかどうかは、
オーダー時の情報共有に、抜け漏れ無いようにする必要があります。

デザインで何を伝えたいのか、
どう言った用途で使うのか
納期、画像サイズなどの規約
この辺りは基本です。

そして、TRILLに関するデザインを作成して貰う場合で言うと、
もう１つ大事な共有事項があって、
それがブランドイメージです。

TRILLではブランドガイドラインなるものがあり、
ブランドを表現するための、考え方や、
具体的なデザインルールなどがまとまっています。
例えば色やフォント、画像の加工方法など、
細かく言語化されています。

f:id:trill_tech:20201218194146j:plain

なので、新しくデザイン制作に関わっていただくデザイナーさんには
最初に展開する、大事な資料の１つとしています。
（補足として、ブランドガイドラインは全てそのルールに則って作れ！ということではなく、世界観を統一する為の推奨であり、それを踏まえて考えてね、という感じのものです）

デザインサンプルを見せてもらう

前置きが長くなりましたが、ここからが本題です。
デザインをお願いする時の情報は揃えた。
認識合わせもした。
そして制作を進めて頂いて、さあサンプル確認だ。

「…あれ？」
ってなることがあります。

勿論、イメージ通りのものを上げて頂く事多々あります。
が、「うーん？」となることもある。。
つまり違和感を感じる。

違和感を感じるものをOKには出来ないので、
ここから修正をお願いする事になります。
そこで「どこをどんな風に修正してもらうか」
を考えなければなりません。

私個人的に…ですが、
デザインにおける違和感を「ダサい」という一言で言わないようにしています。
その言葉は、その人の「好み」が根底にある場合が多く
ロジカルな指摘ではないと思っているので…
（メンバーの皆様、うっかり口を滑らせてたらほんとすみません）

自分が感じる違和感がどこからくるのかを突き止める

上がってきたデザインに違和感を感じたら、
その違和感を言語化することが、
とっても大事だと思っています。

そして違和感を言語化する時に、
私が頭の中に引っ張り出すのが
先述しました「デザインの要素」です。
グラフィックになる部分というのは、要素に分けることができます。

デザインの要素

線
色
形
テクスチャ
空間
フォーム
フォント

こちらのタカハマケンタさんの記事がめっちゃ分かり易くて、
個人的には何度も読み直して、
とても参考にさせていただいています。

感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 webnaut.jp

表層デザインやグラフィックデザインは、
大前提として「伝えるべき事」という骨格があって
それをいかに「的確に」伝えるかを司る部分です。

その「的確」の中には、サービスのブランドイメージも勿論含まれているので、
TRILLの表層デザインやグラフィックデザインを作るときというのは即ち、
「TRILLとして、情報を伝える」為に、
厳選したデザイン要素を用いて、構成すること
を言います。

違和感の分解の仕方例

（あくまで私の中のプロセスなので一例として）

ではデザインを見た時に感じた「違和感」はどこからくるのか。

「ブランドイメージに合っていないのかな？」
「伝えなければいけないことに合っていないのかな？」
まず大枠で分けるとこんな感じになる事が多いです。

そして、
それなら「合ってない」と感じるのは
どの要素が影響しているんだろう？
みたいな考え方をしていきます。

例

例えばこの記事のタイトルサムネイルのデザインが
こんな感じで上がってきたら。

f:id:trill_tech:20201218183015j:plain

※シンプルに説明する為要素限定しています。
実際はもっと複合的に使う場合もあり（フォントと色とテクスチャ、背景画像、装飾など）より複雑なことが多いです。

違和感を感じるところはざっとこんな感じ
（今回はTRILLブランドがどうかというのは省きます）

【大枠】
伝えなければいけない事を、スムーズに伝えられない可能性がある

何故か↓

【フォント】
フォントサイズは的確か。読み始めの「デザインの」の部分に、視点が最初にいかないのではないか。
【色】
テキストに使っている色にはどういう意図があるのか。意図した強弱になっているか。
【フォント】
選択しているフォントは的確か。途中でフォントを変更する意図は何か。こちらも読み始めの部分に視点を持っていけないのではないか。
【空間】
文字間は的確か。「がいいかも」「とい」「う話」で分かれて読めることで、読み手のリズムを崩さないか
【空間】
文言全体が画面に対して左に寄っていないか。左右の余白を変える意図は何か。重心が偏ることで、バランスが悪くなっていないか。

こんな感じで違和感を要素毎に分けて、
作り手の意図を聞いたり、修正の提案をしたりするのに使っていきます。

まとめ

表層デザインやグラフィックデザインは、
それが好きか嫌いかみたいな感情に先に触れることもあり、
違和感を言語化するのが難しい部分だなと思います。

私自身デザインを作ることもあるので、
自分が指示を受ける側だとしたら
具体的に言ってもらえた方が修正し易く、
効率的に対応できるなと思うので、
こんな進め方をするようになりました。

要素に分解していくと、
フラットに、気になる部分が見えてきて、
改善を考えるきっかけにし易くなりますし、
先ほどご紹介した記事に掲載されている他の「原則」なども併せていくと、
より、いろんな応用ができるので、
何かの参考になれば幸いです！

尚、要素分解は自分でデザインを作る時にも有効で、
自分が扱ってる要素は、
芯にある情報を、的確に伝えるためのものに出来ているかな？
と、デザインを俯瞰して見る時に使えたりするので、
個人的にはオススメです。

おわりに

リップサービスも含まれていると重々承知していますが、
一緒にお仕事をしている他のデザイナーさんに、
指示が分かり易いと言って頂いたことがあったので、
こんな感じで記事にまとめてみようと思い至りました。
デザイナーさん達、本当にいつもありがとうございます！

プロダクトはあらゆる分野のものが複合的に重り
１つのものになっていて、
表層・ビジュアルデザインはその一部分です。
delyの中には、その各分野を解像度高く見れるメンバーがたくさんいて、
それぞれがより良いパフォーマンスをすべく、日々走っています。

私も自分の担当領域でのパフォーマンスを上げていくべく、
デザイン（今回は表層・グラフィックだけでなく、情報設計や体験設計も含めた意味）や
プロジェクト推進の為に、これからも精進していきたいなと思います。