1. TOP
2. レポート一覧
3. パワポはもう限界！Webディレクターが勧めたいワイヤーフレームのFigma活用

公開 2025.11.14

去る2025年9月16日（火）、オンラインセミナー「パワポはもう限界！Webディレクターが勧めたいワイヤーフレームのFigma活用」が開催された。

Webサイトの設計ツールとしてFigmaが注目を集めている。しかし、Figmaはデザイナーだけのツールではなく、Webディレクターの作業効率化にも有用なもの。今回はフリーランスのWebディレクター・UXデザイナーとして幅広く活躍されている宇野健児氏をゲストに迎え、Figmaを活用したワイヤーフレームの作成方法などについてお話いただいた。

講師プロフィール

宇野 健児（UNO）

Webディレクター・UXデザイナー

フリーランスWebディレクター・UXデザイナー。キャリアパスは、オペレーター、コーダー・Webデザイナーを経てWebディレクターへ。これまでの担当サイトは、メディア、総合商社、イベント・エンタメ系など、4桁ページ規模のサイトが多く、業界は多岐にわたる。関係者が多く、複数社を横断したプロジェクトを推進してきた経験から、上流工程の時点で案件コントロールや各工程の作業がスムーズに推進できるコミュニケーションなどを心がけている。聞きやすい、相談しやすいディレクターを重要視しており、「ご機嫌なディレクター」であることが大事だと思い込んでいる。

設計に適していないツールで、設計をすべきではない

セミナーの冒頭、宇野氏は「設計に適していないツールで設計や議論をする危うさ」について語った。Webディレクターは、Microsoft PowerPoint（以下、パワポ）でワイヤーフレームを作るなど、パワポをディレクションのツールとして使う場面も多い。しかし、「パワポはあくまでプレゼンテーションのためのツールであり、設計のためのツールではない」と宇野氏は話す。

宇野氏：パワポを使う背景として、「会社から支給されているから」「慣れているから」「クライアントが使っているから」といったものが考えられます。ただ、「ずっとこのままやるつもりですか？」と私は言いたいです。設計に特化したツールを使うだけで、クライアントだけでなく関係者全員の時間も労力もかなり減らせるからです。

次に宇野氏は、「ユーザー体験を改善したい」という案件を例にとり、パワポを使った場合とFigmaを使った場合での、Webサイト設計と議論の進め方の違いについて語った。

パワポを使って設計を行った場合、スライド1ページあたりに詰め込める情報量には限りがあるため、全体の設計が複数のスライドにまたがることになる。画面と補足情報のレイアウトが複雑になり、一貫した議論が難しくなってしまう。また、バージョン管理がファイル単位になるため、「どのファイルが最近のミーティングを反映したものか」がわかりにくくなってしまう。

対してFigmaは、Webサイト全体を1つの画面で設計することができる。トップページや下層ページなど俯瞰しながら、一貫した議論が可能だ。フィードバックやコメントも同じFigma内で可能であるため、デザイナーやクライアントとの議論も進めやすい。また、バージョン管理に対応しているので、以前の状態を履歴から確認することができる。

宇野氏：パワポの場合、更新するたびにファイルを配布しなければいけませんが、FigmaはURLさえ共有すれば常に最新の状態を確認できます。クライアントと会話をしながらリアルタイムに編集することも可能です。議論をスムーズに進めることで、本来集中すべきタスクに集中できるようになります。

では、制作フローではパワポとFigmaでどのような違いがあるのか。パワポの場合、クライアント、デザイナー、エンジニアそれぞれからのフィードバックを、改めて1つのパワポに集約させる手間が生じる。ファイルのやり取りが煩雑になるほか、資料をマージする過程で情報が漏れたり、前のバージョンに戻ったりするリスクもある。議論以前に、「情報を正確に早く共有する」こと自体がネックになってしまう。

Figmaの場合、関係者が同じデータ・同じ画面で確認や編集を行うため、パワポのように資料を集約しなおす必要はない。ワイヤーフレームや議題の焦点となるポイントの近くにコメントを残せるため、複数の資料から最新の情報を探す手間が省け、コミュニケーションコストを下げることができるという。

宇野氏：制作において「情報の集約と近接」は非常に重要です。近年のWebサイト制作では、ユーザビリティやビジネス、セキュリティ、一貫したユーザー体験など、複数の要素が複雑に絡んできます。設計に適したツールを用いることで、コミュニケーションコストを抑え、議論に集中できる環境を整えることが可能です。

