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

最近会社に入社する新入社員やジュニア、デザイナーたちを見ると、いくつかのパターンを見ることができます。一つはデザインシステムに対する基礎力と管理能力があるということで、もう一つはFigmaでレスポンシブデザインができる能力を身につけているということです。

その理由はとても簡単だと思います。この能力があれば「現場にすぐ投入」が可能だということです。逆にデザインシステム、レスポンシブデザイン能力がない状態で入社することになると、会社の立場からは本当に多くのコストと時間を投資して教育をしなければならないのですが、これは決して簡単なことではありません。

とはいえ、すべての応募者がこの能力を身につけているわけではありません。私の経験上、少数の人だけがこの能力を身につけていました。つまり、能力を身につければすぐに目立ち、面接に進む可能性も高くなるということを意味します。

そのため最近、UX/UIデザイン入門者や就活生の皆さんに必ず身につけるよう強調していることの一つがレスポンシブデザインです。この能力を身につければ、就職市場で大きな競争力を持つことができます。

そして、ジュニアデザイナーの方や現場で働いていらっしゃる方でレスポンシブデザインができない場合は、ぜひ身につけることをお勧めします。なぜなら、この能力があればより迅速に業務を進めることができ、開発者とのコミュニケーションにおいて効率性が大幅に向上するからです。

「レスポンシブデザイン完全攻略 with Figma」講座を今週ローンチします。（アーリーバード50%割引クーポンをプレゼントします。）

先ほどレスポンシブデザインの重要性についてお話ししましたが、Figmaを活用してレスポンシブアプリから、ウェブ、カード、コンポーネントなど多くのものを直接作れるよう、レスポンシブデザインを集中的に扱った講座を今週ローンチします。（水曜日前後）レスポンシブデザインとは何か、どのように始めればよいか分からなかった方には、今回の講座が良いスタート地点になってくれるでしょう。

基礎概念から実習まで一つ一つ丁寧に、Figmaを活用してレスポンシブデザインの原理を直接体得し、実戦能力を身につけられるよう構成しました。

• レスポンシブデザインの核心概念整理

• Auto Layout、Constraints、Layout Gridの理解と活用

• 実務でよく使われる内容で構成

• レスポンシブWebとアプリの両方をマスター

講義の詳細なカリキュラムと内容が気になる方は、このリンクをクリックしてご確認ください。

✨ アーリーバード50%割引のご案内およびお申込書

講義に興味をお持ちの方のために、今回は特別にアーリーバード特典をご用意いたしました。下記リンクの簡単なアンケートにご参加いただければ、リリース時に50%割引価格で受講できるクーポンをお渡しする予定です。

>> アーリーバード申込（50%割引）：https://forms.gle/reSTKbdhMn1Yo6ni8

アーリーバード割引特典を受けたい方は、今週木曜日（6日）までにお申し込みください。

ありがとうございます。

こんにちは。エリックです。

追加の映像アップデートがありましたらご案内いたします。

最新ピグマ版で再撮影を進めています。

以下は、映像が更新された部分です。

セクション 7. 実践例 1. スプラッシュ画面のデザインを試す

• サンプルサンプルファイルを私のドラフトにインポートする方法

• スプラッシュUI画面のデザイン

セクション 9. ピグマでアイコンを作成する A to Z

• 良いアイコンを作る原則

• Boolean機能を活用する

• ペンツールの使い方を学ぶ

• Keylineを理解する

• アイコンを作成

• 解像度を考慮したアイコンのエクスポート

ちなみに「セクション8. 実践例2. ワイヤフレームの作成」はピグマバージョンアップデートの影響を受けない映像であり、再撮影は進めません。ピグマ版のアップデートにより影響を受けるセクションの映像アップデートを優先的にしています。

それでは良い一日になります。

ありがとうございます。

エリック・ドリーム

こんにちは。エリックです。

映像更新がありましたらご案内いたします。ピグマのバージョンが更新された部分が生まれるにつれ、既存の映像で見られるピグマと最近のピグマが異なって見える点があり、最新のピグマバージョンで映像を再撮影して上げました。以下は、映像が更新された部分です。

