このページの本文へ
デザインからマーケティングまで、Webを仕事にする人の情報サイト
2016年09月22日 23時00分更新
文●Saad Al-Sabbagh
Webプロジェクトについてクライアントと話し合い、望むべき最終結果を決めるときには、アイデアをまとめたあと、クライアントに対してビジョンをシンプルに分かりやすく説明しなければなりません。ここで役に立つのが「ワイヤーフレーム」です。
では、ワイヤーフレームとはなんでしょうか？
ワイヤーフレームとは、インターフェイスをシンプルな線だけを使って視覚的に表現したり、またはモックアップにしたりすることです。色、フォント、画像といったデザイン的要素はなく、アイデアを伝え、プロジェクトの初期段階でWebサイトのレイアウトを説明するときに使われます。
しかし、ワイヤーフレームを省略したり、あるいはとんでもないワイヤーフレームを描いたりするデザイナーは多いものです。
そこで、今回の記事ではワイヤーフレームにありがちな間違いをピックアップし、その回避方法を探っていきます。
描いたワイヤーフレームがWebサイトの未来の形を表わすものであることは確かですが、多種多様なオーディエンスを対象としたものであることも常に覚えておきましょう。ワイヤーフレームはアイデアをクライアント、上司、開発者、そのほかの関係者に伝えるためにあります。複雑すぎたり、Webページのグラフィック要素を増やしすぎたりしてしまうと、ユーザーを混乱させる可能性があるので、必要最低限にとどめるようにしてください。それでも複雑でグラフィック要素が多いワイヤーフレームを理解してくれる人がいるかもしれません。しかし、その人がデザイナーまたは開発者である場合、なにかを間違えているということなのです。
これは経験則として活用してください。スケッチ作業が終わったあと、たとえば管理部門のマネージャーや友人、カフェのバリスタなど、デザイン・開発畑でない人に意見を求める場合、相手がこちらのWebページの基本的な機能を理解できているかどうか必ずチェックしてください。
残念なことに、機能性よりもスタイルを重視するタイプの間違いは、自分の個人的な嗜好をデザインに持ち込もうとするWebデザイナーが一番犯しやすいものです。ロゴ、色、複雑なフォントをワイヤーフレームに加えるデザイナーが特に当てはまります。ワイヤーフレームに視覚的な要素を加えると、機能性とグラフィックモックアップを混同してしまいます。混同により、ワイヤーフレームから視覚的明確さを読み取ることがより困難になり、結果として「アイデアを伝える」という目的を失ってしまいます。
ワイヤーフレームとは常に、見た目の良さではなく、Webサイトの機能とコンテンツの流れを表現するものでなくてはなりません。そのため、ワイヤーフレームを視覚的に詳細に作り込んでもまったく無意味なのです。
ワイヤーフレームを描いているとき、たとえば「登録ページはさほど必要ではないので飛ばそう」「ナビゲーションはそもそも単純ななので、ワイヤーフレームを飛ばそう」と感じる瞬間があるかもしれません。しかし、これでは機能性を伝えるワイヤーフレーム全体を危険にさらしかねません。端折ってしまうと、プロジェクトの関係者に最終ドキュメントを見せた際、Webページの流れを最後にぶち壊しにしてしまうからです。
単純な線しかないとしてもペンを動かし、その詳細まできちんとワイヤーフレームにする必要があります。そうすれば、各Webページを完全に肉付けし、それぞれにどのような機能があり、ほかとどのように関係しているのか説明する役割をしっかりと持たせられるからです。
一般的にWebページには10または15種類のパターンの発生が予想されるので、いろいろなタイプのWebページに対応するため、ほとんどのプロジェクトには最終的には10件から15件ほどのワイヤーフレームが必要となります。このことはよく覚えておいてください。
ワイヤーフレームを描き始める前に、プロジェクトの責任者は誰で、誰が最終決定をするのか決めてください。一般的に、中小・新興企業の場合、創業者がプロジェクトの責任者になります。しかしアートディレクターやデザイン責任者、あるいは部長でも構いません。プロジェクトに対するアイデアとビジョンがあり、最終目的をきちんと理解しており、それに応じて適切なフィードバックを提供してくれる人をプロジェクトの責任者に選んでください。
クライアントが少ない小さなプロジェクトの場合、たいていはデザイナーが責任者となります。そのため、デザイナーは製品の最終目的とビジョンを理解し、クライアントと徹底的に意見交換する必要があります。
通常、ワイヤーフレームはLo-fi（Low-fidelity、ローファイ）ワイヤーフレームとHi-fi（High-fidelity、ハイファイ）の2つのタイプに分けられます。
デザイナーはLo-fi / Hi-fi両方のワイヤーフレームを使えなくてはなりません。なぜなら、ワイヤーフレームへの正しいアプローチ方法というものは存在しないからです。プロジェクトの規模や事情により、適切なワイヤーフレームの選び方は異なります。また、ワイヤーフレームの種類を1つに絞る必要はないと覚えておいてください。Lo-fiフレームワークから始め、その経緯でHi-fiフレームワークに移行するのは普通のことです。
ワイヤーフレームは極力シンプルにし、色やフォント、画像など余計な視覚要素を加えるのは避けてください。端折ったり、先延ばしにしたりもせず、すべてのプロジェクトでワイヤーフレームを作るようにしましょう。ワイヤーフレームそのものにはデザイナー自身、クライアントまたは社長など誰でも良いので、責任者をつけることをおすすめします。
最後にひとこと。Lo-fiワイヤーフレームとHi-fiワイヤーフレームの違い、さらにそれぞれを使うべきタイミングを理解すれば、品質とスピードは格段に改善されます。
（原文：5 Most Common Wireframing Mistakes (And How to Avoid Them)）
［翻訳：加藤由佳／編集：Livit］
Web Professionalトップへ
今年5月にGoogleが実験的に開始すると発表した「応答性」の指標「INP」について解説します。
今年の4月、GMOインターネット株式会社の「ConoHa WING」と「お名前.com レンタルサーバー」で「WEXAL Page Speed Technology」の提供が始まりました。今回は、GMOインターネット株式会社のプロジェクトメンバーの皆さんに参加いただいてのインタビュー企画です。
「KUSANAGI」の高速化技術を採用頂いている「エックスサーバー」でのWordPressサーバー構築初挑戦のレポートの後編として、ドメイン設定、WordPress基本設定やテーマの設定の話をシエリさんに寄稿頂きました。初めての方がつまずきやすいポイントなど実体験もとに書かれています。
CRM（顧客関係管理）プラットフォームを提供するHubSpot Japanは、コンテンツマネジメントシステム「CMS Hub 」の一部機能を無料版として提供開始した。
「KUSANAGI」の高速化技術を採用頂いている「エックスサーバー」でのWordPressサーバー構築初挑戦のレポートをシエリさんに寄稿頂きました。初めての方がつまずきやすいポイントなど実体験もとに書かれています。
Web上で利用する画像フォーマットの主要な形式はJPEG・GIF・PNGなどだが、高速化のためにさらに軽量化した次世代フォーマットが登場している。ここでは次世代フォーマットのJPEG XR、JPEG 2000、WebPについて解説する。
プライム・ストラテジー 相原 知栄子 編集●MOVIEW 清水
UXデザイナー 瀧知惠美／ヤフー株式会社
大滝由子
森田哲生／Rockaku
ソウルドアウト株式会社
山下千尋／ウフル
表示形式: PC ⁄ スマホ
