Figma を活用した UI デザイン入門から実践まで A to Z

初心者でも、非専攻者でも着実に
UIデザイン能力を身につけることができます。

こんにちは。
ニューヨークでプロダクトデザイナーとして
活動しているエリックです。👋

私はグローバルテック企業であるThe Knot Worldwide (TKWW) のニューヨークオフィスでプロダクトデザイナーとして働いています。私がプロダクトデザイナーとして行っている仕事についてお話しすると、まずユーザーについて学び、彼らのフィードバックを受けるユーザーリサーチ業務から、ユーザーに対する理解に基づいて作成するワイヤーフレーム、情報構造設計などのUXデザイン、デザインシステムを制作し、実際にユーザーが使用する最終的なUIデザイン成果物を作るUIデザインまで、すべてを担当しています。現在はこのようにUXとUI、つまりUXプロセスに該当するほぼすべての部分にオーナーシップを持っていますが、最初からそうだったわけではありません。

"企画だけをやっていた私が3ヶ月で
UIデザイン能力を身につけた話"

私はニューヨークに来る前に、ソウルで数年間企画者として働いていました。当時していた仕事は主にパワーポイントでワイヤーフレーム、つまりUI企画書を作る仕事とユーザー調査をする仕事でした。パワーポイントでワイヤーフレームを作る仕事は視覚的な完成度を求められなかったので、私が始めるにあたって困難はありませんでした。しかし、UIデザインは私にできる分野ではないと思っていました。UIデザイナーと協業することはありましたが、私がUIデザインを直接することはありませんでした。

^{👉 ソウルで企画の仕事をしていた頃の様子と企画書の一部}

UIデザインは生まれつき視覚的なセンスやデザイン能力に優れた人だけができる仕事だと思っていました。私にとってはこの能力を身につけるための壁があまりにも高く見えたんです。ところが、私はキャリアをアップグレードするために、ユーザーリサーチと企画、UIデザインをすべて担当するプロダクトデザイナーになるべきだと考えるようになりました。そのためにはUIデザイン能力を身につける必要があったのですが、これが私にとって最も大きな難関でした。いざ始めようと思っても、どこからどのように学べばいいのかも分からなかったんです。それでも目標ができたので方法を探し始めたのですが、方法を探している最中に、ありがたいことに良いメンターたちに出会い、良い方法を知ることができました。

そして、このように方法を知ることで、「UIデザイン能力を身につけることは私にとって不可能なことではない」という自信を持つようになりました。そうしてUIデザインの勉強を始めてから3ヶ月で最初のUIデザインプロジェクトを完了し、これが私がプロダクトデザイナーとして初めての職場を得る上で重要な役割を果たしました。

^{👉 遅咲きで学んで進めたUIプロジェクト}

私はこの学習と訓練の過程を通じて、方法さえよく知っていれば、視覚的な感覚が特別でなかったり、デザインを専攻していない人でも、UIデザイン能力を十分に身につけることができるということを知りました。

私はこの授業を通して、UIデザイン能力を短時間で身につけるために乗り越えなければならなかった山々と、それを克服できた秘訣をお教えします。そして私と似たような困難を抱えていらっしゃる方々が、Figmaツールを活用してUIデザイン能力を身につけられるようにご案内いたします。

1. この講義を通して何を得ることができるでしょうか？🙌

① UIデザインプロセスの理解、そして自分のものにする

一つ質問させていただきます。 🙋 今ご覧になっているものは、非常に有名なアプリの代表的な画面なのですが、とても素敵にデザインされた画面です。この画面が出来上がるまで、デザイナーはどのような過程を経たのでしょうか？FigmaやSketchアプリを開いて、一気に描き上げたのでしょうか？

^{画像出典：Spotify、Airbnb}