セクション 4. ピグマの作業環境の理解

• 無料で開始できるピグマの価格設定とサービス

• 会員登録とピグマファイル管理のための環境

セクション 5. ピグマ基礎機能の習得

• 図形を作成し、右パネルの機能を習得する

• トランスフォームとオブジェクトの移動に関連する機能とショートカットを習得する

• ソート、配布、Tidy up、および Smart Selection 機能

• テキストの作成

• カラー関連機能 - ピッカー、グラデーション

• 画像とマスク機能

• エフェクトを理解する

セクション6.生産性を高めるプラグインとテンプレート

• 時間を何倍、何十倍惜しむ「プラグイン」

• UIデザインのクオリティを一気に高めてくれる「テンプレート活用法」

その後、参考にお願いし、次のセクション映像もピグマバージョンの更新により映像の再撮影が必要な部分について作業を進めています。アップデートも進行するのに共有させていただきます。

それでは良い一日になります。

ありがとうございます。

エリック・ドリーム

こんにちは。エリックです。

映像アップデートがありましたので、「セクション2. UX、UIデザインツールとしてピグマを理解する」の下の3つの映像を最新情報に基づいてアップデートしました。対比もう少し優勢でしたが、現時点（2023年）ではピグマがUX、UIデザインツールにおいて市場で圧倒的な1位をしています。 2位、3位と格差があまりにも大きくて比較するのが難しいほどですので、UX、UIデザインを入門する立場でどんなツールを使うべきか悩んでいればすぐにピグマを使うことをお勧めできる状況のようです。

【映像更新部分】

セクション2. UX、UIデザインツールとしてピグマを理解する

- ピグマツールの紹介

- 統計で調べた「UX、UIデザイナーはどのツールを使っているのか？」

- UX、UIデザインツール固有の長所と短所、そしてピグマを使用する理由

参考お願いし、最近ピグマソフトウェアバージョンが更新された部分が少しずつあり、この点を反映して他のセクション/チャプターも映像撮影を進めています。目標は今年中にピグマバージョンが更新された部分をすべて反映して、この講義関連映像をすべて更新することにしています。他のアップデートも進行中に共有します。

それでは良い一日になります。

こんにちはエリックです。

寒い冬は暖かく過ごしてください。

2021年に続き、 UX toolsで2022年度のUX/UIデザインツールの使用に関する統計資料を発表しました。なっているのかわかりましたのでよさそうです。 uxtools.co ）

結論「ピグマ独自」 ：UX、UIデザインをするためには様々な活動をしなければなりません。 Wireframe、UI Design、Design Systemなどがあります。 2020年から2021年になり、ピグマが他のツールに比べてはるかに活用されてギャップを広げたとすれば、今はほぼあふれ壁レベルで独歩的になっているようです。

1.このアンケートには誰が参加しましたか？ 「世界中のデザイナーたち」

今回のアンケートでは、世界中のUXデザイナーまたは関連業種で従事または働いている方4260人が参加しました。

2. どんな職業人が参加をたくさんするのか？ 「UX、UIをすべてするプロダクトデザイナー、UX/UIデザイナーが多くなるトレンド発見」

参加した職業群はプロダクトデザイナーとUX/UIデザイナーが一番多かったです。

テクノロジー業界では、アジャイル、リーンスタートアップが活用され、デザイナーもUXデザイナー、UIデザイナーを別々に選んだ時代から、徐々にUX、UIをすべてやっていくUX/UIデザイナー、またはプロダクトデザイナーを多く採用するトレンドがあります。製品開発とアップデートのために素早くイテレーションをしなければならない流れの中で、みんなを合わせるプロダクトデザイナーをもっと望むのは、どうやら当然の部分なのかもしれません。その観点から、UXデザイナーとUIデザイナーは減り、プロダクトデザイナー、UX/UIデザイナーが増えた変化が見られます。

2021年参加者の職業群（下）

2022年参加者の職業群（下）

3. UIデザインツールアンケート結果「ピグマで終結」

