ワイヤーフレームって何？作り方を完全解説！

サイト作成の際に「ワイヤーフレーム」という単語を目にしたこともある人も多いですが、実際にワイヤーフレームがどのようなものなのかはいまいちわからないという人は多いのではないでしょうか。

ワイヤーフレームを作成することには様々なメリットがあり、特に複数人でサイト作成を行う際にとても役立つものです。

今回はワイヤーフレームについて紹介しながら、作成方法やおすすめのツールについても説明していきます。

ワイヤーフレームとは

ワイヤーフレーム は、webサイトのレイアウトを決定するための設計図のことで、「どこに・何を・どのように」配置するかを明らかにするものです。

そのため、アプリ開発やサイト作成において欠かせないものとなります。。

多くの場合、構成の異なるページの数だけワイヤーフレームを作成します。

トップページと下部ページではレイアウトが異なるwebサイトも多いと思いますので、その場合はトップページと下層ページで異なったワイヤーフレームを作成することになります。

「webページのレイアウトの数だけワイヤーフレームがある」と覚えておきましょう。

ワイヤーフレームの役割

ワイヤーフレームの主な役割は、webページの完成イメージを「見える化」することです。

複数人で作業をしている場合でも完成イメージの共有ができるようになりますので、個人の認識の違いによる制作作業のブレを防くことができ、意思疎通がしやすくなることでワークフローがスムーズに進めることができるといったメリットがあります。

また、ワイヤーフレームをきちんと決めておくことで、画面に足りていない要素や邪魔な要素、ユーザーの視線誘導などをあらかじめチェックすることができ、デザインやコーディングに入ってからの後出しでの追加や、遡っての修正を防ぐことにも繋がるため、効率的な制作進行管理を行えるというメリットもあります。

間違えやすい言葉

ワイヤーフレームと似た役割を持つ間違えやすい用語を3つ紹介します。

デザインカンプ

デザインカンプは、クライアントに完成イメージを伝えための「デザインの完成見本」のことです。

複数作ったデザインカンプをクライアントへ提示し、クライアントが選んだものをもとに実際の制作を行う、という流れが一般的です。

それに対して、ワイヤーフレーム は関係者全員に情報の種類とレイアウトを伝える設計図です。

ワイヤーフレームは設計図・デザインカンプは完成見本、と覚えておくとわかりやすいですよ。

サイトマップ

サイトマップは、webページの全体の構造を分かりやすく示すものです。

サイト内のコンテンツを検索エンジンに伝えるXMLサイトマップと、サイトに訪れたユーザーに伝えるHTMLサイトマップの二種類があります。

ワイヤーフレームはwebページ単体の配置を示しているのに対して、サイトマップはwebサイト全ての構造（ページ）を示します。

また、ワイヤーフレームは制作作業の際に用いられますが、サイトマップは制作完了後のサイト運用時に作成されます。

サイトマップはサイトの全体像を表して制作後のサイト運用時に使うもの、ワイヤーフレームは1ページごとを表して制作作業中に使うもの、と覚えておくとわかりやすいですよ。

ディレクトリマップ

ディレクトリマップは、サイト全体の構造の情報や配置場所をまとめた一覧表のことです。

そのため、ディレクトリマップとワイヤーフレームでは、範囲や仕様の違いがあります。

ディレクトリマップは、サイト内の構造を理解するために作成します。

樹形図形式や表形式で、階層ごとにタイトル・URLを書き出すことでディレクトリマップの階層構造が可視化され、サイト内の構造が理解しやすくなります。

ワイヤーフレームは単体のレイアウトを決めるもの、ディレクトリマップは全体のwebページの配置や仕様を決めるもの、と覚えておくとわかりやすいです。

ワイヤーフレームの必要性

ワイヤーフレームを作成する際にwebページ作成に関わる人達で議論やアイデアを出し合うためのたたき台としてワイヤーフレームがあることで、決定事項が残るため、作成陣での追加修正やトラブルの防止に役立ちます。

また、作成する際にも全員が同じワイヤーフレームを見て作成することで、認識のズレを防ぐことができ、webページ作成をスムーズに行うことが出来ます。

複数人でwebページ作成をする際には特に、ワイヤーフレームの作成が必要となります。

ワイヤーフレームの作り方

実際にワイヤーフレームを作成するには、どのような流れで作成すればいいのかについて、詳しく説明していきます。

情報の整理

どんなサイトにするのか、コンセプトや目的などによってwebページに掲載する情報やデザインなどが大きく変わるため、ターゲットや伝えたいことなどが明確でない場合は、まずクライアントに確認することが大切です。

そのうえで必要だと思われる情報をピックアップしていきます。

たとえば、「電話番号」「バナー画像」「広告」など、そのwebページに載せるべき情報をすべて書き出しておきます。

あとで整理するので、この段階できれいにまとめる必要はありません。

情報の抜けがないように、思いつくものは全て挙げておき、必要な情報がイメージできない時には、競合サイトの項目を参考にして書き出し、そこから自サイトに必要なものを選ぶとわかりやすいです。

