webデザインにおいて重要な役割を果たすワイヤーフレーム。
ひとことで言うとwebサイトを作る際の「設計図」のようなものです。
この記事では、初心者向けにワイヤーフレームの基本知識から具体的な作り方、おすすめツールまでを詳しく紹介します。
ワイヤーフレームの理解を深め、web制作における効率的なデザインを実現しましょう。
この記事でわかること
・ワイヤーフレームとは
・おすすめのツール
・ワイヤーフレーム作成時のポイント
ワイヤーフレームとは？
ワイヤーフレームの基本
ワイヤーフレームとは、デザインをする前の、要素だけを整理したサイトの骨組みのことです。
webページの構造を示す設計図のようなもので、各パーツの配置や構造を視覚的に表現します。
パッと見た感じは、↓↓の様なものです。
webサイトやアプリの開発において、最初に作成される設計図であり、デザインや開発の基礎となります。
ワイヤーフレームは、実際のデザインやコーディングに入る前に、全体的な構成やレイアウトを明確にするための重要な役割を果たします。
略称として「WF」「ワイヤー」などと呼ばれます。あとたまに「ワイフレ」と言う人もいます。
たまに略すと「？？」な反応をする事もあるので、特定のコミュニティ外での場合は「ワイヤーフレーム」と言ってあげた方が良いでしょう。
ワイヤーフレームの目的
ワイヤーフレームの主な目的は、情報を整理し、ページのレイアウトを決めることです。
これを作らずにいきなりwebサイトのデザインを綺麗に作ってしまう事は、基本的にはあり得ません。
まずはお客様間や制作チームでサイト構成をバシっと決める必要があります。
なぜなら、要素の順番を入れ替えるなどの小さな修正でも、デザイン後だと大掛かりになってしまうからです。
ワイヤーフレームが重要な理由
上記でも少し触れましたが、新規webサイトのデザイン着手前には、ワイヤーフレームは、ほぼ必ず必要です。
ワイヤーフレームが重要な理由を、下記に整理してみました。
サイト構造・要素の決定
ワイヤーフレームで、デザイン着手の前に、サイト構造、ページ内の要素、レイアウトを効率的に決定し、デザイン着手前に方向性を明確にする必要があります。
ページの要素を配置し、それぞれの要素の大きさや位置関係を視覚的に示すことで、レイアウトの全体像を把握することができます。
これにより、デザイン段階での無駄な試行錯誤を減らし、より効率的にデザインを進めることができます。
チームでの認識共有
ワイヤーフレームを使うことで、プロジェクトメンバー全員が同じ方向を目指して作業することができます。
ワイヤーフレームは、開発チームだけでなく、お客様や関係者にも共有することができます。
これにより、関係者全員が同じ設計図に基づいて作業を進めることができ、誤解や矛盾を防ぐことができます。
また、ワイヤーフレームは、開発の進捗状況を可視化し、関係者間のコミュニケーションを円滑にする役割も担います。
アイデア出しと議論
ワイヤーフレームはアイデア出しや議論のたたき台としても役立ち、より良いサイト設計を実現します。
ワイヤーフレームは、具体的なデザインに固執することなく、アイデアを自由に表現することができます。
そのため、開発チームやクライアント間で、様々なアイデアを出し合い、議論を重ねることで、より良いサイト設計にたどり着くことができます。
ワイヤーフレームの作成手順
ステップ1. 必要な要素を洗い出す
まずはページに必要な要素やコンテンツをリストアップします。
ページにどのような情報や機能が必要なのかを明確にすることで、ワイヤーフレームの作成がスムーズに進みます。
webサイトであれば、トップページ、商品ページ、お問い合わせページなど、それぞれのページに必要な要素を洗い出します。
ステップ2. サイトマップを作成する
全体の構造を把握するために、サイトマップ（ディレクトリマップ）を作成します。
サイトマップは、Webサイトのページ構成を階層的に示したものです。
構造を図にすると直感的でわかりやすくて良いですが、ひとまず下記の様に箇条書きでも良いでしょう。
■サイトマップ例
TOPページ
└サービス内容ページ
└会社紹介ページ
└お知らせ一覧
└お知らせ詳細
└お問い合わせ
└プライバシーポリシー
サイトマップを作成することで、ページ間の関係性を明確にし、全体の構造を把握することができます。
また、サイトマップは、ユーザーがサイト内をどのように移動するかを理解する上でも役立ちます。
ステップ3. レイアウトを決める
各ページに必要な要素を配置し、それぞれの要素の大きさや位置関係を決定します。
ワイヤーフレームの段階では、具体的なデザイン要素は考慮せず、構造に焦点を当ててレイアウトを決めていきます。
ユーザーの行動やサイトの目的を、常に意識しながら構築することが重要です。
ワイヤーフレーム作成ツールの紹介
ワイヤーフレームは最近では、Adobe XDやFigmaというツールで作られる事が多いです。
「おすすめツール」などで検索してみると、Sketch、Cacoom、Moqups、Prott、Wireframe.cc など、いろいろ出てきます。
これらは有名で確かに優秀ですが、よくわからない場合はXDかFigmaのどちらかで良いでしょう。
他には、PowerPointで作る人もいますね。わかれば何でも良いのですが、現場ではあまり好まれない印象です。
たまに協力的なお客様で、ITに疎い方ですと、紙で「こんな感じで！」といただけることがあります。
これは良いものを作りたい私たちにとっては、大変ありがたい事です。
が、紙だと文章のコピペが出来ないので、あえて制作のプロ側では、紙でワイヤーフレームをつくるメリットはありません。
Adobe XD
Adobe XDは、直感的な操作で精密なワイヤーフレームを作成できるツールです。
Adobe XDは、Adobe社が提供するデザインツールで、ワイヤーフレーム作成だけでなく、プロトタイプ作成やデザイン制作にも利用できます。
他のAdobeソフト、IllustratorやPhotoshopとの連携もスムーズです。
豊富な機能と使いやすいインターフェースにより、初心者でも簡単にワイヤーフレームを作成することができます。
ワイヤーフレーム制作では、最もおすすめしたいツールです。
Figma
Figmaは、オンラインでチームとリアルタイムにワイヤーフレームを共有・編集できる便利なツールです。
XDとよく似ている印象ですが、XDと比較して最大の特徴が、無料で利用できる点でしょう。（2024年時点）
もちろん無料だと制限があり、いろいろと使いこなすには課金が必要になってきますが、基本的な機能を無料で利用しつづけられるのは魅力的です。
まずはFigmaでやってみて、あとから他のツールを試してみても良いかもしれません。
ワイヤーフレーム作成時のポイント
ワイヤーフレームを制作する上での、ポイントをいくつか紹介します。
デザイン要素を入れない
ワイヤーフレーム段階では、デザイン要素は入れず、構造に集中しましょう。
ワイヤーフレームは、デザインの基礎となるものであり、具体的なデザイン要素は後段階で検討します。
そのため、ワイヤーフレーム段階では、色やフォント、画像などのデザイン要素は考慮せず、ページの構造やレイアウトに焦点を当てます。
共有しながらブラッシュアップしたいものでもありますので、最初の段階であまりじっくり煮詰めすぎないことも重要です。
ページの優先順位を決める
どのページを優先して作成するか、優先順位を決めます。
webサイトやアプリには、様々なページが存在しますが、一度にすべてのページを完成させる必要はありません。
まずは、重要なページや、開発の進捗に影響を与えるページから作成していくようにしましょう。
あと、手を動かす作業者目線からすると、簡単な軽めなページから着手すると、作業のリズムが出てきておすすめです。
参考サイトを分析する
競合や参考になるサイトを分析し、他サイトの良い点を取り入れましょう。
ワイヤーフレームを作成する際には、競合サイトや参考になるサイトを分析し、良い点を取り入れることで、より良いワイヤーフレームを作成することができます。
例えば、UIのデザインや情報設計などを参考に、自社のサイトに最適なワイヤーフレームを作成します。
ただし、丸パクリ（真似）は当然良くないですので、あくまでも意図を参考にするという感覚が重要です。
まとめ
この記事のポイントまとめ
・ワイヤーフレームとはwebサイトの骨組みであり設計図
・ツールはXDかFigmaで良い
・デザイン要素は入れず、構造に集中することが大事
初めてのワイヤーフレーム作成でも、基本を押さえればスムーズに進められます。
紹介した手順やツールを活用して、効率的なWebデザインを実現しましょう。
ワイヤーフレームは、webサイトやアプリの開発において非常に重要な役割を果たします。
ワイヤーフレームを作成することで、お客様のグリップ、開発の効率化、コミュニケーションの円滑化、そしてより良いUXの実現に貢献することができます。
