こんにちは！albedo Japanデザイナーチームです。
今回は、非デザイナーでも扱えるFigma用ワイヤーフレームフォーマットを作成した経緯と工夫についてご紹介します。
このフォーマットが向いている人
- ノンデザイナーでFigmaに不慣れなディレクター / PM
- ワイヤーフレーム段階でも整った資料を作成したいチーム
- 案件が多く、スピーディに構成を考える必要がある制作現場
作成に至った背景
弊社ではこれまで、ディレクターやPMがAdobe XDを使ってワイヤーフレームを作成していました。
しかし、XDのサポート終了に加え、クリエイターチームがFigmaへ移行していたため、
「そろそろFigmaに切り替えなければ…」
「でも案件対応に追われて新しいツールを試す余裕がない…」
という声が多く聞かれました。
そこで、誰でもすぐに使えるFigmaフォーマットを整備し、制作フローの円滑化を図ることにしました。
Figma設計時のルール・方針
今回は「誰でも使える」ことを重視したため、以下のFigma機能はあえて使用しませんでした。
- インスタンスの入れ替え
- ブール型プロパティ（表示 / 非表示のON/OFFなど）
その代わり、必要なバリエーションをすべてプロパティとして定義し、選択だけで切り替えできるシンプルな設計にしています。
フォーマットの構成
Figmaファイルは以下の2ページ構成に整理しています。
① レイアウトサンプルページ
- TOPページ、LP、下層、記事一覧などの、主要構成パターンを掲載
- PC / SP 両方のレイアウトに対応
→ よく使う画面をテンプレートとしてコピペ活用を可能に。
② パーツ集ページ（コンポーネント一覧）
- ヘッダー、フッター、カード、ボタン、フォームなど基本UIを一覧化
- さまざまな状況に対応できるよう、各パーツのパターンを用意
（例：ボタンの見た目/アイコンの種類、カードの画像有無 など）
パーツ設計の工夫
① ボタンの種類と設計
ボタンは主に以下の4種類に分類し、それぞれに必要なバリエーションを持たせました。
- 塗りつぶしボタン
- アウトラインボタン
- テキストボタン
- テキストリンク（ブルー）
各ボタンには以下のプロパティを用意し、パターン化しています。
- サイズ：S / M
- アイコン：矢印 / 外部リンク / PDF / 戻る
- デバイス：PC / SP
これにより、用途に応じたボタンがすぐに選べるよう設計しています。
②セットで使うUIパーツの扱い
カルーセルやテーブル、FAQ（アコーディオン）などは、単体ではなくセットで使うことが基本です。
そのため、
- 「パーツ集ページ」：単体のUIパーツ
- 「レイアウトサンプルページ」：UIパーツを組み合わせ済みのセットを掲載
（すぐコピペできる）
という設計で分けています。
× Before：単体だけだと使いにくい
◯ After：組み合わせ済みのパーツをすぐ使える
おわりに
このフォーマットは、ver.0.0として2025年4月に社内公開しました。
利用したPMからは、
「案件ごとに毎回パーツを作っていたけれど、構成だけに集中できるようになった！」
といった嬉しい声をいただいています。
同時に、「ここをもっとこうしたい」というフィードバックも得られており、今後も改善を続けていく予定です。
誰でも迷わず使えるワイヤーフレームフォーマットとして、引き続きアップデートしていきます。
こちらの記事が、みなさんの制作現場でも役立てば幸いです！