今日はワイヤーフレームについて少し深めていこうと思いますのでお付き合いください。ワイヤーフレームとはワイヤーフレームとは、Webページの構成やレイアウトを大雑把に示した簡易な図。ページ内のコンテンツの構成や配置を決定するための下書き。】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形式のファイルを扱うことになりますし、ワイヤーフレームの延長線上にビジュアルデザインの詳細があるという認識を持てるとよいかと思います。ワイヤーフレームの段階からある程度の画像をはめ込んでしまうことによって、よりイメージの付きやすいワイヤーフレームに仕上げることが可能です。お客様のイメージをより明確に想起させる必要がある場合やワイヤーフレームの作成に十分な時間が取れる場合などには、ある程度のビジュアルデザインがイメージできるようなワイヤーフレームを作成するという意識をもってデザインするとよいでしょう。プロトタイプの機能を利用することによって画面遷移を設計し、実際に画面上の要素をクリックしながら画面遷移を試すことができます。よるプロトタイプの機能を利用すれば短時間でプロトタイプの作成が可能です。プロトタイプの作成によってユーザーフローを設計し、実際に試すことによって新たな課題が見つかるかもしれませんね。私はお客様にワイヤーフレームを提出してみて頂くときにはプロトタイプとして実際に画面遷移を体験してもらいながらお見せすることがほとんどです。お客様としてもイメージが非常につきやすくフィードバックを戻しやすい環境が整ったり、コミュニケーションが円滑になることは間違いありません。ユーザーフローを考えるお問い合わせなどのユーザーアクションまでの導線を設計することも重要なプロトタイピングによける作業の一つです。ユーザーアクションまでの導線が十分でなければ、ユーザーアクションが起きる確率が低くなる可能性が否定できません。ユーザーアクション導線の充実という目線でユーザーフローを設計し、実際に画面遷移を体験することによって、効率的なユーザーフローの設計が可能となります。逆に、プロトタイプを設計することによってこれらユーザーフローの課題に気が付くことができますので、実際にデザインカンプの制作に入る前に十分に検証を重ねることが重要だと言えるでしょう。原稿を決めるもう一つはお客様にワイヤーフレームをお見せするタイミングで一通りの原稿を作成して入れ込んだ形にすることもお客様とのコミュニケーションを円滑にする上では重要となります。現実のものではないアテのテキストの場合にはデザインする上でも気持ちが入らなかったりするためハリボテとしてのデザインになってしまう恐れが非常に高いです。原稿の品質を担保する上でもレイアウトやビジュアルイメージと同時に原稿もお客様に見て頂くことによって、制作に関するコミュニケーションを取っている時間を短縮することができます。上記で見てきたようにワイヤーフレームとは何かということを一言で表すと「ウェブサイト制作における仕様書である」と言い換えることが出来そうです。以下の4つの機能があります。原稿についてお客様とのコミュニケーションを円滑にし品質を高めるための機能ワイヤーフレーム不要論も唱えられる時代にもなりましたが、ワイヤーフレーム一つに上記の機能が凝縮されているためウェブ制作においては絶対に外すことができないドキュメントと個人的には考えています。これらを詰め込んだワイヤーフレームがなしにお客様とのコミュニケーションを考えると、その時間が何倍にも膨らんでいくことが容易に想像できます。0からウェブサイトを制作するということはそう簡単なことではありませんから、きちんとウェブサイトを設計する上での重要な位置を占めているドキュメントであるという認識は過去も現在も変わらないのではないでしょうか。私は未来にもきっと必要なものだと信じています。画面を三つに分けて考える以下の4つに分けて考えるとわかりやすいです。要素の配置を考えるうえで以下の4分類は常に頭の片隅に置いておくとよいでしょう。グローバルエリア(共通ヘッダー/共通フッター)ローカルエリア(ローカルナビゲーションなど)コンテンツエリアリファレンスエリアグローバルエリアはヘッダーやフッターなどの共通要素が並ぶ箇所、コンテンツエリアはそのページならではのコンテンツが並ぶ箇所、リファレンスエリアはコンテンツエリア下部などに設置されるコンテンツに関連のあるコンテンツを並べたりする箇所を指します。大きくこれらの要素が不足なく並ぶように画面を設計していくことによって、何か足りないなぁといった感覚が少なくなるのではないでしょうか。必要な要素を必要なだけ並べていくと充実しているサイトに見えますね。闇雲に要素を増やせばよいというわけでもなく、過剰すぎるコンテンツ量はユーザー体験の質を落とす可能性もありますので注意が必要です。ヒューリスティック分析によって比較するヒューリスティック分析なんて横文字で書きましたが要するに競合他社のサイトなど、同じ業界で参考になるサイトをたくさんピックアップして良いところを盗むということが有効ということが言いたいです。ウェブサイトはこれまで世の中に一度も出てきたことのないような完全にオリジナルなものを制作する必要性もないのです。別の誰かが一生懸命考えて制作した優れたウェブサイトがウェブ上にはたくさんあります。それらの良いところを盗めるだけ盗んで、お客様独自の強みを引き出せる方向で要素を追加したりカスタマイズしていけばよいのです。温故知新、先人の知恵を借り、クライアントと重なる部分があれば進んで流用していくことが制作においては一つ重要なプロセスであると言えると思います。顧客の戦略に従うヒューリスティック分析の項目でも挙げましたが、世の中にある優れたサイトを真似るだけでは顧客にとって価値のあるものになるかどうかはわかりません。顧客にはそれぞれ戦略というものがありますので、その戦略を実現するために必要なサイトに仕上げていく必要があるのです。これらは主に優先順位として要素の並び順として現れたり、そもそも要素として存在させるべきかどうかや、競合サイトにない要素を追加する必要性に駆られたりします。ウェブサイト制作における顧客担当者との打ち合わせを重ね「ウェブサイトで何を実現したいか」を体現するために必要な設計を施す必要があるという視点は絶対に忘れないようにしてください。一択といってよいでしょう。利用することによって、デザインツールの利用に慣れていないデザイナーでなくても簡単な操作でワイヤーフレームなどのデザインドキュメントを制作することが可能です。私自身もデザイナーとしてのスキルはまだまだ高くないのですが、Xdは特に大きな負荷なく利用を始めることができましたし、利用を続けることもできています。デザインカンプを制作するためのツールとしても利用されるようになってきているため、現在のウェブデザインシーンにおける利用率は徐々に高まってきていると言えるでしょう。強みを考えると今後徐々にそれらのツールにとって代わる存在だと言えるのではないでしょうか。強みとしては以下のようなものがあげられます。利用する以外に選択肢はありません。まとめワイヤーフレームを作成することによるメリットをいくつか挙げてみましたが、ご理解いただけましたでしょうか?ワイヤーフレームを作成するということはオリジナルのウェブサイトを制作する上では欠かせない工程ではありますが、その必要性にフォーカスしてみると重要であるということを再認識することにつながると思います。お客様との制作コミュニケーションにおいて非常に重要な中間成果物としてのワイヤーフレームを作成し、コミュニケーションを円滑にし、時間を短縮することによって、優れた制作物を作ることにも繋がっていくと思いますので、ぜひワイヤーフレームの作成についても深めて頂ければと思います。はじめとする新しいツールの出現についていくことが仕事でパフォーマンスを出していく上では非常に重要です。従来の方法にとらわれず、現代の制作手法にとって最適な手法にどんどん乗り換えていくような柔軟さが必要であると私はそう思います。制作会社などの制作組織におけるワークフローを再設計する必要性などもあるのですが、取り組む価値は確実にあります。よる制作ワークフローをお試しでない場合には、ぜひ一度試していただければと思います。オススメの記事UXデザインや情報アーキテクチャ関連の記事として、よかったら以下の記事もご覧ください。最後に私が学んできた情報アーキテクチャに関する書籍を少しだけご紹介します。オライリーの白くま本は少し内容が難しいし、実践というよりは割とアカデミックな内容が多い印象です。それよりかは実践的な内容で書かれたその他の2冊が読みやすいのでお勧めです。ちなみに僕が持っている白くま本は第2版(5年以上前に購入)なのに対して現在は第4版まで進んでいるのでそれだけ多くの方々に読まれている書籍と言えそうですね。「情報アーキテクチャを学ぶ」ということはウェブ/UXデザイナーやウェブディレクターとして専門知識を深めるには避けて通れない道ではないでしょうか。100ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計https://amzn.to/2TGEwMF100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。IAシンキングWeb制作者・担当者のためのIA思考術https://amzn.to/2HsZWGoウェブディレクター向けです。実践的でわかりやすい。情報アーキテクチャ見つけやすく理解しやすい情報設計https://amzn.to/2TLuYQo内容は非常に学術的で難しいです。実践するにはかみ砕いて理解する力と応用力が必要です。公式アカウント資料ダウンロード会社やサービスに関する資料ダウンロードをご希望の方は右の資料ダウンロードページからご利用ください。ご希望の方は応募フォームからご応募ください。