Strategy / Design

このページの先頭へ

Insight

Web制作のさまざまな情報をご紹介

Figmaとは?“発注する人・作る人・学ぶ人”の立場別にできること/できないことを整理

「制作会社からFigmaのリンクが届いたけれど、何をすればいいのかわからない」「Figmaという名前はよく聞くのに、何のツールなのか説明できない」。Webサイトやアプリの制作に関わり始めると、多くの方がこの壁に突き当たります。

Figmaとは、ブラウザで動く共同編集型のデザインツールです。ただし、あなたが発注する人なのか、作る人なのか、学ぶ人なのかによって、Figmaでできること・やるべきことは大きく変わります。

本記事では、Figmaとは何かを初心者にもわかりやすく解説したうえで、3つの立場別に「できること/できないこと」を整理していきます。自分の立場の章だけ読んでも役立つ構成にしました。

Figmaとは?初心者にもわかりやすくいえば「ブラウザで開ける共同編集型のデザインツール」

Figmaとは、Webサイトやアプリの画面デザインを作るためのツールであり、最大の特徴はWebブラウザだけで動き、複数人が同時に同じデータを編集できることにあります。まずはこの一文の意味を、順番にほどいていきましょう。

「ブラウザで開ける」とはどういうことか

従来のデザインソフトは、パソコンにインストールして使うのが当たり前でした。ソフトを持っていない人はデザインデータを開くことすらできず、確認のたびに画像やPDFへ変換して送る手間が発生していました。

Figmaは、ChromeなどのWebブラウザさえあれば動きます。デザインは1つひとつがURLを持ったページのようなもので、リンクを送れば相手はクリックするだけで最新のデザインを見られます。ソフトの購入もインストールも不要、WindowsとMacの違いも気にしなくてよい。この身軽さが、Figmaが世界中のWeb制作現場に広がった土台になっています。

日常的に使う制作者向けにはデスクトップアプリ版も用意されていますが、どちらで開いても同じデータにつながるため、環境の違いを意識する場面はほとんどありません。日本語表示にも対応しており、英語が苦手な方でも安心して使い始められます。

さらに、Figmaには無料プランがあります。個人の学習や小規模な利用なら費用をかけずに試せるため、「まず触ってみる」までのハードルが極めて低いのです。高価なソフトを全員分そろえる予算稟議から始めなければならなかった時代と比べると、デザインを取り巻く環境は大きく様変わりしました。

「共同編集型」とはどういうことか

もう1つの柱が共同編集です。Figmaでは、同じデザインファイルを複数人が同時に開いて、同時に編集できます。画面上では他のメンバーのカーソルが動く様子まで見えるため、オンライン会議をつなぎながら「ここをこう直しますね」とその場で修正する、といった進め方が成立します。

この仕組みは、Web制作にありがちなトラブルを根本から減らしてくれます。かつては「サイトデザイン_最終版_修正3.psd」のようなファイルが乱立し、どれが最新かわからなくなる事故が頻発していました。Figmaならデータはクラウド上の1か所だけにあり、全員がつねに同じ最新版を見ています。メールでのファイル往復も、バージョンの取り違えも起こりようがないのです。

リモートワークの広がりも、共同編集の価値を押し上げました。社内のデザイナー、外部のWeb制作会社、発注側の担当者。場所も所属も異なるメンバーが同じ画面を見ながら話せる環境は、打ち合わせの質そのものを変えます。いまや国内外の多くの制作現場でFigmaが標準ツールとなり、Webデザインの共通言語と呼べる存在になっています。

身の回りにあるFigmaの成果物

Figmaで作られたものは、実は毎日目にしています。スマートフォンアプリのボタンや画面レイアウト、企業サイトのデザイン、Web広告のバナー。こうした「画面の見た目」の多くが、公開される前にFigma上で設計されています。

料理にたとえるなら、Figmaで作るデザインは完成写真つきのレシピです。どんな見た目に仕上げるか、材料(写真や文字)をどう配置するかまでは決められますが、レシピだけでは料理は食べられません。実際にWebサイトとして動かす調理の工程、すなわちコーディングや開発は、Figmaの先にある別の仕事です。この線引きは記事全体を貫くポイントなので、頭の片隅に置いておいてください。

