Figmaとはクラウドベースのデザインツールです。デザインの変更を即座にチーム全体で共有できる機能は、何人も関わるような大規模なプロジェクトで有用です。また、Figmaは無料のプランが用意されていたりWeb上ですべての操作が完結する点がに大きなメリットがあるツールです。この記事ではFigmaの基本的な内容について詳しく解説するので、クラウドベースのデザインツールを探している方はぜひ参考にしてください。

ビビッドソウルは、リピート率90%超の「思いやりのものづくり」を提供するWeb・システム制作会社です。

業界経験豊富なディレクターが、webサイト制作をお手伝いさせていただきます。
webサイト制作について、ご要望の方はぜひ一度ビビッドソウルまでご連絡ください。

Figmaとは

はじめに、Figmaとは何か解説します。
メリットやプロトタイプ機能についても説明するので、最後までご覧ください。

Figmaの概要

Figmaは、クラウドベースのデザインツールとして注目されています。例えば、デザインの変更を即座にチーム全体で共有できる機能は、大規模なプロジェクトで特に便利です。

また、Figmaはシンプルで直感的なインターフェースのため、新人デザイナーでも学びやすい設計になっています。さらに、Figmaはプロトタイプ機能も備えており、コードを書くことなくデザインの動作やインタラクションをシミュレーションできます。これにより、クライアントやチームメンバーに完成イメージを共有することができます。

セキュリティ面でも、Figmaは高度なデータ保護を提供し、企業利用でも安心して使用可能です。例えば、データは複数のレイヤーで暗号化され、アクセス制限も細かく設定でき、安全な環境が保証されています。他にも、豊富なプラグインや拡張機能を活用することで、デザイナーの生産性を大幅に向上させることができます。

Figmaのメリット

Figmaのメリットは、まず無料で利用できる点が挙げられます。個人利用においては、無料プランでほとんどの機能が十分に利用できます。例えば、Web上で操作が完結するため、特別なソフトをインストールする必要がありません。これは、移動中でも場所を選ばずデザイン作業ができる大きな利点です。

さらに、複数人での同時編集が可能なため、プロジェクト全体の進行がスムーズになります。たとえば、チームメンバーが異なる場所からアクセスしてもリアルタイムで更新内容を反映できるため、情報の食い違いを防ぐことができます。加えて、多数のプラグインにより、機能を自由に拡張でき、独自のツールを作成することも可能です。

また、Adobeとの操作感の類似点もあり、将来的にAdobeツールに移行する予定があるユーザーにとっても学びやすい環境が整っています。これらの特徴により、Figmaは多くのデザイナーやチームにとって、効果的かつ効率的なデザインツールとなっています。

Figmaのプロトタイプ機能とは

Figmaの「プロトタイプ機能」は、実際のデザインで画面遷移やインタラクションの挙動を再現することができる機能です。例えば、ボタンを押した時にどのページに遷移するかを実際の動きで表現したり、シンプルなものであればメインビジュアルのアニメーションなども作成できます。Figmaでアニメーションを作成するには、基本的に「プロトタイプ機能」を使用する必要があります。

Figmaの基本操作

次に、Figmaの基本操作を解説します。

サインアップとログインの方法

まず、Figmaの公式サイトにアクセスし、「無料で始める」または「始める」ボタンをクリックします。次に、Googleアカウントを使ってログインするか、新しくアカウントを作成します。アカウントを作成する場合、表示名とFigmaの利用目的などを入力し、プラン選択画面で無料プランの「Starter」を選んで「Design with Figma」をクリックし、「Finish」を選べば初期設定は完了です。

Figmaを日本語設定にする方法

Figmaを日本語に設定する方法は、まずデスクトップ版のFigmaを開きます。画面右下にある「？」アイコンをクリックし、メニューから「Change languages」を選びます。すると、言語設定のダイアログが表示されるので、「日本語」を選び、「Save」をクリックして保存します。これでデスクトップ版Figmaの表示が日本語に切り替わります。

