1. 概要

今回はFigmaを用いて既存のWebサイトからワイヤーフレームを作成する方法についてご紹介します。

2. Figmaとは？

Figmaとは無料で使えるデザインツールです。

主にUIデザインやプロトタイピングに利用されますが、様々な拡張機能が用意されており、ロゴデザインやプレゼン資料の作成などにも使用することができます。

各種アプリ版とブラウザ版が用意されており、オンラインであればどこでも作業ができることも魅力です。

また、最近FigmaはAdobeに買収され、その後Adobeの製品一覧からAdobe XDが消えたことから今後のWeb制作ツールはFigmaで一本化しそうです。

是非これを機にFigmaを使ってみましょう！

3. ワイヤーフレームとは？

Web制作やアプリ開発などのUIデザインにおいて、レイアウトの構成を表現するために使用されるデザインの一種です。
色や画像などのデザイン要素をすべて排除し、サイトの構成やコンテンツの配置のみを表現します。

4. Figmaでワイヤーフレームを作成するには？

4-1. プラグインの追加

今回は以下のプラグインを使用してワイヤーフレームを作成します。

Builder.io – Figma to HTML, React, and more

Wire Box

「Figmaのメインメニュ > プラグイン > プラグインをさらに検索」から上記２つを検索し追加してください。

4-2. Webサイトの取り込み

まずはHTML to Figmaを利用して既存のWebサイトをFigmaに取り込みます。

Figmaで新規プロジェクトを作成したら、「メインメニュー > プラグイン」か「右クリック > プラグイン」でプラグインの一覧を表示してください。

最近使ったプラグインか保存済みプラグインの中にある「html.to.design」をクリック。
表示されたダイアログの「Import via URL」に取り込みたいWebサイトのURLを入力しましょう。
（今回はisubのWebサイトを取り込んでみます）

URLを入力したら「Import」を押下することで以下のようにWebサイトを取り込むことができます。

4-3. 取り込んだサイトをワイヤーフレームに変換する

Webサイトの取り込みが完了したら、ページのフレームを選択します。
（画像の isub.co.jp by html.to.design ❤️ FREE version – 22/02/2023, 9:07:42 GMT+9 となっている部分）

再度プラグインの一覧を開き、Wire Box をクリックすると取り込んだページをワイヤーフレームに変換してくれます。

あとは、細かい部分を調整したり別のサイトを取り込み使いたい部分をコピペすることで、デザインの知識があまりない状態でも手軽にワイヤーフレームを作成することができます。

5. まとめ

プラグインを活用することでわずか数分でワイヤーフレームを作成することができました。

個人開発などで時間をかけずにざっくりとしたイメージを作っておきたいときなどに、この手法はとても良かったので是非皆さんも試してみてください！