UX、UIデザインツール市場で最もホットな部門はやはりUIデザインと見なすことができます。ハンドスケッチやワイヤフレームは必ずUIデザイン専用のツールではなくても他の代替ソフトウェアや方法があります。たとえば、ワイヤフレームはPowerPointを介して作成することもできます。ところで、UIデザインだけは専用ツールを活用しなければならず、習得をするのにツールの専門的な活用法を身につけなければなりません。そのため、どれだけ良い専用ツールを提供しているかが重要です。楽年にはピグマがかなり圧倒的に他のツールに勝ったとしたら、今回はただ比較しにくいほど差が大きくなりました。それだけ世界中のデザイナーたちがピグマを多く使っているという話でしょう。

だからUIデザインの入門を悩んでいる方なら、まずピグマを学ぶことをお勧めします。

2021年UIデザインツールアンケート結果

2022年UIデザインツールアンケート結果

年度別のUIデザイン市場シェアの変化

4. UIプロトタイピング「Basicはピグマが、Advancedはプロトファイ」

今年のUIプロトタイピングアンケートは2つのセクションに分かれていました。 1つはBasic、もう1つはAdvancedです。 Basicは基本的に画面が駆動されて見えるくらい、軽いアニメとか画面クリックが可能になるくらいで見ればいいようで、Advancedははるかに高品質でプロトタイピングをすることで見ればいいようです。 Basicはピグマが、Advancedは韓国で作ったソフトウェアProtopieが1位を占めました。

5.デザインシステム「これもピグマ」

デザインシステムもやはりピグマが圧倒的です。ストーリーブックは、開発者とコードを含むコンポーネントを共有するソフトウェアです。デザイナーと一緒に管理をする部分があり、2位を占めました。ちなみにこのアンケートには開発者もかなり多く参加しました。どうやらコラボレーションが多いからだそうです。開発者もマカガガジでピグマをViewerとして多く活用しているんです。

6. デジタルホワイトボード「Miroとピグマで作ったピグジャムの競争」

デジタルホワイトボードは昨年に続き、ほぼ同様にミロとピグマが競争中です。ピグジャムはピグマユーザーがすぐに使えるので便利な利点があります。それでもMiroが確かに市場を先に占有しているのか1位を維持しています。オンラインコラボレーションが重要になった最近、デジタルホワイトボード市場の競争は今後も熱くなるようです。

* その他にもユーザーリサーチソフトウェアとか、ユーザーリサーチリクルーティングツールに対するアンケート調査もありますので、一度ご覧ください。

まとめと考え

1.ピグマは、UX、UIデザインのためのほぼすべてのプロセスにソリューションを提供しています。ブレーンストーミングのためのピグジャム、ワイヤーフレーム、UIデザイン、デザインシステム、プロトタイプまでですね。しかもプラグインとオープンソースのテンプレートはますます多くなっていくので、ずっとあふれ壁に行っているようです。

2.最近ピグマがAdobeに買収されることがありました。あまりにも市場での影響力が大きいため、Adobeがピグマをすぐにどのように変形させるかはわかりませんが、私はピグマが今の方向性を維持し続けて、使いやすさに集中してほしいと思います。あまりにもデザイナーの立場でうまく作って便利なツールだと思います。

3. デジタルホワイトボード市場の競争も興味深い点が多いようです。非対面コラボレーションが重要になっているため、ビデザイナーたちとアイデア会議をするために必要なソフトウェアなのでそうです。

4.プロダクトデザイナー、UX / UIデザイナーの需要がますます大きくなることを感じます。入門者の方はこんな点を参考にしてキャリア設計をしていただければと思います。

資料ソース：

UX tools 2022年の統計結果

UX tools 2021年の統計結果

その他:

2021年UXデザインツール統計発表「ピグマの独走」

こんにちは。エリックです。

夏が近づいていますが、みんな仲良くしていますか？私がいるニューヨークは今、かなり暑くなり始めました。

私は今回、UXデザイン入門者のための概論書を出版するようになり、ニュースを共有します。 UXデザインの概念とUX/UIデザインの原理、ユーザーリサーチ、キャリアロードマップの設計方法などについて取り上げた本です。

