ワイヤーフレームの初心者でもできる作り方！おすすめツールも紹介

自社のWebサイトの制作やリニューアルをするときに、レイアウトや仕様の要望がデザイナーに伝わるか不安になったことはありませんか。せっかくWebサイトを作ったのに「イメージしていたレイアウトと違う」という事態は避けたいものですよね。

そういったトラブルを防ぐために、Webサイトをつくるときにはぺージの設計図「ワイヤーフレーム」を使います。ワイヤーフレームについて作り方から把握しておくと、Web制作会社や社内の関係者との打ち合わせもスムーズにでき、知っておいて損はありません。

集客につながるWeb制作を得意とするTRASPが、初心者でも理解できるよう、ワイヤーフレームの作り方を細かく説明します。ワイヤーフレーム作成に使えるツールも紹介しますので、自作してみるのも良いでしょう。

ワイヤーフレームとは

ワイヤーフレームとは「画面設計」ともいい、Webぺージの設計図のこと。以下の画像のように、Webぺージ上でどこに写真やテキストを配置するか図で示したものです。

　引用：Innovaブログ「Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説」

ワイヤー（線、骨）、フレーム（枠組み）というように、線や枠などを用いてWebぺージに盛り込む要素を視覚的に表します。

ワイヤーフレームは、Webぺージを制作するときにWeb制作会社のPM（プロジェクトマネージャー）または、Webディレクターが作成します。

ワイヤーフレーム作成の目的

ワイヤーフレームは、依頼者と制作側の認識をすり合わせをし、依頼者の要望どおりにWebサイトを制作するために使用します。以下のような場面でワイヤーフレームがあると、完成したWebぺージをイメージしやすくなるので、打ち合わせが円滑に進むでしょう。

• レイアウトや仕様の依頼主またはWeb制作関係者とのすり合わせ
• Webディレクターからデザイナーへの指示

例えば、ワイヤーフレームがあると、

……といった要望を伝えやすくなります。

ワイヤーフレームを用いず、デザイナーが感覚的にWebぺージを制作するケースもあります。しかし、制作し終わったあとに配置などを変更する場合、制作側に負担がかかるうえ、時間のロスも生じてしまうでしょう。

効率よく作業をすすめるためにも、Webページ制作の前に、ワイヤーフレームを用いて制作側がどのようなWebぺージを作ろうとしているのか確認することが重要です。

ワイヤーフレームの作り方【準備編】

ワイヤーフレームを作る前に、次から紹介する4つの準備を行いましょう。

1. サイトマップ作成
2. ワイヤーフレームを作成するぺージの決定
3. 情報整理
4. レイアウト決定

1.サイトマップ作成

まず、Webサイト全体の設計図であるサイトマップを作成しましょう。

サイトマップとは、次の図のようにWebサイト全体の構造をリスト形式で記述したものです。

引用：Web幹事「ワイヤーフレームの作り方完全ガイド【サンプル付き】」

Webサイト全体を俯瞰して見れるので、全体像を把握しやすくなります。どのようなサイトを作成するのか把握したうえで、各ページの構成を決定しましょう。

2.ワイヤーフレームを作成するぺージの決定

先に作成したサイトマップをもとに、ワイヤーフレームを作るぺージをピックアップします。

すべてのぺージのワイヤーフレームを作成するのが理想ですが、ページ量が膨大な場合は、作業量が膨大になり、現実的ではありません。複数のぺージで同じレイアウトを使用する場合は、1つだけ作るなどして、必要なぺージだけワイヤーフレームを作成しましょう。

一般的に、次の4つのページで作成するのがおすすめ。

1. トップページ
2. 会社について
3. 企業理念
4. お問い合わせ・申し込み

• トップぺージ

ほとんどの場合、最初にユーザーが目にするページです。トップぺージのデザインによって、Webサイトを回遊してもらえるかどうかが決まりますので、トップぺージのワイヤーフレームを作成しましょう。

重要ぺージ

重要なぺージとは、Webサイトの目的を達成する役割を持つぺージのこと。

問い合わせや資料請求、購入などに直結するページは、Webサイトのなかでも重要ページだといえるでしょう。

では、次のサイトマップを例に、ワイヤーフレームを作成するぺージをピックアップしてみましょう。

引用：Web幹事「ワイヤーフレームの作り方完全ガイド【サンプル付き】」

以下については、同じレイアウトで作成するとします。

• 「～について」と記載のある第2階層のぺージ
• 第3階層以降のぺージ

