Web制作に必要なワイヤーフレームについて

ワイヤーフレームとは

ワイヤーフレームとは、Webサイトやページ、アプリなどを制作する前に用意する「設計図」のようなものです。ワイヤーは「線、骨」、フレームは「枠組み」という意味があり、線や言葉を使ってレイアウトをシンプルに表現したものが、ワイヤーフレームです。

ワイヤーフレームの基本情報について順に解説していきます。

デザインカンプとの違い

ワイヤーフレームと似たものに、デザインカンプがあります。ワイヤーフレームが設計図であるに対し、デザインカンプはデザインの見本という位置づけです。

デザインカンプは「Design Comprehensive Layout（デザイン カンプリヘンシブ レイアウト）」の略で、Webサイトやページのデザインの完成見本を指します。Webサイトやページの完成イメージを、クライアントへ提示するために使用されます。デザインカンプは複数用意され、実際にクライアントへ提示されるのはもっとも完成イメージに近いものです。

ワイヤーフレームは、デザインの骨格部分を構成しているため、デザインのビジュアル面は考慮されていません。ワイヤーフレームで作られた骨格部分へ画像やテキストを挿入したり、色やフォントサイズを指定したりしてデザインカンプは作成されます。

誰がワイヤーフレームを作成するか

ワイヤーフレームの作成者に指定はなく、必ずしもデザイン経験者にこだわる必要はありません。一般的には、ディレクター主導でワイヤーフレームの作成が進められることが多いです。ディレクターはクライアントからのヒアリング内容から、必要なコンテンツを組み立てていく役割を持っているため、ワイヤーフレームの作成も担当します。

なお、ディレクターがワイヤーフレームを作成したあとは、デザイナーがワイヤーフレームを元に具体的なWebサイトやページのデザインを進めていきます。

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

ワイヤーフレームはクライアントからのヒアリングによってWebサイトの方向性を把握しているディレクターが作成することが多いです。「それならワイヤーフレームを作成せず、デザインに進んでも問題ないのでは？」と思う方もいるかもしれません。

ワイヤーフレームはなぜ作成する必要があるのか、ワイヤーフレームを作成すると得られるメリットと、作成しないことで生じるデメリットとともに解説します。

ワイヤーフレームを作成するメリット

ワイヤーフレームを作成すると、以下のメリットが得られます。

• 実際のWebサイトに掲載した際のサイズ感が掴める
• デザインに取りかかる前に「足りない要素や不足している情報がないか」「ユーザーの使いやすい動線になっているか」などをチェックできる
• Webサイトのレイアウトや設置する機能、完成図を複数の制作者で共有できる
• Webサイトのアイディア出しや議論のたたき台として使用できる

ワイヤーフレームを作成すれば、実際のデザインに入る準備段階で活用できるほか、複数の制作者でWebサイトの方向性を共有できます。

ワイヤーフレームを作成しないで起こるデメリット

ワイヤーフレームを作成せずにデザインへ進行してしまうと、以下のようなデメリットや不具合が発生します。

• デザインイメージのズレが起こりやすい
• 必要な情報の整理ができない
• 情報や要素の入れ忘れが発生することがある
• ミーティングや作業がスムーズにいかない場合がある

ワイヤーフレームなしでWebサイトやページの制作に進むと、デザインイメージや入れる機能、情報の共有ができず制作の方向性も一致しません。事前にワイヤーフレームによる確認ができないため、必要な情報や機能を入れ忘れる、といったことも発生する可能性もあります。情報の追加やデザインのやり直しなどが発生し、結果的にワイヤーフレームを作成するよりも制作工程が増えてしまうこともあります。

ワイヤーフレームの役割

ワイヤーフレームはWebサイトやページ制作のうえで重要性が高いことが分かりました。次にワイヤーフレームのWebサイトやページ制作における具体的な役割について解説します。

• 簡単な構成案をクライアントやチームに対して視覚的に示すために作成できる
• ワイヤーフレームは制作前に操作性や機能について確認できる
• チーム内の情報共有ツールとしての役割がある　等

情報を整理し、制作チームと認識を合わせる

ワイヤーフレームは、クライアントのヒアリング内容を元に作成されます。クライアントの要望を整理し「どの情報を/ページ内のどこに/どのように配置するか」を決め、Webサイトやページの骨格部分として活用されます。

ワイヤーフレームによってWebサイトやページに盛り込む情報や機能、デザインのレイアウトといった方向性も定まります。ディレクターやデザイナーをはじめとした複数の制作者同士でWebサイト制作の方向性や認識を合わせるためにも、ワイヤーフレームは重要です。ワイヤーフレームで認識を共有することで、制作作業のブレやズレを防ぎ、制作チーム同士のやりとりや作業もスムーズに進められます。

Webサイトのレイアウトやページ構成をイメージしやすくする

