UIの勉強方法を現役デザイナーに質問。UI/UXを学ぶメリットとは？ 市川莉緒 2021.06.29 2023/1/19 UI/UXWEBデザインデザイナー UIUXUXデザイナーWEBデザインデザイナー UIの勉強方法①「いいサービス」の「いい点」を言語化する UIの勉強方法② 実践と有識者のフィードバックで学ぶ スクールはUIを体系的に学べる UXの勉強は体系学習から UIデザイナーにコミュニケーション能力は不可欠 UI/UXの勉強で「市場価値」が高くなる UIを勉強する方法とメリットを弊社のUI/UXデザイナーとして活躍するお二人に筆者が伺いました。彼らが現在UI/UXデザイナーとして活躍する経緯や、効果的な勉強方法について対談形式でお送りします。 普段の業務に役立てられる内容も伺っているので、普段デザインに関わらない方も是非一読ください。 本題に入る前にUI/UXの概念を詳しく知りたい方はこちらの記事をご覧ください。 UIの勉強方法①「いいサービス」の「いい点」を言語化する 市川：本日はよろしくお願いします。 早速本題ですが、効果的なUIの勉強方法を教えてください！ 北林： 1つは世の中のUIを観察して良い点を言語化することです。 たとえばUIが高いと一般的に評価されているiPhoneが、なぜ使いやすいかを考えたことはありますか？ 言語化を繰り返すことでデザインの引き出しが増え、自然と実践できるようになります。 最初は身近な製品やよく使うWEBサイトなどから始めてみるといいです。 市川：なるほど、言語化することで汎用性のある知識を付けるわけですね。 北林： グラフィックデザインなどのビジュアルデザインにはアート的な要素があり、その人ならではの個性的な表現が感動を生むといえます。 しかし、UIは「誰もが使いやすい」や「ユーザーにとって使いやすい」を目指した汎用的なデザインなので、自分の個性はある程度消さなくてはいけません。 とはいえ、使いやすさとサービスの個性をうまくミックスさせるバランス感覚が重要になってきます。UIのスキルと、ビジュアルデザインのスキルの掛け合わせですね。 UIの勉強方法② 実践と有識者のフィードバックで学ぶ 井上：もう1つは実践の積み重ねです。たとえば、自分で調べてLPを作り、プロからフィードバックを受ける。そこで気づいたことをさらに調べて学ぶ、この繰り返しです。 私の場合、自分では特に気づかなかったラジオボタンとチェックボックスの違いについて、フィードバックを受けて初めて学びました。 北林： そうそう。最初の頃はラジオボタンとチェックボックスの違いなんてわからないですよね。ラジオボタンは1項目のみ、チェックボックスは複数選択ができる場合に使います。 井上：このようにプロに指摘されて初めて知ることが多くあります。指摘されないと「これでいいや」となってしまうことも多いですからね。 市川：UIの勉強にはアウトプットとインプットの繰り返しが大事ということですね。 井上：そうです。マネをして作っていると「これはどうやって作るんだろう？」と必ず疑問が生まれます。その度に調べて、徐々に経験を積み重ねていくことが大切です。 北林： 実際に手を動かさないと、理論だけでは絶対に分からないことが出てきます。実践を通して引き出しを増やせると良いですね。 市川：どういう作業から始めてみればいいでしょうか？ 北林： たとえば、UIツールを使って身近なSNSのデザインを真似る、いわゆる「トレース」から始めてみるのがおすすめです。私も元々のキャリアがWEBデザイナーで、UIデザインを始めた当初は何からすべきか分かりませんでした。 当時、UIツールのSketchをはじめて使ってみましたが使い方が全然わからなくて‥‥。Sketchではシンボル（使い回しのきく要素）をダブルクリックすると「Symbolsページ」に移動するのですが、仕組みがわかっていなかったので無人島に飛ばされたのかと思いました（笑） 市川、井上：（笑） 北林： やはりUIツールとPhotoshopは使い方が全く違います。グラフィックやWEBデザイナーの方がUIデザインをするのであれば、UIツールを使ってみると良いです。 スクールはUIを体系的に学べる 市川：UIデザイナーになるのにスクールは必須ですか？ 井上：体系的に学ぶならスクールも良いです。フィードバックも得られるので勉強になると思います。 ただ、私はスクールには通いませんでした。それは、勉強になる情報はネット検索で十分なのと、社内のUIデザインのプロからフィードバックを受けられる環境があったからです。 北林： 講師の実績と、どのくらい生徒にコミットしてくれるか次第だと思います。実績のある講師とのマンツーマンなら伸びるでしょう。 もちろん大人数の教室でも、ヤル気次第で伸びる方もいると思いますが、スクールだとどうしても実践経験が乏しいので、すぐに稼げるレベルまで到達するのは難しいかと思います。 スクールを探す際は評判を調べ、可能なら知り合いのデザイナーに在籍している講師の実績や制作物に対する意見を聞くと良いです。どんなデザイナーになりたいのか、どんなデザインを作れるようになりたいのかを整理した上で、「これぞ私の求めていたデザイナー／デザインだ！」と思えるような講師と出会えるといいですね。 市川：フィードバックを受けられる環境がない方にとっては、スクールの選択肢も良さそうですね。 北林：UIの実践を通して学ぶなら制作会社やデザイン事務所で働くのもいい選択です。実際に私は制作会社でかなり多くの実践経験を積みました。 市川：どんなデザイン事務所がおすすめですか？ 北林： プロのデザイナーを目指すのであれば、大手クライアントの実績が豊富なデザイン事務所がおすすめです。 どんなデザイナーになりたいか、どんな実績（ポートフォリオ）にしたいのかを考えて選ぶといいでしょう。 UXの勉強は体系学習から 市川：では、UXの勉強はどうでしょうか？ 北林： 体系的なことを本で学び、実際に上手くいっている参考事例を真似ることです。というのもUIは「見た目」が重要ですが、UXはより戦略的でデータやファクトが重要になります。 サービスづくりや改善時にユーザーインタビューを通したペルソナ設計を行う際、最低限の知識がないと、どう進めるのかなかなか見当がつきづらいでしょう。 市川：すぐに戦略的な思考をつける、というのは難しそうですね‥‥。 北林： 戦略的な思考で言うと、WEBサイトの場合ヒートマップは誰でも分かりやすく現状分析ができるので、練習に最適ではないでしょうか？ 北林：分析の重要性については、以前記事を書かせていただきました。無料で、設定も簡単なのでUI/UXの勉強をしたい場合の最初の一歩には最適です。 ヒートマップを使ったUIの改善や、仮説立ての方法はこちらで記述しています 無料のヒートマップを使う UIデザイナーにコミュニケーション能力は不可欠 北林：UIデザイナーで最も大切なことは、実はコミュニケーション能力です。デザイナーの理想とする形を現実に落とし込むためには、フロントエンドエンジニアの協力が必要不可欠です。 私は日ごろ丁寧なコミュニケーションを心がけています。まあ、怒ることもありますが（笑） 加えてUXデザイナーは、お客様とよく接する営業担当、全体的な戦略を練るプロダクトマネージャーやマーケターなど、どんな人とでも話せる能力が必要です。彼らの意見も聞きつつ、自分の考えを論理的に伝える能力が大事です。 市川：UI/UXデザイナーにとってコーディングのスキルは必須ですか？ 北林：HTML/CSSを理解できるくらいのスキルは最低限必要です。 市川：開発できるスキルがなくても、意味を理解していた方が、開発側とのコミュニケーションが取りやすいということでしょうか？ 北林：そうです。たとえばWEBサイトの背景色を変えてほしいときは、「背景色を赤に変えてほしい」ではなく、「background-color:#ff0000に変更してほしい」という風に、コードという「共通言語」で会話するとお互いの理解が早まります。 UI/UXの勉強で「市場価値」が高くなる 市川：ちょっと視点を変えて、普段デザインに関わらない仕事をしている人が、UI/UXを学ぶメリットは何でしょうか？ 北林：営業の方は、ヒアリング能力の強化にも活かせると思います。 たとえば、お客様から「この機能がほしい」と言われると、それを開発担当に直接伝えることがありますよね。でもそれはサービス面から見て、「ニーズの深堀り」ができていないことが実は多くあります。 もちろん、機能追加でお客様と長期的な付き合いができることは良いことかもしれません。ただ、その機能が本当に全てのユーザーに必要なのかを考える必要はありますよね。もしかするとそのお客様は機能ではない「別の何か」を求めていたかもしれません。 UI/UXの知識があれば、お客様の課題解決の選択肢が広がると思います。 市川：なるほど、つまり「お客様のニーズをより理解できるようになる」ということですか？ 北林：そういうことです。プロダクトを本当に理解している営業の方は意外に少なく感じます。詳しく理解しているだけで、すごく市場価値が高くなります。 あとは「営業 vs エンジニア vs デザイナー」の構図になりやすいですが、橋渡し的な存在がいることでコミュニケーションが円滑になり、ユーザーに寄り添うプロダクトが生まれやすくなると思います。</p?> 市川：そうすると、UI/UXの勉強をすることで社内での価値はもちろん、ビジネスマンとしても価値が高まると言えそうですね。 UI/UXを勉強すると喜んでもらえる人が増える 井上：あと、UI/UXを学ぶと周囲から頼られることが増えると思います。私自身、WEBサイトやプロダクトに限らず作業の幅が広がりました。 たとえば、「営業資料の内容が分かりづらいから、相手に伝わる構成・デザイン・文章にして欲しい」との依頼を受け、UI/UXの知識をもとにパワーポイントを編集したところ、とても喜んでもらえました。 北林：私はUXを勉強して、戦略的な面から提案ができるようになれたのは良かったです。 依頼されてポスターや名刺をただ作るのとは違い、「使う人や見る人の体験を、どうすればより良くすることができるか？」の視点でクライアントに寄り添って提案できるようになりました。ずばりUXを勉強したことで「喜んでもらえる人の数が増えた」と思います。 市川：その先のユーザーのことも考えられるようになったということですね。 北林：そうです。UI/UXを勉強する前は、「デザインは美こそが正義」だと思っていたので（笑）。勉強してからは、デザインが美しくなくても売れるものもあるということが分かるようになりました。いい意味で自分の「美意識」を捨てられたのは、とても良かったです。 その先にいるユーザーの視点で考えられることで、クライアントから「お店のことやサービスを理解してくれている」と、信頼関係を築くことができました。 UI/UXデザイナー志望のWEBデザイナーの方は、私の体験談も是非読んでみてください。 市川：WEBデザイナーさんから「自分の成果物が受け入れてもらえなかった‥‥」という悩み話をよく聞きますが、その先にいるユーザーに対する理解が深まれば、こういった悩みも減りますか？ 北林：減ると思います。私もWEBデザイナー時代は「こういうデザインにすべき！」という思い込みがありました。そうではなく、その先にいるユーザーにとって最高の体験とは何か常に追及することが大切です。 デザイナーとしてクオリティを高める努力は大切ですが、良いか悪いかのジャッジはユーザーに委ねるものだと思います。 UI/UXには美的センスよりも気遣いできる人間力が大切 市川：デザインに美的センスは必要ですか？ 井上：必ずしも必要ではないと思います。 デザインには大きく2つの意味があります。1つはグラフィカルなデザイン。もう１つは設計という意味のデザイン。前者は美的センスが必要だと思いますが、後者においては、ユーザーに共感できる能力や、コミュニケーション、ヒアリング能力、論理的思考能力が重要です。 北林：アートとデザインは似ているようで違います。アートは自己表現であり、デザインは人のため。デザインはセンスというか、「気遣い」ができる人が向いていると思います。「私はこの箇所にこのボタンを置きたいんだ！」と突っ走るタイプだと、UIデザインは向かないかもしれません。 UI/UXデザインができる環境に身を置いて経験を積もう 市川：デザイナーではない方がUI/UXデザインを実務に落としこむためには、どんなことから始めてみればいいですか？ 井上：1つは社内で「やってみたいです」とアピールしてみることですかね。もちろん、任せてもらうだけの信用を積み重ねていく必要があると思いますが。 市川：そういう点でも、コミュニケーション力を高める必要がありそうですね。 北林：あとはいろいろな情報が入ってくる環境に身を置くのが良いです。デザイナーとして活躍している人と仲良くなれれば、仕事の仕方や勉強方法などアドバイスがもらえるかもしれません。まずは、部署内で一番「資料がイケてる人」などを目指すのもいいですね。 現役UI/UXデザイナーの将来の野望 市川：最後に、お二人が今後挑戦したいことはなんですか？ 北林：私はもっともっと色々なデザインの仕事がしてみたいですね。今とは全然違う条件やプロダクトのデザインをするのは楽しいし、冒険みたいにワクワクします。 仕事もプライベートもバリバリ突っ走って、もっとたくさんの人を幸せにできるような人間になるよう挑戦します。 井上：私はずっと先まで使われ続けるようなプロダクトを作りたいです。 その他にもユーザー視点になりきれていないWEBサイトの改修を自ら手がけ、世の中にあふれる「分かりづらい」をなくす貢献をしてみたいです。 北林：それいいですね。分かりやすい世の中になると良いですね。 市川：本日はありがとうございました！ 本記事で紹介したヒートマップは無料でユーザーの行動が分析できるので、UI/UXの実践練習で使ってみてはいかがでしょうか。 無料のヒートマップを使う 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
