UI/UXデザイナーが教えるデザインの基本

濱野将氏:それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。

今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。

簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせていただいております。「IMAGE×MAKE. 想像を創造する」をテーマに、IMAGEとMAKEを掛け合わせた「IMAKE」という造語がそのまま会社名になっております。

やっていることとしては、デザインの制作事業やデザイナーの教育事業。あとは生まれが宮城県の女川町というところなんですが、そこの復興支援活動もさせていただいております。

制作実績を少しだけお話しさせていただきます。ベネッセさんのUdemyの教育動画コンテンツの1つとして小学生向けのランディングページやチラシを作成したり、大手のキャンペーンやCMサイトの作成、高等教育機関向けにUIを提供するサービスも作成しておりました。大学や専門学校、スクールでも登壇させていただいております。

世の中にデザインがなかったらどうなる?

ここから本題に入っていくんですが「デザインの必要性」ということで、そもそもデザインってなんで必要なのかな? というところを考えていただきたいなと思っております。世の中にデザインがなかったら、どうなるんでしょうね。

極論こうなります(笑)。「ユーザー・インターフェース」や「グラフィック・ユーザー・インターフェース」と言うんですが、そういったものがなければ、極論テキストのみなんですよ。ただ、その中にデザインがしっかり組み込まれることによって、見やすさやわかりやすさが実現されていくわけです。

実際にデザインに起こしたものがこちらです。デザインの力というのは、わかりやすさ、見やすさ、インプットのしやすさ。情報設計をする上で、自分たちのアピールしたいものをどういうふうにしっかり伝えていくのかが大事になります。

文字の情報よりも写真の情報は10倍、動画だと数千倍と言われてるんですね。なので、そういったものもしっかりと組み込んでいくことを考えなければいけないということです。デザインがあることで、誰でも見やすく使いやすくする。これが「サービス提供の民主化」です。

ジュースの缶で例えてみると、このジュースをポンと渡されても、コーラなのか、オレンジジュースなのか、お茶なのか、何かわかりません。

でも、ここに「コーラ」と書くと、これはコーラだとわかる。だけど、ただ「コーラ」と書いてみても、おいしそうには見えませんね。

しっかりとしたデザインがあることによって、何の商品かがわかるし、英語を読まなくても白と赤で「コカ・コーラだな」というのがわかります。

見ただけでコーラと判断できるCMや広告などのブランディングで、ユーザーが「飲みたい」(と思ったり)とか、頭の中で脳内再生される要因になるんですね。これが、デザインが与える力の1つです。

「デザイン」と「アート」の違い

デザインというのは見た目もそうなんですが、それ以外の部分である技術や機能、色と形も「目的を実現するための手段」でしかないんです。

そもそもの計画の部分や根っこの部分で、どうやったらユーザーが満足できるのか、どうやったらそれを実現できて、自分たちの求めているゴールにたどり着くんだろうか……というところも「デザイン」になります。

じゃあ、デザインを作っているデザイナーは制作する時に何を考えて作っているかというと、「第三者に意図を持って何かを伝えること」が大事なんですね。

これからデザイナーを目指す人には「デザインとはコンセプトに基づいた理論や原理より設計された100パーセントの意図である」と、必ず口酸っぱく言っています。つまり要件定義や仕様設計がないものは、もはやデザインじゃないんですよね。

例えば「なんとなくカッコよく、良いように、センスに任せる」というのは、アートでしかない。そのサービスにはどういった意図があって、どういう相手に提供したいのかが絶対にあるはずなんですよね。

要件定義や「どういったものが必要なんだろうか?」というのが仕様設計なんですが、そういったものがしっかり確立されて、デザインが仕上がっていくと思います。

デザインにセンスは必要ない

「アーティスト」と「デザイナー」という2つの職業がありますが、よく「何が違うんだ?」と言われます。

アーティストは自己表現で、機能や理論の定義は不要、問題や意思の発信。理論じゃなくて美的感覚によって作られていて、例えばそれがカッコいいのか、かわいいのか、きれいなのか、受け止める側はどういった感情を持ってもOKなわけです。

ただ、デザイナーの場合は他人ありきのユーザー視点でモノを作るので、機能と理論の定義は必ず求めて、問題を解決していくことが目的になるわけです。つまり、作り手側が「見た人にどういうふうに伝えるのか」を考えながら作るのがデザインなんですよね。

なので、デザインにおいて最優先されるのは「問題の整理」や「情報の設計」であって、自己満足の発信じゃないんですね。だから、デザインはルールや定義に則って制作していきます。

