はじめに
今回の記事は、フロントのデザインを作成する際に活用している「Figma」について、実際に使っていく中で得られた気づきを簡単にまとめてみました。
デザインに対して苦手意識がある方や、画面設計をどう進めればよいのか分からない方にとって、少しでも参考になれば幸いです。
書こうと思ったきっかけ
Figmaでの画面設計やUI/UXデザインは、正直なところ今でも苦手意識があります。自分が作った画面遷移図を見ても「もっとよくできないかなぁ...」と悩むことが多くありました。
そんな中で、他のデザイナーや開発者が共有しているワイヤーフレームやUIテンプレートの存在を知り、それを再利用することで格段に作業がスムーズになりました。
今回はその中でも特に役立ったテンプレートを個人的に紹介していきます（半分、自分用メモです）。また余談ですが、以下の動画では使い方などが丁寧に紹介されていて、とても参考になりました！
そもそも、Figmaとは？
Figmaは、ブラウザ上で利用できるUIデザインツールです。リアルタイムでの共同作業が可能で、デザイナーだけでなくエンジニアやディレクターなどともスムーズにやり取りができるのが特徴です。
公式サイト
デザインの作成からプロトタイピング、フィードバックまで一貫して行うことができるため、チーム開発でも非常に重宝されています。
【備忘録】個人的に便利だったテンプレート
以下は実際に使ってみて特に便利だと感じたテンプレートです。
ワイヤーフレームテンプレート
→初期段階の構成検討に最適。要素配置のイメージを素早く形にできます。
HPワイヤーフレーム・デザインテンプレート
BtoB ランディングページ ワイヤーフレーム
和文ワイヤーフレームキット - Japanese Wireframe Kit
UIコンポーネント集
→ボタンや検索バー、カードなど、UIの基本パーツが揃っていて、すぐに画面が作れます。
UI Component ver2.1
モバイルアプリテンプレート
→スマートフォン用のデザインパターンがまとまっており、アプリ開発時に活用しやすいです。
iOS 17 and iPadOS 17
ダッシュボードテンプレート
→管理画面系のUIを作る際に参考になり、表やグラフなどの見せ方が整っていました。
SAAS Dashboard
まとめ
ここまで読んでいただきありがとうございました！
デザインに苦手意識がある原因として、適切なパーツ配置ができない、ボタンや検索機能のデザインがうまくいかないといった悩みがありましたが、すでに多くの人が作成してくれているテンプレートを活用することで、大幅にその悩みが解消されました。
もっと早くこのテンプレートの存在を知っていれば…と思うほど便利だったので、この記事がどなたかの画面設計やUI/UXデザインの参考になれば嬉しいです...!!
参考文献