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

初心者も、非専門家も着実にUIデザイン能力を身につけることができます。こんにちは。ニューヨークでプロダクトデザイナーとして活動しているエリックです。👋 私は

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

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

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

を担当しています。プロダクトデザイナーとして、このようにUXとUI、つまりUXプロセスに該当するほぼすべての部分にオーナーシップを持っていますが、最初からそうだったわけではありません。

「企画だけをしていた私が3ヶ月で
UIデザイン能力を身につけた理由」

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

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

考えていました。UIデザイナーと協業することはありましたが、私がUIデザインを直接することはありませんでした。👉 ソウルで企画の仕事をしていた頃の様子と企画書の一部

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

そうですね。それでも目標ができたので、方法を探し始めたんです。方法を探している最中に、ありがたいことに良いメンターたちに出会い、良い方法を知ることができました。

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

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

プロダクトデザイナーとして初めての就職に重要な役割を果たしました。👉 遅咲きで学んで進めたUIプロジェクトたち

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

同じように、視覚的なセンスが特別でなかったり、デザインを専攻していない方でも、UIデザインの能力を十分に身につけることができるようになります。

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

1. この講義を通じて何が得られるのか? 🙌

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

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

^{画像出典: Spotify、Airbnb}

このような画面が完成するまで、デザイナーはどのような過程を経たのでしょうか？FigmaやSketchアプリを開いて一気に描き上げたのでしょうか？画像出典：Spotify、Airbnb

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

問題に対するソリューションを見つけていく過程だと言えるのですが、このクラスではこのUIデザインのために踏むべきプロセスと活動についてお伝えします。

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

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

このプロセスが皆さんのものになるように、つまりUIデザインの専門性を身につけられるように授業を準備しました。

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

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

プロセスに沿って実際にUIデザインの段階を踏んでみることです。それでは、各段階で作成することになる成果物がどのようなものか、例を通してご説明します。

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

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

簡単にアイデアを修正できるということです。後の段階にアイデアが発展するほど視覚的な完成度が上がり、修正にかかる時間がより多くなりますからね。

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

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

スケッチからワイヤーフレームまで一緒に作れる必要があります。` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - **Before**: Text about sketches and how rough sketches can be powerful in practical work - **After**: Text about wireframes with defined screens and screen flows, and abilities related to UI design and prototyping with Hi-Fi Prototypes However, since there is no actual content between the `` tags to translate, I cannot provide a translation. Please provide the Korean text you'd like translated.

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

上記はㅎㅎ私が描いたスケッチです。しかし実務や現場ではこのようなスケッチは非常に強力になり得ます！👉 画面、画面フロー図などが定義されたワイヤーフレーム` tags appears to be empty or contains only whitespace. Based on the surrounding context provided, if you'd like me to translate the Korean text shown in the "Before" and "After" sections, here they are: **Before:** This is a sketch I drew haha. But in practical work and the field, sketches like this can be extremely powerful! 👉 Wireframes with defined screens, screen flows, etc. **After:** ▪️ The ability to create and utilize UI design and prototyping UI design, also called Hi-Fi Prototype (High-Fidelity Prototype), takes the previously mentioned wireframes and... However, if you have specific text you'd like translated, please provide it between the `` tags and I'll be happy to help.

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

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

ユーザーを中心に据えるために知っておくべきデザイン原理を一緒に扱います。理論の上に実践能力を積み上げれば、基礎がしっかりしたデザイナーになれます!👍` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - **Before**: Text about design principles and building practical skills on theory - **After**: Text about prototyping connecting screens to simulate functionality However, since there is no content between the `` tags, there is nothing for me to translate. Could you please provide the Korean text you'd like translated?

プロトタイピングは、このように作られた各画面を互いに連結させることで、ユーザーの立場からはまるで動作しているかのように作り上げます。

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

作成された各画面を互いに連結させることで、ユーザーの立場からはまるで動作しているかのように見せます。👉 視覚的な完成度を高める段階、UIデザイン

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

立場からは、まるで動作しているかのように作ってくれます。👉 視覚的完成度を高める段階、UIデザイン 👉 プロトタイピングを通じてコーディングなしで動作する画面` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Text about prototyping and UI design - After: Text about design systems and handoffs However, there is no actual content to translate between the `` tags. Could you please provide the Korean text you'd like me to translate?

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

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

インターフェースを提供し、デザイナーと開発者は効率的にデザインと開発ができ、時間を節約できるため、実務で非常に強力です。💪` tags are empty - there is no Korean text between them to translate. The "surrounding" context shows: - Before: Text about providing pace/interface and how designers and developers can work efficiently - After: Text about hand-off (HO) being the final stage of UI design However, there is no actual content between the `` tags for me to translate. Could you please provide the Korean text you'd like me to translate?

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

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

テキストやボタンのサイズが何ピクセルかといったことを具体的に定義し、開発者に渡す段階です。` tags. Could you please provide the Korean text you'd like me to translate?

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

具体的に定義し、開発者に渡す段階です。 👉 デザインシステムの重要な要素であるコンポーネント 👉 開発のために制作するデザイン成果物、ハンドオフ` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Text about defining components and handoff to developers, design systems, and design deliverables - After: Text about UI design tips, reference materials for studying design, and helping beginners gain skills faster However, there is no actual content between the `` tags for me to translate. Could you please provide the Korean text you'd like me to translate?

具体的に定義し、開発者に渡す段階です。 👉 デザインシステムの重要な要素であるコンポーネント 👉 開発のために制作するデザイン成果物、ハンドオフ` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Text about defining components and handoff to developers, design systems, and design deliverables - After: Text about UI design tips, reference materials for studying design, and helping beginners gain skills faster However, there is no actual content to translate between the `` tags. Could you please provide the Korean text that needs to be translated?

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

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