コンセプトだったら考え方、レイアウトだったら要素分け、テキストだったら読みやすさを、デザイナーがしっかりときれいにしていく。これをまとめると、つまり「情報整理」なんですよね。例えば部屋を整頓して快適に過ごしやすくしたり、物を取り出しやすくしたり、使いやすくするのは整理整頓なんですが、これも一緒です。

情報をインプットした時に、自分たちの中で「これはこういうサービスなんだ、こういう強みがあるんだ」というのをしっかりと落とし込めないと、たぶんそのサービスは買われないんですよね。なので、整理整頓することと一緒なんです。

効果的なデザインは「第三者の目線」から生まれる

だから「デザインはセンスがないとできない」「デザイナーじゃないとできない」のかというと、そんなことはないんですよ。デザインにセンスは必要ないと思います。

何が必要になるかというと「人に優しくなること」です。人に優しくなれたり、気を遣うことができるようになると、第三者の目線で物事をとらえられるので、自ずと効果的なデザインを仕上げることができると思っています。

なので(デザインで大事なことは)情報を整理して、難しそうに見せずに伝えたいことをきちんと伝えられるかどうか。センスは必要ないんです。

デザインの訴求力を高めるにはどうしたらいいかというと「知識」と「経験」です。これは色や形を作るためのツールの知識と経験よりも、どちらかというとそのプロジェクトに対する知識と経験です。

例えばお茶を販売した時に「本当は50代をターゲットにしていたんだけど、意外と30代、40代にウケるな」というのは、まずは知識として「自分のプロジェクトをどういうふうに売っていくのか」をしっかりと自分の中にインプットした上で、それをアウトプットする経験で(デザインは)磨かれるんですね。

こういう感じで、誰でもわかるようなかたちでお伝えする講義を僕は心掛けてはいます(笑)。「そんなのわかっているよ」と、感覚的にわかっている人もいるとは思うんですが、一応情報というか、みなさんに提供するにあたって知識をフラットにするために、こういったお話をさせていただきます。

デザイナーだけがデザインする時代はもう古い

「でも、そんなのはデザイナーだけが身につけていればいいじゃん」と思う方もいると思うんですが、そんなことないんですよ。なんでかというと、タイトルにある「デザイナーだけがデザインする時代は古い」。

ブラックボックス化というものがあります。ブラックボックスというのは、そこで何が行われているのかわからない不明瞭な出来事や、専門家がいないとわからないことを指します。デザイナーの脳内だけで組み上げると、デザイナーだけの視点になって、プロセスがブラックボックスになってしまうんですね。

なので、デザイナーが黙々と作ってアウトプットすると「なんでこうなったんだろう?」みたいなこと、けっこうあったりしませんか?

もちろんデザイナーも寄り添う必要はあるんですが、実際に依頼した人もデザインについて多少なりとも知識……と言うほどでもないですが、「(デザインとは)こういうものなんだよ」というのは知っておく必要があると思います。専門分野だからといって、ライン引きするのは良くないということです。

鉛筆を持って、チラシの裏とかに手書きでバーっと作れば、知識がなくてもこんな感じのものは簡単に作れると思うんですよ。「ペーパープロトタイプ」と言うんですが、これを元に意見を交わすことができて、デザイナーが形にして仕上げてくれます。

簡単なものでも何でもいいです。こういったものを作ることによって、デザイナーは「こういう方針で、こういうふうに進めればいいんだな」と、とらえてくれるはずなので。なので、こういったこともやって(デザイナーに)寄り添っていきましょう。

多様なメンバーで協力しなければ、良いものは作れない

「多角的な視点を持ったメンバーで協力していきましょう」ということで、多角的な視点を持ったメンバーで協力しながら作り上げていかなければ、本質的な答えが見出せなくなります。

ディスカッションができるようになるためには、デザイナー以外の方もデザインに関して一定以上の知識を持っておいたほうが、意見が交わしやすくなります。さっきもお話ししましたが、デザインにおいて情報設計や整理整頓することに関しては、そんなにセンスが必要ないので。

多角的な視点があるからこそコミュニケーションができて、いろんな意見を交わせるようになる。「デザイナーがデザインを構築していく時代はもう古い」というのは、そうすることによってUIやUXの設計がどんどんブラッシュアップされて、よりユーザーが使いやすいものを提供できますよ、ということなんですね。

例えばエンジニアだけの場合、機能優先でデザインが客観的じゃなくなる。オペレーターだけの場合だと、説明がどんどん来るのでくどいデザインになりがちといったことが起きます。

「視点によって変わる体験価値」というのは、ユーザー視点、ビジネス視点、プロダクト視点がしっかり重なっているかどうかです。体験価値というのは、さまざまなシナリオや視点でしっかり提供しなければいけないので、全員とコミュニケーションをしっかり取っていきましょう。

