新卒UIデザイン研修 〜ソフトウェアにおける表現方法編〜

はじめに

この記事は Goodpatch Design Advent Calendar 2020 の20日目の記事です。

今年もグッドパッチでは4月から6月までの3ヶ月間で新卒研修を行いました。Goodpatchでは、毎年UIデザイナー / UXデザイナー / エンジニア / 経営企画室と各部署の先輩社員が、新しく入社するメンバーのための研修設計を行っているのですが、特に今年は研修は気合が入っており先輩総出で設計を行いました。
その中でもUIデザイナー職の研修は前半の「ビジュアルデザイン研修」と後半の「ソフトウェアデザイン研修」で分かれており、それぞれの分野で強みを持つ先輩デザイナーで研修の設計をし、オンライン上で研修を行いました。研修の全体像についてはこちらの記事をご覧ください。

関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介

新卒UIデザイン研修 〜GoodpatchのUIデザイナーとして持つべき価値観編〜

今回の記事では、講義形式の研修内容最後の項目である「ソフトウェアにおける表現方法」を紹介いたします。

ソフトウェアにおける「表現」とは

この講義で扱う内容は、 グッドパッチ社内で用いている「ソフトウェアデザインの様子を表す概念図」でいう、一番上の部分に相当します。

表現とは、ソフトウェアがどのような形になってユーザーの前に現れるのかを形作る段階です。
構造設計においては、概念モデルやナビゲーション設計といった論理的な積み上げを行ってきました。その上で表現の段階では、これまでのソフトウェアデザイン講義では触れられなかったようなグラフィック要素の話など、ユーザーが直接見たり触れたりする部分に関わるデザインを行っていきます。

「表現」の探りかた

UIで扱う色を決める場面を思い浮かべてみましょう。

例えば、ボタンのビジュアルを考える際に、「赤色は元気が出る色なので、ボタンを赤くしてみました！」……と言ったような発想でデザインをすることがあるかもしれません。確かに、そういった印象によって色を決めていくこともあるでしょう。ですが、色を決めるための判断材料は本当にそれだけで良いのでしょうか？

ボタンの色ひとつとっても、機能を表す意味での色、コントラスト比を重視しての色、競合との差別化を意識した色……などなど、様々な背景を考慮して決定してゆくのが良いでしょう。

表現には、唯一の正解というものはありません。だからこそ、この分野の技術を磨く上で大切なことは、デザイナーが表現を決め手となる要素とパターンの組み合わせを熟知しておくことです。

一例を示しましょう。

色彩
・ブランドを重視した表現
・カラーに意味を持たせた表現
・アクセシビリティを重視した表現

レイアウト
・整頓された表現
・大胆に配置した表現

モーション
・インタラクションを補完する表現
・ユーザーの注目を集める表現
・コンテンツの幅を広げる表現

などなど、実際の研修ではさらに踏み込んだ解説や事例紹介を行いました。

「表現」の選びかた

では、「表現のパターン」を私たちのデザインに反映するとしたら、これらをどう適用していけばよいのでしょうか。ここからは、私が考える「表現のパターン」を選択する際の考え方を少しだけご紹介したいと思います。

いろいろな方法はあるかとは思いますが、私がよくやる方法の一つは、「ソフトウェアの性質」「ユーザーの性質」「ブランドの性質」この3つの観点の掛け合わせで使う表現を決定していく考え方です。

ソフトウェアの性質
機能を表すもの。このプロダクトって何？と聞かれた時に「〇〇ができるプロダクト」と説明できるもの。主機能や目的を表すもの。

ユーザーの性質
このプロダクトを主として使う人の属性。いわゆるターゲットになりうるペルソナ。

ブランドの性質
事業者側の目線や思想。ビジョンやミッションなど、プロダクトを通してどう感じて欲しいのかというもの。

これは経験則ですが、大抵の場合、「ソフトウェアの性質」を比重多めに考えた方がうまくいきやすいです。なぜならソフトウェアの性質とは、そのプロダクトを成り立たせる上で最もコアとなる部分に当たるからです。仮に他の2つの性質が全く考えられなかったとしても、プロダクトとしては成り立つことはできるでしょう。ですので、もしも迷ったらとりあえず「ソフトウェアの性質」を尊重して作っていくのがいいでしょう。

3つの観点の配合度合いはそれ以外にも考えられます。作ろうとしているプロダクトがどういった類のものなのかを考えて、時々で変えてみてください。

「表現」の可能性

3つの観点を踏まえれば、少なくとも間違った選択をすることはないと思います。
また、ソフトウェアの性質を尊重し極めて論理的にプロダクトを作った結果、「とても普通だ！」と思うことがあるかもしれません。ですが、ソフトウェアの表現においては、「普通」というものは全く悪いことではないので、UIデザイナーであればこの「普通」を恐れることはありません。

しかしながら、ご紹介した3つの観点以外の発想—何かよくわからないパワー—が表現の分野では働くこともあります。それは言ってしまえば「デザイナーのひらめき」と言える類のものです。

これまでは、原理原則に基づく理論や、経験則から導き出されたパターンをどのように活用していくのかといった、普遍的な考えをお話ししてきました。対して、このひらめきとはデザイナー自身の思想や技術、趣味嗜好と言ったパーソナルな部分が強く反映されるところになるのではないかと思います。そういう意味で、この+αは他のデザイナーではない、あなたが作る理由とも言えるかもしれません。

おわりに

繰り返しになりますが、表現には、唯一の正解というものはありません。ですが、特にソフトウェアの世界においては、ルールに基づいた構造設計や表現の制約といったものを十分に考慮しながらデザインしていく必要があります。そのような中で+αとなる部分を考えていく余地があるのも、表現の奥深さと言えるのではないでしょうか。