2021年に最も人気だった記事ベスト10
wentz-design.comで2021年にもっとも読まれた記事をランキング形式で発表します。
年間を通してほぼFigmaの記事しか書いていないので、実質的にFigmaの人気記事ランキングとなっています。
どんな記事が人気だったのでしょうか？早速みてみましょう。
10位：UIデザインの作業を加速するFigmaプラグイン10選
当サイトで一番最初に公開したプラグインのまとめ記事です。
UIデザインの作業を加速するFigmaプラグイン10選
今回は、WebサービスやアプリのUI/UXのデザインFigmaを利用する中で、冗長な作業を効率化する上で特に便利だったプラグインを厳選して紹介したいと思います。プラグインの使い方が知りたい方は、プラグインの探し方とインストール方法も紹介していますので、参考にしてください。 ...
私がFigmaでプラグインを使用するようになって特に便利だったプラグインなので、今となっては知らない人はいない、定番プラグインばかりです。
9位：Figmaで簡単に波線・ジグザグのパスを作る方法
当サイトの初期で一番アクセス数が伸びた記事でした。
Figmaで簡単に波線・ジグザグのパスを作る方法
今回は、イラレでよく使われているような波線のパスを、Figmaで簡単に再現する方法の紹介です。おまけで、シンプルなジグザグのパスを作る方法も最後に載せています。 ...
Figmaでは意外と正弦波のような曲線を作る方法がなくて、装飾としての表現方法でお困りの方は意外と多かったようです。
8位：Figmaでファイル形式を指定して画像に書き出す方法
サイト初期に公開したFigmaの基本機能を解説するシリーズです。
Figmaでファイル形式を指定して画像に書き出す方法
Figmaで作成した画像やイラストなどのオブジェクトを、ファイルサイズを指定したり、PNGやSVGなどのファイル形式を指定して書き出し・エクスポートする方法の紹介です。 ...
Figmaの書き出しの場所がわかりづらいのと、書き出しは状況によって細かいニーズが求められることの多い機能の一つですね。
7位：Figmaで図形やテキストのべた塗りとグラデーションの使用方法
こちらも、サイト初期に公開したFigmaの基本機能を解説するシリーズです。
意外とグラデーションの使い方やどんなバリエーションで利用できるのか、使い始めたばかりだとわかりづらい機能の一つだと思います。
6位：Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法
こちらは、ランキングの中では比較的最近公開された記事です。
Figmaで簡単にスマホやPCの モックアップに画像をはめ込む方法
今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ...
Webサービスやアプリケーション開発に関わっていると、デバイスに画面のスクリーンショットをはめ込んだイメージ画像を素材として活用したいことも多いのですが、PhotoshopやIllustratorなどの有料ツールが必要で、非デザイナーには難易 度の高い物の一つでした。
このプラグインを使用することで非デザイナーでも無料で簡単にはめ込み画像が作れるのは画期的だったと思います。
5位：Figmaでテキストを縦書きに対応する方法
縦書きは、Figmaでやりたいけどできないことの筆頭ですね。SNSでもこちらの記事を紹介してくださっている方が複数いたのを観測しています。
Figmaでテキストを縦書きに対応する方法
今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ...
じつのところ、なんとかして縦書きを実現したいが故にいろいろ試した結果たどり着いた妥協アイデアだったのですが、他にいい方法もなく今の所のベストプラクティスとなっている印象です。
ぜひ、公式からベストな ソリューションを提供して欲しいですね。
4位：Figmaで破線・点線や矢印がついたパスを作る方法
こちらもFigmaの基本機能を解説するシリーズです。
Figmaで破線・点線や矢印がついたパスを作る方法
今回はFigmaでテキストや図形などのオブジェクト（パス）に枠線をつける方法と、枠線のスタイル（色・太さ・破線・矢印など）を編集する方法を紹介します。 ...
破線や矢印も奥まったところに設定がありわかりづらい印象でしたが、少しずつUIが改善されて以前よりは使いやすくなっている気がします。
記事は古いUIのままなので、いずれ更新したいと思います。
3位：Figmaでイラストの背景を簡単に切り抜き・透過する方法
RemoveBGという、もはや定番となったサービスのプラグインです。
Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法
今回は、Figmaで画像から背景を簡単に切り抜いてくれるプラグイン「Remove BG」の紹介です。画像を組み合わせてコラージュ画像を作りたい時や、写真から人物を抜き 出したい時などに便利なプラグインです。 ...
素材作りをしていると、背景を透明にしたい欲求は必ず出てきますが、Figmaの中でコンスタントに実行できる手軽さと、無料で精度の高い切り抜きできるので、Photoshopなどを持っていない方にはありがたいのではないでしょうか。
個人的にクソコラ画像を量産するのにいつもお世話になっています。
2位：Figmaで画像を○や□などの好きな形に切り抜く方法
Figma基本機能の解説シリーズで、トリミングやマスクの手法について簡単に紹介した記事です。
Figmaで画像を○や□などの好きな形に切り抜く方法
Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ...
デザインツールとしては割と基本的な機能ですが、プレゼンツールなどのオフィスソフトでこれまで頑張っていた方にはレイヤーの考え方などあまり馴染みのない編集方法なので、需要があったのだと推測しています。
個人的にはサムネが気に入っています。
1位：Figma初心者が使い方に困った時に試してほしいTips
非デザイナー向けに、Figmaでよくあるトラブルシューティングをまとめた記事です。
Figma初心者が使い方に困った時に試してほしいTips
今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ...
こちらはFigmaに関する情報量が最も多い記事ゆえ、自然流入で検索される数も多く、アクセス的にも最も伸びやすかったと思います。個人的には、最も雑にまとめた記事が、最終的に一番アクセスされるという皮肉な結果になりました。
どうして雑なのかというと、一旦備忘録的にTipsをまとめて後から記事に切り出して整理しようという魂胆で雑にまとめて おこうというモチベーションで書いておりました。その証拠に、この記事から派生して幾つか別の記事に切り出して、その部分は別記事のリンクに置き換えられています。
総合的には、この記事を起点として多くの記事にアクセスを促している節もあり、納得感のある結果ではあります。
2021年もお世話になりました。
転職を機になし崩し的に始めたブログですが、非デザイナー向けとはいえ本職でも役立つ発見や気付きもあり、楽しみながら更新できたのが良かったです。
そして、Figmaの偉大さを実感する1年でもありました。よく使うツールであるからこそ、ツールのことをよく理解する必要があるし、理解が深まることでアウトプットの幅は伸ばすことにもつながります。普段使わない機能に触れることで業務に活かせるテクニックを発見することもあり、個人的にはFigmaに「癒し」さえ感じる瞬間もありました。
まだサイトを開設してから1年経っていませんが、引き続きFigma使いとしての研鑽をしつつ、表層以外のデザインに関する言語化にも挑戦したいと思っています。
2022年も wentz-design.com をよろしくお願いいたします。