UI(ユーザー・インターフェース)とは何か

誰でもデザインを考えられるということは、誰でもデザインを評価することができます。評価するということは検討できることになりますし、検討できるということは改善にもつながります。

こういったことをみなさんの心の中にも留めておいていただいて、「デザイナー以外でもデザインは必要なんだな」という考え方を持っていただければと思います。

そんな中で、みなさんに知ってもらいたいのが「UI/UX」という言葉の意味です。「UIを見たことある人はいますか?」いうと、絶対に(みなさんも見たことが)あると確信します。その理由は、あとで説明します。

UIは「ユーザー・インターフェース」の略です。WebデザインやWebアプリデザインなどにおけるUIは、ボタンや見やすさだったりするんですが、それをグラフィックで補助するものを「GUI」と言います。

WebサイトだとGUIが当然なために、動画や画像をすべて総称してUIと表現するのが一般的です。なので本当は、GUIという言葉を略称してUIと言ってるんですね。

簡単に言うと、UIは「人とモノをつなげること」です。UIを理解する主なメリットで言うと、要件定義をスムーズに進めることができること、製品やサービスの色や形を言葉でしっかり表現できること、本当に伝えたい意図をより明確に説明できる、つまり可視化ができることですね。

そうすることで、プロダクトの全体がスピードアップしたり、ユーザーに齟齬がなく的確に明示できたり、ユーザーの理解度を上げられるようになります。

ぱっと見では理解ができない“残念なUI例”

「UIを見たことがあるか?」に対して、なぜ確信を持って「絶対にある」と言えるのか。これは自宅のガスコンロなんですが、火を点けたい時にどこを押せば火が点くのかって、みなさんはわかるじゃないですか。説明書はいらないと思うんですよね。

「どこをどうすればどうなるか」がわかることをアフォーダンスと言うんですが、例えばボタンを下に押すと火が出ます。火力を調整するのはレバーだというのは、このアイコンだけでわかるじゃないですか。これが良いUIとされるものです。

ほかにも「シャワーにするにはここを押してくださいね」「ここを押すと浄水・原水になりますよ」とか。ただ1点残念なのが、シャワーに変える時は口のノズルを回転させなきゃいけないということが、半年間わからなかったんです(笑)。こういった残念なUIもあったりします。

ほかにもちょっと残念なUIがあって。これはユニバーサルデザイントイレの標識なんですが、色と形が男女どっちなのかを判断しづらいんですよね。

本来だったら、これ(右側)が正解だと思うんですよ。もしかしたら三角の部品のつける方向を間違えたのか、「赤は男性、青が女性」と認識する国もあったりするので、施工した方が海外の方で間違ってつけちゃった可能性もいろいろと考えてしまいました(笑)。

実際にあった“わかりづらい標識”どう改善すればいい?

じゃあ、この問題の改善案を考えてみてください。

新宿のビルのとある標識なんですが、どっちに行けば何があるのかが一目ではわからない。ちょっと考えればわかるんですが、みなさんはこれを見てみてどうでしょう? 「こうすれば解決するんじゃないか」というものが、もしかしたら出てくるかもしれないですね。

ちなみにChatGPTに「トイレはどっちの方向にありますか?」と聞くと、「右側にある」と答えます。なんで僕がこれを撮ったかというと、トイレにすごく行きたくて視野が狭くなっていたんですよね。まっすぐ行けばトイレがあるもんだと思って、まっすぐ行ったんですがなかったんですよ。

(標識まで)戻ってきてバっと見た時に「トイレは左に行けばあるのか」と。よく見れば確かにわかるんですが、左に行ってUターンをして見た時に「これはわかりづらいよね」と、写真撮ったという経緯があって。ChatGPTもわからないわけです。

代替案としては、距離を少し離す、パネルの色を変えてみる、矢印を1つにまとめてみるとか、間に板を挟む手もありますよね。そうすると、ChatGPTも「こっちに(トイレが)ありますよ」と、わかってくれるみたいですね。こんな感じで、いろんな視点で気づきを得ながら共有し合うことが大事だったりします。

UXデザインにおいて重要な「5段階モデル」

次がUXです。「UXを感じたことある人はいますか?」というと、絶対にあります。UXは「ユーザー・エクスペリエンス」の略で、ユーザー体験そのものを指します。

UIに触れた時に「これは良いものだ」「これは悪いものだ」「なんかちょっと使いづらいな」「また使ってみよう」「ファンになりました」「リピーターになりました」という、この気持ちがUXなんです。UXは人がモノを通じて体験や経験をすることを指しますので、初めて使ってみた時にどう感じるかが大きな指標になってきます。