次にピックアップで出てきた複数の情報をグループ分けしていきます。

たとえば、「住所」と「電話番号」はどちらも連絡先というグループ、「ロゴ」と「会社名」はどちらも会社を表すものというグループ、のように行います。

こうしてグループ分けをすることで、実際のwebページになったときに、情報が分散してわかりにくいという事態を防ぐことにつながります。

最後に、先ほどグループ分けした情報に優先順位をつけていきます。

webサイトの目的に沿って、適切な優先順位をつけていきましょう。

たとえばコーポレートサイトなら、会社を認知してもらうことが重要なので、社名やロゴが含まれる「会社を表すグループ」に高い優先順位をつけて、目立つ配置にする必要があります。

反対に、企業色を少なくしたいコミュニティサイトなどの場合は会社の情報を目立たせる必要がないため、この場合は同じ「会社を表すグループ」の優先順位は低くなります。

このように、どんなサイトにするのかを明確にしてから、ピックアップ→グループ分け→優先順位付けというように情報の整理を行っていきます。

情報の整理をしっかりしておかないとあとから修正を行うことに繋がるため、丁寧に情報の整理を行うことが大切です。

レイアウトを決める

情報の整理ができたら、レイアウト決めていきます。

スマホの普及等により、サイトを閲覧する側の環境が多様化しています。

それと共に様々な種類のレイアウトが現れており、お洒落で動きも派手なレイアウトに憧れてしまいがちですが、初心者の場合はまず定番のレイアウトを覚えてから挑戦する方がいいでしょう。

レイアウトの大枠は「画面をどう分割するか」分割方法を決めることです。

今回はマルチカラムという、カラムが複数あるレイアウトをについて説明していきます。

カラムは画面を縦に分割したときの単位で、日本語では「列」と言います。

縦のカラム(列)に対して、画面を横に分割した時の単位はロー(行)と呼ばれます。

マルチカラムとは、カラムが複数存在するレイアウトのことで、カラムが2つある場合には「2カラム」、3つの場合は「3カラム」と呼びます。

webページにはそれぞれの場所に役割があるので、詳しく紹介していきます。

ヘッダー

ヘッダーとは画面の最上部エリアのことです。

サイト訪問者がはじめに見る場所で、webページの看板になる部分です。

ヘッダーはサイト内のどのページにも共通して表示されるため、重要な会社名やサイト名が分かるロゴ・売上に結びつくような成約ボタン・サイト内の各ページを行き来するナビゲーションなどを配置するのが一般的です。

特に、複数のページから成り立っているようなWebサイトの場合、ナビゲーションは極めて重要な役割をもっています。

このメインナビゲーションは、グローバルナビゲーションと呼ばれ、サイト内の主要なページヘ分岐します。

グローバルナビゲーションを設置することでユーザーがサイト内で迷子になることを防ぐことができ、離脱率を下げることに繋がります。

 

コンテンツ

コンテンツとはwebページの主題を伝えるために大切なエリアです。

読んだり見たりしてもらうために、文章だけでなく、画像・動画・表などを駆使することが重要になってきます。

訪問者の興味を瞬時に惹きつけることで、webサイトの滞在時間を長くする、成約まで導くといった役割を果たします。

サイドバー

サイドバーではナビゲーションとして利用することが多いエリアですが、他にも更新情報や広告のような、載せたいけれどコンテンツに掲載するほどの優先順位ではない情報を掲載したりと利用の幅が広いエリアです。

ページ数や階層の多い大規模なwebページでは、ヘッダー部分のナビゲーションだけでは足りないため、サイドバーにローカルナビゲーションを設置し補うことで、ユーザーがより見やすいサイトになります。

フッター

画面最下部エリアのことです。

コピーライトの明記をしたり、サイトマップとして利用するケースが一般的です。

フッターまでスクロールするユーザーは、webページを最後まで見てくれたということもあり、成約へのハードルが十分に下がっているケースが多いです。

そのため、最後のひと押しとして成約へうまく押し切るために成約へのリンクの設置などに活用するのも効果的です。

下書きをする

レイアウトがある程度決まったら、分割された枠の中に各情報を配置していきます。

作成中に新たに追加したい情報が出てくるケースや、スペースの都合や優先順位によっては削除する情報もあるため、いきなりツールを使うのではなく、まずは紙に書いてみるのがおすすめです。

最初から完璧を目指そうとするのではなく、書いたり消したりを繰り返しながら少しずつ完成に近づけていきましょう。

大まかなレイアウトが決まったら、優先順位の高い情報は、より効果的で最適な場所への配置を考え、webページの目的に対する効果が高くなるように調整していきましょう。

ツールを使って清書する

下書きが完成したら、ツールで清書してワイヤーフレームを作成します。

自分しか見ないワイヤーフレームであっても、ツールを使ってデータとして残しておくと便利です。

ツールを利用すると、似たようなプロジェクトがあれば、1度作成したワイヤーフレームをテンプレートとして利用することができ、2回目以降の作成が楽になるというメリットもあります。