授業を受けた後、UI デザイン能力を身につけた後、UX/UI デザイナーやプロダクトデザイナーになるなど、目標とするキャリア` tags are empty - there is no Korean text between them to translate. However, I can see Korean text in the `` section. If you'd like me to translate those parts: **Before:** I will. And I'll also cover questions that people who learned UI design from me frequently ask. If you have more questions, please leave them in the question section^^ **After:** ④ Career Design and Roadmap 🚀 After taking the class, once you've acquired UI design skills, you'll be able to pursue your target career such as becoming a UX/UI designer or product designer Please provide the Korean text you'd like translated between the `` tags if you need a different section translated.

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

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

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

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

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

備えることが必須です。この授業をしっかりついてくれば、基礎的な知識と理論、そして実践能力まで兼ね備えて、望む目標を前倒しで達成できるでしょう。` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Text about following a class to achieve goals with foundational knowledge and practical skills - After: Text about people who want to become UX/UI designers but think they lack visual abilities However, there is no content between the `` tags for me to translate. Could you please provide the Korean text you'd like me to translate?

✔️ 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デザインに必要なすべての活動をサポートしてくれるアプリはないと思います。一つのアプリでほぼ全過程を終えることができるのです。

中でもFigmaほどUIデザインに必要なすべての活動をサポートしてくれるアプリはないようです。一つのアプリでほぼ全工程を終えることができるのです。` tags. The tags appear to be empty. If you'd like me to translate the surrounding text, here it is: Before: Among them, there doesn't seem to be any app that supports all the activities needed for UI design as well as Figma does. You can complete almost the entire process with just one app. After: When using the Sketch app, for the prototyping stage you need to use Invision together to efficiently share with team members. Sketch app itself for prototyp

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

しかし、Figmaを使えばワイヤーフレームからハンドオフまで、すべてのプロセスを一つのアプリで解決できます。私は元々Sketchを使っていましたが、Figmaに乗り換えました。

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

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

ブラウザベースで動作するため、ウィンドウとマックブックの両方で使用できます。

ブラウザベースで動作するため、ウィンドウとマックブックの両方で使用できます。

✔️ Windows、Macbookどちらでも使用可能です 👏

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

ウェブベースのツールなので、Safari、Chromeなどのブラウザさえあれば使用できます。WindowsやmacOSなど、どのOSを使っているかに関係なく使用できるのです。

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

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

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

デザイン作業の生産性を向上させる無料プラグインとテンプレート` tags are empty - there is no Korean text between them to translate. Based on the surrounding context provided, if you'd like me to translate those sections: **Before:** "...and design work can be shared, and features for commenting and sharing are conveniently available. 👉 Real-time collaboration with team members is really convenient." **After:** "✔️ Free plugins and templates that boost design work productivity 😀 Figma has many free design templates and plugins created by third parties." However, since there's no content between the `` tags, there is nothing for me to translate. Please provide the Korean text you'd like translated.

✔️ デザイン作業の生産性を高めてくれる無料プラグインとテンプレート 😀

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

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

質問 Q&A 🙋🏻‍♂️

プラグインをおすすめして、皆さんがより簡単で速くUIデザイン能力を伸ばせるようにサポートします。👉 Figmaのプラグインとテンプレート 質問 Q&A 🙋🏻‍♂️` tags. The tags appear to be empty. Could you please provide the Korean text you'd like me to translate?

プラグインをおすすめして、皆さんがより簡単かつ速やかにUIデザイン能力を高められるようサポートします。👉 Figmaのプラグインとテンプレート 質問 Q&A 🙋🏻‍♂️` tags are empty - there is no Korean text between them to translate. Based on the surrounding context, it appears there should be content between those tags. Could you please provide the Korean text that needs to be translated?

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

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

つまり、UIデザイン、プロトタイピング、ハンドオフ(開発者のための最終成果物)など、すべての段階をFigmaを通じて踏みながらデザイン成果物を作ることができます。

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

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

一つ一つ丁寧にお教えします。ですので、全くデザインとは無関係な仕事をしてきた方や非専攻者の方でも、この授業を受講すればUIデザインの専門能力を身につけることができます。

Q. 事前に受講すべき必須科目はありますか?

A. もしUX、UIデザインについて全く知らない方であれば、私がインフランで開設した「入門者のための、UXデザイン概論」の授業を事前に受講されると良いと思います。この授業を受講すると、UXおよびUIデザイン全般の知識を身につけることができますが、何よりもこのUIデザインの授業をなぜ受講すべきなのか、より深く理解できるでしょう。すでにUX、UIデザインに関する基本知識があれば、この授業を直接受講されても大丈夫です。

このUIデザイン講座をなぜ受講すべきかをより深く理解できるでしょう。すでにUX、UIデザインに関する基礎知識がある場合は、この講座をすぐに受講していただいても構いません。` tags are empty. There's no Korean text between them to translate. Based on the surrounding context you provided: - Before: "You'll be able to better understand why you should take this UI design class. If you already have basic knowledge of UX and UI design, it's fine to take this class right away." - After: "See you in class! 👋" If you provide the Korean text that should appear between the `` tags, I'll translate it for you following the rules you've specified.

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