ワイヤーフレームの定義

ワイヤーフレームとは、Webページのレイアウトを「線（Wire）」と「枠（Frame）」で表現した設計図のことです。色、写真、凝ったフォントなどの「デザイン要素」をあえて排除し、「どこに何を配置するか」という情報の骨組みだけを可視化します。

なぜワイヤーフレームが必要なのか？

家を建てるシーンを想像してみてください。 大工さんが設計図もなしに「とりあえずかっこいい壁紙を貼りましょう！」と作業を始めたらどうなるでしょうか？ おそらく、住んでみてから「コンセントがない」「キッチンが遠すぎる」といった致命的な欠陥に気づくはずです。

Webサイトも同じです。ワイヤーフレームを作る目的は、大きく分けて3つあります。

ワイヤーフレームは、極論を言えば「線と枠」が描ければ何でも構いません。しかし、効率や共有のしやすさを考え、自分に合ったツールを選ぶと良いでしょう。ここでは、ワイヤーフレーム作成で使える5つのツールをご紹介します。

 1.手書き（アナログ）

• メリット： 思考のスピードを邪魔しない。誰でもすぐに始められる。
• デメリット： 修正の際は書き直す必要があり、時間がかかる。遠隔地との共有が不便。
• 活用シーン： 打ち合わせ中のブレインストーミングや、アイデア出しの初期段階。

2.PowerPoint

• メリット： 非デザイナーでも操作に慣れている。
• デメリット： ピクセル単位の細かな調整が苦手。
• 活用シーン： 社内資料として作成する場合。

3.Google スライド

• メリット： 非デザイナーでも操作に慣れている。共同編集が可能。
• デメリット： ピクセル単位の細かな調整が苦手。
• 活用シーン：  社内資料として作成する場合。

4.Figma

• メリット： 無料でも利用可能。ブラウザ上でリンク共有・共同編集も可能。パーツの再利用がしやすく、デザインツールでもあるため、そのままデザイン工程へ移行できる。
• デメリット： 基本的な操作を覚える必要がある。
• 活用シーン： 本格的なWebサイト制作。

5.Adobe XD

• メリット： パーツの再利用がしやすい。リンク共有ができ、コメント機能でフィードバックを集めやすい。
• デメリット：有料アプリ。2024年でサポート終了。
• 活用シーン： 本格的なWebサイト制作。Adobe利用者向け。

初めてワイヤーフレームを作成しようとすると、何をどこに置けばいいか分からず悩んでしまうかもしれません。そんな時は、以下のステップで作ってみましょう。

ステップ1：掲載情報のリストアップ

まずはページに必要な要素をテキストで書き出します。

ステップ2：情報の優先順位の決定

書き出した要素に優先順位をつけます。 「このサイトに来たユーザーが一番最初に知りたいことは？」と考えます。例えば、求人サイトなら「給与や勤務地」が最優先かもしれませんが、美容院なら「ヘアスタイルやお店の雰囲気」が優先されるでしょう。

ステップ3：ラフなレイアウト決め

いきなりパソコンで描かず、まずは紙に四角を描いて配置してみます。 「ヘッダーはこの位置」「メインビジュアルの下に3つのメリットを並べる」といった、大まかなレイアウトを決定します。この時、同業サイトがどんなレイアウトにしているか参考に見てみると、イメージが湧きやすいでしょう。

以下は代表的なレイアウトです。

ステップ4：ツールの活用と細部の詰め

ここで、PowerPointやFigmaを使って清書します。手書きでも問題ありませんが、他の人と共有するならオンラインツールがおすすめです。

画像が入るのか、何の項目が入るのか、どんなテキストが入るのかなど、掲載予定の情報を入れておくと、イメージがしやすくなります。色はグレースケールにしましょう。他者と共有・議論するのであれば、「なぜそのコンテンツを置いたのか」の理由をメモしておくと、ブラッシュアップしやすくなります。

ステップ5：導線のチェック

