
【初心者向け】デザインは「感覚」ではなく「理論」。今日からできる!UIデザイナーになるための作法
先日、キャリア形成プラットフォーム「Graspy」主催で行われたイベント「UIのじかん」に、クリエイティブ室マネジャー、神田智哉が登壇しました。
リクルートグループのメディアを中心に、受託開発で多数のwebデザインを手がけてきた神田。
現在、クリエイティブ室マネジャーとして約30名ほどのマネジメントと品質管理を担当しています。
そんな神田が、主に駆け出しのUIデザイナーへ向けて、“UIデザイナーになるために必要なお作法”についてわかりやすく紹介しました。
ビギナーからエキスパートへ、ステップアップしていきたい人へ向けた現場で役立つノウハウを、組織の中で働くデザイナーだからこその視点で話しました。
今回は、その登壇内容の一部をご紹介します!駆け出しのUIデザイナーさんはもちろん、ニジボックスがちょっぴり気になる人、日頃UIデザイナーと関わるお仕事をされている人も、ぜひごらんください。
UIデザイナーに必要なもの〜サービスの屋台骨を支える、UIデザイナーの見えないお作法〜

神田 智哉(かんだ ともや) 株式会社ニジボックス クリエイティブ室 マネジャー
株式会社ニジボックスに入社後、イラストレーターからWEBデザイナーに転身。
リクルートグループのメディア(SUUMO/ホットペッパーグルメ等)を中心に、多数のWEBデザイン案件に携わる。
現在はクリエイティブ室マネジャーとしてメンバーマネジメントと品質管理を担当。
自身もデザイナーとして、デザインを通した課題解決型のクリエイティブ提供と制作に日々従事している。
トップバッターとして登壇を行ったのは、ニジボックスWEBデザイナーの神田です。
2012年にニジボックスにイラストレーターとして入社。
その後、WEBデザイナーへと転身し、現在はメンバーのマネジメントと品質管理を担当しています。
そんな神田が、組織で働くインハウスのデザイナーならではの話をしました。
すぐに始められる!UIデザイナーになるための方法
まずは、駆け出しのデザイナーの方がUIデザイナーになるためのステップをご紹介します。
ツールを使いこなすことはもちろん、デザイン思考やコミュニケーション力といったソフトスキルや、レイアウトやタイポグラフィといったハードスキル、知識やトレンド情報など、UIデザイナーに求められるものはたくさんありますが、みなさんもこれらのことは書籍やメディアを通して学んでいると思います。
なので今回は、UIデザイナーになるために今日からでもすぐに始められる、UIデザイナーが現場で習慣にしているお作法をご紹介します。
1.制作にかかる前に、類似デザインをとことん調べよう
まずは、類似サービスをとことん調べて、その内容を残すことが大切です。
自分が担当するプロダクトの類似サービスにはどんなカラーが使われているのか、どのようなデザインが施されているのか、傾向を調べて記録に残します。
直感的に「この色がいい!」とカラーを決めることはなく、必ず調査を踏まえた上で制作を行います。
弊社のデザイナーはメルマガのバナー作成であっても、プロダクトの一部を改修する場合でも、案件の大小に関係なくまず調べることを習慣としています。
2.デザインは感覚ではなく理論。全てを説明できるようにしよう
なぜ、デザイン制作を行う前に類似サービスを調べるのか。
それは、デザインというものは、感覚ではなく理論だからです。
調査によって調べた内容をもとに、デザインの選択肢を“見える化”することを大切にしています。
まずは、自分のデザインの立ち位置を明確に。
UIデザインは習慣化されたものが使いやすいため、あるものを組み合わせることが基本です。
デバイスに応じたガイドラインやポジショニングマップなどフレームワークを利用して、自分のデザインの立ち位置を明確にすることが必要です。
そうすることで、デザイナー以外の人と共通認識を持つことができます。
制作は一人ではなく、チームで行うもの。
営業、プロデューサー、エンジニアなどさまざまな職業の人とコミュニケーションをとりながら進めていく手法が求められます。
「自分はこう思う…」という話し方ではなく、「ユーザーにとっては…」という風に、主観的ではなく客観的に話すことを心がけましょう。
組織の中で働くデザイナーのキャリアプラン
1.ジュニアデザイナー(駆け出しレベル)
デザイナーとして一人前になるまでの工程を紹介。
最初は、ビジュアルデザインの一部からスタートする場合が多いです。
例えばUIのパーツの場合、ボタンを一つ作るなど、とにかく引き出しを増やしていく時を経て、サービスのデザイン部分を徐々に担うようになっていきます。
↓
2.UIデザイナー
UIデザイナーとなって経験を積むほどできることが増えていきます。
今日お話ししたビジュアルデザインの表層以外にも、情報設計の部分や、インタラクションの設計やプロトタイピングなど、できることが増えていき、案件の幅も広がっていきます。
定量調査などに染み出し、UXリサーチャーになる人や企画領域に染み出す人も。
↓
3.リードデザイナー
専門分野で実績を積む長い期間を経て、最後はリードデザイナーに。
それまでの自身の経験を活かして管理職として、組織を束ねる人もいます。
一つのアプリをまるまる一人で作れるようになったり、事業理解を深めて他の領域の仕事までやるようになったり、エンジニアに染み出す人も。
そして、組織を飛び出してフリーランスとして独立し、ゆくゆくは今日の登壇者である長谷川さんや山本さんのように、社会へ向けて発信していく人もいます。
UIデザイナーになるために大切なものとは?
デザイナーにしか通じない専門用語を使ったり、制作チームの内部の人だけがいいと思う制作物を作ったりするデザイナーは真のデザイナーとは言えないのかもしれません。
いかにデザイナー以外の人に伝えることができるのか。
芸術家のように1からものをつくり出すのではなく、調査・分析を行い、既存の事象を組み合わせていかに新しい視点に基づいたものをつくり出すかが大切です。
今のデザイナーは物を組み合わせてデザインする。物の方が先に進んでいる
これは、大学院時代にお世話になった教授が発した何気ない言葉ですが、とても印象に残っている言葉です。
UIデザイナーは、1から何かを開発するということはなく、世の中にあるものを組み合わせ、最適化して、いかにわかりやすく世の中の人に伝えるのかが仕事です。
初心者のためのモバイルアプリ UIデザインはじめの一歩 山本麻美