これについて私の考えを申し上げますと、ほとんどのUX/UIデザインプロジェクトは、このような画面が出来上がるまでに多くのプロセスと検討を重ね、ユーザーにより良いサービスを提供するために継続的にアップデートされるということです。UIデザインはUX/UIデザインという大きな枠組みの中で、問題に対するソリューションを見つけていくプロセスだと言えるでしょう。この授業では、このUIデザインのために踏むべきプロセスと活動についてお教えします。

これらの過程を踏むのには理由があります。UIデザインを上手に行うためには、単純にかっこよくて鮮やかな最終UIデザイン画面をすぐに描くのではなく、それぞれの段階を通してチームメンバーやクライアントと効果的にコミュニケーションを取り、最終的にユーザーに最高の体験を提供できなければなりません。皆さんは各段階をなぜ踏むのか、その理由を理解し、自分で直接一段階一段階を踏めるようになる必要があります。私はこの講義を通して、皆さんがFigmaを活用して各段階を踏める能力を身につけ、このプロセスが皆さんのものになるよう、つまりUIデザインの専門性を身につけられるよう授業を準備しました。

^{👉 私が仕事をする際に踏むUIデザインプロセス}

② デザイン実習を通じてUIデザイン実戦能力を身につける

先ほど、UIデザインを上手に行うためにはUIデザインプロセスを踏むと言いましたね。授業を通じてこのプロセスが皆さんのものになるようにすることが、この授業の目的です。そのために何より重要なのは、実習を通じてこの授業の実務各チャプターと実戦例題を真似しながら、実際にUIデザインの段階を踏んでみることです。それでは各段階別に作ることになる成果物はどのようなものなのか、例示を通じてお話しします。

▪️ ハンドスケッチとワイヤーフレームを作成し活用する能力

ハンドスケッチは、与えられた問題を解決できるアイデアを考えて、ラフに描いてみることです。スケッチの利点は、短時間でアイデアを簡単に修正できることです。後の段階でアイデアが発展するほど視覚的完成度が上がり、修正にかかる時間がより多くなるからです。

ワイヤーフレーム（Wireframe）は、スケッチを通じて生まれたアイデアをより高度化し、画面と各画面に対する機能の定義を行います。そして画面間の流れを繋げる役割をします。ワイヤーフレームはUIデザイン段階に進むための骨組みとも言えるでしょう。ワイヤーフレームは、UI企画者とUIデザイナーの業務が完全に分業形態になっている場合、UI企画者が担当することもあります。しかし、プロダクトデザイナーやUX/UIデザイナーの場合、ワイヤーフレームも一緒に作れるようになる必要があります。

^{👉 足で描いたような😊😊私が描いたスケッチです。しかし実務や現場ではこのようなスケッチは非常に強力になり得ます！}

^{👉 画面、画面フロー図などが定義されたワイヤーフレーム}

▪️ UIデザインとプロトタイピングを作成し活用する能力

ハイファイプロトタイプ（Hi-Fi Prototype）とも呼ばれるUIデザインは、先ほど出てきたワイヤーフレームを基に視覚的完成度の高い画面を描いてくれます。この段階では、フォントやカラー、アイコンなど実際のユーザーが使用するレベルのビジュアルが出てくるのですが、この段階でも徹底的にユーザーに最も適した体験が何かを考えることが重要です。この講義では、ユーザーを中心に置くために知っておくべきデザイン原理を一緒に扱います。理論の上に実戦能力を積み上げれば、基礎がしっかりしたデザイナーになれますよ！👍

プロトタイピングは、このように作られた各画面を互いに接続することで、ユーザーの立場からはまるで動作しているかのように作ってくれます。

^{👉 視覚的完成度を高める段階、UIデザイン}

^{👉 プロトタイピングを通じてコーディングなしで動作する画面}

▪️ デザインシステム、そしてハンドオフを作る能力

