Web制作で知っておくべきFigmaの学習 #Day01「Figmaって何？」

Figma使ってます？ え？使ってないの？ それはもったいない。 「Web制作で、デザインをする人が使う」というイメージが強いFigmaですが、 結構いろいろな場面で使えるんですよ。 仕事で使えば、提案資料や、DTPデータ、アプリのUI・・・など、 色々な用途で使えるアプリなんですよね。 そして、Figmaで作ったデータは、色々なデータタイプで出力できるし、 URLで、複数人と共有できたりもします。 Web制作とは親和性が高いので、使っている人も多いと思いますが、 まだまだ知らないという人も少なくありません。 Photoshop、Illustlaterを覚えた人は、次はぜひFigmaを覚えるのがいいと思いますよ。 単純に、ボタンやアイコンなどの素材を作る程度でも使えるし、 無料でかなりのことができてしまうのも魅力なので、 今回から日別にチュートリアルを元に学習できる内容をこのブログで提供したいと思います。 １からFigmaの学習をしたいと思っている人は、全部で25日のカリキュラムを用意していますので、 1ヶ月弱の無料スクールに通うつもりで、学んでみてください。 実際に、この記事を書いている自分も、現時点でそこまで深くFigmaを使いこなしているわけではないので、 同時に学習しながらブログ形式で進めていきたいと思います。

FigmaはWebデザインをするためのソフト……なのか？

Figmaについて調べると、WebサイトやスマートフォンアプリのUIデザインに使われていることが多い。 実際、Web制作の現場ではかなり身近な存在になっています。 例えば、Webサイトを作る場合、

企画 ↓ デザイン ↓ コーディング ↓ 公開

という流れがあるりますが、 この「デザイン」の部分でFigmaが使われるケースが多いんです。 画面のレイアウトを考えたり、文字や画像を配置したり、ボタンを作ったりするから、 「Figma＝Webサイトのデザインを作るソフト」 と考えてしまうのも無理はないと思います。 しかし、これだけだとFigmaの一番面白いところを見落としている気がする。 なぜならFigmaは、Webサイトだけではなく、スマートフォンアプリや業務システム、SaaSなどの画面設計にも使えるからです。 さらに、画面そのものを作るだけではない。 「ユーザーがここを押したら、次にどこへ行くのか」 といった操作の流れまで作ることができる。 つまりFigmaは、 「完成したデザインを描くためだけのソフト」ではない。 ここが、今回の学習で重要なんですね。

PhotoshopやIllustratorとは何が違うのか？

Figmaを理解するために、他のデザインツールと比較してみたいと思います。 もちろん、それぞれ得意分野が違うので、単純に「どれが優れている」「これが一番いい」という話ではないので、その点を理解してください。 例えばPhotoshopは、写真を加工したり画像を編集したりすることが得意。 Illustratorは、ロゴやイラスト、図形などを扱うことに強い。 一方、Figmaは画面やUIを構成することに向いている。 ここで面白いのは、Figmaでは、 「この画像をここに置く」 だけではなく、 「この情報をこの順番で見せる」 「このボタンはこういう状態になる」 「この画面から次の画面へ移動する」 といったことまで考えられることなんです。 つまり、単純に「絵を描く」というよりも、情報や要素の関係を組み立てていく。 この感覚は、これからFigmaを学ぶうえでかなり重要になるんですよ。

Figmaは「画面を作る場所」だけではない

例えば、スマートフォンアプリを作るとする場合。 いきなりプログラムを書き始めるのは大変ですよね。 そこで、まず、

ログイン ↓ ホーム ↓ 商品一覧 ↓ 商品詳細 ↓ 購入

という流れを考える。 この段階では、まだプログラムは必要ないんです。 「こういう画面があって、こういう順番でユーザーが操作する」 というアイデアを目に見える形にしておけばいいじゃないですか。 Figmaは、こういう事にこそ使うソフトと言ってもいいと思います。 さらに、実際にボタンを押して画面を移動するような「プロトタイプ」を作ることもできる。 すると、 「あれ？この画面から戻れないぞ」 とか、 「この操作をしたあと、ユーザーは何をすればいいんだ？」 といった問題を、実際に開発する前に発見できる。 あと、Web制作を仕事でしたことがある人なら誰でも経験したことがあると思いますが、実際の現場では、次のようなことがよく起こります。

デザイン画像をクライアントに送って、OKをもらったはずなのに、 実際にコーディング（プログラミング）を行った後で、「やっぱりこっちに変更」と気軽に変更されてしまう。