山本 麻美(やまもと・あさみ)
インディーズ音楽プラットフォームを作りたい一心でWEBを独学。
そのまま企業からWEB制作の仕事を請けるようになり1997年フリーランスのWEBデザイナーに。
2010年何気なく参加した日本Androidの会で周囲からそそのかされてAndroid、iOSのUIデザインを始める。
「Wishscope(iOS)」「トレタ(iOS)」「ビズリーチ(iOS/Android)」「レシピブログ(iOS/Android)」等のデザインをしているうちに気づいたらモバイルアプリのUIに特化して仕事をするようになる。
2017年後半からIoTの実験プロジェクトに参加。
ロクナナワークショップ、東洋美術学校、企業研修などの講師業も多い。
UIという領域だけでなく、幅広い領域をこなしていきたいとの思いからUI/UX/Workflowデザイナーと名乗るのは、1997年からフリーランスとして活躍する山本麻美さん。
現在はモバイルアプリの制作を主に行っており、今回もモバイルアプリのデザイン制作に絞ってお話をしてくれました。
そもそもUIデザインとは何なのか
UIデザインとは、モバイルアプリやWEBサイトの画面デザインに限定するのではなく、User Interfaceのこと。
人がモバイルアプリやWEBサイトを使う時に、ユーザーから受けたアクション(司令)を受けてコンピューターが処理をします。
その時に、ユーザーとコンピュータとの橋渡しをしてくれるのがUIの役割で、コンピューターと人のやり取りを視覚的に翻訳してくれるのが、GUI(Graphical User Interface)です。
最近注目されているのは、VUI(Voice User Interface)。
Google HomeやAmazon echoなど、声によってコンピューターとやり取りをするもの。実は、UIの中にはここまで含まれるんです。
普段、クライアントから「モバイルアプリのデザインがうまくいかない」という相談を受けることがよくあります。
よく聞いてみると、グラフィックデザイナーやWEBサイトのデザインを行ってきたデザイナーが制作を行っていることがよくあり、彼らは見るためのデザインは得意でも、使うためのデザイン、つまり操作性を考えるところまでいけていないことが原因のことが。
操作性まで考えるには、情報設計や人間工学、認知心理学、端末やOSの違いまで知っていることが必要となります。
WEBサイトとモバイルアプリ、iOSとAndroidの違い
iOSとAndroidにはさまざまな違いがあり、iOSのアプリを制作する場合には、まずは「Human Interface Guidelines」というものを読むことを、Androidのアプリを制作する場合には、「Material Design」を読むことをおすすめします。
ただし、「Human Interface Guidelines」はApple製デバイス向けのガイドラインであることに対して、
「Material Design」はクロスプラットフォームを目指しているガイドラインであることだけ注意。
次に、Webとモバイルアプリの部品の名前や役割は具体的にはどんなところが違うのか、一部を例にしてご紹介します。
ニジボックスのサービスについて詳しく知りたい方はこちら!
UI/WEBデザインについて