ワイヤーフレームを作成すると、Webサイトやページの簡単な構成案を可視化できます。クライアントや制作チームにWebサイトのレイアウトやページ構成などを視覚的に提示できるため、全員が完成イメージを共有できるようになるでしょう。ワイヤーフレームは、クライアントのイメージ通りにWebサイト制作が進んでいるかを確認する役割も果たします。

ワイヤーフレームの作成手順

ワイヤーフレームを作成することで、Webサイトやページの作業がスムーズに進んだり、方向性を共有したりするのに役立ちます。けれども「ワイヤーフレームを作りたいけれども、作り方が分からない」という方も多いかもしれません。

ワイヤーフレームの作成方法を、手順に沿って解説します。

1.情報整理をした後に必要な要素を書き出す

まずWebサイトやページに掲載したい情報を、クライアントからのヒアリングを元に整理します。以下のピックアップ→グルーピング→ランキングの順で情報の整理をしましょう。

• ピックアップ…Webサイトに掲載したい情報をすべて書き出す
• グルーピング…ピックアップで出てきた情報を、似ているもの同士でグループ分けする
• ランキング…グルーピングした情報の優先順位をつける

2.レイアウトを決める

整理した情報のレイアウトを決めます。レイアウトとは、「どの情報を、ページ内のどこに、どのように」配置するかを定める作業です。

おもなWebサイトのレイアウトには、以下のものがあります。

• シングルカラムレイアウト…縦長で1列に段組み（カラム）したレイアウト
• マルチカラムレイアウト…2～3列で段組みしたレイアウト
• ブロークングリッドレイアウト（ノングリッドレイアウト）…境界線がない自由なデザインのレイアウト
• タイル型レイアウト…コンテンツをタイル状に並べたレイアウト
• ヘッダー固定レイアウト…スクロールしてもヘッダーが固定されているレイアウト
• サイドバー固定レイアウト…スクロールしてもサイドバーが固定されているレイアウト

いきなり作成ツールを開いてレイアウトを作りはじめると、Webサイト公開後に「見たい情報がどこにあるか分からない」「パソコンでは見られるがスマートフォンでは見づらい」といった不具合が発生します。

掲載する情報の量と質に合うものを選ぶのはもちろん、Webサイトのユーザーの閲覧環境を考慮したレイアウトを選ぶのも重要です。パソコンでも幅広いモニターサイズがあり、スマートフォンをはじめとしたモバイルデバイスも普及したため、Webサイトの閲覧環境も多様化しています。Webサイトに載せる情報とターゲットとするユーザーの閲覧環境を踏まえ、適切なレイアウトを選びましょう。

3.ラフ案を書く

Webサイトのレイアウトを決めたら、掲載する情報の要素と優先順位を踏まえて、ページに配置しWebサイトの骨格を作っていきます。ワイヤーフレーム作成ツールを使っていきなりワイヤーフレームを作ってしまっても問題ありませんが、まずは手書きでラフ案を書くのがおすすめです。

手書きなら、ワイヤーフレーム作成中に「新しく情報を追加したい」「情報の量を変えたい」といったことが出てもすぐに対応できます。

4.ワイヤーフレームツールで清書する

手書きのラフ案が完成したら、ワイヤーフレーム作成ツールを使用してワイヤーフレームの清書を行います。ツールを使って清書することで、ワイヤーフレームがより見やすくなり、クライアントや制作チームへ共有しやすくなります。さらに、手書きをデータ化することで、Webサイトの制作作業を効率化したり、似たようなレイアウトのWebサイトを制作するときの参考にしたりといった使い方も可能です。

清書の際、掲載する情報や要件に矛盾が出ていないかもチェックしましょう。ワイヤーフレーム作成ツールのプロタイプ機能を使うとワイヤーを連結できます。各ページに配置するボタンなどに矛盾がないかをチェックするのに役立ちます。

Webサイト作成時に、ワイヤーフレームとして「アウトプットされないが必要な対応」というものが発生します。たとえば、メールフォームページのメールフォームの自動返信の件名、文面などです。ワイヤー上にはアウトプットされないこれらの要素は、「サイト制作として派生する必要要件の洗い出し」にも活用できます。

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

ワイヤーフレームの作成には、ワイヤーフレーム作成ツールの利用が便利です。さまざまなツールがリリースされているため「どのツールを選んでよいか分からない」という方もいるでしょう。そこで、おすすめのワイヤーフレーム制作ツールを3つ選びました。

それぞれのツールの特徴についても解説していますので、ぜひツール選びに役立ててください。

Adobe XD

「Adobe XD（エックスディー）」はデザインカンプやプロトタイプの作成ができるプラットフォームです。ワイヤーフレームの作成ももちろんできます。作成したワイヤーフレームに対してブラウザ上で直接コメントができるため、共同作業やコンセプト考案、開発者へのハンドオフもしやすいです。

MacとWindows両方に対応しているため、ディレクターとデザイナーなどクロスプラットフォーム環境での共同作業も可能です。テキストや画像などの任意のオブジェクトの繰り返しプロセスの自動化ができる「リピートグリッド」などの、作業を効率化できる機能もそろっています。

