popular-articles-2022
公開日: 2022.12.30  | 更新日: 2022.12.30

2022年に最も人気だった記事ベスト10

wentz-design.comで2022年にもっとも読まれた記事をランキング形式で発表します。

年間を通してほぼFigmaの記事しか書いていないので、実質的にFigmaの人気記事ランキングとなっています。

どんな記事が人気だったのでしょうか?早速みてみましょう。


10位:Figmaでテキストを縦書きに対応する方法

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ... 続きを読む

figma-text-vertical-alternates

9位:Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

figma-mobile-and-destop-mockup

8位:Figmaでマスクを適用・解除する方法

Figmaでマスクを適用・解除する方法

今回はFigmaでマスクを適用・解除する方法を解説します。Figmaのマスクは、Adobe Illustratorのクリッピングマスクのように、画像やベクターデータを組み合わせたオブジェクトをマスクで任意の形に切り抜くことができる機能になります。 ... 続きを読む

figma-how-to-mask

7位:Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法

Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法

今回は、Figmaで画像から背景を簡単に切り抜いてくれるプラグイン「Remove BG」の紹介です。画像を組み合わせてコラージュ画像を作りたい時や、写真から人物を抜き出したい時などに便利なプラグインです。 ... 続きを読む

figma-remove-bg-plugin

6位:Figmaでシンプルなテーブル(表)を作る方法

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-table

5位:Figmaで簡単にフローチャートや画面遷移図をつくる方法

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

figma-connect-with-arrows

4位:Figmaでグリッドやガイド(ルーラー)を表示・非表示する方法

Figmaでグリッドやガイド(ルーラー)を表示・非表示する方法

今回はFigmaでルーラー(定規)やグリッド(升目)を表示・非表示したり、アウトライン表示などの見た目を切り替える方法を紹介します。ガイドを作成したい場合や、誤ってショートカットキーを押してしまって元に戻したい時などの参考になればと思います。 ... 続きを読む

figma-ruler-and-grid-view-tips

3位:Figmaで図形やテキストのべた塗りとグラデーションの使用方法

Figmaで図形やテキストのべた塗りとグラデーションの使用方法

Figmaで図形やテキストなどのオブジェクトにベタ塗りや様々な種類のグラデーションを適用する方法を紹介します。 ... 続きを読む

figma-how-to-gradation

2位:Figma初心者が使い方に困った時に試してほしいTips

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

figma-beginners-tips

1位:Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

figma-how-to-crop-and-mask

2022年もお世話になりました。

年初に、こんなことを書いていました。

まだサイトを開設してから1年経っていませんが、引き続きFigma使いとしての研鑽をしつつ、表層以外のデザインに関する言語化にも挑戦したいと思っています。

結果的に、Schema登壇を機にデザインシステムの運用に関する言語化に取り組むことができ、個人的にも充実した1年でした。

また、この記事で101本目だったようで、なんとなく目標にしていた「100記事くらい目指したいな〜」が気づいたら達成しておりましたが、FigmaのTipsに偏ったブログ執筆をしていることもあり、ほとんど同じ内容の記事を2本書いてしまうという悲しい事故もありました(結局そのまま公開してます)。なので、実質これが100本目です。

今年はFigmaの日本法人も本格的に活動開始され、国内のイベントにいくつか参加もしました。中でも、念願の日本語ヘルプページが公開されたことで、日本語による使い方解説記事の潮時を感じております。

来年は、Figma以外のツールや、個人的に勉強している領域の備忘録、デザインとは直接関係ない話など、いろんな分野を探っていこうと思います。

2022年も、引き続き wentz-design.com をよろしくお願いいたします。

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告