Web制作会社にサイト制作を依頼すると、デザイン確認の場面で高い確率でFigmaのリンクが送られてきます。「Figmaとは何か」を知っておくことは、いまや発注側にとっても実務知識のひとつになっているのです。

Figmaでできること・できないことはWeb制作の工程で決まる

立場別の整理に入る前に、Web制作のどの工程でFigmaが使われるのかを押さえておきましょう。Figmaでできること・できないことの境界線は、そのままWeb制作の工程の区切りと重なっているからです。

Web制作の5つの工程とFigmaの守備範囲

一般的なWeb制作は「企画→構成設計→デザイン→開発→公開」という流れで進みます。このうちFigmaが主戦場とするのは、構成設計からデザイン、そして開発への受け渡しまでです。前後の工程、すなわち企画の立案と公開後の運用は、Figmaの外側にある仕事です。

構成設計の段階では、ページのどこに何を置くかを枠と線で示すワイヤーフレームを作ります。デザインの段階では、色や写真・文字を組み合わせて完成イメージ(デザインカンプ)を作り込みます。さらにFigmaには、画面同士をつないで本物のサイトのように操作を試せるプロトタイプ機能があり、「ボタンを押すと次の画面へ進む」といった動きを開発前に確認できます。

プロトタイプの価値は、手戻りの予防にあります。開発が終わってから「想像と違った」と気づくと、修正には大きな時間と費用がかかります。開発前の段階で操作感まで確かめておけるからこそ、後工程のやり直しを減らせるのです。

開発の段階に入るときは、デザインで使った色・余白・サイズの数値や画像素材を、開発者がFigmaから直接取り出せます。かつては「この余白は何ピクセルですか」という確認のやり取りが延々と続いたものですが、開発者が自分でFigmaを開いて確かめられるようになり、デザイナーと開発者のあいだの伝言コストは大きく下がりました。デザイナーから開発者への受け渡しまでがFigmaの守備範囲、と覚えておくと全体像がつかめます。

Web制作の工程とFigmaがカバーする範囲を示した図

Figmaが得意なこと

工程に当てはめると、Figmaでできることは自然と整理できます。Webサイトやアプリの画面デザイン、ワイヤーフレームやプロトタイプの作成、そしてURLひとつで完結する共有とコメントのやり取り。この3つがFigmaの中核です。デザインを作る機能と、デザインについて話し合う機能が同じ場所にある。この組み合わせこそが、単なる作画ソフトとの違いです。

加えて近年は、ホワイトボード機能でのアイデア出しや、プレゼン資料の作成など、デザイン以外の共同作業にも領域を広げています。企画会議のメモから画面デザイン、確認用の資料までが1つのツールの中でつながる環境が整いつつあり、関係者が行き来するツールの数そのものが減ってきているのです。

Figmaにはできないこと

一方で、Figmaにできないことも明確です。

最も重要なのは、Figmaでデザインを作っただけでは、実務レベルのWebサイトは完成しないという点です。デザインを簡易的にそのままWebへ公開できる機能も近年登場していますが、企業サイトに求められる表示速度・検索対策・システム連携まで満たすには、HTMLやCSSによるコーディング・開発の工程が依然として必要です。

また、人物写真の補正や合成といった本格的な画像加工、紙のパンフレットなど印刷物の入稿データ作成は、PhotoshopやIllustratorといった専門ソフトの領域です。Figmaはクラウドサービスなので、インターネットにつながらない環境では基本的に使えないことも覚えておきましょう。公開後のサーバー管理やアクセス解析も、Figmaの役割ではありません。

たとえば、ホテルを運営する会社がサイトリニューアルの見積もりを取る場面を思い浮かべてください。見積書に「デザイン費」と「コーディング費」が分かれて並ぶのは、まさにこの工程の区切りがあるからです。境界線を知っておくだけで、Web制作会社との会話は格段にかみ合うようになります。

発注する人にとってのFigmaとは|デザイン確認でできること・できないこと

Web制作を発注する立場の方にとって、Figmaとは操作を覚えるツールではなく、制作会社との認識合わせを速く正確にする窓口です。必要なのは「見る・コメントする・承認する」の3つだけ。デザインを作るスキルは一切求められませんし、身構える必要もありません。