最後に、ユーザーの視線になってページを上から下まで眺めます。 「ここで興味を持ったユーザーは、次に何を知りたくなるか？」「そこに適切なボタンが配置されているか？」を確認します。

ただ枠を描くだけでは不十分です。以下のポイントを意識すると、デザイン工程がスムーズになります。

1. 情報の優先順位を意識する

ユーザーが1ページに滞在する時間は非常に短く、数秒で「自分に必要な情報があるか」を判断します。ユーザーの欲しい情報にすぐにアクセスできるようなレイアウトにすることで、ユーザーの離脱率を減らすことができます。Webサイトの目的を意識しながら、トップページにどんな情報を載せるのか取捨選択し、コンテンツの順序を考えてみましょう。

2.「グレースケール」を徹底する

ワイヤーフレームに「色」は不要です。なぜなら、色が持つ印象は強すぎるからです。 「ここは目立たせたいから赤にしよう」と色をつけてしまうと、見る人の意識が「情報の整理」ではなく「見た目の好み」に逸れてしまい、肝心なコンテンツの議論が進まなくなります。

• 濃いグレー： 最重要（ボタンなど）
• 薄いグレー： 背景や区切り線

余計な情報を削ぎ落とし、シンプルに作成することが、ワイヤーフレーム作成のポイントです。

3. 実際のテキストを入れる

よりワイヤーフレームの精度を上げるなら、「テキストが入ります」「タイトル」といったダミーの文字は最小限にしましょう。 例えば、キャッチコピーが30文字あるのと5文字しかないのでは、確保すべきスペースが全く異なります。実際のテキストを入れることで、「この配置だと文字が入り切らない」という問題に気づくことができます。

4.コンテンツの項目や数を意識する

「商品情報では、商品画像と値段以外に何が必要か」「お知らせを掲載するなら、何件表示するか」など、コンテンツの項目や数も詰めておくと、デザインや構築の段階での修正を減らせます。ワイヤーフレームは、デザインではなくあくまで情報設計のための工程なので、この段階で「ユーザーが何を知りたいか」を考えながら組み立てていきましょう。

NG1：いきなりデザインをしてしまう

色を付けたり、フォントを選んだりするのは「デザイン」の工程です。ワイヤーフレームの段階で装飾にこだわると、情報の整理がおろそかになり、後で構成から修正することになる恐れがあります。あくまで、ワイヤーフレームは情報設計のために作成するものであることを忘れないようにしましょう。

NG2：「なんとなく」で要素を配置している

「他のサイトだと右上にボタンがあるから」「みんなやっているから」という理由だけで最初のうちは「なんとなく」で要素を並べてしまいがちです。すべての要素に対して、「ユーザーにどう行動してほしいか」という意図（Why）をセットで考えるようにしましょう。

NG3：ページの「ゴール」が定義されていない

ゴールが曖昧だと、情報の優先順位がつけられません。「お問い合わせ」を増やしたいのか、「資料請求」なのか、「関連記事」を読んでほしいのか。すべてを盛り込むと、結局ユーザーは何をすればいいか分からず離脱してしまいます。

ワイヤーフレームの基本と作成の流れはイメージできたでしょうか？

自分でワイヤーフレームを書いてみると、サイト制作のワクワク感が強まると同時に、「ここは具体的にどうすれば使いやすくなるんだろう？」「スマホで見るときのレイアウトが難しい……」といった、新たな疑問や課題も見つかったかもしれません。

「やっぱり自分だけでは形にするのが難しい」

 「設計図はできたけれど、ここから先はどう進めればいいの？」

そんなときは、ぜひ私たちドコドアにご相談ください。

1,600社以上のホームページ制作・コンサルティングを手掛けてきたプロの視点から、集客力を高める最適なワイヤーフレームとプランをご提案いたします。

あなたの理想を、確かな形にするお手伝いをさせてください。まずは気軽なご相談から、お待ちしております。

#Webデザイン#Webサイト#Webサイト制作

◎お問い合わせ・ご相談はこちらから

▼ドコドアの制作事例一覧
https://docodoor.co.jp/design/