UI/UXデザイナーに読んでほしい5つのデザインの心得
TechTrain代表の小澤です。本気でキャリアを伸ばすエンジニア塾「TechTrain」というサービスを作っています。
サービス開始から4年。おかげさまで受講者数は7,000名を超え、個人の方だけでなく、企業のリスキリングや学校の学生のスキルアップ・キャリアアップ支援までを網羅的に実現できるサービスに成長してきました。
先日、資金調達も行い、累計調達金額は5億円を超えました。
さらに事業を伸ばすべく、UI /UXデザイナーを2023年内に1名正社員でお迎えしたいと考えています。
どういう人を仲間に迎えるのがいいのかを探っていた時に、社内ドキュメントの中に当社デザイナーが普段考えているアレコレが書かれているのを見つけました。彼の頭の中を凝縮し、言語化された5つの心得を紹介します。
なんか面白いことしたいなー。転職もいいところあればなー、というUI /UXデザイナーの方、ぜひご覧ください🙇
🔥TechTrainデザイナーの5つの心得🔥
TechTrainのデザイナーDaichiはとにかく勤勉で色んなところから情報収集しています。彼が大切にしている心得が5つあるようです。
1.「それがどうあるべきか」が、常にデザインの出発点。
これから先も人に愛される製品を作ること。差別化はその結果である。
違うものを作るのは簡単だが、良いものを作るのが難しい。
物のデザインするんじゃなく、ユーザが対象をどう受け止めるかをデザインする。
その存在、機能、可能性が生み出す意味をデザインする。
ユーザーがそれをどう感じるか、それは心のどの部分を占めるべきか。といった答えのない問いを考える。
目に見えない部分に異常なまでに気を配ることが決め手になる。
イノベーションはビックアイディアとあまり関係ない。
たいていは一連のちょっとした発想を新しくより良い手法でまとめる事から起きる。
デザインの初めの段階、目標を定めようとする段階では製品のストーリーについて語り合う。
製品をどう見るか、その製品に何を感じるか、ものではなく感情について話し合う。
自分達が作っているものを説明する時、良い面ばかりを上げ連ねている場合は危険の兆候。
自分が何かを強く言い募っている時、自分を納得させようとしている時は大抵危険。
2.“Less-is-More”-デザインはシンプルな方が良い。
1. コミュニケーション性の向上
人間の記憶には表示要素の20%程しか残らない。
無駄な要素を極力排除した方が情報伝達がしやすい。
2. 時間とお金の節約につながる
最も重要なのは、手がけた仕事に対するビジネス的結果である。
コストの削減もビジネスにとっては非常に重要なファクター。
シンプルなUIはユーザーの時間を節約する事にも繋がる。選択肢が少ない方が迷わない。
3. 普遍的な存在を生み出す
基本に忠実に無駄を極力排除し洗練されたデザインは、何年経ってもその魅力が色あせない
普遍的=タイムレスな存在であり続けることが出来る。
4. 壊れにくい
構成する要素が少なければ、壊れる可能性のある要素も減ってくる。
5. ヒット製品を生み出しやすい
ヒット商品に共通するポイントもそのシンプルさである。
機能を極限まで削り、制限の中で生み出される事が多い。
一目でそのプロダクトの価値が伝わる。
ユーザーを迷わせることはまずない。
ユーザビリティもシンプルな方が絶対に高い。
“Everything you need, Nothing you don’t (必要なものだけ)”
これを実現するには極限までシンプルに削り込む。
シンプルにすることでヒットしたプロダクト例:
iPhone – 物理ボタンを極力排除
MacBook Air – DVDドライブ排除
Twitter – 140文字まで
Facebook – 実名プロフィール
Instagram – 画像のみ
Vine – 6秒までの動画
Snapchat – 消える
Medium – 記事を読むことだけにフォーカス
Kindle – 本を読むだけのデバイス
・ シンプルなデザインのための6つのポイント
1. Less, but Better – 犠牲にするのでは無く無駄を削る
最も重要ではない箇所は削ること。
プロダクトやメッセージが持つべき最重要項目を定め、それ以外の副次的な要素は極限まで取り除く。
要素を取り除くだけではなく、より良くすることにフォーカスする。
そして、犠牲にするのではなく、無駄を削ることがポイント。
2. Neutral – デザインは空気のような存在
デザインはあくまで脇役。従って、デザイン要素自体が目立つのは良くない。
UIやレイアウトなどもユーザーに意識させない透明な存在であることがベスト。
3. Meaning – 採用した全ての要素に意味がある
存在価値を説明できない要素は必要のない要素である。
逆に、デザインと採用したからには全てのエレメントの存在価値をデザイナーが説明出来なければならない。
”なんとなく”とか”かっこいいと思ったから”の要素は採用しない。
4. Don’t follow trends -トレンドを追わない
流行のデザイントレンドを追いかけているということは、いつかは時代遅れになる可能性がある。
それは、シンプルなデザインが持つ大きな利点の一つである”Timeless”な要素が生み出されなくなる。
5. Less of Design – “デザイン性”を下げる
デザインは装飾ではなく、機能の実現である
”Form follows function (形式は機能に従う)”
デザインの役割はあくまで機能性の追求
”デザインを見せる” 為のデザインには装飾的な無駄が多い。
6. Take Your Time – 時間をかける
シンプルにデザインされたものは、複雑なデザインよりも何倍もの時間がかかる。
****シンプルなプロダクトやUIをつくり出すためには、プランの段階で多大なる時間を掛けその内容を研ぎすます必要がある。
まとめ: デザインもビジネスも究極は“シンプル”
“Perfection is achieved when there is nothing to take away” – 完璧とはこれ以上削れない状態の事である
・なぜシンプルにデザインするのが難しいのか
まずフォーカスを定めなければならない
プロダクト、メッセージ、オーディエンスのそれぞれを極限まで絞り込み、無駄を削る必要がある。
シンプルであればある程全てのディテールが重要になってくるので、ごまかしがきかなくなる。
シンプルで優れたデザインが偶然に生み出されることは100%ない。
シンプルでいて見た目も美しいというのは難易度が高いこと。
予算を抑えるためにデザイナーに “シンプルで良いんで” のリクエストは絶対的なNGワード
3.優れたユーザビリティを実現する25のUXデザイン基本概念
1. ユーザビリティとは..
ごく一般的になユーザーがストレスを感じる事無く、ソフトやデバイスの意図した利用方法を理解し、使ってもらえる事。
2. もっとも重要なのは分かりやすさ
どのようなインターフェイスを提供する際にも、ユーザーに何をどのような使い方で提供している事が一目で理解してもらえる事が重要。そこには、多少の”遊びの要素”をいれる場合もあるが、なるべくシンプルで、ユーザーを混乱させない分かりやすさが需要。
3. 最終目標は“ユーザーゴール + ビジネスゴールの達成”
優れたユーザビリティを提供する事での最終目標は、ユーザーを正しい方向に導くユーザーゴールと，提供側のビジネス目的を満たす、ビジネスゴールの達成である。
4. User Interface = Business + Engineering + Design
優れたユーザーインターフェイス(UI)は、ビジネスチーム、エンジニアリングチーム、デザインチームが提供/要求するそれぞれの要素がバランス良く絡み合い、美しく、機能的でありながら、確実に結果を生み出す事が出来る要素を兼ね備えている。
5. 究極のユーザーインターフェイスはその存在を感じさせない
最も優れたUIは、あまりにナチュラルでその存在すらユーザーが気づかない。まるで全てが直感的で、思うがままに操作できる感覚を与える。UIを構成するヴィジュアル要素もその”透明感”を達成させる為の道具である。
6. インターフェイスは使ってもらう事にこそ価値がある
多くの平凡なデザイナーが、より見た目が美しく、かっこよいインターフェイスをデザインしている中で、一流デザイナーは、ユーザーが利用してこそインターフェイスの存在価値が生まれる事を理解している。UIデザイナーは自身のエゴから解き放たれる必要がある。
7. 見た目のデザインはその機能に基づく
インターフェイスデザインの基本は、その機能が中心となる。そして、その見た目もあくまでその機能を達成させる為の構成要素の一つである。ユーザーが一目で、どこをどう触るとどういう動きをするのかが理解出来るのが、良い見た目となる。例えば、ボタンはちゃんとボタンとして見える必要がある。英語で言う所の”Form follows functions.”
8. 同じ動きをするものは、統一したデザイン概念を適用する
インターフェイス上でのビジュアル要素は、その動きによってカテゴリー分けし、同じような動きや結果を提供する要素は、その色、形、配置、大きさ等、デザインにおける統一した基準を適用する。
9. ユーザーの集中力を乱さない
騒音やノイズが多い日常生活の中で、ユーザーからの注目を獲得し、それを持続させる事に集中する事。インターフェイス上でのノイズを極力減らし、ユーザーのアクションの邪魔をしない。
10. 全てを常にユーザーのコントロール下に
人間は周りの環境を自身がコントロール出来ていると感じられる状況が最も心地が良い。ユーザーを導きたいときでも、無理な導線から強制するのではなく、あくまで”ナチュラルに”、ユーザー自身がコントロールしていると思える状況をキープする。
11. 最も重要な達成目標は、1スクリーンにつき1つだけ
提供側がユーザーに一番求める最終アクションは1画面につき一つだけに絞る。これが結構出来ない無い場合が多い。分かりにくいインターフェイスは、1画面で複数の最重要目的が存在し、のユーザーアクション対しての優先順位付けがされていない。
12. 副次的な目標は、あくまで副次的な存在に
最も重要なユーザーアクションを1画面につき、1つだけ設定したら、副次的なアクション目標を設定する。その場合、複数のアクション設定をしても良いが、あくまで副次的な導線にしておく事。例えばブログでコンテンツを読んでもらう事を最重要アクションに設定したならば、FacebookやTwitterでシェアしてもらうアクションは副次的な要素としてデザインをする。
13. ナチュラルに次のアクションに導く
ユーザーが一つのアクションに費やす時間は短い。
従って、次のアクションへの導線を極自然と提供してあげる事が重要。
まるで会話をしている時に、次の話題をふってあげる様に、優しくユーザーをリードしてあげる。
14. ビジュアルヒエラルキーで見えないルールを造り出す
インターフェイスの構成要素に優先順位を付け，視覚的階層ルール(ビジュアルヒエラルキー)を決める。
例えば、最も重要な文字は、大きく太文字にする。ここで気をつけなければいけないのは、全てが重要だと考え、全てを太文字にしてしまった場合は、全てが重要ではなくなる。
優れた視覚的階層は、UIに於いて、ユーザーに無意識に目に見えないルールを提供する。
15. 色はあくまで二次的要素
インターフェイスをデザインする際に、色に頼ろうとするケースは意外と多い。
自然界での見える色はその光のあたり方の加減で刻一刻と変化し、絶対的な視覚的役割を果たさない様に、UIに於けるカラーの役割は、あくまで副次的なものと捉える必要がある。
モノクロで使いにくいインターフェイスは、どんなに色に頼っても、使いにくい。
16. 選択肢は少ないほうが良い
一場面にて、ユーザーに与える選択肢は極力少ない方が良い。
ヒトは選択肢が多くなってしまうと、迷い、混乱し、不安になり、ストレスがたまってしまう。
同じく、一つの画面で表示する要素もなるべく少なく、出来れば小出しにするのが良い。
17. ヘルプ機能は極力無くす
優れたユーザビリティーが達成出来れば、ヘルプは必要ない。
使い易さとヘルプの量は反比例する。
ヘルプ機能を付ける場合も、なるべくインラインで提供するのをおススメする。
18. 第一印象が一番重要
ユーザーが全く何のインタラクションを起こす前の状態に、どのような印象を与え、どんなものであるかを理解してもらう事がとても重要。
優れたデザインのインターフェイスは、この、”Zero Status”の状態で、ユーザーにクリアにその目的を伝える。
19. ユーザーに考えさせない
UIデザインの基本は、”Don’t Make Me Think”
もしユーザーが利用中に少しでもその使い方を考え始めたら、それぞれの構成要素の存在価値が分かりにくく、インターフェイスのクオリティが低いという事である。
20. ユーザーの時間節約に注力する
ユーザーが最も興味があるのは、最小限の時間で目的を達成する事。
1つの目的を達成する為に費やす時間は少なければ、少ない程良い。
もう一つの基本は、”Don’t Waste My Time”
21. ブラウザーの戻るボタンは頻繁に利用される
Webサイトの場合、どんなインターフェイスをデザインしても、多くのユーザーはブラウザーの戻るボタン(Back Button)を頻繁にクリックすることを理解し、設計する事。
戻るボタンはブラウザー上で最もクリックされているボタンである。
22. 使い方を理解してもらえるまでが勝負
ユーザーが求める結果を得られる為に行わなければならないアクションに気づいてもらい、使ってもらえた時点で、勝負が決まる。
ヒトは一度使い方を学ぶと、次からは迷わずに使えるようになる。
23. 検索ボックスはやっぱり重要
想像するより実に多くのユーザーがページ上の検索ボックスを多用している。
どんなに優れた導線を引いても、真っ先に検索ボックスを探すユーザーが後を絶たない。
24. エラーメッセージは読んでくれない
実に驚く程に、ユーザーはエラーメッセージを読まない。
エラーが出た事は理解するが、その内容に興味は無い。
さっさとエラーボックスを閉じて、目標を達成したい。
25. こまったらいつでも実家に戻っておいで
ページ上のホームボタンは、ユーザーに安心感を与える。
どこに迷っても、いざとなったら元に戻れる導線を確保しておく事。
4.「たす、ひく、みがく」で整理する
不要な要素を一つ一つ検証して「引き算」志向で要素を絞り込んでいく
アイデアの発散と収束、細かい調整を繰り返すことで残った要素を「磨き込む」
最後の最後で、デザインに驚きや魅力を最小限の処理で「足す」
目指すものが決まったなら
関係ないものは大胆に引き算をしていく
大まかな輪郭が作れたら、少しだけずれているものは修正して磨き込みを進め、
それでも足りない部分があれば足していく。
これを執念深くやっていくことで、目指す方向性とその結果としてのイメージが合致した強いブランドに育っていく。
5.センスはジャッジの連続から生まれる
■ 膨大の知識から、各事象に対し如何に最善のものを選び取り実行するか。
数ある選択肢の中から、最適なものを選び取る力がセンス
目の前の物事に対してYES/NOとジャッジが出来る知識量と判断力のこと。
センスを鍛えるために日頃から沢山のものを見て、ジャッジをする訓練をする。
※センスに絶対的な正解はない。方向性はデザイナーによって千差万別でありそれぞれの美意識の問題。センスがないと感じるのは、頭の中で自分の好みが整理できていないだけ。肝心なのは、好き嫌いの解像度を上げること。
・センスを鍛える付箋トレーニング
赤・青・黄の三色の付箋を準備。
デザインを用意。
自分が良いと思うものに青、ダメだと思うものに赤、判断できないものに黄色をつける。
これをやると、ぼんやりとしか意識できなかった自分の好き嫌いが、三色の付箋で可視化される。それを眺めつつ、自分の好みについて言語化してみる。→黄色が多い人はセンスがない。判断できない人。
自分と違う目線から、自分の好みを批評してもらうことでジャッジの精度を一気に上げることができる。黄色をいかに青に持っていくか、一歩踏み込んで考えていく。
4.「たす、ひく、みがく」で整理する
不要な要素を一つ一つ検証して「引き算」志向で要素を絞り込んでいく
アイデアの発散と収束、細かい調整を繰り返すことで残った要素を「磨き込む」
最後の最後で、デザインに驚きや魅力を最小限の処理で「足す」
目指すものが決まったなら関係ないものは大胆に引き算をしていく
大まかな輪郭が作れたら、少しだけずれているものは修正して磨き込みを進め、それでも足りない部分があれば足していく。これを執念深くやっていくことで、目指す方向性とその結果としてのイメージが合致した強いブランドに育っていく。
5.センスはジャッジの連続から生まれる
・膨大の知識から、各事象に対し如何に最善のものを選び取り実行するか。
数ある選択肢の中から、最適なものを選び取る力がセンス
目の前の物事に対してYES/NOとジャッジが出来る知識量と判断力のこと。
センスを鍛えるために日頃から沢山のものを見て、ジャッジをする訓練をする。
これら5つの心得以外にもデザイナーとして持つべきマインドも全て言語化されているのを見つけました。詳細はもしご興味あれば当社デザイナーより直接お話しいたします。
🔥TechTrainの明るい未来を一緒に描きませんか？🔥
TechTrainでは（できれば）2023年内に1名UI /UXデザイナーを仲間に向かい入れたいと考えています。
キーワードは「スピード感がえげつないデザイナー」
こんなデザイナーの方を探しています。「お、これは自分のことではないか…!?」と少しでも思った方はぜひ1度お話しさせてください。実際のサービスのデザインやFigmaをお見せしながらTechTrainの過去・現在・未来についてお話しさせていただきます🙇
求人詳細
＜ツール＞
Slackが使える
Figmaが使える
Google Workspaceが使える
＜経験（Must）＞
プロダクトのUIを作った経験がある
PMやエンジニア連携を取りながらのデザイン経験がある
＜経験（Better）＞
SaaSプロダクトのUIを作った経験がある
新規デザインだけでなく、改善を回した業務経験がある
企画やユーザーヒアリングの経験がある
＜マインド＞
デザインを2割当てできる（一人で抱え込まず、小さく早く多くサイクルを回せる）
事業スピードに合わせて、未完成でも走り出せる。
プロダクトの課題を見つけ、改善の提案ができる
関係者にヒアリングをして課題を見つけることができる
応募はこちら
まずは話を聞いてみたい
デザインについて熱く語りたい
転職を考えている
もっと裁量の大きい会社でデザイナーとして働きたい
等、少しでも感じていただいた方、ぜひ下記よりご連絡ください！
-Wantedly
直接ご応募ください🙇
https://www.wantedly.com/projects/1465293
-email
お名前、連絡先、制作経験がわかるもの（ResumeやPortfolio）を添えてお送りください🙇
参考文献