発注者ができること|見る・コメントする・試す

いちばん基本の使い方は、送られてきたURLを開いてデザインを確認することです。制作会社がリンクを共有すると、ブラウザで開くだけで常に最新のデザインが表示されます。共有設定によってはアカウント登録すら不要で閲覧でき、必要な場合でも無料アカウントを数分で作れば済みます。「専用ソフトを買わされるのでは」という心配は無用ですし、パソコンだけでなくスマートフォンやタブレットからも閲覧できるため、外出先で急ぎの確認を求められても対応できます。

次に覚えたいのがコメント機能です。デザインの気になる箇所をピンポイントで指して、「この写真を差し替えたい」「この色をもう少し落ち着かせたい」と書き込めます。メールで「トップページの中段あたりの…」と場所の説明から始める必要がなく、指示のすれ違いが大幅に減ります。やり取りの記録が1か所に残るため、あとから経緯を振り返るのも簡単で、「言った・言わない」のトラブル防止にもつながります。

コメントには小さなコツがあります。「なんとなく違う」ではなく、「誰に何を伝えたいから、どう変えたいのか」まで書き添えることです。意図が伝わると制作会社は代案を出しやすくなり、修正の往復回数が目に見えて減っていきます。

さらに、プロトタイプを共有してもらえば、完成前のサイトを実際に触って試せます。スマートフォンでの見え方を確かめたり、社内の決裁者にURLを転送して意見をもらったりと、社内承認の材料としても活躍します。静止画の企画書より動くデザインのほうが説得力は段違いです。

新商品サイトの制作を依頼した食品メーカーを例にすると、従来はPDFを印刷して赤ペンを入れ、スキャンして送り返していた確認作業が、Figmaのコメントに置き換わることで、修正依頼から反映確認までのサイクルが目に見えて速くなります。これが発注側にとってのFigma導入効果の典型です。

発注者ができないこと・注意したいこと

誤解しやすいポイントも押さえておきましょう。

まず、閲覧用のリンクからはデザインを直接編集できません。もっともこれは安全装置でもあり、操作ミスでデザインを壊してしまう心配がないという意味では、発注者にとってむしろ安心材料です。文言の変更や写真の差し替えを自分で行いたい場合は、編集権限の付与や運用ルールについて制作会社と相談することになります。

次に、Figmaで見ている画面は完成したWebサイトそのものではないことです。実際のブラウザ表示とは、フォントの見え方や動きに細かな差が出ることがあります。「Figmaの見た目どおり1ピクセルも違わずに仕上がる」と考えるより、完成イメージの共有手段と捉えるのが健全です。細部の見え方は開発工程で調整されていくものと知っていれば、公開直前の確認で慌てることもなくなります。

最後に、Figmaデータの納品と権利の扱いは契約で確認しておきたい項目です。データの所有権や二次利用の範囲は契約内容によって異なります。将来のリニューアルや内製化、他社への引き継ぎを見据えるなら、Figmaファイルを受け取れるのか、受け取ったデータをどこまで使えるのかを、契約前にWeb制作会社へ確認しておくと安心です。デザインデータが手元にあるかどうかで、数年後の引き継ぎのしやすさは大きく変わります。信頼できる制作会社なら、この点も契約前に丁寧に説明してくれるはずです。

作る人にとってのFigmaとは|制作現場でできること・できないこと

デザイナーやWeb担当者といった「作る人」にとって、Figmaとはデザイン業務の中心に据える作業環境です。画面デザインに関する作業の大半はFigmaの中で完結します。ただし、Figmaを使えることと良いデザインを作れることは別の話であり、周辺ツールや運用ルールとの組み合わせまで含めて考える必要があります。できることと、できないこと。両方を順に見ていきましょう。

作る人ができること|仕組み化による効率とチーム制作

作る人から見たFigmaの本領は、デザインを仕組み化して効率よく展開できることです。代表的な機能を、実務での効き方とあわせて見ていきます。

