メインコンテンツまでスキップ

Figmaでのワイヤーフレーム作成

あらゆる忠実度で簡単にワイヤーフレームを作成

アイデアをワイヤーフレームとして視覚化し、他のユーザーと共有して、フローやレイアウトを共同で作成し、連携することができます。

大きな緑色のシェイプと、その周囲にフロート表示されているワイヤーフレームコンポーネントのグラフィック表現。大きな緑色のシェイプと、その周囲にフロート表示されているワイヤーフレームコンポーネントのグラフィック表現。

FigJamをご利用いただいているブランド

Puma社ロゴSpotify社ロゴPatagonia社ロゴStripe社ロゴNew York Times社ロゴNetflix社ロゴ

アイデアに関して共通意識を持たせる

Figmaを使用すれば、忠実度に関係なく、アイデアを迅速かつ明確にワイヤーフレーム化できます。

アカウント作成とログインフローを表すFigJamのフローチャート。アカウント作成とログインフローを表すFigJamのフローチャート。

思考のスピードでアイデアをワイヤーフレーム化

デスクトップまたはiPadのFigJamでコンセプトとフローを絵や図で表し、初期のアイデアの概要を説明します。

白黒のモバイルワイヤーフレームでコラボレーションする2人のチームメイトカーソル。白黒のモバイルワイヤーフレームでコラボレーションする2人のチームメイトカーソル。

既存のコンポーネントを使用してワイヤーフレームを作成

Figmaライブラリから既存のコンポーネントをドラッグアンドドロップするだけで、簡単にワイヤーフレームを作成できます。

5人のチームメイトのカーソルが背景が緑の黒い星のイラスト上にカーソルを合わせており、黄色のカーソルチャットで「Looks great!」と示されている。5人のチームメイトのカーソルが背景が緑の黒い星のイラスト上にカーソルを合わせており、黄色のカーソルチャットで「Looks great!」と示されている。

コラボレーターから状況に応じたフィードバックを得る

Figmaのマルチプレイヤープラットフォームは、リアルタイムのコラボレーションを可能にし、フィードバックと発散・収束をスピードアップします。

ワイヤーフレーム用に構築された機能を調べる

ワイヤーフレームを作成して、より多くのアイデアや可能性を迅速に探ります。

Figmaのコミュニティで「ワイヤーフレーム」を検索した結果。Figmaのコミュニティで「ワイヤーフレーム」を検索した結果。

空白ページを避ける

Figmaのコミュニティから既製のワイヤーフレームテンプレートとキットにアクセスできます。

テンプレートを見る

インタラクティブにする

Figmaのプロトタイピングの力を活用して、コーディングせずにワイヤーフレームに命を吹き込みます。

プロトタイピングの詳細を確認する

iPadとApple Pencil。iPadの画面にはFigJamが表示され、手描きのスケッチと画像で音楽アプリのログインフローを表現。iPadとApple Pencil。iPadの画面にはFigJamが表示され、手描きのスケッチと画像で音楽アプリのログインフローを表現。

FigJam for iPadでスケッチ

iPadでFigJamを使って、自由な空間でアイデアをスケッチして考えをまとめ、チームメイトと共有します。

アプリをダウンロード

複数のカーソルがFigmaファイル内のモバイルデザイン上を行き交い、選択されたコメントが連携を確認複数のカーソルがFigmaファイル内のモバイルデザイン上を行き交い、選択されたコメントが連携を確認

コラボレーターを招待する

部門をまたがるパートナーやステークホルダーを招待して、ワイヤーフレームやフローでコラボレーションします。

コラボレーションを始める

Figmaでは、すべてのチームがデザイン、画面、フローにアクセスできるようになります。

Thomas Vimare氏、Free社デザイン責任者

Free社ロゴ
詳しい内容を読む
ビデオのグラフィック表現。背景には、FigJamからインスピレーションを得た付箋のシェイプと描画。ビデオのグラフィック表現。背景には、FigJamからインスピレーションを得た付箋のシェイプと描画。

FigJamでワイヤーフレームを作成する方法

ワイヤーフレームコンポーネントライブラリを設定し、FigJamでアイデアをスケッチする方法を説明します。

ビデオを見る

数字1、2、3のグラフィック表現。数字1、2、3のグラフィック表現。

ワイヤーフレームの基本

Figmaでワイヤーフレームを作成するタイミング、その内容、それがアイデアの伝達にどのように役立つかを説明します。

詳しくはこちら

青い背景の複数のワイヤーフレームとカーソルのグラフィック表現。青い背景の複数のワイヤーフレームとカーソルのグラフィック表現。

ワイヤーフレームキットを入手する

アイデアを検証し、コンポーネントベースのワイヤーフレームキットでWebサイトデザインのワークフローをスピードアップします。

キットを見る