イエス24、教報文庫などインターネット経由で注文できます。 （👉購入リンク）

*私がインフラストラクチャに開設したUXデザインの概論授業の内容に内容を少し追加して編んだ本なので、その授業をすでに聞いていたら本は読まなくてもいいようです。

✅本を書いた背景

私は10年前に初めてUXデザインのキャリアを始めたとき、誰かに知識を伝えたり教えることは計画しておらず、想像したことがありませんでした。ところが数年前、感謝してもUX入門者の方々をお手伝いする機会ができました。

私はソウルとニューヨークでUX、UIデザインとユーザーリサーチを勉強し、実務を経験して成長してきました。皆さんを助けてくれることにやりがいを感じました。

UX分野で進路を悩んでいる方には、今が人生で重要な視点なのですが、この本を通して少しでも役に立つことを願っています。本について質問がある場合は、お気軽にお問い合わせください。 (ericworld121@gmail.com)

✅なぜUXデザインの入門にガイドが必要なのですか？

私はソウルとニューヨークでUX、UIデザインとユーザーリサーチを勉強し、実務を経験して成長してきました。入門をしていた頃、その過程で挫折と多くの試行錯誤を経験しました。だから私と似たような悩みと難しさを持っている入門者たちを助けることにやりがいを感じ、私の持っている知識と経験、試行錯誤をもとに、どうすれば入門者の方がUX/UIデザインを少しでも簡単に始めるように手伝うことができるか心配ながらコーチングと講義をしてきました。私の講義を聞いたほとんどの入門者は、次のような一般的な質問をしました。

「UXデザインは何をするのだろうか？」

「私は専攻者ではありませんが、UXデザイナーになることができますか？」

「私は視覚的な感覚が優れているのか分からないが、この分野に入門できるか？」

入門者の方々に、実務者の観点から経験と業界で活用される生きている知識を共有することが、上記の質問に対する答えを得るのを助けることを知りました。単に理論的な内容だけを学ぶのではなく、実際の現業で働く人が考えるときにUXとUXデザインの概念は何であり、実務者の観点からどんなものを知ってこそ入門が上手にできるかをお知らせすることが最終的に入門者の方が望む目標にもっと早く到達できるからでした。つまり、ショートカットを共有するのと同じです。

そこでこの本では、現業でUX/UIデザイナーとして10年余りが働いている私が今まで講義、コーチングをしながら入門者の方々に役立った内容をまとめて次の内容で構成しました。

✔️UXの本質的な概念：UX、UXデザイン、UIデザインは何ですか？

✔️ UXデザイナーはどんなマインドセットを持って入門し、実戦に取り組むべきか？

✔️UX、UIデザインをすばやくうまくいくのに役立つデザイン原理とは何ですか？

✔️ UXデザインの中核的な知人が、ユーザーリサーチとは何ですか？

✔️ユーザーを引き付けるUXはどのようなプロセスで作られますか？

✔️最近の技術業界では、製品はどのように作成されており、このためにUXデザイナーはどのような役割を果たしますか？

✔️ UX関連の職業はどんなものがあるのか​​？

✔️ UXキャリアロードマップ：今、デザイナーになるために何をすべきですか？ (Feat.ツール、プロジェクト、ポートフォリオ)

✅誰のための本ですか？

この本は次のような方々を考えて執筆しました。

✔️UXデザインに興味があり、UXデザイナーが何をしているのか知りたい人

✔️デザイン非専攻者、UXと全く無関係な分野で仕事をしているが、UXに職種転換を悩んでいる方

✔️しっかりしたUX、UI基本機を「すばやく」固めたい方

✔️UXデザイナーとコラボレーションをしている人

✔️新しい分野について学びたいという憧れがある方

✅おすすめ

「UX分野に進路を切り替えるか迷っていた時期に、著者の「UXデザイン入門講義」に初めて触れた。解消し、新しい始まりを決心できる勇気を植えてくれた。

- イ・ギョンウン