代表格がコンポーネント機能です。ボタンや見出しといったパーツを部品として登録しておけば、サイト全体で使い回せます。元の部品を直せば複製先すべてに反映されるため、数十ページ規模のサイトでも修正作業が一括で終わります。1ページずつ手作業で直していた従来のやり方と比べると、この差は圧倒的です。オートレイアウト機能を使えば、文字量に応じてボタンの幅が自動で伸縮するような、柔軟なパーツ設計も可能です。

色や文字のスタイルを登録して共有すれば、複数人で分担してもデザインの一貫性を保てます。さらに進むと、部品やスタイルをライブラリとして複数ファイルから参照できるようにし、組織全体のデザインシステムを育てる段階に入ります。新しいページを作るとき、部品棚からパーツを取り出して組み立てるだけで、ブランドの世界観がそろった画面が出来上がる。ここまで来るとFigmaは、個人の作画ツールではなくチームのデザイン資産を管理する基盤です。

作業履歴は自動で保存され、過去のバージョンに遡って復元できます。「先週の案に戻したい」という要望にもすぐ応えられ、保存し忘れでデータが消える心配もほとんどありません。ただし無料プランでは履歴を遡れる期間に制限があるため、長期プロジェクトでは有料プランの検討が現実的です。開発者向けには、デザインの数値やスタイル情報を取り出せる連携機能があり、実装指示書を別途作る手間も減らせます。

作る人でもできないこと・見落としやすい落とし穴

Figmaだけで完結しない領域も、作る人こそ正確に把握しておくべきです。

第一に、実装はFigmaの仕事ではありません。デザインからコードの参考情報を書き出せても、そのまま本番のWebサイトになるわけではなく、実務に耐えるコードは開発者が設計して書きます。デザインが完成してから動くサイトになるまでには、開発の専門家による作り込みと確認の工程が今も欠かせません。この前提を理解しているデザイナーは、開発しやすいデータの作り方まで意識できるため、チームからの信頼も自然と厚くなります。

第二に、写真加工・イラスト・動画は他ツールとの分業が前提です。Photoshopで整えた写真をFigmaに配置するように、各ツールの得意分野を組み合わせるほうが速く、品質も安定します。Figma一本ですべてを完結させようと無理をするより、どの作業をどのツールに任せるかという交通整理の目を持つことが、作る人の実力の一部だといえます。

第三に、そして意外に大きいのが運用ルールの不在という落とし穴です。自社ECサイトを運営するアパレルメーカーのWeb担当チームがFigmaを導入した例で考えてみます。ファイルの命名規則やページの分け方を決めずに使い始めると、どこに最新デザインがあるのか誰もわからなくなり、共同編集の利点が逆に混乱の種になりかねません。誰でも同時に触れるということは、誰かが誤って触ってしまうリスクと隣り合わせでもあります。確定したデザインの編集をロックする、作業用と確認用を分けるといった守りの運用まで設計して、はじめてFigmaはチームの武器になります。

【デザイナーたちに聞いた、PhotoshopからFigmaへ移行した制作現場の実感】

クライマークスのデザイン現場では、2023年に、メインのデザインツールをPhotoshopからFigmaへ移行しました。社内のデザイナーたちの振り返りでは、デザイナー同士の連携に加えて、コーダーやディレクターとのフィードバックの出し戻しがスムーズになったという声や、ホバーや画面遷移をプロトタイプに組み込めるため、画像で提出していたころよりも意図が直感的に伝わるようになったという声が挙がりました。スマートフォンの実機で確認しやすい点や、マージンを正確に取り、実装に近い状態でデザインを組める点も好評でした。

一方で、すべての業務が一気にFigmaへ置き換わったわけではありません。移行から間もない時期には業務の半分ほどでPhotoshopを使う場面が残り、納品データをPhotoshop形式で求められる案件や、レタッチ・画像加工の用途では引き続きPhotoshopが使われていました。オンラインでデータを管理するツールのため事業内容によってはセキュリティ面の課題があることや、クライアント側にアカウント作成の手間を感じさせてしまうこと、ノンデザイナーへの浸透はまだ途上だという感触も、現場からは率直に語られています。

