見出し画像

【UIデザイン】マンハッタンコードがデザインでFigmaを使う理由

どうも、ついこの間30歳になりました。マンハッタンコードのUIデザイナーgenです。
今日は主にデザイナーさん向けにツール関連の話です。


マンハッタンコードでは、スマホアプリやWebなどのUIデザインを作る際、主に Figma というツールを使って制作をしています。

(googleで検索するとまず間違いなくマックスファクトリーのフィギュアの方が出てくるので、検索の際は「Figma Design」とするとすぐに見つかります。)

過去にはSketchAdobe XDなど、複数のデザインツールを使用していましたが、現在では社内の基本的な共通ツールとしてFigmaを採用しました。
今回は、マンハッタンコードがデザインでFigmaを使う理由を説明したいと思います。

社内のデザインツールについてお悩みの方はぜひこの記事を参考にしてくださるとありがたいです!

画像4

どんなデザインツールがあるのか?

まず、デザインツールを詳しくない方のために簡単に解説します。

画像2

Adobeが開発したUI・プロトタイピングツール

よいところ

● 無料で使うことができるため運用コストが安い
● 操作が簡単で学習コストが低い
● Mac・WinどちらのOSでも使用可能
● 高度なプロトタイプを作ることができる

いまいちなところ

● 単体での高度なデザイン(特にビジュアルデザイン)は苦手
● 他ツールに比べると全体的に機能が見劣りしている
● URLでの共有はできるが、各ファイルの管理者しか操作できないなど管理面で課題



画像3

Bogemian Codingが開発したデザインツール

良いところ

● プラグインが充実しており、作業を素早く、効率的にできる
● 単体である程度高度な編集が可能

いまいちなところ

● Mac専用アプリで、お客様によっては使えない場合がある
● サブスクリプションが高い
● エンジニア側の学習コストが高い
● 共有・コラボレーション機能が未成熟で不足がある



画像4

いいところ

● Mac・WinどちらのOSでも操作可能で、ブラウザでも使うことができる
● クラウド上にあるファイルを操作するので、常にチーム全体で最新の状態を保てる
● ファイルバージョンの管理が可能
● 同時編集(コラボレーション)ができる
● コメント機能など、サードパーティーを挟まずコラボレーションができる

いまいちなところ

● バグが多い
● 通信環境が悪いとそもそもデザインを操作できない


なぜFigmaを選んだの?

マンハッタンコードではお客様先に常駐することもあったため、共通のデザインツールを選ぶ上で「誰かと一緒にやることを最大効率化させる」というのが重要なポイントでした。
例えば、お客様への共有チーム内での作業の可視化生産性の向上などがこれにあたります。

その点で、Figmaはこれらを解決するポテンシャルを持っていました。

まず一つ目が「共同編集(コラボレーション)機能」
Figmaではリアルタイムでの同時編集が可能で、これまで個々のデザイナーに作業を依存していた状態を改善することができました。
また、クラウドで常に全員が最新の状態を確認することができたため、格段にデザイン業務を進めやすくなり、結果としてデザインの生産性を向上させることに繋げることができました。

そして二つ目は「共有機能」
前述の通り、FigmaはMac/WinどちらのOSでも動き、ブラウザ上で使うことができるのでお客様の環境を問わず使うことができました
見るだけであればiOS端末のブラウザでも可能なため、出先でもデザインの確認やレビューも行うようにすることが可能でした。

また、URLさえ通知すればファイルへアクセスできるため、マンハッタンコードが開催しているコミュニティTUB来場者の方とその場で一緒にアプリやデザインの開発を行ったり、エンジニアコミュニティ「Qweens Tech Lab」で共同開発を行うのにも使うことができました。


〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜

まとめ

今ではすっかりFigmaは社内の共通ツールとして定着し、スマホアプリ・Webのデザインは元より、簡単なバナー画像やお客様への提案資料、果てはノベルティシャツなどの印刷物までFigmaを使って作るようになってしまいました。
この記事のを含めたマンハッタンコードのnoteのサムネイル画像や記事内の画像など全てFigmaで制作しています。

Figmaの急成長は凄まじく、最近では機能追加・オンラインホワイトボード Figjamのリリースなど、チームのコラボレーションと生産性を高めるものをどんどんと出しています。

弊社のコミュニティTUBでも、Figmaの勉強会など企画してますので、この機会に是非使ってみて欲しいと思います。

ご参加お待ちしております。


宣伝

お仕事のご相談・ご依頼
マンハッタンコードは、スマートフォンアプリの開発に特化しております。エンジニアリングから、デザイン、プロジェクト推進などアプリ開発を総合的に請け負うことが可能です。
また、デザイン環境の構築などもお手伝い可能ですので、弊社のホームページからぜひお問い合わせください。

お問い合わせの際には「noteの記事を読みました!」と一言入れていただけると嬉しいです!

この記事が気に入ったらサポートをしてみませんか?