調査・研究レポートReport

みなさんはウェブサイトを制作する上の中間成果物としてワイヤーフレームを制作していますか？ 今日はワイヤーフレームについて少し深めていこうと思いますのでお付き合いください。

ワイヤーフレームとは

ワイヤーフレームとは、Webページの構成やレイアウトを大雑把に示した簡易な図。ページ内のコンテンツの構成や配置を決定するための下書き。

IT用語辞典 e-words ワイヤーフレーム 【 wireframe 】

http://e-words.jp/w/%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0.html

とあるように、ワイヤーフレームはウェブサイト制作における中間成果物としての簡易的な画面設計図という意味の強い設計ドキュメントです。

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

ワイヤーフレームはどのような目的で作成されるのかについてみてみると以下のような項目が思い浮かびます。

• レイアウトを決める
• ビジュアルデザインを決める
• プロトタイピング
• 原稿を決める
• 仕様書としての役割

レイアウトを決める

ワイヤーフレームというドキュメントに落としこむ段階でどの要素をどのように配置するかを明確に示すことが可能となります。すなわちレイアウトするということです。レイアウトすることによって、どのような要素がそこに存在しているのかが明確になるため不足要素を見落とすといったことがなくなります。

例えば、レイアウトが済んだワイヤーフレームをもとにお客様とお打ち合わせをすることによって「ここにこれを追加してよ」と言ったコミュニケーションが生まれます。実際に図に落としてみるまではお客様としてもイメージがわきづらいものです。詳細に作りこむデザインカンプを最初から作るよりは時間がかからないので、まずはワイヤーフレームレベルの文書を作成してお客様との認識の共通化を図ることによって、デザインをより具体的な形に落とし込んでいくプロセスを順番に勧めていくことが可能となります。

ページタイプについても少しだけ見ていきましょう。

ポータル型（トップ型）

トップページ等をはじめとする各ページへのリンクを各所に配置したページのことをポータル型のページと言います。主にトップページに用います。トップページと言っても総合トップページ以外には、例えば採用トップページなどもポータル型を採用することによって採用ページの各下層ページへの遷移を柔軟に表現することができるかもしれません。

リスト型（一覧型）

リスト型ページとは主にお知らせやブログの一覧ページを例にあげることができます。リスト型ページには、テキストだけのタイプや画像だけのタイプ、テキストと画像の両方を併せ持つタイプなどの種類に分けることができます。負荷を下げるためにテキストだけのレイアウトにしたり、毎回充実した画像を準備することができる場合には、画像を含めたレイアウトにするなど、主に運用面の負荷を考えて設計することも重要な要素となります。

コンテンツ型（詳細型）

コンテンツ型とは主に詳細ページや固定ページのことを指します。特にこれといった特徴はなく、1ページに対してそのページの内容が表現できていればOKです。ランディングページのように縦長のレイアウトにする場合もありますし、ページを適宜分けることができるのであれば、ユーザーストレスを考慮した単位に分割してページを配置する場合などもあります。このあたりの設計はデザイナーの好みに分かれるでしょう。

個人的にはSEOを意識したページを制作する意識を持つことが大切だと思います。一つの内容について十分に掘り下げ、充実したコンテンツ量を持つページとして作成し、お問い合わせに繋げていくために1点突破のページ制作が制作のキモだと思っています。集客用のコンテンツと転換用のコンテンツは分けて考えることが必要ですね。

機能型

お問い合わせや検索など特定の機能を実現するためのページの種類のことを機能型ページと言います。コンテンツ型のページで集客を行い、機能型のページでお問い合わせに繋げていくといった使い分けが一つ需要だと上記でも書きましたが、この構造を意識するだけでサイトの設計における役割が明確になります。闇雲にページを増やすのではなく、何のためのページなのかといった意識を持つことがお問い合わせに繋げていく上では重要な要素となると断言しておきます。

ビジュアルデザインを決める

ビジュアルデザインを持つワイヤーフレームはほぼほぼデザインカンプと同義となります。Xdを利用してワイヤーフレームを作成し、そのまま詳細を作りこむことによってデザインカンプとして作りこむ流れが Xd を利用したデザインワークフローとしては一般的です。Xdを利用することによって、パソコン上のファイルとしてもXd形式のファイルを扱うことになりますし、ワイヤーフレームの延長線上にビジュアルデザインの詳細があるという認識を持てるとよいかと思います。

そして、ワイヤーフレームの段階からある程度の画像をはめ込んでしまうことによって、よりイメージの付きやすいワイヤーフレームに仕上げることが可能です。お客様のイメージをより明確に想起させる必要がある場合やワイヤーフレームの作成に十分な時間が取れる場合などには、ある程度のビジュアルデザインがイメージできるようなワイヤーフレームを作成するという意識をもってデザインするとよいでしょう。

プロトタイピング