最終的に作られたUIデザインを基にスタイルガイド、コンポーネントなどデザインシステムをどのように作ることができるかお教えします。デザインシステムがあれば、ユーザーには一貫したユーザーエクスペリエンス、インターフェースを提供し、デザイナーと開発者は効率的にデザインと開発を行うことができ、時間を節約できるため、実務で非常に強力になります。💪

最後に、UIデザインの最終段階と言えるハンドオフ（Hand-Off、HO）は、実際の開発ができるように詳細な要素、例えばテキストやボタンのサイズが何ピクセルなのかといったことを具体的に定義し、開発者に引き渡す段階です。

^{👉 デザインシステムの重要な要素であるコンポーネント}

^{👉 開発のために制作するデザイン成果物、ハンドオフ}

③ UIデザインのための꿀팁大放出！🍯

デザインを学ぶためのレファレンス資料など、入門される方がより早く簡単に望む能力を身につけられるよう、たくさんの裏技をお教えします。私が数年間UXおよびUIデザインの仕事をしながら得た知識と情報を共有いたします。そして私にUIデザインを学んだ方々がよく質問される内容についても扱います。もっと気になる部分があれば質問欄にコメントを残してください^^

④ キャリア設計、そしてロードマップ 🚀

授業を受けた後、UIデザイン能力を身につけてからUX/UIデザイナーやプロダクトデザイナーになるなど、目標とするキャリアを実現するために次のステップで何をすべきか具体的な計画を立てることができます。私は皆さんが目標を達成するためにどのような活動をするのが良いか、おすすめとコツをお伝えします。

2. 誰がこの授業を受けるべきか？🧑🏻👩🏻

✔️ プロダクトデザイン、UX/UIデザイン初心者

第一に、プロダクトデザイナー、UX/UIデザイナー、UIデザイナーを目指す入門者の方々です。もちろんデザイン非専攻者も含まれます。このキャリア目標を達成するためには、UIデザインができる能力を身につけることが必須なのですが、この授業をしっかりと受講していただければ、基礎的な知識と理論、そして実戦能力まで兼ね備えて、望む目標を早期に達成できるでしょう。

✔️ UX/UIデザイナーになりたいけれど、視覚的な能力が不足していると思っている方

先ほど私は視覚的な能力が不足していると感じたと申し上げましたが、これを克服した秘訣をお教えして、皆さんもUIデザイン能力を身につけられるようにいたします。デザイナーになるためには、UIデザインプロセスをよく理解し、各段階での成果物をどのように作るか、ツールはどのように使うべきかを知る必要があります。この授業を受講されると、この目的を達成できるでしょう。

✔️ Figmaをマスターしたい方

この講義では、Figmaの非常に基礎的な機能である図形、テキストを作ることから、高度な機能であるUIデザイン、ハンドオフなどを作ることまで、着実にステップを踏んで進んでいきます。そうして入門者の方々がFigmaをマスターし、最終的にはUIデザインの専門能力を身につけられるよう授業を設計しました。特に私はこの講義を通じて多くの実践例を提供しようと思いました。この部分を特により熱心に真似してみていただければ、とても役に立つでしょう。

✔️ UIデザインの基礎をしっかりと固めたい方

UX、UIデザインの核心は、ユーザーが満足するまで、またはユーザーが抱える問題を解決するまで、デザインのプロセスを踏んで繰り返し（イテレーション、iteration）することです。先ほどお話ししたプロセスを踏めば、ユーザーのためにはるかに多くの部分を考慮した堅実なアプリやサービスを作ることができます。この授業を受講すると、単に美しいアプリをデザインする能力だけでなく、プロセスの各段階をどのように活用するか、そして究極的にユーザーのためにより良い体験をどのように提供できるかを考えるデザイナーになっているでしょう。Figmaを学ぶのは、各段階を踏むことができる技術的な能力、専門性を裏付けるためです。

3. なぜFigmaなのか？🤔

✔️ 一つですべてができるAll-in-oneツールFigma！👌

