Figmaでワイヤーフレームを作る理由ってなに？

Figmaでワイヤーフレームを作るのはなぜ？いきなりデザインしない理由

Figmaを触り始めたばかりの人からよく聞くのが、「とりあえず開いてみたけど、何から作ればいいのか分からない」という声です。

色を決めようか、写真を探そうか、フォントを選ぼうか。
やることが多すぎて、結局手が止まってしまう。
これは決して珍しいことではなく、Web制作を学び始めた人がほぼ全員通る道です。

実際、授業の課題相談でも「配色から手をつけて、途中で作り直しになった」という声はよく聞きます。

受講生の皆さんからの課題の相談でも、「配色や写真から手をつけて、あとで情報の順番がおかしいことに気づき、結局作り直しになる」というケースは、初学者の課題でかなりの頻度で見かけます。
逆に、最初に線と四角だけで構成を決めてから色や写真に進んだ人は、同じ課題でも手戻りが少なく、余裕を持って完成させられている印象です。

実はこの「何から手をつければいいか分からない」状態を解消してくれるのが、今回紹介するワイヤーフレームという工程です。

いきなり色や写真を決めない

Webサイトのデザインというと、「おしゃれな配色」「かっこいい写真」をイメージする人が多いと思います。
ですが、プロの制作現場では、いきなりそこから手をつけることはほとんどありません。

なぜなら、色や写真は「何を、どの順番で伝えるか」が決まっていないと選びようがないからです。
ゴールが決まっていない状態で装飾から入ると、途中で「あれ、このページで一番伝えたいことは何だっけ」と迷子になってしまいます。

だからこそ最初にやるべきなのは、装飾を一切つけない「骨組み」を作ること。
これがワイヤーフレームです。

ワイヤーフレームとは

ワイヤーフレームとは、Webページのレイアウトを線と四角だけで表した設計図のことです。

• どこに見出しを置くか
• どこに写真やボタンを置くか
• 情報をどの順番で並べるか
• 余白をどれくらい取るか

こうした「構造」だけを、色もフォントも決めずに決めていきます。
イメージとしては、家を建てる前の間取り図に近いものです。
壁紙の色を決める前に、まず部屋の配置を決めますよね。
それと同じことをWebサイトでも行います。

Figmaで作るメリット

ワイヤーフレームは紙とペンでも作れますが、Figmaで作ることにはメリットがあります！

1つ目は、修正のしやすさです。
配置を変えたいときも、四角を動かすだけで済みます。紙で書き直す手間がありません。

2つ目は、共有のしやすさです。
URLひとつで、講師や仲間にすぐ見てもらえます。「この配置、分かりにくくないですか?」といった相談もその場でできます。

3つ目は、そのままデザインの土台に使えることです。
ワイヤーフレームで決めた骨組みの上に、色や写真を重ねていけば、そのままデザインへと発展させられます。二度手間になりません。

デザインが楽になる理由

「先に骨組みを決めるなんて、遠回りなのでは」と感じるかもしれません。
ですが実際は逆で、ワイヤーフレームを作ってからデザインに入ったほうが、圧倒的に迷いが少なくなります。

構造がすでに決まっているので、色を選ぶときも「この見出しは目立たせたいから濃い色」「ここは補足情報だから控えめに」というように、判断基準がはっきりします。
逆にワイヤーフレームを飛ばして装飾から入ると、途中で「そもそもこの情報、ここに置く意味あったっけ」と構造レベルの手戻りが発生しやすくなります。

授業の中でも、いきなり配色や画像選びから取り組んで作り直しになる人と、先に構造を整理してから進める人とでは、完成までのスピードにも作品の伝わりやすさにも、はっきりと差が出ます。

もちろん最初のうちは、「線と四角だけ」で作ることに物足りなさを感じるかもしれません。
それでも、この地味な工程を丁寧にやれるかどうかで、後々の「伝わるデザイン」の作りやすさは大きく変わってきます。

最初はもどかしく感じても、焦らず取り組んでみてください。

まとめ

Figmaを開いたときに何から作ればいいか分からなくなったら、
まずは色でも写真でもなく、情報の骨組みを線と四角で整理してみてください。

ワイヤーフレームは、遠回りに見えて実は一番の近道です！
「どこに、何を、どの順番で置くか」を先に決めておくことで、そのあとのデザイン作業がぐっと進めやすくなります。

Web制作を基礎から一つずつ積み上げて学びたい方は、
こうした設計の考え方も含めてWebデザイナー専攻でしっかりカリキュラムとして学ぶことができます。

まずは説明会で、実際の授業の進め方を見てみるのもおすすめです。

 よく読まれている記事

まずは 無料説明会（相談会） にご参加ください！

STUDIO名古屋のスクール説明会へ参加してみよう！

コースの詳細につきましては、お気軽にSTUDIO名古屋までお問い合わせください。
無料の説明会を随時開催しております。ご予約の上、ぜひお越しくださいね♪

【お電話でのお問い合わせ】　052-955-5532
【メールでのお問い合わせ】　info@dhs758.jp
【LINEでのお問い合わせ】　https://lin.ee/IzyLNBH

受付時間
火～金曜日　12:00 ～ 22:00
土・日・祝　10:00 ～ 20:00

定休日：月曜日