同じFigmaでも、作る側にとっては日々の制作と連携を速くする環境である一方、発注する側の事情や案件の条件によっては従来のツールやフローも残り続けます。できること・できないことは機能の一覧だけでなく立場によっても見え方が変わるからこそ、自社の状況に合わせて併用や使い分けを前提に考えることが現実的と考えます。

学ぶ人にとってのFigmaとは|独学でできること・つまずきやすいところ

これからデザインを学ぶ人にとって、Figmaとは思い立った日に無料で始められる学習環境です。プロが実務で使うものと同じツールを、費用ゼロ・手持ちのパソコンで触れる。この入り口の低さは、他のデザインソフトにはない魅力です。ただし独学には定番のつまずきポイントもあるため、先に知っておくことで無用な挫折を避けられます。

学ぶ人ができること|無料で実務と同じ環境に触れる

Figmaの無料プランでは、デザイン作成もプロトタイプも試せます。ブラウザで動くため高性能なパソコンは不要で、学習開始までの準備は実質アカウント登録だけです。教材をそろえる前に、まず今日、手を動かし始められる。学習の立ち上がりの速さでFigmaに並ぶデザインツールはなかなかありません。

独学の強い味方になるのがコミュニティ機能です。世界中のユーザーが公開したデザインファイルやテンプレートを開き、プロの作品を分解して観察できます。完成した画面がどんな部品で、どんな設定で組み立てられているのか。本や動画では得られない「実物から学ぶ」経験を、無料で好きなだけ積めるのです。気に入ったテンプレートを複製して、自分なりに改造してみるのも定番の練習方法です。

学習の進め方としては、機能を順番に暗記するのではなく、好きなWebサイトの1画面をそっくり再現する模写から始めるのが近道です。作りたいものを決めて、必要な操作をその都度調べる。このゴール逆算型のほうが、操作が記憶に定着します。作った作品はURLひとつで共有できるので、ポートフォリオとして人に見せる段階までそのままつながります。作品を見てもらい、感想をもらい、また作る。上達に欠かせないこのサイクルを、追加費用なしで回せるのがFigma学習の強みです。

キャリアの面でも追い風が吹いています。Webデザイナーの求人でFigma経験が挙げられることは年々増えており、デザイナー職に限らず、Webディレクターやマーケティング担当など「Figmaが読める・触れる」ことが評価される職種は広がり続けています。学んだことが無駄になりにくいツールだといえるでしょう。

学ぶ人がつまずきやすいところ

最初の壁は独特の用語です。フレーム、コンポーネント、オートレイアウト。名前だけ聞くと難しそうですが、すべてを理解してから手を動かす必要はありません。まず四角をひとつ描いて文字を置く。そこから必要になった概念だけを拾っていけば十分です。用語を網羅した教科書型の学習は、途中で息切れしやすい進め方でもあります。「作りながら覚える」を基本に据えることが、独学を続けるいちばんの秘訣です。

もう1つ知っておきたいのは、ツールの習熟とデザイン力は別物という現実です。Figmaの操作を覚えても、配色やレイアウトの基礎がなければ見栄えのする画面は作れません。これはFigmaの欠点ではなく、どのツールを選んでも避けられない学習の順序です。操作の模写とあわせて、良いデザインを見る量を増やし、「なぜこの配置なのか」を考える習慣をつけていきましょう。手と目の両方を鍛える意識が、遠回りに見えて確実な上達につながります。

なお、コミュニティのテンプレートや解説には英語のものが多く残っていますが、Figma自体の画面は日本語化でき、操作も視覚的です。触りながら覚える分には英語力の心配はほとんどいりません。無料プランには共同編集できるファイル数やページ数に一定の制限がありますが、個人学習の範囲で困ることはまずないでしょう。学習が進んで「作る人」の側に近づいたら、前の章で紹介したコンポーネントやライブラリの活用が、そのまま次の学習目標になります。学ぶ環境と実務の環境が地続きであること。それがFigmaで学び始める最大の利点です。

発注する人・作る人・学ぶ人それぞれのFigmaでできること・できないことをまとめた図

FigmaとPhotoshop・Canvaの違い|立場別に見るツールの選び分け

Figmaを調べていると、PhotoshopやCanvaとの違いが気になってきます。名前だけ聞くとどれも同じ「デザインのツール」ですが、これらは競合というより受け持つ仕事が違うツールです。違いを知ると、自分の立場でどれを使うべきかがはっきり見えてきます。