「UXハニカム」というものがあります。「役に立つ」「好ましい」「アクセスしやすい」「信頼できる」「探しやすい」「使いやすい」といった要素が満たされて、初めて価値があると想像できるという考え方を図示したものです。

それを縦の構図にしたものが「UXピラミッド」です。「満足」「価値がある」「好ましい」というところに行きがちなんですが、まずは「アクセスしやすいかどうか」を先に考えないと、上の要素に行きつかない順番になっています。

「アクセスしやすいか」「利用しやすいか」「安心できるか」「満足しやすいか」という順番で上がっていく必要があるということです。

「UXの5段階モデル」というものがあります。デザインというのは、あくまでも表層、骨格、構造の部分なので、要件や戦略はみなさんで考えるべきなんですよね。

要件定義や仕様設計、カスタマージャーニーやコンセプトをみんなで考えた上で、それを形にするのがデザイナーです。なので、これも全部デザインなんですよ。

生成AIを活用して効率アップする方法

デザインの中には、デザイナーがやるところ(デザインカンプ、ワイヤーフレーム、サイトマップ)と、みなさんが考えるところ(要件定義書・仕様書・カスタマージャーニーマップ、コンセプト・ビジュアルアイデンティティ・ビジネスモデルキャンパス)があります。これを「みなさんでやっていくこと」が大事なんです。

もうちょっと細かく説明しているものがUdemyにありますので(笑)、ぜひこちらをご覧いただきたいなと思っております。「AIを使ったプロジェクトの進め方」です。

「UI/UXはなんとなくそういうものなんだな」とわかったんですが、どのように進めていいかわからないと。ここの部分(5段階モデルの下の2つ)をみんなで作る必要がある。その上の段階はディレクターやデザイナーが作る必要がある領域なんですが、生成AIを使って業務効率をアップした一例があります。

これは僕自身がコンテンツプロデューサーとして行っている、動画プラットフォームのプロジェクトです。プロジェクトの方向性を可視化するためにビジネスフレームワークを使って、生成AIを使ってユーザーシナリオやカスタマージャーニーを考えてもらいました。

こういったものを可視化するのには、大変骨が折れるんですね。なので、AIの技術を使って情報を整理したり、イメージに近い写真を生成AIで作ってもらうことによって、業務を短縮できます。

仮のペルソナを作って、そのペルソナが日常でどんなことを行うのか、ChatGPTに5W2Hを考えてもらいました。その時に必要と思われる機能や仕様はメンバーで洗い出して、簡易的なワイヤーフレームを作ったという流れです。

そのあとのカスタマージャーニーマップでも、各フェーズで考えるタッチポイントを考えて、ChatGPTに行動シナリオを考えてもらいました。ただ、以降の感情や課題の洗い出しは人の力で行いました。ここはもう人の力じゃないとできない範囲なので。

(ChatGPTに行動シナリオを)生成してもらったあとに、今度はストーリーボーディングと言って、簡潔に第三者に説明できるようなものを作りました。Adobe Fireflyという画像生成AIを使って、情報に基づいた画像を生成してもらったので、素材画像をいちいち探すことなくスムーズにできました。

ビジネスに効果的なデザインの作り方まとめ

最後にまとめていきます。「デザインの必要性」で言うと、デザインはサービスを民主化するために必要不可欠なもので、想起させるブランドイメージデザインとしても必要です。また、デザインは「人に優しくなる」ことも大事です。

「デザイナーだけがデザインする時代は古い」ということで、メンバーで協力し合いながら作り上げれば本質が見えます。デザイナー以外の人もデザインに関する知識を一定以上持っておくことで、意見が交わせます。デザインを考えられるということは、評価、検討、改善ができます。

UIデザイン(の役割)は簡単に使えるようにすること。一目で何の役割をしているかを明確にし、効率的に目的を達成できるようにします。「使っていて楽かどうか」ということですね。

UXは、それを使った時に安心、満足、価値がある・楽しいものにできるかという、リピーターを作るためには大事な指標です。

デザインができなくても、生成AIを使って可視化することで情報共有ができますし、アイデアを出してもらうことによって、業務の時間短縮を図れます。生成AIは仕事を奪わない、自分たちの味方だということです。

デザインについて考えることは、ユーザビリティ(UI)やユーザー体験(UX)につながります。デザイナーだけじゃなくて、みなさんがデザインに対して考察できるようになると、サービスをより具体的に伝えることができます。最後までご視聴いただき、ありがとうございました。