コーディングをしたあとからの変更はかなり大変な作業になってしまいます。 そんな時に、Figmaであれば、中の構成をチョチョッと変えてしまうだけで対応が完了してしまいます。 なぜこういうことが起きるのかというと、画像ファイルでみたものと、実際にブラウザで表示して見たもので、印象が変わってしまうからですね。 見た目が一緒のはずなのに、ブラウザで見た瞬間に、クライアントは本番公開したイメージが湧いてきて、ユーザー視点でページを見始めます。 これで、修正して欲しい要望がどんどん出てきやすくなるんですよね。 そう考えると、Figmaは、 デザインの段階で、クライアントの要望を引き出すことができるツール と言ってもいいかもしれません。

FigJamというものもある

Figmaを調べていると、FigJamというものも出てくる。 Figjamページ これもFigmaと関係しているんです。 FigJamというのは、いわゆるホワイトボードのようなもので、次のようなことができます。

・アイデアを付箋で並べる ・マインドマップを作る ・ユーザーの行動を整理する ・サービスの構造を考える ・チームでアイデアを出す

ここまで来ると、ますます「Figma＝デザインソフト」という説明では足りなくなってくるのがわかりますよね。

考える。 整理する。 設計する。 そして、それを人に見せる。

その過程全体にFigmaの世界では構築できるんですよ。

「デザイン」の意味を少し広く考えてみる

そもそもデザインとは何なのかという事も考えてみたいと思います。 一般的には、「見た目をきれいにすること」というイメージがあるはずです。 もちろん、それもデザインの一部なんですよね。 でも、例えば自動販売機のボタン配置を考えてみた場合。 ボタンがきれいに並んでいるだけでは十分ではないんです。

「どのボタンを押せばいいのか」 「何を選択しているのか」 「購入するとどうなるのか」

が分かりやすくなっている必要があるんです。 これは見た目だけの問題ではなく、情報の整理や、操作の分かりやすさも含まれているんですよね。 そう考えると、デザインとは、 「何かを分かりやすく、使いやすく、伝わる形に設計すること」 とも考えられます。 そしてFigmaは、その「設計する」という部分を視覚的に扱いやすくしたツールという事です。

実際にFigmaを開いてみる

ここまで考えたところで、実際にFigmaを開いてみましょう。 Figmaサイト 今の時点ではまだ、立派なWebサイトを作らなくていいです。 まずは画面を眺めてみましょう。 そして、「これは何の機能？どういう意味？」と思ったところを探してみましょう。 例えば、

・何もない広い場所 ・左側にある一覧 ・上にあるツール ・右側にある設定項目 ・ページのようなもの ・オブジェクトらしきもの

などがあると思いますが、最初は全部理解する必要はないんです。 今回の目的は、Figmaの画面を覚えることではなく、 「Figmaという世界には、どういうものが存在しているのか」を観察すること。 ですからね。

今日の段階では「何ができるか」だけ覚えておく

Day01の目的は、ざっくりと、 「Figmaでは、以下のようなことができる」 という事を理解してもらえるといいと思います。

Figma ├─ デザインを作る ├─ UIを設計する ├─ 情報を整理する ├─ プロトタイプを作る └─ アイデアを視覚化する

サイトにアクセスして、 ログインして（Googleログインが楽でいいです） 画面を立ち上げてみるぐらいで十分です。 もしかしたら、AIと対話して、簡単なページを作ってもらうぐらい操作すると、Figmaの手軽さがわかるかもしれませんね。

Figmaの本質は「描くこと」ではなく「考えること」

Figmaには、図形を描く機能があります。

文字も書ける。 画像も置ける。 色も変えられる。

でも、それだけなら他にもいろいろなソフトがありますからね。 Figmaの面白さは、その先にある。

「この情報はどこに置くのか」 「この要素とこの要素はどういう関係なのか」 「画面の大きさが変わったらどうなるのか」 「同じ部品をどうやって再利用するのか」 「ユーザーが操作したら何が起こるのか」

こういうことを考えながら、目の前の画面に落とし込んでいく。 つまり、Figmaを使うことは、頭の中にあるものを視覚化していくことです。 この感覚を持った状態で、次回から実際のFigmaの構造を見ていきましょう。

あとがき

Web制作を使ったノーコードツールのStudioや、デザインに特化したCanvaなど、いろいろなツールが溢れています。 でも、Figmaは、かなりWeb制作よりのツールなので、これからWeb制作を副業や、転職などで考えている人であれば、 真っ先に学習しておく事をオススメしたいですね。 乱暴な言い方をすれば、コーディングが苦手な人であれば、HTML出力などの機能で、そのままホームページとして納品することも可能になります。 実際にWeb制作を仕事でやっている自分としても、クライアント打ち合わせで、Figmaデータでのやりとりが効率的に進められることが多いので、 深く熟知しておくツールとしても考えています。 これから、今回の内容では、ザックリとした理解しかできないかもしれませんが、 機能を一つずつ触っていくことで、Figmaの学習を進めていこうと思います。