Photoshop・Illustratorとの違い

Adobe社のPhotoshopは写真の加工・補正、Illustratorはロゴ・イラスト・印刷物に強いソフトです。Figmaが受け持つのはWebサイトやアプリの画面設計であり、そもそも解決したい課題が異なります。同じ「デザインのソフト」という言葉でくくられていても、写真を美しく仕上げる道具と、画面の構造を組み立てる道具とでは、受け持つ仕事がまったく別なのです。

働き方の前提も対照的です。PhotoshopやIllustratorは基本的に1人が1つのファイルを開いて作業するのに対し、Figmaは複数人の同時編集を前提に設計されています。インストールと有料契約が前提のAdobe製品に対し、Figmaはブラウザで動き、無料から始められるため、発注者や営業担当といったデザイナー以外の関係者を巻き込みやすいという違いもあります。ツールの性能だけでなく、誰と一緒に使うかという視点で比べると、両者の性格の違いがよく見えてきます。

Web制作の現場では「写真はPhotoshop、画面設計はFigma」という分業が定着しつつあります。どちらか一方がもう一方を置き換えるのではなく、Photoshopで仕上げた写真素材をFigmaのデザインに配置する、という連携プレーが日常の風景です。

なお、かつて画面設計分野で並び立っていたAdobe XDやSketchは新規採用が減り、この分野は現在Figmaが事実上の主流です。共同編集のしやすさと、OSを問わず使える身軽さが選ばれた理由といわれています。これから学ぶ人が画面設計ツールを選ぶなら、Figma一択と考えて差し支えありません。

Canva・PowerPointとの違い

Canvaも、Figmaと並べて語られることの多いツールです。Canvaは、テンプレートの文字や写真を差し替えるだけで、SNS画像やチラシを手早く作れるツールで、非デザイナーが完成品を最短で作ることに最適化されています。対してFigmaは、ゼロから緻密に画面を設計するためのツールで、プロトタイプや開発連携などWeb制作の実務機能を備えています。両者は競合というより、受け持つ工程が違う隣人のような関係です。

PowerPointで簡易的なワイヤーフレームを作る現場もありますが、デザインの精度・共同編集・開発への受け渡しのどれをとっても、Web制作の専用ツールであるFigmaに分があります。社内の企画書はPowerPoint、サイトの設計はFigmaと、書類と設計図で道具を分ける感覚を持てば迷いません。

たとえば美容サロンを展開する会社が、SNS運用は社内で行い、Webサイト制作は外部のWeb制作会社に任せているなら、社内のSNS画像はCanvaで作り、サイトのデザイン確認はFigmaのリンクで行う。このような併用がごく自然な着地点であり、1つのツールに無理に統一する必要はありません。

立場別に整理し直すと、ツール選びの答えはさらに明快になります。発注する人はFigmaを「確認の場」として使うだけなので、選ぶ必要すらありません。作る人は画面設計の主戦場としてFigmaを軸に、写真加工はPhotoshopを組み合わせる。学ぶ人は、Webデザインを目指すならFigmaから、SNS運用や資料作成が目的ならCanvaから始める。自分がどの工程に関わるのかさえはっきりすれば、ツールの比較検討に長い時間をかける必要はないのです。

FigmaとPhotoshop・Canvaの得意分野を比較した図

Figma導入前に確認したい注意点とこれからの展望

最後に、Figmaを使い始める前に確認しておきたい注意点と、今後の見通しを整理します。Figmaは進化の速いツールだからこそ、変わらない原則と変わりゆく機能を分けて理解しておくことが役立ちます。ここで挙げる4つのチェックポイントは、どれも導入後ではなく導入前に押さえておきたいものばかりです。順番に確認していきましょう。

導入前のチェックポイント

1つめは共有範囲と権限の設計です。Figmaは人ごとに「閲覧のみ」「編集可能」を設定でき、リンクの公開範囲も選べます。設定を誤ると公開前のデザインが意図しない相手に見える恐れがあるため、共有ルールを最初に決めておくことが大切です。社外パートナーには閲覧権限のみ、編集権限は制作メンバーに限定する。この基本形を決めておくだけでも、公開前の新サービスや未発表の商品情報を扱う案件で、情報管理の不安を大きく減らせます。