「この本は、著者の豊富な経験と知識をもとに、UXの基本定義や方法論などの理論的概念から、実際の現場で使われるプロセス、多様なUX職業群、キャリアを始めるなど現実的な部分まで取り上げており、UX分野を総合的にとして理解するのに多くの助けになると思います。

- イ・ギョンミン（Google UXデザイナー）

「UX入門者が忘れずに覚えておくべきUXの原理とトレンドに照らして反映すべき実務知識まで理解しやすく取り上げられている。 UX入門者だけでなくUX基本を再び覚え、しっかり固めたいジュニアデザイナーにも便利なガイドラインになると確信する。

- イ・ガンミン（ハンファライフUX企画者）

「UXを初めて入門するジュニアデザイナーからUXを一緒に悩まなければならない企画者、マーケターのようなすべての職軍に役立つ内容でいっぱいだ」

- ソン・ミンスン（メタ（フェイスブック）シニアデザイナー）

書籍の詳細と完全なおすすめは、次のリンクでご覧いただけます。

👉推薦者と詳細紹介

受講生の皆さんを通して私も成長しています。

いつもありがとうございます。

昨年に続き、しばらく前にUX toolsで2021年度のUX/UIデザインツールの使用に関する統計資料を発表しました。私は今回はアンケート調査にも参加し、発表がどのように出てくるのか気になり、もっと気をつけて見ました。統計調査の結果をまとめてみました。 （統計情報源：uxtools.co）

時間がない方は、次の要約内容をご確認ください。

_

まとめと考え：

「UX/UIデザインプロセスのほぼ全領域で他のツールを圧倒するピグマ」

1つのツールでUX、UIデザインの全体的な機能を提供するピグマは、ますます多くの領域で他のツールと比べてあふれ壁に行っているようです。らもあって来年はまたどうなるかわかりませんが、一度ツールの使いやすさがあれば別のツールで簡単に移動しないのが一般的で、ピグマは今後もしばらくは市場優位を占めないかと思います。

_

統計結果のクリーンアップ

世界111カ国のUX、UIデザインなど関連業界で従事している方3,100人余りを対象に調査を行いました。デモグラフィー情報に関していくつかの興味深い部分がありました。一つは、国別の参加者数で見たとき、韓国の参加者が111人で6番目に高かったという部分でした。昨年に比べて韓国デザイナーの方々の参加度がより高かったためと思われ、このように存在感が現れるのは色々と気持ち良いことのようです。

：国別参加者数ランキング

参加した職種別参加者ランキングは以下の通りです。 UX、UIデザインをすべて兼ねるプロダクトデザイナーが最も多く出てきてUXデザイン、UIデザインがその後を結んでいるが、今ではプロダクトデザイナーが大勢の職群の一つとして確かに席をつかんでいるようです。どうやらプロダクトデザイナーがAgile/Lean組織で好むからではないかと思います。

 

：直軍別統計参加者数ランキング

この統計調査は、UX/UIデザインに関連してUIデザイン、プロトタイピング、ホワイトボードなど、領域別にどのツールを多く使用しているかを調べたものですが、結論から申し上げれば「ピグマ、独歩的」です。昨年は、主要指標でピグマがスケッチを進め始めたとすれば、今年はその独走を完全に固める形勢に向かっているようです。

それでは、地域別に結果を見てみましょう。 （出典：UXtools.co）

_

1. UIデザイン：「ユニークなフィグマ」

UX、UIデザインツール市場での競争で全面戦と見られるのはやはりUIデザイン領域だと思います。設計プロセスで前段（企画、アイデション）に対応するブレーンストーミング、ホワイトボード、ワイヤフレームは比較的進入障壁の低いツールを使用することができ、UIデザイン専門ツールを必ず使用する必要がなく、代替可能なツールがあります。ブレーンストーミングは紙やペンも良いツールになり、ワイヤーフレームはパワーポイントやバルサミックなどのツールを活用してもよい。ところがUIデザインだけには専門的なツールが必要なので、この市場をつかむということは大きな意味があるようです。

