FigmaでWebサイトのワイヤーフレームを作る方法

Webサイトのデザインを発注するときに、ワイヤーフレームを製作する機会があります。

手書きやエクセル、Googleスプレッドシートなどで作っても良いのですが、Figma（フィグマ）を使うとよりわかりやすく伝えられます。

制作会社やエンジニアとのコミュニケーションを円滑にするためにも、Figmaを使いこなしていきましょう。

Figma（フィグマ）とは

Figma（フィグマ）は、ブラウザ上で動作するクラウド型のデザインツールです。

基本無料で使えて、URL共有も簡単におこなえますから、アプリデザインやWebデザインの現場でよく活用されています。

基本的な説明が少なく、最初はどこを押せばなにができるのか戸惑うかもしれませんが、慣れれば直感的に使いやすいUIのツールです。

FigmaでWebサイトのワイヤーフレームを作るメリット

そもそもWebサイトのワイヤーフレームとは、製作するWebサイトの要素や順番を指定するための設計資料です。

そんなワイヤーフレームを作るには、手書きやエクセルでも事足ります。しかしFigmaを使うことでいくつかのメリットがありますので、それをご紹介していきます。

レイアウトの自由度が高い

まずFigmaはデザインツールですから、レイアウトの自由度が高いメリットがあります。少なくともWebサイトのワイヤーフレームを作る上では、不都合に感じる制限などは受けません。

操作性も簡単で、30分〜1時間くらい触れば基本的な操作は習得できるかと思います。

遷移図が作りやすい

ワイヤーフレームを作る上で、意外と大切なのが遷移先の指定です。

要素の配置だけでなくリンクの飛び先も示しておけると、デザイナーがデザインする上で参考になり、ボタンやリンクに意味を持たせたデザインに仕上げてもらいやすくなります。

デザイナーへとわかりやすく情報を伝えられる点で、Figmaにメリットがあります。

簡単に共有できる

Figmaで作ったワイヤーフレームは、Figmaのアカウントを持たない人にも共有できます。編集するにはログインが必要ですが、閲覧するだけならURLさえ渡せば見てもらえるため、共有の容易さもメリットです。

例えばデザイナーに渡す前に、コーディングを担当する予定のエンジニアに「こんな機能は持たせられますか？」と確認する場合など、誰にでも気軽に共有できます。

Figma（フィグマ）でWebサイトのワイヤーフレームを作る方法

それでは、Figmaを使ってWebサイトのワイヤーフレームを作る方法を解説していきます。

1ページにつき1フレームを用意する

Figmaでワイヤーフレームを作るときは、基本的にページ単位で同じフレームを使います。

Webサイトだとだいたい縦長になるはずですから、作ったフレームは下にドラッグして縦のサイズを増やしておきましょう。

大きめにとっておいて、後から調整するのがおすすめです。

色とテキストのローカルスタイルを設定する

次に、わかる範囲でローカルスタイルも設定しておきましょう。

サイドバー「デザイン」タブの「ローカルスタイル」から、テキストや色を設定します。例えばH2見出しを36pxに設定する場合、下記のように指定できます。

とくに「h2・h3・通常テキスト」を、フォントサイズの違いなどで表現しておくと便利ですので、それぞれ差をつけてフォントのスタイルを用意しておくと便利です。またテーマカラーが決まっているなら、デザイナーへの指定が楽になるのでそれも設定しておきましょう。

ローカルスタイルを用意しておくと、ボタンを押すだけで呼び出せますので、このあと実際にワイヤーを作っていく作業が効率的になります。

要素をシェイプツール・テキストで配置していく

フレームを用意してローカルスタイルの準備もしたら、実際にワイヤーフレームを作っていきましょう。いろいろな機能がありますが、基本的には「シェイプツール」と「テキスト」で事足ります。

要素を配置する際、なにか指定があればそれに従ってください。とくになければ、どこに何の要素が必要なのか伝わればいいかと思います。

遷移先がわかるようにしておく

リンクを設置したい箇所には、どのページに遷移するのか示しておきましょう。Figma内で使えるプラグインの「Autoflow」を使うと便利ですので、下記のように検索して「実行」を押すとインストールします。

例えば「お知らせ記事」「お知らせ一覧」のリンク先ページを示すには、あらたに各ページ用の「フレーム」をつくって下記のようにつなぎます。

このようにどこからどのページへ遷移する予定なのか簡単にでも示しておくと、デザイナーがよりイメージしやすくなり、より実用性高く良いクオリティのデザインが上がってきやすくなります。

FigmaでWebサイトのワイヤーフレームを作るコツ・注意点

FigmaでWebサイトのワイヤーフレームを作るときに、注意しておきたいことをまとめました。

デザインはデザイナーに任せる

ワイヤーフレームを作っていくと、なんとなくクリエイティビティが暴走してきて、ちょっとしたデザインを指定したくなってくることがあります。

しかし中途半端にデザインを指定してしまうと、デザイナーがそれに引っ張られてしまい、結果的に一貫性がなくイマイチなデザインに仕上がってしまうことが少なくありません。

ワイヤーフレームはあくまで要素の配置を示すものですので、役割分担を意識してデザインはデザイナーに任せるといいでしょう。

必要な要素は具体的に指定する

ワイヤーフレームを作ってデザイナーに渡すときは「まあ言わなくてもわかるだろう」が命取りになります。デザイン以外のことは、できるだけ具体的に細かくしてしていきましょう。

例えば「サービスに関する説明文と画像を配置する要素」があったとして、説明文の文字数が300文字の場合と1000文字の場合で、デザインの組み立て方が変わってきます。

後から擦り合わせる工数を削減するためにも、今わかってる情報はすべて渡すイメージでワイヤーフレームを作成することをお勧めします。

参考サイトの指定には注意

「たとえばこんなデザインがいいです」と、参考URLを指定することがあります。しかしその受け取り方は、デザイナーや関係性によって大きく変わってきます。

とくに制作会社に外注する場合などは、商売柄「大きく外したくない」という考えから、参考サイトをそのままパクった（オマージュした、リスペクトした）ようなデザインに仕上げてしまうこともあります。とはいえ参考サイトとして指定したのはこちらですから、文句を言うのも難しい状況になります。

この辺りは事前によく擦り合わせをして、後から大きな齟齬が出ないように注意したいところです。

Figmaでワイヤーフレームを作ろう

サイト制作をする場合、個人サイトでない限りはだいたいワイヤーフレームが必要になります。

Figmaを使えば共有も簡単で、また大体のデザイナーが使っているツールですので、意思疎通がしやすくなります。

非デザイナーでも、Webに携わる限りは使えて損はありませんので、ぜひ使いこなせるようになっておきましょう。