UXデザインに必要な要素とはなにか

続いて宇野氏は、UXの検討にはWebサイト全体の俯瞰が必要であることを説明した。パワポのスライドでは、Webサイト全体を俯瞰することは難しい。では、全体を俯瞰することによって検討すべきことはなにか。そのチェックポイントとして、宇野氏は2つの問いを投げかける。

・一貫したユーザー体験に配慮できますか？
すべてのページで導線が適切に配置されているか、テキストや画像などの情報は適切に設定されているか、表記ゆれや定義ゆれは起こっていないか、見出しやボタンなどのデザインが統一されているかなど。

・あらゆる用途や利用シーンを想定できますか？
エラーや不具合時の復帰方法は適切か、どのページからもほしい情報にアクセスできるか、利便性は検討されているか、再訪問時の体験が考慮されているかなど。

また、宇野氏はパワポとFigmaなどのデザインツールを併用するケースにも触れ、「ツールを横断した反映作業はミスや齟齬の温床になり無駄も多い」と話す。

宇野氏：パワポからデザインへ反映を行う場合、画像からテキストを抽出するといった工数がかかるほか、抜け漏れのチェックなど神経も使います。また、「WebディレクターはFigmaを使えない」という状況では、ちょっとした修正もすべてデザイナーが対応せねばならないでしょう。

では、ユーザー体験はどう設計すべきなのか。宇野氏は「UXに集中するために必要な情報や素材」を、Webディレクターやデザイナー、エンジニアなどの役割ごとに抜き出し、それぞれに多様な要素が含まれることを説明した。そして、これだけの要素を効率よく参照しながら作業するには、やはり「情報の集約と近接」が重要であると強調した。

宇野氏：UXデザインの設計には多くのメンバーの力が必要であり、とても時間がかかります。メンバー全員がUXを理解し、個々のポテンシャルを発揮するには、パワポでは不十分です。自由かつ複雑な議論をまとめるには、Figmaのような「大きな箱」が必要になるでしょう。

議論のための「プレワイヤー」を準備する

セミナーの後半は「まずは使ってみよう！ノンデザイナーでも使える便利機能と活用事例」と題し、実際にFigmaの画面での実演を行った。議論の前段階として、宇野氏は「プレワイヤー（議論用の仮のワイヤー）」を準備していると話す。あらかじめ主要なレイアウトを用意し、デザインのもととなるパーツを議論のたたき台として作成しておくのだという。

宇野氏：情報設計用のパーツやサンプル画像、ファイル置場やログといった作業情報などをひととおり準備しておきます。あとでそれらのパーツなどをデザイナーが再利用できるよう、作り込みすぎないのがポイントです。なるべく手間をかけないよう、Figmaの機能で自動化できるところはFigmaに任せるようにしましょう。案件や会社によって必要なものは変わりますので、まずは最低限用意するところから始めて、徐々にFigmaに慣れていってください。

その後、宇野氏はFigmaのオートレイアウトを用い、時間が許す限り見出しやレイアウトなどを作成する様子を実演した。

セミナーは参加者の質疑応答で締めくくられた。寄せられた質問からピックアップして掲載する。

セキュリティなどを理由にクライアントでFigmaの導入が難しいとき、どのように画面の説明などを行っていますか。

Figmaの画面をExcelなどに貼り付けています。

Officeしか受け付けないクライアントであれば、Figmaの画面をコピーしてExcelなどに貼り付けて説明しています。パワポやExcelはあくまで画像を貼るのみで、編集はすべてFigmaに集約するようにすると、多少は楽になりますね。今後のために、クライアントにFigmaのデモを見せて、メリットを感じてもらうのもいいと思います。

Webディレクターは他業種からの転職も可能ですか？

可能です。むしろ有利かもしれません。

結論から言うと、できます。むしろ、他業種からの転職のほうが有利な場合もあるかもしれません。課題を解決したり、トラブルを乗り越えたりといった経験は、Web業界でも必ず活きるはずです。ただ、Webの経験がないぶん、「デザインが好き」「プログラミングが好き」といった得意分野を作ることが必要になると思います。あとは、人に頼るスキルを身に付けること。わからないことを人に素直に聞いて、柔軟に知識を吸収できる人であれば、Webディレクターとして独り立ちできると思います。