統計結果はピグマが昨年に続き1位を達成したが、はるかに圧倒的だったということです。下は2020年基準ランキングなのにピグマがスケッチを初めて先に1位になった年でもあります。スケッチがまだ存在感がありました。

 

：2020年UIデザインツールランキング

2021年の統計結果は、ピグマが他のツールを圧倒したと見ることができるほど遠く逃げる姿です。

：2021年UIデザインツールランキング

 

：年ごとのUIデザインシェアの変化

_

ピグマがよく出てくる理由はいろいろありそうですが、最大の理由としては次の程度にならないかと思います（参考に私がピグマを使う理由でもあります。）

•ピグマは、スケッチに比べてMacOSだけでなくWindowsでも使用できます。

•ピグマのコミュニティ機能。さまざまなプラグインとテンプレートが利用可能です。

•デザイナーだけでなく、一緒に働くチームメンバーとのコラボレーションも容易です。有料会員でなくてもViewモードでコメントを残すことができる。

•プロトタイピング、ハンドオフなどの機能も可能なため、他のアプリを別々にインストールして使用する必要はありません（オールインワン効果）

_

2. UI プロトタイピング: 「あふれ壁 Figma」

以下は、画面が実際に駆動可能になってユーザーテストなどに使用するプロトタイピングの結果です。ここでもピグマが圧倒的です。私の個人的な考えは、Principleのようなツールに比べてアニメーションを作るようなディテール的な部分はピグマが残念な部分があります。それでもこのようにうまくいく理由は、FigmaでUIデザインしたものを他のアプリの助けなしにすぐにプロトタイピングができるということだからです。

かつて簡単に使いやすくなったInvisionは、現在存在感がほとんどなくなったようです。市場で4位まで上がったという点です。つけてほしいです。

 

：UIプロトタイピングツールランキング

 

：UIプロトタイピングツール年ごとのシェアの変更

_

3.デザインシステム、ハンドオフ

カラー、フォントなどデザイン要素に対する統一性/一貫性のために活用するデザインシステムともUIデザインと同様にピグマが1位として2位、3位ツールとの間隔が大きく開かれました。ピグマのコンポーネント、Style機能が簡単でチームとして使用する場合、Libraryを通じてチームメンバー間の共用で活用でき、あえて他のツールを使用する必要がないため市場優位を占めていると考えられます。

ハンドオフは、ピグマがゼプリンを乗り越えて1位を固めています。

 

：デザインシステムツールランキングの変化

 

：ハンドオフツールランキングの変更

_

4.デジタルホワイトボード、ブレーンストーミング：

「Figmaを背にアップはFigjamの登場、1位Miroに追いつく」

パンダミックの影響で肥大面のコラボレーションが重要になる中で、会議をしたり、一緒に文書を共有して表示するのに必要なデジタルホワイトボードツールの競争が激化しているようです。ピグマの場合、今年ホワイトボードに特化したピグジャムアプリを発表したりもしました。

結果はMiroが1位に出ました。 Figjamが登場してからしばらくしていないにもかかわらず、2位にMiroをきつく追いかけている部分が印象的ですが、多くのデザインユーザーを保有しているFigmaが提供する機能なのでそうです。ユーザーの立場では一箇所でUIデザインもしてホワイトボードもできて便利な部分のようです。ちなみにUXtoolsによると（Figjamが今年無料で利用可能だったにもかかわらず）、有料ツールであるMiroが1位になった理由は、機能に対する満足度が5点満点で4.3と高いためだという分析がありました。

: デジタルホワイトボードランキング

_

もう一度まとめると、

デザインのシンキングの観点から見たときに、UX、UIデザインプロセスで必要な全体的な機能を提供するピグマは、他のツールをすべて抜いて世界中で独自のUX/UIデザインツールになっているようです。デザイナーの立場でこんなに便利なツールがあるということ、そしてより多くのデザイナーに使われているというのは気持ちいいことのようです。

_

資料ソース：

UX tools 2021年の統計結果

UX tools 2020年の統計結果

その他:

2020 UXデザインツール統計発表「圧倒的なピグマ」