用語解説

ワイヤーフレームとは、WebサイトやLPの設計段階において、ページのレイアウト・コンテンツ配置・ナビゲーション構造などを視覚化するための骨格設計図（モックアップ）のことです。

デザインの色や詳細なビジュアルは含まず、要素の配置と機能を示すことに特化しています。FigmaやXD・Miro・Cacooなどのツールで作成し、ステークホルダーとの合意形成・デザイナーへの指示・開発工数見積もりの基礎資料として活用されます。

どんな場面で活用するか

• 新規LPや機能ページの制作前にクライアントとレイアウト合意を取りたいWebディレクター
• デザイナーと開発者が共通認識を持って制作を進めるための設計資料が必要な場合
• ページリニューアル時に現状の問題点を可視化してUI改善案を提案したいUXデザイナー

よくある誤解

「ワイヤーフレームはデザイナーだけが作るもの」は誤りです。正しくは、Webディレクター・マーケター・プロダクトマネージャーなどがFigmaやMiroで作成してデザイン・開発チームへ要件を伝えるための共通言語として広く活用されます。

判断のヒント

作成効率を上げるコツ：まずユーザーストーリー（誰が・何をしたいか）を明確にしてから、最も重要なCV（コンバージョン）に至る導線を優先的に設計するトップダウン方式で進めると手戻りを減らせます。