ワイヤーフレームを作る際に気を付けること

実際にワイヤーフレームを作成する際に気を付けるべきことが3点あるため、詳しく紹介していきます。

情報の整理は丁寧に細かく行う

情報の整理はワイヤーフレーム作成にとって1番大切なポイントです。

クライアントの希望のコンセプトや目的は何なのか、そのためにはどのような情報が必要なのかをしっかりと把握することが大切です。

情報の整理を大まかに行ってしまうと後ほど情報を追加するための修正が必要になったりして、余計な手間や時間がかかってしまいます。

そのため、情報の整理は丁寧にしっかりと行うことが大切です。

PC版・スマホ版は別々で作成する

スマートフォン版のサイトは、PC版に比べると画面の横幅が狭くなります。

PC版をスマートフォンでそのまま読み込んだ場合、レイアウトが崩れてしまい、ユーザーから「見にくい」「レイアウトが崩れていて読めない」といったマイナスの印象を与えてしまう可能性もあります。

そのため、PC版とスマホ版ではレイアウトの変更が必要です。

すべてのページでスマホ版を作る必要はありませんが、トップページや重要なページなどはスマホ版のワイヤーフレームを作成してレイアウトを最適化しておくことが大切です。

動作や機能が目的とずれていないか確認しながら作成する

ワイヤーフレーム作成時に最も注意したいのが、ユーザー視点での機能性・操作性がきちんと考えられているかどうかです。

サイトの目的が、ユーザーの求めるものからズレていたり、ユーザーを適切に誘導できていないと、サイトの目的を達成できなくなる可能性があります。

そのため、ワイヤーフレームの作成中は常に機能や動作の目的を意識し、どうしてそのレイアウトや配置にするのか、理由を明確にしておきましょう。

ワイヤーフレーム作成に便利なツール

ワイヤーフレーム作成をする際におすすめのツールを3つ紹介します。

Cacco

出典：https://cacoo.com/

パソコン用、スマホ用のワイヤーフレームのテンプレートがあらかじめ用意されており、図形を直感的に挿入することが可能なので初心者でも簡単にワイヤーフレームを作成することが可能です。

Cacooで作成したワイヤーフレームは、オンラインで共有・共同作業することができます。

Cacooはクラウド型ツールのため、インターネットに接続していれば使用することが可能ですが、タブレットやスマートフォンでの編集はできません。

無料で使えるフリープランもありますが、機能の制限があるので大人数で使用する場合には1ヶ月454円の有料プランがおすすです。

PowerPoint・Excel

マイクロソフトがwindows,macOS,iOS及Android向けに開発・販売しているソフトで、1番のメリットは、多くのパソコンにインストールされているため使い慣れている人が多く、図形を直感的に配置しやすい点です。

Microsoft Officeがインストールされていれば無料で利用することができるのも嬉しいポイントです。

ただし複雑なレイアウトのワイヤーフレームの作成に向いておらず、webページの内容によってはExcelやPowerPointでのワイヤーフレーム作成が難しい場合もあるので注意が必要です。

編集する場合は一人ずつ行わなければならないため、他のメンバーと共同編集したい場合にはGoogleスライドもおすすめです。

Adobe XD

出典：https://www.adobe.com/jp/products/xd.html

使い方や使いやすさがPowerPointと似ており、PowerPointを使える人であれば比較的簡単に操作・作成することが出来ます。

Adobe XDを使って作成したワイヤーフレームは、Adobe XDがインストールされていないパソコンでも確認・コメント入力をすることが可能ですが、編集はAdobe XDをインストール済みのパソコンでのみ行うことが出来ます。
1つのwebページを制作する場合は無料プランで十分なので、無料でワイヤーフレームを作成することができるというのは大きなメリットです。

ホームページ制作をいくつか並行で行う場合には、1ヶ月1,180円の有料プランがおすすめです。

 

まとめ

ワイヤーフレーム とはwebサイトのレイアウト決定の設計図のこと

ワイヤーフレームの役割はwebページの完成イメージを「見える化」すること

ワイヤーフレームと間違えやすい言葉

• デザインカンプ
• サイトマップ
• ディレクトリマップ

ワイヤーフレームの作り方

1. 情報整理
2. レイアウト決め
3. 下書き
4. ツールを使っての清書

ワイヤーフレーム作作成時の注意点

• 情報整理は細かく丁寧に
• PC版とスマホ版は別々に作成する
• 動作・機能が目的とずれていないか確認する

ワイヤーフレーム作成におすすめのツール

• Cacco
• PowerPoint・Excel
• Adobe XD

ワイヤーフレームを作成するのは面倒と思う方もいるかもしれませんが、ワイヤーフレームを作成することでwebページを目的に合ったサイトにすることができ、ユーザーの満足度や成約率へと繋がります。

作成中に新たなアイデアが浮かんでより良いサイト作成に繋がることもあるため、ぜひワイヤーフレームを活用してサイト作成をしてみてください。