2つめは料金プランの考え方です。まず無料プランで試し、チーム運用が本格化した段階で有料プランを検討する順序が堅実です。有料プランは編集する人数に応じた課金が基本のため、「編集する人」と「見るだけの人」を分けて数えるとコストを抑えられます。デザインを確認するだけの関係者を全員有料枠に数える必要はない、というのは見落とされがちなポイントです。料金体系は変更されることがあるので、導入時に公式サイトで最新情報を確認しましょう。

3つめは社内規定との整合です。Figmaはデータをクラウドに保存するサービスです。クラウド利用に制限のある会社では、検討段階で情報システム部門に相談しておくと、導入がスムーズに進みます。導入後に規定との食い違いが見つかるより、先に一度確認しておくほうが結果的に早く進みます。判断に迷う場合は、Figmaを日常的に扱っているWeb制作会社に、実際の案件でどう運用しているかを聞いてみるのも近道です。

4つめはスモールスタートです。物流会社が全部署へ一斉にFigmaを展開しようとして、教育や権限設計が追いつかず、結局使われないまま形骸化してしまう、という失敗は珍しくありません。まずはWebサイトの制作・確認という1つの用途で成果を出し、そこから広げるほうが定着します。最初の成功体験がチーム内の推進役を育て、その推進役が次の部署への展開を支える。ツール導入の定着は、機能よりも人の巻き込み方で決まる部分が大きいのです。

AIとともに広がるFigmaのこれから

FigmaはAI機能の拡充を急速に進めており、文章で指示してデザイン案やプロトタイプの下書きを生成する機能も登場しています。デザインの専門教育を受けていない人でも、アイデアを形にして関係者と話し合える。そんな景色が現実になりつつあり、アイデアが画面になるまでの時間は今後さらに短くなっていくでしょう。ホワイトボード・スライド資料・簡易的なサイト公開と守備範囲も広がり続けており、デザインツールからものづくり全体のプラットフォームへと姿を変えつつあります。

本記事で挙げた「できないこと」の一部が、数年後には「できること」に変わっている可能性は十分あります。それでも、誰に何を届けるサイトなのかを決める上流の判断は人間の仕事として残ります。AIがデザイン案を量産できるようになるほど、案の良し悪しを見極める目、つまり目的に照らして選び取る力の価値はむしろ高まっていくはずです。

ツールの進化を追いかけつつ、立場ごとの役割の本質を押さえておく。発注する人は伝える力を、作る人は設計と運用の力を、学ぶ人は基礎を積む姿勢を磨いておけば、Figmaがどれだけ進化しても振り回されることはありません。それがFigma時代のWeb制作との賢い付き合い方です。

まとめ|Figmaとは3つの立場をつなぐWeb制作の共通言語

Figmaとは、ブラウザで動く共同編集型のデザインツールであり、発注する人には「見る・コメントする・承認する」だけで使える確認の場を、作る人には仕組み化と共同編集による制作環境を、学ぶ人には無料で実務水準に触れられる学習環境を提供します。同時に、実装や画像加工などFigmaにできないことを知っておけば、過度な期待によるすれ違いも防げます。

Figmaのリンクが届いたらコメントを1つ書いてみる。無料プランで四角を1つ描いてみる。立場がどれであっても、最初の一歩は今日から踏み出せます。

クライマークスは、Webサイト制作・リニューアルの実績が豊富なWeb制作会社です。Figmaを前提とした制作のご相談にも対応しており、デザイン確認の進め方といった段階からでも構いません。Web制作についてご不安があれば、クライマークスまでお気軽にご相談ください。

Web制作の相談をしてみる(無料)

03‑6773‑5445

受付時間 平日 10:00〜18:00

Web制作

大規模コーポレートサイトからサービスサイトやサテライトサイトまで、アートディレクションと情報アーキテクチャ設計を融合した、クリエイティブで訴求力の高いサイトを構築します。また、フロントエンドのみならずバックエンドのシステム構築、デジタルマーケティング支援までを総合的に提供しています。