そのため、作成するワイヤーフレームは第2階層「会社について」と第3階層「企業理念」の2つ。さらに、ゴールとして重要なエントリーページ、前述したトップページを含めると4つになります。

3.情報整理

ワイヤーフレームは、情報をWebぺージ内のどこに配置するかを決定するものです。次の手順で、ページ内にどのような情報を盛り込むか整理すると効率よくワイヤーフレームを作れます。

1.情報のリストアップ

ぺ―ジ内で扱う情報を洗い出します。「商品紹介ぺージ」を作ると仮定して、情報を挙げてみましょう。

2.情報に優先順位をつける

リストアップした情報から、どの情報を優先して掲載するか決定します。

3.優先順位が高い情報順に並べる

Webぺージにどの順番で掲載するかを決定する作業です。

ユーザーがWebサイトを閲覧するときには、上から下に見ていくため、優先順位が高いものを上に配置することがポイント。

先ほど洗い出した商品紹介ぺージの情報を優先順位が高いものから順に配置してみましょう。

4.情報ボリュームの整理

ページに掲載する各情報の量を決定します。

以下のように、挿入する画像の枚数や文字数を決めておくと、1ぺージの情報量が把握しやすくなります。

4.レイアウト決定

整理した情報をWebぺージにどのように配置するかを決定しましょう。次からは、代表的なレイアウトを4つ紹介します。

1.1カラムレイアウト（シングルカラムレイアウト）

引用：Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」

「カラム」とは列のことを指し、1カラムレイアウトとは1列にコンテンツを並べたものです。

上から下へ見ていくので、導線を作りやすいでしょう。また、ぺージの横幅全体を使って表示させるので、以下のようなときにおすすめです。

• コンテンツを強調させたい
• 画像が画面に広がるように表示させたい

近年、ほとんどの人がスマートフォンでWebサイトを閲覧するようになり、1カラムレイアウトが主流になりつつあります。1カラムレイアウトは、PCで見てもスマートフォンで見ても、レイアウトが崩れないようにするレスポンシブ対応がしやすいためです。

2.マルチカラムレイアウト

引用：Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」

複数の列からなるレイアウトで、2列の2カラムレイアウトと3列の3カラムレイアウトがあります。

1カラムレイアウトに比べてコンテンツを強調するのが難しいという点がありますが、多くの情報を表示できます。情報量が多いページにはマルチカラムレイアウトを採用すると良いでしょう。列の1つをサイドメニューにし、索引を表示させる使い方もでき、ユーザーにとっては見やすいホームぺージになります。

3.グリッド型レイアウト

引用：Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」

複数の情報をタイルのように並べたものがグリッド型レイアウトです。

デザイン力が求められる、情報整理が難しいといったデメリットもありますが、デザイン性があり、視覚的に訴求できるWebサイトを作れるでしょう。

フルスクリーン型レイアウト

引用：Abentry LAB「ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】」

コンテンツをぺージいっぱいに広げて配置するレイアウトです。

写真や動画の効果を最大限に引き出せ、1カラウムレイアウトよりもさらにコンテンツを強調できるでしょう。デザイン性の高いホームぺージになりますが、他のページに遷移するボタンなどが見つかりにくいというデメリットもあるため、採用しているWebサイトをあまり見かけません。

ワイヤーフレームの作り方【実践編】

準備ができたら、実際にワイヤーフレームを作ってみましょう。ここでは、トップぺージを例にして作り方を解説します。

ワイヤーフレームの作り方は、Webぺージのパーツそれぞれにどのような情報を配置するのかを書いていきます。

Webぺージには以下の4つのパーツがあります。

1. ヘッダー／グローバルナビゲーション
2. メインビュー
3. コンテンツ
4. フッター

各パーツに配置する情報を一つずつ見ていきましょう。

　引用：Innovaブログ「Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説」を加工

1.ヘッダー／グローバルナビゲーション

ヘッダーとは、Webページの最上部に表示される部分で、Webサイトのすべてのページにおいて、同じ内容が表示されます。一方、グローバルナビゲーションとは、Webサイトにあるぺージに遷移できるリンクを表示するメニューのことで、ヘッダーに含まれます。

ヘッダーには、一般的に以下が配置されます。

上記をヘッダーのどの部分に配置するのかを書きましょう。ボタンなどは、遷移先も書き込むとわかりやすくなります。

2.メインビュー

