【初心者向け】Figmaで学ぶワイヤーフレームの作り方

本記事ではデザインツール「Figma（フィグマ）」を使ったワイヤーフレームの作り方をご紹介します。

ブラウザ上で使えるWebデザインツール「Figma（フィグマ）」

Figma（フィグマ）は、WebサイトやモバイルアプリのUI/UXデザインに特化したオンラインデザインツールです。

インターネット環境があればどこからでもアクセスでき、ワイヤーフレームや動的なプロトタイプの作成、グラフィックデザイン、プレゼンテーション資料の制作まで幅広く対応しています。

また、共同編集機能によって、複数人で同時にリアルタイムでデザインを編集できるため、プロダクトマネージャーや開発者、マーケターといったデザイナー以外のメンバーも、デザイン作成プロセスにスムーズに参加し、意見を出し合えます。

基本的な機能は無料で利用開始できるので、これからデザインを始める方や、チームでのデザインワークフローを効率化したい方にぴったりのツールです。

ワイヤーフレームとは「Webサイトの設計図」のこと

ワイヤーフレームは、1ページ単位でレイアウトやコンテンツの位置を定めた「Webサイトの設計図」です。

各ページのレイアウトやコンテンツの配置、必要な機能などをを視覚的に整理し、「どこに何をどのように配置するか」を具体的に示すために作成します。クライアントや開発チームなどの関係者全員が、完成イメージを共有し、認識のずれを防ぐための重要なツールです。

Webサイト制作を進めるうえで、ワイヤーフレームは重要な役割を担います。例えば、正確な見積の作成やスケジュール策定の基礎となるだけではなく、企画の初期段階（要件定義フェーズ）で、Webサイトのイメージが合っているか認識合わせを行い、方向性を固めるための重要な成果物としても活用されます。

デザインカンプ（モックアップ）を作り、最後にプロトタイプを作る

Webサイト制作現場では、一般的にワイヤーフレームで骨組みを固めた後、デザインカンプ（モックアップ）で視覚的なデザインを具体化し、最後にプロトタイプで動きを確認するという流れで制作を進めていきます。

ワイヤフレームに色やフォント、画像などの装飾を加えたものが「デザインカンプ（またはモックアップ）」です。

実際の制作現場では、「デザインカンプ」と「モックアップ」はほとんど同じ意味で使用することが多いです。

デザインカンプ（モックアップ）に、ページ遷移やボタンのクリックなどの動きを加えたものが「プロトタイプ」です。

マウスオーバーの動きを加えたプロトタイプのキャプチャ動画

Webサイトを構成する基本要素

Webサイトは一般的に、以下の3つの要素で構成されています。

ファーストビュー

Webサイトで、ユーザーがスクロールせずに最初に目にする部分が「ファーストビュー」です。ファーストビューはサイトの目的を瞬時に伝え、訪問者の関心を引く役目を担っています。

メインコンテンツ

「メインコンテンツ」は、Webサイトが提供する主要な情報・製品・サービスが配置されるセクションです。このセクションは、ユーザーがWebサイトの内容を詳しく知るための核となります。

クロージング

Webサイトの最後の要素は「クロージング」と呼ばれます。クロージングには、ユーザーに次の行動を促したり、補足情報を提供したりする役割があります。

【4ステップで解説】Figmaを使ったワイヤーフレームの作り方

今回は、簡単な自己紹介サイトを例に、Figmaを使ったワイヤーフレームの作り方を4つのステップでご紹介します。

Figmaはワイヤーフレームからモックアップへの移行も簡単

ワイヤーフレームに色やフォント、画像を加えて作るモックアップも、Figmaでは簡単に作成可能です。Figmaで作成したワイヤーフレーム上に画像を配置したり、色・フォントを変更したり、さまざまな装飾を追加できます。

Windowsの場合、Ctrl + Shift + Kで画像を一括配置できます。

モックアップをもとにWebサイト・ホームページを作成する方法については、以下の記事をご覧ください。

Webサイト制作でお困りの方へ

ふくおかクリエイティブでは、Webサイトのリニューアルはもちろん、新規Webサイトの立ち上げから設計・制作まで、幅広くサポートしております。
まずはお気軽にご相談ください。

福岡情報ビジネスセンター | DX推...

ホームページの設計から開発・運用までご支援「Webサイト制作」 - 福岡情報ビジネスセンター | DX推進とシ... 成果に繋がるコーポレートサイトを制作するには、デザイン力はもちろんのことサイトにおける適正な目的、目標を定め、戦略と構造を整理し、どのような情報・コンテンツを発...