Xd のプロトタイプの機能を利用することによって画面遷移を設計し、実際に画面上の要素をクリックしながら画面遷移を試すことができます。ウェブサイトを作るためにはコーディングというフェーズを挟む必要性がありますので、時間がより多くかかりますが、Xd によるプロトタイプの機能を利用すれば短時間でプロトタイプの作成が可能です。プロトタイプの作成によってユーザーフローを設計し、実際に試すことによって新たな課題が見つかるかもしれませんね。

私はお客様にワイヤーフレームを提出してみて頂くときにはプロトタイプとして実際に画面遷移を体験してもらいながらお見せすることがほとんどです。お客様としてもイメージが非常につきやすくフィードバックを戻しやすい環境が整ったり、コミュニケーションが円滑になることは間違いありません。

ユーザーフローを考える

お問い合わせなどのユーザーアクションまでの導線を設計することも重要なプロトタイピングによける作業の一つです。ユーザーアクションまでの導線が十分でなければ、ユーザーアクションが起きる確率が低くなる可能性が否定できません。ユーザーアクション導線の充実という目線でユーザーフローを設計し、実際に画面遷移を体験することによって、効率的なユーザーフローの設計が可能となります。

逆に、プロトタイプを設計することによってこれらユーザーフローの課題に気が付くことができますので、実際にデザインカンプの制作に入る前に十分に検証を重ねることが重要だと言えるでしょう。

原稿を決める

もう一つはお客様にワイヤーフレームをお見せするタイミングで一通りの原稿を作成して入れ込んだ形にすることもお客様とのコミュニケーションを円滑にする上では重要となります。現実のものではないアテのテキストの場合にはデザインする上でも気持ちが入らなかったりするためハリボテとしてのデザインになってしまう恐れが非常に高いです。原稿の品質を担保する上でもレイアウトやビジュアルイメージと同時に原稿もお客様に見て頂くことによって、制作に関するコミュニケーションを取っている時間を短縮することができます。

仕様書としての役割

上記で見てきたようにワイヤーフレームとは何かということを一言で表すと「ウェブサイト制作における仕様書である」と言い換えることが出来そうです。主に以下の4つの機能があります。

• レイアウトについてお客様やデザイナーとのコミュニケーションを円滑にする機能
• ビジュアルデザインについてお客様やデザイナーとのコミュニケーションを円滑にする機能
• プロトタイプとしてお客様やユーザーフローを設計するプランナーとのコミュニケーションを円滑にする機能
• 原稿についてお客様とのコミュニケーションを円滑にし品質を高めるための機能

ワイヤーフレーム不要論も唱えられる時代にもなりましたが、ワイヤーフレーム一つに上記の機能が凝縮されているためウェブ制作においては絶対に外すことができないドキュメントと個人的には考えています。これらを詰め込んだワイヤーフレームがなしにお客様とのコミュニケーションを考えると、その時間が何倍にも膨らんでいくことが容易に想像できます。0からウェブサイトを制作するということはそう簡単なことではありませんから、きちんとウェブサイトを設計する上での重要な位置を占めているドキュメントであるという認識は過去も現在も変わらないのではないでしょうか。私は未来にもきっと必要なものだと信じています。

画面設計を行う上での考え方

画面を三つに分けて考える

以下の4つに分けて考えるとわかりやすいです。要素の配置を考えるうえで以下の4分類は常に頭の片隅に置いておくとよいでしょう。

• グローバルエリア（共通ヘッダー／共通フッター）
• ローカルエリア（ローカルナビゲーションなど）
• コンテンツエリア
• リファレンスエリア

グローバルエリアはヘッダーやフッターなどの共通要素が並ぶ箇所、コンテンツエリアはそのページならではのコンテンツが並ぶ箇所、リファレンスエリアはコンテンツエリア下部などに設置されるコンテンツに関連のあるコンテンツを並べたりする箇所を指します。大きくこれらの要素が不足なく並ぶように画面を設計していくことによって、何か足りないなぁといった感覚が少なくなるのではないでしょうか。必要な要素を必要なだけ並べていくと充実しているサイトに見えますね。ただし、闇雲に要素を増やせばよいというわけでもなく、過剰すぎるコンテンツ量はユーザー体験の質を落とす可能性もありますので注意が必要です。

ヒューリスティック分析によって比較する

ヒューリスティック分析なんて横文字で書きましたが要するに競合他社のサイトなど、同じ業界で参考になるサイトをたくさんピックアップして良いところを盗むということが有効ということが言いたいです。

ウェブサイトはこれまで世の中に一度も出てきたことのないような完全にオリジナルなものを制作する必要性もないのです。別の誰かが一生懸命考えて制作した優れたウェブサイトがウェブ上にはたくさんあります。それらの良いところを盗めるだけ盗んで、お客様独自の強みを引き出せる方向で要素を追加したりカスタマイズしていけばよいのです。温故知新、先人の知恵を借り、クライアントと重なる部分があれば進んで流用していくことが制作においては一つ重要なプロセスであると言えると思います。