アカウント設定から変更する場合も手軽です。右上の自分のアイコンをクリックし、「Setting」メニューに進みます。「Account」セクションで「Language」の「Change languages」をクリックし、同様に「日本語」を選択して保存します。

ブラウザ版の設定もほぼ同じ手順です。右下の「？」アイコンかアカウント設定から、上述のステップを踏んで日本語に変更できます。

Webデザインの開始と保存方法

Figmaで新しいWebデザインプロジェクトを開始する方法は、まずFigmaにログインしたあと、「ファイル」メニューから「新しいデザインファイル」を選択します。これで、デザイン作成画面が表示されます。デザインは「フレーム」という単位で作成するため、左ツールバーの「フレーム」ツールをクリックし、画面右に表示される設定からデバイスサイズを選択するだけです。

Figmaはクラウドベースのツールであり、自動的にすべての変更が即座に保存されます。このため、保存忘れやデータ消失の心配がありません。Webブラウザ上で作業するため、どのデバイスからでもアクセス可能です。

例えば、会社のPCで始めたデザイン作業を自宅のPCで続行することも可能です。これにより、物理的な制約を超えた柔軟な作業スタイルが実現できます。

また、デザインの共有も簡単です。リンクを共有するだけで共同編集が可能になります。チームメンバーとリアルタイムでデザインを確認しながら作業を進めることができるため、コミュニケーションの効率が大幅に向上します。このように、Figmaの機能を活用することで、スムーズなWebデザインが実現可能です。

Figmaの機能の活用法

次に、Figmaの機能をより活用する方法を紹介します。

Figmaのオートレイアウトとは

Figmaが提供するオートレイアウト機能は、デザイン作業を効率化するための強力なツールです。直感的に使えるこの機能は、要素を自動配置することで、手動での微調整の手間を大幅に減少させます。具体的には、フレーム内の要素を縦・横に自動配置し、ボックスの大きさを固定するか自動で伸縮させることが可能です。この柔軟性により、デザインの一貫性が保たれ、要素の追加や削除があっても見た目が乱れることを防ぎます。

例えば、ボタンのテキストを変更した際にもオートレイアウトで全体のバランスが保たれるので、無駄な手直しが不要です。また、複数のオートレイアウトを組み合わせた構造を利用することで、さらに複雑なデザインにも対応可能です。たとえば、横並びのカード内に縦並びのテキストを配置することも容易に行えます。このようにFigmaのオートレイアウト機能を使うことで、デザイン作業が格段に効率化され、クリエイティブな時間を増やすことができます。

Figmaのバリアント設計

Figmaのバリアント機能は、複数のコンポーネントバリエーションを一元管理する便利なツールです。例えば、異なる色のボタンを作成する場合、それぞれ個別に管理するのは大変です。

しかし、バリアント機能を使えば、これらを一つのセットとしてまとめることが可能です。まず、既存のコンポーネント名を「button/blue」や「button/red」のように変更します。次に、これらを選択し「Combine as variants」ボタンをクリックします。複数のバリエーション軸がある場合は、軸にわかりやすい名前を付け、例えば「色」や「サイズ」に設定します。

これにより、デザインの一貫性が維持され、コンポーネントの選択や編集がスムーズになります。例えば、新しい配色パターンを追加・変更する際にも、一括で行えるのが大きな利点です。この柔軟な管理方法は、デザインプロセスの効率化に欠かせません。

Figmaでのワイヤーフレームの作り方

Webサイト構築のフローでは、デザインを作成する前にワイヤーフレームという画面設計書を作成することがありますが、ワイヤーフレームの作成にもFigmaは有効です。Figmaでは、ワイヤーフレームを以下の流れで作ります。

• 必要な情報を洗い出して優先順位をつける
• フレームタイプを決める
• コンテンツを配置する
• テキストスタイルを設定する
• 遷移を考える
• プロトタイプを作成する

それぞれの手順について解説していきます。

必要な情報を洗い出して優先順位をつける

ユーザーの要求を明確にするために、要求定義を通じて「何に対して」「何をしたいか」「なぜそれをしたいのか」「どのように意欲を図るか」を定義します。