Adobe XDを使用するとワイヤーフレームからデザインカンプ、プロトタイプまで一貫してひとつのツールで作成できます。

Figma

「Figma（フィグマ）」はアプリだけでなくブラウザ上でも使用できるデザインツールです。ブラウザ上で共同編集ができるため、リアルタイムでの提案やレイアウトの決定などもできます。なお、共同作業はFigmaアカウントを持っていない人も参加可能です。

スマートフォン向け、PC向けフレームが用意されているほか、直観的に操作ができ、デザインやツールの知識がない人でも使いやすいメリットがあります。

月額で利用料金が発生する有料プランのほか、期間無制限で利用できる無料プランも用意されています。ただし、無料プランは作成可能なファイル数に限りがあるため注意が必要です。

まずは無料プランで試しに使用してみて、より多くのワイヤーフレーム作成をしたいとき、デザインカンプやプロトタイプも作成したいときには有料プランに移行する、といった使い方がおすすすめです。

エクセル・パワーポイント

Microsoftの提供している表計算ソフトのエクセル（Excel）や、プレゼンテーションソフトのパワーポイント（PowerPoint）を使ってフレームワークを作成することもできます。いずれのソフトもすでにパソコンにインストールされていることが多く、Microsoft Officeがインストールされていれば無料で利用可能です。ワイヤーフレーム作成のために新しいツールを購入する必要なく、すぐにワイヤーフレーム作成をはじめられるメリットがあります。

また、ビジネスシーンのさまざまな用途でエクセルやパワーポイントは活用されています。操作に慣れている人が多いのもメリットと言えるでしょう。ただし、ワイヤーフレーム作成に特化したツールと比べると、機能面では劣ります。

ためしにワイヤーフレーム作成をしたいときにはエクセルやパワーポイントを使ってみて、より複雑なワイヤーフレームを作成したいとき、共同作業をしたいとき、ワイヤーフレームからデザインカンプを作りたいときなどは必要に応じてほかのツールへ移行する、といった方法もあります。

ワイヤーフレームを作成する上で注意したい事

ワイヤーフレームの作成手順を理解し、ツールを導入してもワイヤーフレーム作成が思うように進まないことがあります。ワイヤーフレーム作成のまえに覚えておきたい、注意すべきことを紹介します。

競合サイト・参考サイトを分析してから作成する

ワイヤーフレームの作成に入る前に、まずは競合サイトや参考サイトを分析しコンテンツの配置やページの見せ方を参考にしてみましょう。いきなりワイヤーフレーム作成に入ってしまうと、レイアウトや情報の入れ方が分からなかったり、アイディアが浮かばかかったりするためです。

ワイヤーフレーム作成ツールの中には、無料のテンプレートを用意しているものもあります。同じレイアウトでも、テンプレートを変えるとWebサイトやページの印象はまったく違うものになることも多いです。競合サイトや参照サイトのほか、テンプレートも活用しながらワイヤーフレーム作成を進めましょう。

スマホ版サイトとPC版サイトは別々に作成する

同じ内容を掲載するWebサイトでも、スマートフォン版とPC版両方のバーションのサイトを作成する必要があるため、ワイヤーフレームも別々で作成しましょう。近年スマートフォンが普及し、さまざまなサイトをスマートフォンで閲覧するユーザーも多いです。PC版のサイトをスマートフォンで読みこむと、レイアウトが崩れてユーザーが見づらいと感じ、離脱してしまう可能性が高くなります。

すべてのページでスマホ版とPC版を作成する必要はありません、トップページや商品ページなど、スマホ版とPC版それぞれでサイトやページを作成する場合は、それぞれのワイヤーフレーム作成が必要です。

ワイヤーフレームでデザインをしない・作り込み過ぎない

ワイヤーフレームではデザインを作り込み過ぎないように注意しましょう。その後のデザイナーのデザインや作業の幅を狭めてしまうためです。また、デザインまで作り込んだワイヤーフレームをクライアントに提示すると、本来はワイヤーフレームの範囲には含まれないデザインに関する要望や修正を受けてしまう可能性もあります。

設計図にあたるワイヤーフレームに色や文字のサイズ、デザインなどの要素は必要ありません。サイトやページのどこに、どのコンテンツが入るかという情報や、レイアウトについて分かるようにするのが重要です。

まとめ

今回はワイヤーフレームの概要や、作成手順、おすすめのツールを紹介しました。ワイヤーフレームを作成すれば、設計図としてWebサイトのデザインに活かせるだけではなく、Webサイトに掲載する情報やレイアウトを共有できるため、制作チームでの作業をスムーズかつ正確に進められます。

ワイヤーフレームの作成ができない、ワイヤーフレームは作れたがデザインができない、制作がうまく進まない、といったことでお悩みの際はオニオン編集部が運営する「チームNext!」へぜひご相談ください。新しいWebサイトの制作のほか、Webサイトのリニューアル、セキュリティ対策、集客支援などさまざまなお悩みに対応いたします。