UIデザインプロセスの各段階で使用できる様々なツールがあります。Adobe XD、Sketch、Figmaなどですね。その中でもFigmaほどUIデザインに必要なすべての活動をサポートしてくれるアプリはないようです。一つのアプリでほぼ全工程を終えることができるのです。

スケッチアプリを使用する場合、プロトタイピング段階ではInvisionを一緒に使わなければチームメンバーと効率的に共有することができません。スケッチアプリ自体にプロトタイピング機能はありますが、オフラインベースのツールであるため、チームメンバーやクライアントとオンラインで効果的に共有するには限界があります。そして、ハンドオフのためにはZeplinを使わなければなりません。

しかし、Figmaを使えばワイヤーフレームからハンドオフまで全ての過程を一つのアプリで解決できます。私は元々Sketchを使っていましたがFigmaに乗り換えることになり、業務をより効果的に行うことができ、本当に多くの時間を節約することができました。

^{👉 "Figma = Sketch + InVision + Zeplin"}

✔️ Windows、Macbook両方で使用可能です 👏

統計上UIデザインツールの中でよく使われるSketchアプリは、Windowsでは使用することができません。しかしFigmaはオンラインベースのツールなので、Safari、Chromeなどのブラウザさえあれば使用できます。WindowsまたはmacOSなど、どのOSを使っているかに関係なく使用できるのです。

✔️ コラボレーションに最適化されたオンラインベースのデザインツール

Figmaはオンラインベースのツールであるため、リアルタイムでチームメンバーやクライアントと協業し、コミュニケーションを取るのに本当に良いツールです。デザイナーとはリアルタイムで一緒にデザイン作業ができ、開発者やプロダクトマネージャーなどとデザイン成果物を共有し、またこれについてコメントを作成・共有する機能が便利に備わっています。

^{👉 チームメンバーとのリアルタイム協業が本当に便利です。}

✔️ デザイン作業の生産性を向上させる無料プラグインとテンプレート 😀

Figmaには、サードパーティが制作した多くの無料デザインテンプレートとプラグインがあります。これらをうまく活用すれば、デザインの生産性を数倍から数十倍以上向上させることができます。私はこの講義で、テンプレートおよびプラグインの活用法と、特に活用度の高いテンプレート、プラグインをおすすめして、皆さんがより簡単で早くUIデザイン能力を身につけられるようお手伝いします。

^{👉 Figmaのプラグインとテンプレート}

質問 Q&A 🙋🏻‍♂️

Q. この講義を受講する前に、SketchアプリやZeplin、InVisionなどの他のツールを扱えるようになっている必要がありますか？

A. 全く知らなくても大丈夫です。Figmaは、UIデザインに必要なほぼ全ての機能を備えています。Sketch、InVision、Zeplinで実現できる全てのことを、Figmaだけをしっかりと習得すれば行うことができます。つまり、UIデザイン、プロトタイピング、ハンドオフ（開発者のための最終成果物）など、全ての段階をFigmaを通じて進めながら、デザイン成果物を作ることができます。

Q. 非専攻者でも受講できますか？

A. はい、この授業は入門者と非専攻者に合わせて設計した科目です。UIデザインのための基礎知識からFigmaの基礎機能、そして高級知識と高級機能まで一歩一歩お教えします。ですので、全くデザインと無関係な仕事をしてきた方や非専攻者でも、この授業を受講すればUIデザインの専門能力を身につけることができます。

Q. 事前に受講すべき前提科目はありますか？

A. もしUX、UIデザインについて全く知らない方でしたら、私がInflearnに開設した「初心者のための、UXデザイン概論」の授業を事前に受講されることをお勧めします。この授業を受講すると、UXおよびUIデザイン全般の知識を身につけることができます。何よりも、このUIデザインの授業をなぜ受講すべきなのかをより深く理解できるでしょう。すでにUX、UIデザインに関する基本知識をお持ちでしたら、この授業を直接受講していただいても構いません。

それでは授業でお会いしましょう！👋