要求が明確になると、それを満たすための機能として要件を定義し、画面ごとに構造を整理してサイトマップを作成します。

フレームタイプを決める

情報の設計が決まったら、次はFigmaで作業を始めます。まずはフレームを作成しましょう。フレームは特定のデバイスのデザイン領域であり、テキストや画像などのデザイン要素を含むキャンバスです。フレームのアイコンを選び、作りたい媒体に合わせてフレームを選びます。

例えば、webページの制作ならPCとスマホの2種類のフレームを作成しましょう。なぜなら、デバイスによって表示する文字サイズが異なるため、レイアウトを分ける必要があるからです。また、スクロールする長いページを作る場合は、作ったフレームの下辺をドラッグして縦のサイズを増やしておきます。

なお、この時点でデザイナーと相談してデザイン時に想定している画面幅でワイヤーフレームを作りましょう。

コンテンツを配置する

先ほど集めた情報に基づいて、コンテンツを配置します。シェイプツールとテキストツールを使って、全体のレイアウトを考えましょう。詳細な調整が必要な場合は、図形のサイズを数値で設定することもできます。この画像では具体的に作成していますが、最初はざっくりとどのエリアにどのような情報を載せるかを作成するだけでも十分です。

テキストスタイルを設定する

ワイヤーフレームを何ページも作成すると、テキストのサイズやスタイルを何度も設定するのは手間ですよね。選択していない状態で表示される「ローカルスタイル」のところからスタイルを追加しましょう。

特に「見出し・本文」などのフォントサイズの違いを設定しておくと便利です。ワイヤーフレームを作成中にサイズを変更したくなった場合も、この設定をしておけば一括で変更することができます。また、ワイヤーフレームは基本的にグレースケールで作成しますが、テーマカラーが決まっており、それを使用したい場合は色も設定することができます。

遷移を考える

作成したページの遷移経路を視覚的に把握するために、矢印を使ってつなげてみましょう。その際には、「AutoFlow」というプラグインを利用すると便利です。

プロトタイプを作成する

遷移方法を明確に試したい場合は、プロトタイプ機能を使用します。これまでの作業はデザインモードで行われていましたので、画面右上のプロトタイプビューボタンからプロトタイプモードに切り替えましょう。

プロトタイプを作成するためには、移動するボタンとなるシェイプを選択し、＋のマークから遷移させたい画面に矢印をつなげます。この際、右側のウィンドウで、どのようなインタラクションで遷移させるかを設定することができます。

Figmaの料金

Figmaには以下4つの料金プランがあります。

スターター	無料
プロフェッショナル	12ドル/月
ビジネス	45ドル/月
エンタープライズ	75ドル/月

スタータープランでは、個人で使用するDrafts内ではFileを無制限で作れるものの、Projectは以下の制限があります。

• Team内に作れるProjectは1つのみ
• Project内で作成できるFileは3つのみ
• ProjectのFile内で作成できるPageは3つのみ

Figmaとはクラウドベースのデザインツール

Figmaは、特にWebデザインやUIデザインに有用なツールです。クラウドベースで動作し、リアルタイムで共同作業ができるため、遠隔地にいるチームメンバーとも簡単に協力が可能です。例えば、プロジェクトに変更があった場合でもFigmaなら瞬時に全員に反映されるため、作業効率が大幅に向上します。

また、Figmaは多様なプラグインが提供されており、デザインの拡張性も高いです。セキュリティ面でも、Figmaはユーザーデータの保護に力を入れており、安心して利用できます。一般的なトラブルシューティングガイドも豊富にあり、初めて使う方でもスムーズに操作を学べます。具体例として、ある企業がFigmaを導入することで、デザインプロセスが50%短縮したという成功事例もあります。

ビビッドソウルは、リピート率90%超の「思いやりのものづくり」を提供するWeb・システム制作会社です。

業界経験豊富なディレクターが、webサイト制作をお手伝いさせていただきます。
webサイト制作について、ご要望の方はぜひ一度ビビッドソウルまでご連絡ください。

システム開発やアプリ開発、Webサイト制作などにご興味のある方は、お気軽にご相談ください。