オンラインでデザイン関連の作業が可能な本格的ツール『Figma（フィグマ）』をご存知ですか？ 無料でも使えるサービスなのですが、本格的な画像制作、UI/UXデザインや、複数人での共同作業などできるデザイン・画像編集ツールで、2018年のサービス公開以来注目をあつめています。
SketchやCacoo、Canvaといったサービスや、Adobe XDに似た機能をもち、何かと比較されたりと話題になる事が多いので、デザイナーや関連する業務に携わっている方ならすでに知っているという場合も多いかと思います。
当記事ではこのFigmaの基本機能と、ライセンス形態などのご紹介と、本職のデザイナーでなくても簡単に使える！という点をご理解いだけるように、ライターである筆者がTwitterのヘッダーアイキャッチ画像作成してみました。
初心者の方でもわかりやすいよう、手順を追って解説していますので参考となれば幸いです。
そもそも……Figmaって何？
『Figma（フィグマ）』は、ブラウザ上で簡単にデザインができるツールです。
主な機能・用途として……
- インターフェースのデザイン（UI/UX）
- webサイトのワイヤーフレーム作成
- webページデザイン
- バナーデザイン
- アイキャッチデザイン
- etc.
……といった事をWebブラウザだけで行うことができます。
冒頭でも書きましたが、Sketch（https://www.sketch.comAdobe）や、Adobe XD（https://www.adobe.com/jp/products/xd.html）というアプリケーションと似た機能を持っていますので、これらのソフトを利用したことのある方であれば、Figmaで出来る事も概ね想像がつくのではないでしょうか。
また、デザインを本職としていない方でも、身近なイベントや記念日のチラシや、SNSの画像を作成したりと画像を作りは多いと思うのですが、そんな時にも活躍します。複数人で同時に編集したりといった事ができるので、共同作業が必要な時にも活躍します。
また、Webブラウザだけでなく、同等の作業を行えるデスクトップ用アプリや、閲覧用のスマートフォンアプリなども提供されています。
プレビュー用のスマートフォンアプリ（iOS/Android）も提供されている
難点としては、2021年8月現在も英語のみでのサービス提供という点。 言語の変更機能など公式に提供されていないので、しばらく日本語化はされる事はなさそうです。 各種操作（UI）が英語なので、不便と感じるは多いかもしれません。
補足：Chrome用 Figma日本語化拡張機能
2021年8月現在、Webブラウザ版であれば、有志（junkawa氏）により作成・提供されているChrome用日本語化拡張機能を使う事で日本語化が可能です。 前述のアプリ版には使用できませんが、やはり日本語化したい……という方は試してみるのもよいでしょう。
ライセンスと機能制限について
Figmaは基本的には無料で利用できます。 ……『基本的に』なんて書くと、なんだやっぱり無料では全部の機能が使えないのか……なんて思う方も多いと思いますが、Figmaは『基本的には無料で個人なら十分使えるサービス』です。
この記事でご紹介している使い方についても、無料でできるのでご安心ください。
https://www.figma.com/pricing/ より
なお、無料の『Starter（スターター）プラン』の内容を日本語翻訳すると……
- 無制限のドラフトファイル
- 無制限の閲覧者＆コメント投稿者
- 最大3つのチームまで制作可能
- チーム内に作成できるプロジェクトは1件まで
- 編集者の人数制限なし
- バージョン履歴が30日保存される
- 無制限のクラウドストレージを利用可能
とあります。
使用する前はやや難解ですが、Figmaでは『チーム（Team）』の中に『プロジェクト（Project）』を作成し、その中でデザインファイルを管理します。 なお、デザインファイルはチーム1件に対して1プロジェクト、1プロジェクトにつきファイル3つまで、という制限があります。
つまり、無料版ではチームは3件まで作成できるので、最大9つのファイルまで作成できるという計算になります。
これらの制限を解除した『Professionalプラン（月額15ドル、または年額144ドル）』や、より組織的な機能が解放される『Organizationプラン（年額450ドル）』なども提供されていますので、本格的な業務として利用される方は検討してみるのも良いでしょう。
Figmaで出来る事
では具体的にFigmaで何ができるか……ですが、基本的にはグラフィックデザインツール（＝道具）ソフトウェアなので、用途は使う人次第。 提供されている機能の中で作成できるものに制限はありませんが、基本テンプレートや書き出し機能、共有機能によって得意な作業が存在します。
その中でも代表的なもの、使用頻度の高いものを紹介していきましょう。
webサイトのワイヤフレーム作成に
Webサイトデザインの骨格とも言えるワイヤフレームを作成するための機能が豊富で、この点においては不便を感じることは少ないでしょう。
webデザインに携わる方なら説明不用かもしれませんが、『ワイヤーフレーム』と呼ばれるものの制作工程は、webサイト構築プロジェクトの比較的初期の過程……デザインやhtmlコーディングの前段階で作成されるものです。
写真や装飾などはひとまず置いておいて、シンプルな図形やダミーテキストなどで、それぞれの要素の配置や見せ方を仮組し、こクライアントに見せて確認をとったり、デザイナーやコーディング担当、プログラマーなどにwebページの構成を確認してもらい、相互にすり合わせをしていくような用途で作成します。
Figmaではこのワイヤーフレームを作成するための機能やアセット（パーツ）が用意されているほか、第三者によるテンプレートも豊富に公開されています。
より高度な使い方としては、ワイヤーフレームを元にページ同士の遷移を明示したり、アニメーションを疑似的に表現したり、さらには要素別のCSS Codeを表示してくれたりと、Web構築全般の作業を効率化する事ができます。
アプリのUI/プロトタイプ デザインに
アプリケーションデザインのプロトタイプを作る為のテンプレートや機能も充実しています。
- アプリのインターフェース（UI)
- ボタンをタップすることでどう遷移するのか
- 同じく、どういったアクションが引き起こされるかの推移を表現
といったものを表現することが可能です。Figma単体でアプリケーションのプログラム/コーディングまで進むことはできませんが、実装の一歩手前まで進めることができます。
アプリのデザインでよく使うアセットも用意されています。
多機能ペイントソフトとしても
上記のように、デザインの業務にも実用可能な機能を搭載したFigmaですが、無料であるという点と、Webブラウザで簡単に利用できるという点から、本職のデザイナーでなくてもこのサービスの恩恵をたくさん受ける事ができます。
たとえば、Windowsを利用している方なら、デフォルトで搭載されている画像編集ツールとして『ペイント』を利用している方も多いのではないのでしょうか？ シンプルな機能で軽量と使い勝手がいいので、頻繁に使っている方も多いと思います。 （Macをご使用の方なら、『プレビュー』の画像編集機能が同等の機能を持っているでしょうか）
シンプルで便利ですが……
ただ、少し複雑な画像編集などが必要になってくると、途端に作業が大変になってきます。 例えば2つの画像を並べて表示したい時などは……
- ベースとなる画像編集領域の余白部分を広げて保存
- 合成したい画像を開いてコピー
- 再度ベースとなる画像を開きペースト
といった工程を経る必要があります。 また、レイヤーという概念がないので、ある画像の上に他の画像を重ね、さらに重ねた画像をずらそうとすると、ずらしたあとに空白が発生してしまったり、画像を少し傾ける、なんて作業も苦手でだったりします。
こういった不満を一気に解消してくれたのがFigmaでした。
広いキャンバスの中で……
- 画像の加工
- 編集
- 合成
- テキスト入力
- 図形の追加
- カラーフィルター
などが思いのままにできてしまう事に感動したものです。
さらに、画像やテキストの編集能力が上がることで、ライター業務に必要だった色々な作業にも応用しています。 例えば……
- 伝票の作成・修正
- 本文中の掲載画像の加工や修正
- 本文中の図面製作
- 文章からの個人情報消去
パソコンのスペックもあまり必要とせず、Webブラウザ経由で直感的に操作できるUIのおかげで、PhotoShopのように導入のハードルが高いということはありません。
難点と言えば、PDFを画像として扱うことができない（2021年6月現在）ことぐらいでしょうか。 PDFを画像として取り込みたい場合は、拡張子変換やスクリーンショットを取るなど、ファイルタイプ自体をPNGやJPGに変換する必要があります。
実践！ TwitterのヘッダーをFigmaで作ってみる
さて、それでは実際に、筆者がTwitterのヘッダー（カバー）画像を作成する工程を追って、Figmaの機能をご紹介してみましょう。
Twitterのヘッダー画像は横1500×縦500ピクセルが推奨されています（Twitter公式ドキュメントより）ので、このサイズにあわせたヘッダー画像を制作します。
Figmaで作業するにあたって用意した素材と完成画像は下記のとおり。
『ノートパソコンの写真』と、『砂浜の写真』、そしてFigmaで作成した矩形（四角形）と、テキストを使って作成します。
解説に使用した画像の入手について
ふたつの写真は以下よりお借しています。
- ノートパソコンの写真（Skitterphoto. Rechner, Laptop, Arbeitsplatz, Maus, Büro, Internet, Pc)
- 砂浜の写真 (Aaron Burden. Published on September 7, 2016)
両方とも、商業/非商業ともに許可不要で利用（※）できますので、お手元のPCにダウンロードしておくと。解説にそって手順を追いやすいと思います。
※詳しい利用範囲はリンク先でも確認ください
新規デザインファイルを作成
まずFigmaにアクセスし画面右上の[+NEW] ボタンをクリック後、 [Design file]をクリックし、新しいファイルを作成します。
ファイル編集の基本画面が表示されるので、ここで各種作業を行います。
上記の図のように、
- 上部メニュー 各種ツール（機能などを切り替えるツールバー)
- 左サイドバー（写真や矩形などの位置関係を表すレイアウトパネル）
- 中央カラム（作業領域 キャンバス）
- 右サイドバー（各オブジェクトの座標や数値、設定を調整するプロパティパネル）
と別れています。
以下に続く解説で、左サイドバー、右サイドバー、上部メニューなどと記載いたしますので、上記の図をあらかじめ確認ください。
Frameを作成
それではファイルの制作画面に[Frame]を作成します。 このFrame内で作業した内容は、最終的に1つの画像としてJPG・PNG・PDFなどの形式で出力できるようになります。
上部メニュの＃のようなマークをクリックし[Frame]を選択、画面中央でドラッグ＆ドロップする事でFrameを作成します。
Frameのサイズや座標など右サイドバーのW（横）、H（高さ）欄に数値を入力する事で調整可能です。 今回はTwitterのヘッダーの解像度に合わせ、Wに1500、Hに500を入力しましょう。
なお、作業時に分かりやすいよう、Frameに名前を付けておくこともできますが、今回の例ではFrame９（※）という名前で解説します。
※筆者がたくさんのFrameをキャンバス中に作成しているため、自動的に名付けられた９つめのFrameです（笑）。 名前は同じにしなくても大丈夫です。
素材となる写真データをFigmaに読み込む
次に、あらかじめ用意しておいた写真をFigmaに読み込ませます。 上部メニューの左から4つ目のアイコンをクリックし、[Place Image]を選択すると、パソコンに保存しておいたデータをアップロードする事ができます。
（写真では [□]）をクリック後、[Place Image]をクリック
読み込ませたい画像ファイルを選択する
これで、Figma上に画像が読み込まれます。
砂浜の写真の2枚をアップロードしました
なお、パソコンに保存した画像をWebブラウザのFigmaタブに直接ドラッグアンドドロップしてアップロードする事も可能です。 こちらの方が簡単ですが、Webブラウザの設定や環境によっては上手くいかない場合もあるようなので、両方の方法を知っておくと良いでしょう。
読み込んだ画像をFrame内に配置する
続いて、読み込んだ画像をFrame9内に配置します。 これも特に悩むことなく、画像を1度クリックして選択し、Frame内にドラッグして移動させるだけ。 今回はノートパソコンの写真を、Frame9内の左側に。 砂浜の写真を右側に配置しました。
図形を配置して文字の背景を作る
続いては、文字を配置する為の背景を作ります。 写真以外にも矢印（Arroｗ）や線（Ｌｉｎｅ）、多角形や円などさまざまな図形を描画できるFigmaですが、今回は四角の矩形（くけい）を配置し、角を丸くして文字の背景にしたいと思います。
まずは、前工程で写真を読み込ませた時と同じく、上部メニューの左から4つ目のアイコンをクリックし、Rectangleを選択しすると、キャンバスに矩形を作成する事ができます。
Rectangleツールを選択後、中央の作業領域内の好きな所をクリックすると、正方形の矩形が作成されます。 （この時ドラッグアンドドロップで任意の形にする事も可能です）。 作成した矩形は角や辺をドラッグする事で大きさを変えたり、回転させたりする事ができます。
ドラッグで回転できる
例では、45度に回転させた
ここまでの作業で、Frame9には、2つの写真+１つの矩形＝合計3つの要素が入っている事になります。 左サイドバーのLayersをクリックすると、このFrame内のLayer（レイヤー＝階層）構造が確認できます。
上位に表示されているものが、画像の中でも上に表示される。
Layers構造の上位に表示されているものが、そのまま画像の中でも上に表示されるので、画像や図形などを重ねてデザインしたいときには、この機能が役に立ちます。 なお、この重なり順はLayersに表示されている画像/図形名を上下にドラッグすることで変更する事ができます。
つづいて、45度に回転させた図形の角を丸くしましょう。 デザイン用語では『角丸（かどまる）』と呼ぶそうです。
先ほど回転させた矩形を選択した後、右側のサイドバーのConer Radius欄に数値を入力する事で角の丸さを調整する事ができます。
この数値は、角丸の半径となりますので、数値を大きくすればするほど丸みが増します。 今回の例では400×400pxの矩形に対して60pxのConer Radius（角丸）を設定しています。
さらに矩形の色をかえてみましょう。 右サイドバー下部のFill（塗り）の欄、6桁の英数字の左側にある四角い箇所をクリックすると色を設定できるピッカーが表示されますます。
この6桁の英数字は色をRGBのカラー値を16進数で表したものなのですが……なんのことやらわからない、という方も安心ください……表示されたピッカーで色を選択すれば自動的に英数字が切り替わりますので、簡単に色を変更する事ができます。 今回は白（FFFFFF）と設定しました。
以上で文字の背景は一旦完成。 文字入れは置いておいて、さらに背景の写真を加工していきます。
読み込んだ写真画像の必要な個所だけ切り取る
配置した2つの写真画像を綺麗に見せるため切り取り（クロップ＝Crop）をしてみましょう。
画像をダブルクリックすると、『Image』と記載された画像の編集メニューが表示されます。 この左上にあるFillと表示された箇所をクリックすると、4つの選択肢が表示されるのでCropを選択します。
2.画像編集メニューの左上にあるFillの箇所をクリック
すると、画像をCropするための青い囲いが表示されるので、これをマウスで操作してFrameの左右中央あたりで、砂浜の写真が切り抜かれるように調整します。
Cropする場所が決まったら、キーボードのEnterキーを押せば画像がCropが反映されます。 なお、このCropはもう一度画像をダブルクリックする事で切り抜き位置や大きさを調整できますよ。
テキストの背景を応用して、写真にエフェクトをかける
続いて、先に作成したテキストの背景を応用して写真にエフェクトをかけてみましょう。
作成した矩形を選択してキーボードでコピー＆ペースト（Ctrl+C > Ctrl+V）またはCtrl+Dと操作して、矩形を複製します。
この複製した矩形はFrameの左端に移動させて、矩形の右上の辺をドラッグして正方形を長方形に変更します。
矩形の形も変更しました
この左端の矩形をさらに複製して、Frameの右端に配置します。
つづいて、右側の矩形の色と合成モードを変更します。
右側の矩形をクリックした状態で、右サイドバーのFill欄から色を明るい緑（0FD6E）に設定。
さらにその上にあるLayer欄の『Pass throughl』と表示されている箇所を選択し、この矩形の合成モードを『Soft Light』に変更します。
このLayer欄では各要素が重なっている箇所の表現を色々変更できるのですが、Soft Light変更すると、その名の通り柔らかな光のような効果になります。
左の矩形も同じ設定をします。
テキストツールでタイトルを作成する
いよいよ最後の仕上げです！ 中央に作成した矩形の上に、テキストツールで文字を入力し、タイトルを作成しましょう。
上部のメニューにある『T』アイコンをクリックし、Frame上の任意の場所をクリック。 文字を入力できるようになるので『in the Future…』と入力し、右サイドバーのText欄でフォントの種類、文字のウェイト（太さ）、文字サイズ、行間などの項目を設定して見栄えを整えていきます。
赤く囲った箇所、上から……
フォントの種類： Roboto、ウェイト： Bold（太字）、文字サイズ：96、行間： 88.2％ と設定
※テキストは日本語でも入力可能でが、日本語に対応したフォントを選択する必要があります。
デフォルトで対応しているフォントは
Noto Sans JP/Noto Serif JP/YuGothic/YuKyoKasho/YuKyokasho Yoko/Yumincho/Hiragino Kaku Gothic Pro/Hiragino Maru Gothic Pro/Hiragino Mincho Pro/Hiragino Sans/Mplus 1p/Sawarabi Mincho/Sawarabi Gothic/A-OTF Futo Go B101 Pr5/A-OTF Futo Go B101 Pr6/A-OTF Futo Go B101 Pr6N/A-OTF Futo Go B101 Pro/G-OTF Futo Go B101 Pr6/G-OTF Futo Go B101 ProN/U-OTF Futo Go B101 Upr
ここまでの工程で25分ほど、ひとまず完成です。
FrameをPNGファイルにエクスポート（書き出し）する
最後に、Figmaで作成したファイルを画像として書き出します。
左サイドバーでFrame9を選択した後、右サイドバーの最下部Exportをクリック。 さらにその下に表示される 『Export Frame9』を選択すると、画像を保存するウインドウが開き、パソコンに1枚の画像として保存する事ができます。
2.右サイドバーのExportをクリック、
3.Export Frame 9 をクリック
以上で書き出しが完了しました。 今回はPNGという画像形式で保存しましたが、JPEGやSVG、PDFなどでも保存可能です。
あとは、ご自身のTwitterアカウントのプロフィール編集画面から、作成したヘッダー画像をアップロードして適用すれば作業完成です。
画像をトリミング（切り取り）しないで、デザインしたものがそのまま掲載されます。
まとめ Figmaで快適な画像加工ライフを
当記事では、何かと便利な無料デザインツール『Figma』の概要と、筆者が実際にTwitterのヘッダーを作成する手順をご紹介しました。
筆者がライターの仕事をしていると、業務で画像加工が必要になるシーンは結構ありますが、専用のソフトウェアを購入するほどでもない……というような状況で、Figmaの存在はとても助かっています。
無料であれば、１つのファイル内に複数のFrameを用意して画像を作成するなどして使えば、制限をほとんど気にせず画像を作成する事ができます。 実際筆者もしばらくはそのような形で利用していたので、本格的に使い込んで、どうしてもプロジェクトやファイル数を増やしたい……という事になったら課金を検討してみる、という使い方でよいのではないでしょうか。
最後に公式サイトを含めて便利なリンクを掲載しておきます。 当記事が皆さんのよりよりFigmaライフの助けになれば幸いです。
関連リンク
- Figma 公式サイト（英語）
- Figma 公式ブログ（英語）
- Figma 公式ヘルプ（英語）
- Figma 公式フォーラム（英語）
- Figma 公式YouTubeチャンネル チュートリアルなどが豊富です。 英語ですが、さらっと見てるだけでもできる事について理解を深められます。
- Figma 公式テンプレート集 作りたいものがあれば、ここで基本テンプレートを探してみましょう。 作業効率や青果物のクオリティが段違いに良くなります。
