「デザインに興味があるけどデザインツールを使いこなせるか不安」と感じている方も多いのではないでしょうか。そんな方におすすめしたいのが、今デザインツールの中で注目されているFigmaです。
Figmaはオンラインで利用できるデザインツールのため、特別なソフトをインストールする必要がありません。デザイン初心者からプロのデザイナーまで、幅広く対応できる多機能なデザインツールでありながら、無料で始められる点も魅力です。
この記事ではFigmaを使ってできることや利用するメリットについて解説します。
薬剤師ライター青野ともさん
Figmaを使ってデザインを作ってみたい方は、ぜひ参考にしてみてくださいね。
Figmaとは？
Figmaとは、オンラインで利用できるデザインツールです。クラウド上でデータが保管されるため、ネット環境があればどこからでもアクセスして作業が行えます。
URLで簡単にデータを共有できるため、複数人で同時に閲覧したり編集したりできます。
Figmaはインストール不要であり、アカウント作成だけで使い始められる手軽さも魅力のひとつ。ほとんどの機能を無料プランでも使えるため、気軽にデザインを試してみたい方にもおすすめです。
薬剤師ライター青野ともさん
スライド資料からWebサイトやモバイルアプリのデザインまで、幅広いデザインに対応できる機能がそろっています。
Figmaでできる5つのこと
Figmaを使うとどのようなものが作成できるのでしょうか？ここでは、Figmaを活用してできる制作物の例を5つ紹介します。
- ワイヤーフレームの作成
- プロトタイプの作成
- グラフィックデザインの作成
- SNS投稿用などの画像作成
- スライド資料の作成
ワイヤーフレームの作成
Figmaでは、WebサイトやモバイルアプリやLP*の骨組みとなるワイヤーフレーム**を作成できます。
フォントやボタン、イラストやメニューなどの要素を配置し、各画面の情報量を調節することでユーザーが迷わず必要な情報にアクセスできるようにデザインします。
薬剤師ライター青野ともさん
Figmaにはテンプレートがいくつか用意されているため、ワイヤーフレームの作成が手軽に行えます。
プロトタイプの作成
Figmaには、デザインされたものが実際にWeb上でどのような動きをするかイメージできる、プロトタイプ*機能があります。
たとえば「TOP」というボタンをクリックした場合にトップページが表示されたり、マウスを重ねたときに色が変わったりする機能です。
プロトタイプを作成することで、デザイナーが実際の操作感をシュミレーションできるため、ユーザーがどのような経路で目的の画面にたどり着くのかを視覚的に確認できます。
薬剤師ライター青野ともさん
Figmaを使うと、ユーザー目線に立ったデザイン制作が可能ですよ。
グラフィックデザインの作成
Figmaはロゴやアイコン、イラストなど、グラフィックデザインの作成も行えます。
薬剤師ライター青野ともさん
拡大縮小しても画質が劣化しないベクター形式*で画像を作成できます。
同じデザインでさまざまな媒体のサイズに対応し、形状や色を自由に変更できるため、高品質な画像作成が可能です。
SNS投稿用などの画像作成
FigmaにはさまざまなSNSに対応した画像サイズのフレームがあり、SNS投稿用の画像も簡単に作成できます。
オートレイアウト機能を使えば、フレームのサイズを変えても中のレイアウトが自動的に調整されるため、さまざまなSNSのサイズに対応可能です。画像のトリミングや色調調整など、基本的な画像加工も行えます。
薬剤師ライター青野ともさん
図形やテキストの配置も直感的で、デザインツールに触れたことがない方でも使いやすいツールです。
スライド資料の作成
Figmaはオリジナル性の高い、統一感のある資料作成に役立つツールです。フォントの種類が豊富で、レイアウトの幅を細かく設定できる機能などがあり、オリジナルの資料作成が可能です。
薬剤師ライター青野ともさん
ヘッダーやレイアウトのコンポーネント*を作成し、複数のスライドに利用できる機能もあります。
コンポーネントのスタイルを変更すれば、コンポーネントを使用しているすべてのスライドが自動で更新されるため、統一したデザインの資料を効率的に作成できます。
Figmaを利用する3つのメリット
さまざまなデザインツールがありますが、なぜ多くのデザイナーがFigmaを利用するのでしょうか。Figmaを利用する3つのメリットについて紹介します。
- デザインの自由度が高い
- プロトタイプ機能が豊富
- リアルタイムな共同編集が可能
デザインの自由度が高い
Figmaはデザインテンプレートだけでなく図形の形や色、文字の細かな調整、アニメーションの作成など、さまざまなデザインに対応できる柔軟性を備えています。
薬剤師ライター青野ともさん
豊富なプラグイン*を活用することで、デザインに使用する機能を拡張できます。
たとえば、ノイズやテクスチャーを画像として作成できるプラグインでは、粒度や透明度などを細かく調整することで紙のような質感の画像作成も可能です。[1]
Figmaでは、プラグインの使用でデザイン機能を充実させ、用途に応じてカスタマイズができます。
プロトタイプ機能が豊富
Figmaの豊富なプロトタイプ機能を使えば、Webサイトやアプリケーションの動きをリアルにシミュレーションできます。
ページ遷移*だけでなく、ほかのプロトタイプの設定も可能です。たとえば、Webサイトの長いコンテンツページのスクロールでは、スクロールの方向を設定したりメニューなどをページ上のひとつの位置に固定したり、実際の操作に近い状態に設定できます。[2]
薬剤師ライター青野ともさん
スマートフォンやタブレットなど、さまざまなデバイスで表示できるため、ユーザー目線での検証も可能です。
Figmaのプロトタイプ機能を使うことで、完成度の高いデザインが制作できるでしょう。
リアルタイムな共同編集が可能
Figmaには、複数の人が同時にデザインファイルを編集できる機能、コラボレーション機能があります。[3]
デザイナーだけでなく、ディレクターやエンジニアなど、プロジェクトに関わる人の編集内容がリアルタイムに反映される機能です。
デザインの変更や修正が迅速に行えるため、制作スピードが上がります。お互いの進捗をみながら作業ができるため、チーム内でのデザイン認識にずれがない状態で制作を進められるでしょう。
薬剤師ライター青野ともさん
コメント機能もあるため、クライアントが修正して欲しい箇所に直接コメントを付けられます。
これによってクライアントの要望を的確に把握し、デザインに活かすことが可能です。
Figmaを使ってデザインに挑戦しよう
Figmaはデザイン制作に必要な機能が充実したオンラインのデザインツールです。無料のプランもあり、初心者でも気軽に始められます。
薬剤師ライター青野ともさん
WebサイトやLP、アプリケーションのデザインはもちろん、資料や画像作成まで、幅広い用途に対応しています。
デザインに興味があり、デザインツールを使ってみたいと考えている方は、Figmaを使ってまずは興味のあるデザインに挑戦してみませんか。
医療広告デザイン講座
医療広告ガイドラインや、デザインの法的側面を知り、Figmaで課題制作をし営業も学ぶ実践的な講座です。未経験からクリエイティブを通して、医療/美容/健康/ヘルスケア業界で活躍したい方におすすめです！