顧客の戦略に従う

ヒューリスティック分析の項目でも挙げましたが、世の中にある優れたサイトを真似るだけでは顧客にとって価値のあるものになるかどうかはわかりません。顧客にはそれぞれ戦略というものがありますので、その戦略を実現するために必要なサイトに仕上げていく必要があるのです。これらは主に優先順位として要素の並び順として現れたり、そもそも要素として存在させるべきかどうかや、競合サイトにない要素を追加する必要性に駆られたりします。

ウェブサイト制作における顧客担当者との打ち合わせを重ね「ウェブサイトで何を実現したいか」を体現するために必要な設計を施す必要があるという視点は絶対に忘れないようにしてください。

現代のワイヤーフレームの作成に用いられるツール

私は普段 Adobe のツールをメインに利用しているためここではAdobe のツールを参考としてあげますが、現代のワイヤーフレーム制作におけるツールとしてはAdobe Xd 一択といってよいでしょう。

Adobe Experience Design

Adobe Experience Design 略して Adobe Xd を利用することによって、デザインツールの利用に慣れていないデザイナーでなくても簡単な操作でワイヤーフレームなどのデザインドキュメントを制作することが可能です。私自身もデザイナーとしてのスキルはまだまだ高くないのですが、Xdは特に大きな負荷なく利用を始めることができましたし、利用を続けることもできています。

また、Xd はデザインカンプを制作するためのツールとしても利用されるようになってきているため、現在のウェブデザインシーンにおける利用率は徐々に高まってきていると言えるでしょう。従来の方法としては、ウェブデザインにおいては、Adobe Photoshop を利用してデザインされる場合が最も多く、次いで Adobe Illustrator でのデザインも多かったと言えますが、圧倒的な強みや独特のワークフローを持つ Xd ならではの強みを考えると今後徐々にそれらのツールにとって代わる存在だと言えるのではないでしょうか。

Xd の強みとしては以下のようなものがあげられます。

• 要素間の距離を計るための機能や素材画像をすべて書き出してくれる機能などが充実したデザインスペック
• 画面をクリックしながら画面遷移を疑似的に体験できるプロトタイプ
• 他のツールと比較すると圧倒的に動画が軽い

これらは Photoshop や Illustrator にない Xd だけの強みです。これらを手に入れたければ Xd を利用する以外に選択肢はありません。

まとめ

ワイヤーフレームを作成することによるメリットをいくつか挙げてみましたが、ご理解いただけましたでしょうか？

ワイヤーフレームを作成するということはオリジナルのウェブサイトを制作する上では欠かせない工程ではありますが、その必要性にフォーカスしてみると重要であるということを再認識することにつながると思います。お客様との制作コミュニケーションにおいて非常に重要な中間成果物としてのワイヤーフレームを作成し、コミュニケーションを円滑にし、時間を短縮することによって、優れた制作物を作ることにも繋がっていくと思いますので、ぜひワイヤーフレームの作成についても深めて頂ければと思います。

また、Adobe Xd をはじめとする新しいツールの出現についていくことが仕事でパフォーマンスを出していく上では非常に重要です。従来の方法にとらわれず、現代の制作手法にとって最適な手法にどんどん乗り換えていくような柔軟さが必要であると私はそう思います。制作会社などの制作組織におけるワークフローを再設計する必要性などもあるのですが、取り組む価値は確実にあります。まだ Xd による制作ワークフローをお試しでない場合には、ぜひ一度試していただければと思います。

オススメの記事

UXデザインや情報アーキテクチャ関連の記事として、よかったら以下の記事もご覧ください。

https://flares.jp/digimag/understanding-navigation-ux-design-information-architecture-practice/

書籍のご紹介

最後に私が学んできた情報アーキテクチャに関する書籍を少しだけご紹介します。オライリーの白くま本は少し内容が難しいし、実践というよりは割とアカデミックな内容が多い印象です。それよりかは実践的な内容で書かれたその他の2冊が読みやすいのでお勧めです。ちなみに僕が持っている白くま本は第2版（5年以上前に購入）なのに対して現在は第4版まで進んでいるのでそれだけ多くの方々に読まれている書籍と言えそうですね。「情報アーキテクチャを学ぶ」ということはウェブ／UXデザイナーやウェブディレクターとして専門知識を深めるには避けて通れない道ではないでしょうか。

INFORMATION ARCHITECT 100
ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
https://amzn.to/2TGEwMF

100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。

IAシンキング
Web制作者・担当者のためのIA思考術
https://amzn.to/2HsZWGo

ウェブディレクター向けです。実践的でわかりやすい。

情報アーキテクチャ
見つけやすく理解しやすい情報設計
https://amzn.to/2TLuYQo

内容は非常に学術的で難しいです。ボリュームも一番。実践するにはかみ砕いて理解する力と応用力が必要です。