【初心者向け】Figmaでワイヤーフレームを作成してみた｜無料でできるサイト設計の第一歩

Webサイトを作るとき、いきなりデザインから始めると構成がブレたり、修正が多くなったりしがちです。
そんなときに役立つのが「ワイヤーフレーム」。ページ構成を視覚化することで、全体像を整理しながら制作を進められます。

今回は、無料で使えるデザインツール「Figma（フィグマ）」を使って、初心者でも簡単にワイヤーフレームを作る方法を紹介します。
アカウント登録から基本操作、実際の作成手順まで、初めての方でもスムーズに学べる内容になっています。

Figma（フィグマ）って何？

• FigmaはWebブラウザ上で使える無料のデザインツール
• Adobe XDやPhotoshopと違い、インストール不要でどこでも編集可能
• UI/UXデザイン、Webサイト、アプリデザインなど幅広く対応

Figmaが人気の理由

• 無料でチーム共同編集ができる
• クラウド上で保存されるため、データ管理が簡単
• 操作が直感的で初心者でも扱いやすい

ワイヤーフレームとは？

＝設計図。

ワイヤーフレームの役割

• Webサイトの構成や情報の配置を可視化する設計図
• コンテンツや導線を整理して、デザイン前に全体像を把握する目的

ワイヤーフレームを作るメリット

• デザインの方向性を共有しやすい
• 修正が簡単で制作の無駄を減らせる
• クライアントやチームとの認識を合わせられる

Figmaの導入方法からワイヤーフレーム作成までを画像で解説！

Figmaの登録手順とワイヤーフレームの土台を作成

ヘッダー作成

まずは、ファーストビュー！サイトの一番上にある部分を作成していきます。

ユーザーが最初に目にする部分。
「離脱させない」「興味を持たせる」ことが目的のエリアです。

ファーストビューの役割

• ロゴ（ブランド認知・トップページへのリンク）
• グローバルナビゲーション（グロナビ）　例：ホーム / 事業内容 / 料金 / 会社概要 / お問い合わせ など
• メインビジュアル（キービジュアル） 画像・動画・スライダーなど
• キャッチコピー / サブコピー 会社やサービスの魅力を一言で伝えるメッセージ
• CTA（Call To Action）ボタン 例：「お問い合わせはこちら」「無料見積もり」など
• ヘッダー固定メニュー（Sticky Header）（必要に応じて）スクロールしても上部に残るナビゲーションバー

メインコンテンツ作成

サイトの中心となる情報エリア。
目的に応じて構成が変わります（コーポレート／サービスサイトなど）

メインコンテンツの役割

• 会社紹介 / サービス紹介 / 商品紹介　写真・アイコン・テキスト・比較表など
• 特徴・強みセクション　例：「選ばれる理由」「3つのポイント」など
• 料金プラン / メニュー表　価格一覧や料金体系
• 実績紹介 / 施工事例 / ポートフォリオ　写真＋説明文＋リンク
• お客様の声 / レビュー　信頼性を高める要素
• よくある質問（FAQ）問い合わせ前の不安解消
• お問い合わせ導線 / CTA　中間地点にもボタンを設置してコンバージョンを促す
• 最新情報 / お知らせ / ブログ記事一覧（必要に応じて）

フッター作成

ページの最下部にある定番情報エリア。
信頼感・利便性を補強する役割。

フッターの役割

• ロゴ（小型版）
• フッターナビゲーション　例：会社概要 / 採用情報 / プライバシーポリシー / サイトマップ
• 住所・電話番号・営業時間などの基本情報
• SNSリンク（Instagram / X / Facebookなど）
• 著作権表記（Copyright）
• お問い合わせボタン / フォームへのリンク
• ページトップボタン（スクロールアップ）

フッター完成！

ワイヤーフレーム書き出し方法

右下のエクスポートを押してダウンロード形式を選択してDesktop-1をエクスポートでダウンロード

1xで保存をしていますが、Retinaディスプレイ対応にするために2xを使用することもあるので、書き出し方法に合わせてご利用ください。

【まとめ】Figmaはweb制作者にとって最強のツール！

Figmaを使えば、初心者でも直感的にワイヤーフレームを作成できます。まずはシンプルな構成から始めて、デザインの基礎を一緒に身につけていきましょう。

操作に慣れて仕舞えば、簡単にワイヤーフレームが作成できるので、ぜひクライアント業務にも活かしてくださいね。