デザインの導入
s-umemoto
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、
その仲間たちがデザインについて、
雑談を交えながら話す番組です。
今日のお相手は、原さんです。原さん、よろしくお願いします。
n-hara
はい、原です。よろしくお願いします。
s-umemoto
この番組を聞いてくださっている方、
コメントがあれば、ぜひよろしくお願いします。
最初にちょっと言っておかないと忘れそうなんで、
最近、ネタ不足だと聞いております。
n-hara
よろしくお願いします。
UIとビジュアルデザインの理解
s-umemoto
原さんはネタ募集中ですか?
n-hara
募集中ですね、はい。募集してます。
普段の業務から。
s-umemoto
やっぱ、普段の業務からネタを思いつくことが多いですか?
n-hara
私の場合はそうですね。
s-umemoto
まあ、そうだよね。
何か普段からいろんな気づかないものを気づけって言われても、
かなり意識しないと気づかないもんね。
n-hara
そうですね。
やっぱりちょっとした、ちょっとどっか行ったとか、
普段と違うことをしたときに気づくことはあるんですけど、
日常を送っていると難しいですね、普段の中では。
s-umemoto
そうだよね。
自分も最近気づいたことで言うと、
自分はすげえ保守的だなっていうのに気づいたんだけど、
最近スニーカーを買ったんですよ。
そしたら、靴ひもを結ばなくていい、ナイキの靴があって、
脱ぐときにかかと踏んでピピってあげて、スポッて履くみたいなのがある。
便利そうだなと思って、
それをプレゼントに買ってもらったのが妻から。
すごい気に入っているんだけども、
それ履いて街歩いてたら、
スケッチャーズっていうスニーカーブランド分かりますかね。
あれが今、手を使わずに履けるみたいなメッセージめっちゃ出してるんですよね。
4,5年前はそんなにそういうメッセージじゃなくて、
かっこいいよとかポップだよみたいな、
グローバルのコピーをそのまま日本語に変換したみたいな感じだったと思うんだけど、
すごく今、そっち推しにしてコミュニケーションしてるから、
やっぱりスニーカーを変えて、そういうことを意識しだすと気づいて。
見るようになって。
そうそう見るようになって、スケッチャーズとナイキーで、
なんでナイキーを選んだんだろうなと思うと、
やっぱり安心感みたいな保守的な選択をしたんだな、自分はとか思ってるっていう。
それ一本で話せそうなテーマでしたけど、すみません、
今日そんな話じゃないですよね。
n-hara
違います。
s-umemoto
違いますね。
はい、すみません、ちょっと余談長くなりましたけど、
今日のテーマは何でしょうか。
n-hara
今日のテーマはUIデザインとビジュアルデザインの違いを再認識した話です。
s-umemoto
おーいい話。違いますか。
n-hara
違いますね、業務やってて、
改めて2年目のデザイナーとかを見てて、
ちょうどそのタイミングに差し掛かってるメンバーがおりまして、
やっぱそうだよなっていう、違うよなって。
s-umemoto
これはやっぱりその2年目のUIデザイナーの方が、
グラフィックとかビジュアルのデザインをしなきゃいけないタイミングがあったってことなんですか。
n-hara
どっちかっていうと、そっちは先にその子はやってくれていて、
あるいはそちらのスキルはついてきてたメンバー。
s-umemoto
そういうことか、はいはい。
n-hara
最近ちょっとこうプロダクトのデザインで、
s-umemoto
UIデザインというタイミングが出てきまして、
n-hara
ビジュアルとはまた違うことを意識しながらデザインしなきゃいけないっていうのを使ってたので、
その辺は結構最初のデザイナーがぶつかるところなのかなっていうのでお話してきた。
s-umemoto
なるほど。
それは壁にぶつかっていたということなんでしょうけど、どんな壁だったんですか。
n-hara
そうですね、まずは前提としてはビジュアルデザインの話なんですけど、
今回話すビジュアルデザインはロゴとか、
本当にゴリゴリのブランドのデザインとかそういうものというよりは、
よくあるシンデレラのデザイナーがやるとするとLPサイトとかですね、
ランニングページとかのデザインだったりとか、
あとバナーとか作ったりすることって最初多いと思うんですけど、
そういうのをちょっとイメージしてもらった上で、
s-umemoto
UIデザインっていうのとこの違いを聞いてもらえたらなと思ってます。
n-hara
今回ぶつかってた壁というか案件でいうと、
銀行さんのとある店頭で使うプロダクトのデザインっていうのを
担当しているというところで、そのプロダクトどんなものかというと、
普通に画面としてトップの画面があって、
各手続きというか操作をするような画面っていうのがあって、
最後完了画面があるみたいな本当に基本的な
よくあるプロダクトの流れになっている画面です。
で、やっぱりUIデザインの領域になると思うので、
UIデザインをやるにあたってはそこをゴールまでストレスなく、
何も意識することなく、
ユーザーさんがやりたいことを達成できるみたいなところが
基本的な思想というか、
重要なところになると思うんですけれども、
ユーザー体験の考慮
n-hara
アシスタントのデザイナーの子がですね、
そういう知識ももちろんある上でやってくれてはいるんですけども、
実際それをやろうとしたときに、
やっぱりユーザーさんの置かれている状況とか、
各画面でどういう情報をどういうふうに見せたらいいのかとか、
レイアウトとしてどういうのが最適なのかとか、
ライティングという伝え方が最適なのかとか、
そういうところを結構苦戦してたなっていうふうに思っています。
s-umemoto
なるほど。
n-hara
その子はさっき話したとおり、
普段LPとかバナーとかですね、
結構ビジュアルのデザインスキルがついてきているメンバーなので、
本当にそういう1枚の画面の中で綺麗にデザインをするというか、
ちゃんとメリハリ付けてデザインするみたいなスキルがすごく高いメンバーなんですよね。
多分その感覚というか、
ちゃんとデザインするというか、
綺麗にメリハリ付けてデザインするみたいなことを基本として、
今回もそういう一連の操作する画面とかですね、
デザインしてもらったんですけれども、
実際何が問題だったかというと、
結構ワイヤーフレームは、
基本今回はディレクターが情報設計をしてて、
そこをデザイナーがちょっと整えて、
あるべき姿に起こすみたいな工程があったんですけど、
その子がやった画面というのは、
ワイヤーフレームの見た目を整えるデザインみたいなのに最初なってしまう。
s-umemoto
それって結構本質的じゃない状態になってると思うんですよね。
n-hara
1枚を作ってるわけではなくて、
一連操作を想定して作った時に、
本当にワイヤーフレームからの見た目を整えるだけでいいのかっていうのは、
結構いろんなことを考えて、
再設計しなきゃいけないところではあると思うので、
そこはペイドパックが多くなっちゃったなという印象がありましたね。
s-umemoto
なるほど。
n-hara
やっぱりそこが難しいんだろうなと思ってて、
LPとかバナーをやってきて、
本当に与えられた情報をちゃんとまとめるみたいなこととかを、
意識しながらデザインをしてしまうと、
そういうワイヤーから綺麗にしたデザインみたいなものになっちゃうっていうのは、
大きい違いですよね。
s-umemoto
これはもう2年目の人がそれやってんだなと思うと、
めっちゃ難しいことやってる。
n-hara
あれ?
s-umemoto
味系なんかちょっとヘビーじゃねえと思われそうな話だよ。
n-hara
でもその子すごい優秀なんですよね。
そういうことよね。
一部任せてみようみたいな感じでやってもらって。
s-umemoto
仕事ができる人に仕事が増えてしまう路線に入ってるってことだね。
期待値も込めて。
n-hara
スキルアップになるかなっていうところで。
s-umemoto
まあいい経験だよね。
すいませんすいません。
ちょっと話を戻すと、確かにユーザーが次どんな行動するのかっていうのを想像しながら、
スタイリングじゃなくてデザインをしなきゃいけない。
設計をしなきゃいけないっていうことをやってくれてるんだね。
n-hara
そうですね。
今回ってビジュアルデザイン、見た目を整えるスタイリングだったみたいなデザインのことを言ってるんですけど、
やっぱりそれって結構いかに情報を整理整頓して、
余白とか色とか、そういうデザインの要素をうまく活用して、
情報に感覚をつけて綺麗に見せる、美しく見せるみたいなところが結構重要だと思うんですけど、
やっぱりそれをUIのときに、必要なタイミングがもちろんあると思ってるんですけど、
そこを重視してやってしまうと結構、一連の体験みたいなところの考慮っていうのがあるなと思っていて、
画面に一つの画面をお願いしますってお願いしたときに、
もう考えなきゃいけないのってその画面のことだけじゃなくて、
その前にどういう画面からユーザさんそこに来ててとか、
そもそもその人はどういう人で、どういう目的を持って、
何がゴールで今この画面を見てるんだろうかとか、
どういう状況の中でその画面を操作してるんだろうかとか、
そういうのを結構解像度を上げてとか、
自分なりに解釈しながら、
だからこの画面はこういう情報設計になっててとか、
何を伝えたくてこの画面になってるんだろうかみたいなことを結構意識した上で、
UIデザインの難しさ
n-hara
デザイナーとしてどういうインターフェースが最適なのかみたいなのに置き換えていくというか、
再設計していくみたいな工程だと思う。
結構そこは難易度が高い、
一段階はビジュアルデザインをやってたところからステップアップするようなタイミングなんだろうなと思っていて、
それが最初にぶつかる壁、
ジュニアのデザインがぶつかる壁なんだろうなと思いました。
s-umemoto
なるほど。
今のは設計というか、
もちろん違うようなものだと思うんです。
どっちが上とかそういう話ないと思うんだけども、
設計やってみましょうというときにはUIデザインのスキルを学んでみましょうということなんでしょうけど、
これどうやったら身につけられるんですか?
n-hara
そうですね。基本的にUIデザインはこの2点かなと思うんですけど、
論理的に考えて作るということと、
気を手柄ないという、変わったことをしようとしないという2点が基本だろうなと思っていて、
論理的に考えるとさっき話したように、
1つの画面の情報設計とかデザインとかって話ではなくて、
画面の文脈とか背景とか流れとして、
この画面がどうあるべきかっていうところを結構地図道立てて、
理論としてちゃんと説明ができたりとか、
なぜそうなってるのかみたいなところをデザインできるっていうところが本当に論理的に考えるとか、
論的にデザインするみたいな話だと思うので、
1つの画面を最初アシスタントだと、
これまずデザインしてねってお願いされること多いと思うんですけど、
そのときに与えられる情報ってもしかしたら結構足りてないこととかあると思うんですよね。
なのでそのときに自分で、これって前の画面ってどうなってるんだとか、
この人ってそもそも何をしようと思ってこの画面に来てるんだろうかとか、
ワイヤーが今こうなってるけど、どういう情報からこれが来てて、
そのワイヤーを作るのもお客さんといろいろ議論した上で、
その形になってたりとかもするので、
どういう要件とか性格がその形になってるんだろうかとか、
その辺はやっぱり自分なりに理解するためにちゃんとキャッチアップするために動いたりとか、
情報を集めたりとかですね、
そういう作業がデザイン入る前にすごい、
論理的に考える上では必要だと思うので、
そういうのが与えられるだけじゃなくて、
もらった上で何を確認しなきゃいけないのかとか、
何が今足りてないんだろうみたいなことを考えて、
その情報を集めて最適解を見つけるっていうことができると、
すごいユーザーさんと分かりやすい画面にできるんじゃないかなと思いますね。
店舗デザインの新たな学び
s-umemoto
なるほど、素晴らしいですね。
情報を集めてロジックにちゃんとユーザーが誰かっていうのを考えて、
それを設計していく、
論理的に考えようというのが大事という話ですね、1点目。
n-hara
もう1点は気をてらわないことということでしたけど、どういうことでしょう。
やっぱりちょっとやりたくなっちゃうというか、
最初デザインするときってビジュアルデザインとかあって、
特にそうだと思うんですけども、
自分のやりたいデザインとか結構出たりすると思うんですね、
ビジュアルデザインとかやるときに。
でもUIデザインになったときって、
基本的にはお客さんとかユーザーさんが慣れている操作だったりとか、
学習の負荷がないとか、
操作方法って結果が予測できるとか、
そういうのがすごく重要だったりとかすると思うので、
ちょっと変わったことをしようというよりは、
基本的によく見られるようなUIをちゃんと採用するだったり、
意味が合っているものをちゃんと持ってきて、
そのデザインを落とし込むみたいなのが結構ベースにはなると思うので、
その気をてらわないというのはその辺りかなと思っていて、
なのでプロダクションによってはですね、
新しいスタンダードを作ろうみたいなので、
すごい新しい斬新なUIが生まれる場面っていうのはもちろんあると思うんですけども、
基本は多分目的にあったUIをそのアシスタントのうちとかっていうのを選んで、
ちゃんとデザインをそれを意味のあったものにしていくっていう、
それがちゃんとそれは知識としてないとできないと思うので、
このUIをこういうときに使うんだろうとか、
こういうメリットデメリットがあるんだろうとか、
なんかその辺を理解した上で、
ちゃんとそれを作れる形にできるっていうことを磨いていくと、
それはスキルが向上して、
s-umemoto
UIデザインのスキルが向上してるっていうふうに言えるんじゃないかなと思いますね。
なるほど、いい話ですね。
n-hara
私が言いたいことは最後にまとめようと思うんで。
s-umemoto
ちなみに今回このジュニアというかですね、
2年目のデザイナーの人が、
UIデザインのスキルとビジュアルって言ったのかな、
グラフィック、ビジュアルデザインか、
ビジュアルデザインの違いで悩んでいるところを見せてくれたから、
いろいろ気づきになったっていうことだと思いますが、
今回の案件に通して他気づきになったこともありますか。
n-hara
ありますね。
ちょうど店舗の今のプロダクトのデザインをするっていうところ以外にも、
他にもちょっと同じように、
ちょっとこうやっぱりアプリとかじゃなくて、
店舗で使うタブレットだったり液晶だったりとか、
そういうデザインをする案件が何個かあったんですよね、最近。
そこで通常のウェブサイトとかアプリとかを使うシチュエーションとは、
またちょっと違う制約みたいなのがあるなっていうのが、
すごい最近学びになったことがありまして、
この案件ももちろんそうなんですけど。
その学びっていうのがですね、
店舗で使うプロダクトって、
ユーザーさんの目的っていうのが、
そのプロダクトを使うことじゃなくて、
店舗にあったりとか目的がですね、
やることが店舗自体にあったりとか、
それ以外の何かこう物理的なオフライン環境での何かやることみたいなのに、
主目的があって、
プロダクトはその家庭の中で出てくるものであるっていう、
その画面、そのプロダクトの画面内を操作することがメインじゃないっていうのが、
特徴として違いがすごいあるなっていうふうに思ってて、
例えばさっきのやつは、
店頭の受付のって話したと思うんですけど、
受付をするプロダクトなので、
受付することは目的じゃなくて、
その先にやりたいことがあっての受付っていう、
作業になるっていうことだったりとか、
あと銀行さんでATMとかもそうだと思うんですけど、
ATMを使うために来てるわけじゃなくて、
お金を下ろすためとか、
入刑するためとか、
それ別の目的があって来られてるっていうのが大きくあるんで、
アプリとかでもそういうことあると思うんですけど、
店頭でそういう家とかではなくて、
そういう場所に来てわざわざやるっていうことは、
そういう時間的な制約とか、
ちょっと特殊なシチュエーションというか、
っていうのを考慮しなきゃいけないこと多くあるなというふうに思っていて、
なので、
ちょうどユーザーテストとかをやったんですよね、
その店頭のやつで、
両方とも2つの案件でユーザーテストに自分が参加したけど、
やっぱりそういう状況って、
よくある人が後ろに並んでいるような状況とか、
例えば、
遠方なので他の方を見失ってて、
自分が操作をしてると後ろに人が並ぶみたいな状況だったり、
周りが店頭だったりするので騒がしい環境の中で、
その画面の中でタスクをやらなければいけない環境であったりとか、
あとは環境的にはパッと来てパッとやるという、
あんまりそこに時間かけたくないみたいな状況があったりとか、
っていうので、
そこがメインじゃないっていうことによる、
お客さんの心理的状況とか、
物理的な環境とかっていうのが、
すごく画面の情報に影響するなっていうふうに、
テストとか感じたので、
そうすると画面で伝えられる情報量とか、
ライティングみたいなのがすごい重要だなと思って、
そこを間違えるとその次のステップがちゃんと進めないとか、
意図通りに進めないとか、ちゃんと理解してないとか、
っていうことが起こるので、
やっぱりそういう転倒というか、
ちょっとアプリとかですね、
心理的状況と環境の影響
n-hara
ウェブサイトとかまた違うようなプロダクトっていうのは、
そういう環境、
より多分有益デザインの領域とかにもなると思うんですけど、
ちゃんと理解して、
心理的な状況だったり環境的なところっていうのを踏まえて、
最終デザインに落とすっていう、
ほんとそこがすごい重要だなって、
最近案件として感じました。
s-umemoto
もうユーザーテストを通して、
ありありと解像度が高くわかったっていうことですよね。
n-hara
そうですね。
s-umemoto
具体例出せればもうちょっとわかりやすい話できたけど、
ちょっと案件の話だからできないもんね。
UIデザインとビジュアルデザインの違い
s-umemoto
たぶんJRの緑の窓口みたいなもんだよね。
n-hara
そうですね。
s-umemoto
切符を買いたいけど窓口行く、
ほとんどが切符買いたい人だけど、
窓口行く人と、自動販売機じゃないけど、
n-hara
券売機のほうに行く人で。
そうですね。
たとえば今回の自分が宝を当てたやつだと、
受付のやつだったりATMとかだったりっていうのは、
主目的、捜査の主導性のやるべきことみたいな中に、
伝えたい情報、銀行側から伝えたい情報とか、
サービス側から、
s-umemoto
知っておいてほしい情報みたいなのが入ってくるんですけど、
n-hara
それはやっぱり厳選しないと見られないんです。
この状況で。
自分のユーザーさんでも見ないことが多い。
いろいろ文字が書いてあったとしても、
自分がやりたい、その先のことを今、
想像しながら捜査をされてるって状況だと思うので、
やっぱりそこに根底のない情報というか、
関連性はあるんですけど、
ユーザーさんの頭の中にそもそもないような。
新しくそこで何か伝えたりとかするのには、
すごく難しいというか工夫がいるということは、
すっごい直近のプロジェクトだとありましたね。
あんまり複雑なことを伝えることはできなくて、
本当にシンプルにいうことをよりわかりやすく、
どっかのタイミングもちゃんと考慮してみせる。
s-umemoto
なるほど。わかりました。
確かに、自分は金融に全然携わってない話なんですけど、
振込業務とかやっぱりやるじゃないですか、オンラインで。
そのときにモーダルでバンと出てきて、
振込詐欺にご注意くださいみたいなメッセージを読まないと、
振込ができないっていうのがあって。
振込詐欺にご注意ください系のメッセージは、
もちろん重要なんだけど、
1ヶ月ぐらい開いてなかったら、
4つぐらい届いてたりとかするじゃないですか。
n-hara
4つのメッセージ全部読まないと振込できないんだよね。
つらいですね。
s-umemoto
これつらいなと思いながらやってるんだけど、
まあでも、件数的には振込詐欺の件数って年々増えてるんで、
そのバランス難しいよね、と思いながらやってますけど。
すみません。
まあでも本題からまた外れてしまいましたけども、
おっしゃるとおり、書かれている文字数と文字の、
UXライティングと言われる領域ですね。
内容がわかりやすくて短くないと操作してくれないし、
でも間違われるストレスになっちゃうっていうケースはよくあるよね。
n-hara
そうですね。
さっきアシスタントデザイナーの子の話もしたと思うんですけど、
その子がお願いしたときとかも、
事業側というかサービス側から伝えなきゃいけない情報とかっていうのがあるページとかを
少しデザインしてもらったときに、
やっぱり普通にLPとかと同じように綺麗にデザインして見せるみたいなことをやるんですけど、
それを多分見ても、その瞬間、本当数秒だと思うんですよね、
ユーザーさんが画面を見るのって。
全然内容見ないで次に行っちゃうみたいなこととかが想像されるので、
やっぱ違うだろうなっていうシチュエーションとかを考えると。
s-umemoto
なるほど。
カードをRに綺麗にしましたみたいな感じのことをやってくれたんだろうね、なんかね。
n-hara
綺麗にデザインをしてくれたんですけど、
そこをじっと見てる分には全然綺麗に認識ができるんですけど、
瞬間って考えると見ないだろうなみたいなところがある。
s-umemoto
じゃあまずは綺麗にしてくれてありがとうっていうところから。
n-hara
そこで終わる。
s-umemoto
スタートですね。
分かりました。
じゃあ今日のテーマは、
UIデザインとビジュアルデザインの違いを再認識した話ということでお話ししました。
デザインにおける情報提供の難しさ
s-umemoto
今日も聞いていただきましてありがとうございました。
n-hara
ありがとうございました。
s-umemoto
編集後期、お疲れ様でした。
n-hara
お疲れ様です。
s-umemoto
本編で話そうと思ったんだけど、
木を照らわないことっていうところで、
いやその通りだなと思って、これこそ本当主張りだよねと思ってましたね。
n-hara
そうですね。
s-umemoto
なんか主を知らずに理をやろうとするみたいなのって、
見てらんないというか。
そうですね、見てらんないです。
これ老害の意見だね。
n-hara
でも無理ですよね。
知らない状態で理をやるの。
s-umemoto
基本は無理です。
自分はこう思ったからこういうデザインしましたっていうやつを、
聞く時間をどういうふうに伝えるかって迷いながら俊俊する時間あるじゃないですか。
そうですね、どこから伝えようかみたいな。
この人はこういうタイプだからこう言おうかみたいなところの
俊俊の時間のほうが長くなるケース。
n-hara
気使いますね。
s-umemoto
気使いますね。
相手に合わせて、
しかるべきタイミングで言わなきゃいけないっていう難しさが。
n-hara
そうですね。
s-umemoto
苦手です。
n-hara
難しいです。
s-umemoto
思ったことをその場のタイミングで言うと良くないことばっかりありましたから。
n-hara
確かに。
s-umemoto
反省してます。
すみません。
ということで今日は何か若手の話を聞いて私が反省した編集後期でした。
ありがとうございました。
ありがとうございました。