メインビューは、ユーザーがWebサイトを訪れたときに最初に目にする部分です。ユーザーに訴求できる重要な部分なので、視覚的に印象付けることを念頭に入れてレイアウトを考えると良いでしょう。

一般的に、メインビューには以下の要素をどのように配置するかを書きます。

画像が横方向にスライドするカルーセルパネルを用いるときは、画像の表示数も記載しましょう。

3.コンテンツエリア

トップページのコンテンツエリアは、サイト全体の目次的な役割を担っています。そのため、「集客を増やす」など目的を達成できるよう、コンテンツの配置を考えることが大切です。

すべてのコンテンツを見せようとするのではなく、以下を意識して配置すると良いでしょう。

4.フッター

フッターは、Webページのいちばん下にある部分です。ヘッダー同様、全ページに共通して表示されます。

フッターには、主に以下のものを配置しましょう。

問い合わせボタンなど、重要なぺージへのリンクボタンは大きく表示させたりするなどして、目立たせておくとぺージを最後まで読んだユーザーが次のアクションを起こしやすくなります。

ワイヤーフレーム作成ツール4選

最後に、ワイヤーフレームを作るのに便利なツールを4つ紹介します。

1.PowerPoint

引用：初心者のための会社ホームページ作り方講座「ホームぺージ構成図の作り方を解説！サイトマップ・ワイヤーフレームなど」

資料作成などにも用いられるPowerPointは、多くのビジネスパーソンにとって馴染みがあるため、使いやすいのではないでしょうか。

PowerPointは、さまざまな形状の図形を自由に挿入でき、感覚的にワイヤーフレームを作成できます。共有するOSが異なるとレイアウトのズレが生じる場合があるので、Googleスライドを使うのも手です。

2.Excel

引用：初心者のための会社ホームページ作り方講座「ホームぺージ構成図の作り方を解説！サイトマップ・ワイヤーフレームなど」

ExcelもPowerPoint同様、ビジネスパーソンにとってはおなじみのツールです。

Excelは本来表計算ソフトですが、セルを結合したり、罫線をひいたりしてワイヤーフレームが作れます。PowerPointに比べて挿入できる図形が少ないので、線と文字だけでつくるシンプルなワイヤーフレーム作成に向いています。

異なるOSで閲覧するとPowerPointと同じく、レイアウトが崩れる可能性があるので、Googleスプレットシートを使うのも良いでしょう。

3.Adobe XD

引用：Adobe Blog「全員攻撃型デザインのススメ 〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ」

Adobe XDはWebサイトやモバイルアプリのUI/UXデザインができるツールで、ワイヤーフレーム作成もできます。

Adobe XDは、PowerPointやExcelにはない以下のような機能を搭載しています。

• ある要素を繰り返し並べたり、図形を均等に配置したりできる機能
• PCだけでなく、スマートフォンやタブレットの画面サイズに合わせたテンプレート
• 無料でダウンロードできるワイヤーフレーム制作用UIキット
• 共有用のリンクを知っている人なら誰でもデータの閲覧やレビューの投稿ができる共有機能

デザインツールを使い慣れていないと、操作が難しいと感じるかもしれませんが、操作を覚えると、見やすいワイヤーフレームを比較的容易に作れます。

4.Figma

引用：ユニークワン「Figma（フィグマ）とは？初心者向けに使い方・できることを徹底解説！」

Figmaは、Webブラウザ上でWebデザインを作れるツールです。機能はAdobe XDと似ていますが、Figmaはプレビュー画面にリアルタイムで編集内容が反映されるので、共有がよりスムーズ。クライアントやチームと打ち合わせしながら、その場で修正するといった使い方も可能です。

Web制作会社などで使用されているプロ向け・上級者ツールですので、初心者の方は操作が難しいかもしれません。社内で作成し共有する分には他のツールを使った方が効率よくワイヤーフレームを作れるでしょう。

まとめ

ワイヤーフレームの作り方を見ると、「どうしたらユーザーに訴求できるか」がポイントであることがわかるでしょう。なぜなら、ユーザーに有益な情報をピックアップし、見やすい配置を考えなければならないからです。ワイヤーフレームを作るときも、ワイヤーフレームをもとにWebサイト制作者と認識合わせをするときも、ユーザーの立場で見ると、最善策がわかるのではないでしょうか。

当社TRASPは、お客さまのご要望を加味してユーザーに訴求できるWebサイトデザインのご提案をしています。お客さまに寄り添ったホームぺージをお作りしますので、どのようなお悩みやご要望もお気軽にお聞かせください。