今回は「デザインの言語化」にチャレンジするコラムです！
特に、「デザインを学んでいないのに、デザイナーにフィードバックをするなんて…」と思ってしまうコーダーさんも多いのではないでしょうか？
しかし、デザインを学んでいないからこその「ユーザー目線のフィードバック」ができるというのは大きなメリットです！
またデザイナーとしても、ユーザー目線のフィードバックを貰える環境は貴重ですし、自分では気付けなかった「ユーザーが持つ違和感」にも気付けるチャンスなのです✨
デザイナーを尊重しつつも、根拠を持ってフィードバックできるように必要なのが言語化になります！今回はそんな「デザインの言語化」に焦点を当てて解説していきます💪
クライアントワークの中での「デザインの言語化」
デザイナーさんに指示を出してデザインを作成してもらった後、「何だかここちょっと違う気がするんだよな🤔」ということが今後起こりうると思います。そんな時に「何だかちょっと違う」 「もっといい感じに」と言ってもなかなか伝わりにくいですよね💦
そんな時に「これだ！」という伝え方ができるよう、トレーニングしていきましょう🙌
デザインの言語化が発生するタイミング
デザインの言語化は様々な場面で発生します。例えば以下のようなタイミングです。
- クライアントの「気に入っているデザイン」を明確にしたいとき
- デザイナーに「どのようなデザイン」で作ってほしいかを伝える時
- デザインの初稿後のフィードバック
- クライアントにデザインの説明をするとき
このようなタイミングでしっかりと言語にして定義できていないと、後から「思ってたのと違う」「聞いていたのと違う」などというトラブルにもなりかねません。
逆に、ここでバッチリと言語化できていれば伝達効率UP・成果物の質UP・信頼UPなどといったたくさんのメリットがあります✨
このコラムでは、伝える言葉の選び方・違和感の探し方・もっとレベルを上げたい方向けの言語化練習を順に解説していきます💪
「かっこいい」は抽象的！
特にクライアントの話の中でよく出てくる「かっこいい」という表現。皆さんは「かっこいいデザイン」と聞いてどんなデザインを思い浮かべますか？
- 黒を基調とした、線が太くて力強いデザイン
- 白やグレーを基調とした、線が細くてスタイリッシュなデザイン
これらは、人によってはどちらも「かっこいい」に分類されます。
また、その他にも「奇抜な色で派手なデザイン」「近未来を感じるテック感のあるデザイン」「素早く直線的なアニメーションのあるデザイン」など、「かっこいい」はたくさんのジャンルのデザインに共通する言葉になります。
なぜこのようになるかと言うと、「かっこいい」というのは抽象的な言葉であり人によって感じ方がそれぞれだからです。
逆に、「黒い」「線が太い」「直線的」は誰が見ても大体同じようにイメージできる具体的な言葉です。
使う言葉を変えるだけで驚くほど分かりやすく伝わるようになります。もし迷ったときは「定義ができるか」を気にしてみましょう！「『かっこいい』って誰でも同じ説明ができるかな？」のような粒度で大丈夫です💪
次に違和感の探し方を確認していきましょう🙆
「なんだか違うんだよな」を言葉にする方法
例えば、デザインの初稿が届いた時に次のようなセクションがあったとします。まず、どのような印象を受けるか、頭に思い浮かべましょう。
（境界が分かりやすいように外枠を付けているのでそこはスルーしてください🙇）
「ごちゃっとしている感じがする」「なんか、情報が伝わりにくいな」「整ってないように見えてしまう」…などなど、たくさん思うところがあると思います。
少し極端なサンプルですが、違和感があるのは確かだと思います。
このまま言語化してフィードバックできそうであれば問題なしです！
ちょっと不安かもと思ったら続き実践してみましょう💡
「これは良いと思う！」というサンプルを準備しよう！
まず第一段階として違和感を発見するために、違和感がないと思えるサイトの中から内容の近いパーツを準備しましょう。スクリーンショットで大丈夫です🙆
株式会社デイトラ-コーポレートサイトのお知らせ一覧から持ってきました。
並べて見比べよう！
次にFigmaで横（パーツによっては縦でもOK🙆）に並べてじっくり見比べます。
ポイントは、どちらも同じ横幅・倍率で並べるという点です！（スクショを撮るときに気を付ければOK！）
セクション・パーツ単位で抜き出して並べてから、要素の違いをなるべく具体的な言葉で考えてみましょう！
違う点を具体的な言葉で書き出そう！
具体的な言語化を実際にメモしていきます。今回はわかりやすく付箋のように乗せましたが、Figmaのコメント機能でOKです🙆
こうすることで具体的に何が違うかが言語になりましたね！
💡ワンランクアップさせる言語化💡
「なぜ？」を起点に考えたことを追加でメモしておくのも言語化上達のポイントです！
例えば「小さな要素は横に並んでいる」のはなぜなのかも考えてみましょう。
理由としてはいろいろあります。情報量に差が無かったり、同じような情報の粒度だったりする場合は横に並べて「グループ」として扱うことが多いです。
→これはデザインの4原則「整列」を基にした考え方です！
実際にデザイナーに伝えるようにまとめよう！
ここまできたらもう少しです！最後に、どうしてほしいかをまとめましょう。ここで「根拠」を伝えることを忘れないようにしましょう！（先ほどと同じくコメント機能でOKです！）
なぜそうしたいのか、そうしたらどうなるのかが分かればデザイナーも分かりやすいですし受け入れやすくもなります。
また、先に聞いていなかった場合でもデザイナーが「本当はこう思ったからこう作った」のようにデザイン意図の根拠を伝えてくれる場合もあります。その時はしっかり話を聞いてお互いが納得できるポイントを探しましょう。
→これは少々難易度が高いですが、「Webサイトに訪れた人がどうか」という軸がブレないよう会話を進めると良いです🙆
余談：修正してもらった後のデザインを確認しよう！
さて、以下のように修正があがって来ました！いかがですか？👇
※これが修正前👇
今回は線の太さについては伝えなかったので変更がなかったですが、かなり見やすくなりましたね！ただ、線の太さについては少し強すぎる印象があるのでまだ改良しても良さそうですね🤔
修正してみないと分からないということもあるので、ここは経験値にはなってしまいますが慣れてくるとたいてい伝えたいことは一発で伝えられるようになります！
初めのうちはこの言語化にものすごく時間がかかると思いますが、たくさんWebサイトを作って、素敵なデザインにたくさん触れることで引き出しも増えていきます！
デザインというのはどうしても経験がものをいう領域です。コツコツと経験値を貯めていきましょう🙌✨
もっとレベルアップしたい！そんなあなたの言語化練習✏
ここからはフィードバックの場面以外でコツコツできるデザインの言語化の練習や、実際にディレクターが参考サイトを探す際に使用するWebサイト・書籍や、言語化の練習方法を紹介していきます💪
『デザインのミカタ』 デザイン研究所/KADOKAWA
デイトラにも参画してくださっている“デザ研”さんの書籍です！
デザイナーだけでなくデザインに関わる様々な人に向けた書籍で、デザインの「見る力」「言語化する力」を鍛えられる一冊です。
デザインを見る順番や、見るコツが丁寧に解説されているので非常に読み進めやすいです🙆
制作の現場で、というよりは、普段の学習で使用するというイメージの方が近いです！
『WebデザインプロセスBook』 加藤千歳/ソシム
こちらの書籍は、Webサイトのヒアリング→ワイヤーフレーム→デザインカンプがそれぞれテーマごとにまとめられており、制作の流れの中での意図や要望の伝え方、修正後の言語化などがたくさん書かれています。
こちらも辞書的な使い方と言うよりは、学習として読み込むのが向いています🙆
Webデザイン制作をとことん丁寧にまとめられている一冊です。
同じ著者の『Webデザイン&ワイヤーフレーム比較見本Book』も言語化事例がたくさんあったり、ここまで変わるんだな！という例が分かって勉強になります✨
パーツ別Webデザイン集サイト「Parts」
こちらは、Webサイトをパーツごとに見ることができるWebサイトです。
Webサイトで必要になるパーツはたいていあるので、言語化に使用する際に便利です。
使い方としては、「デザイナーの初稿見てみたけど、ちょっとしっくり来ないかも…」という時に、何がどうしっくり来ていないのかを言語化するために閲覧することが多いです🙆
気になるパーツをザーっと見て、こういう感じがいい！というものを見つけて参考にします。
シンプルに、参考デザイン探しにも使えるので、使用場面は多いです！
Webデザインギャラリーサイト「SANKOU!」
こちらは多種多様なWebサイトのデザインを様々なキーワードで検索できるギャラリーサイトです。
使用場面は多いですが、クライアントの「かっこいいサイト」を言語化する時に「かっこいい」で検索したり、業種からWebサイトを検索したりと幅広く使い道があります。
カテゴリ検索のメニューを開くと圧倒される量のキーワードがあるので、具体的な言葉が見つかっていない時にぼんやり眺める時にも非常に刺激をもらえるサイトです🙆
※他にもまだまだありますし、これからどんどん出てくると思うので、良い！というものを見つけ次第追加していきます✨
まとめ
今回はデザインの言語化についてのコラムでした。
「イメージ」を「言葉」にする作業というのは大変難しいです。特にデザインは、言葉にするとまず抽象的なワードが出てきがちなので、伝える時に齟齬が起きやすい部分でもあります。
そして、「言語化」という作業はある日突然できるようになるものでもありません。
制作のたびに、制作の合間に、コツコツ積み重ねて言語化力を磨いていきましょう✨