サイト設計の集大成となるワイヤーフレーム。今回は後編として、デザインの前段階、本気のワイヤーフレームと、レイアウトパターンを使ったhtmlワイヤーフレームについてご紹介します。
前回の記事では、プロジェクト初期に作成するワイヤーフレームについてご紹介しました。
手書きのワイヤーやPowerPoint、Excelをつかったワイヤーフレームが登場しましたが、今回は更に詳細情報が盛り込まれたワイヤーフレームです。
原稿、見出し、マージンなど、詳細まで決める → PhotoshopやFireworksを使って実寸ワイヤーフレームを作成
デザインの前段階、本気のワイヤーフレームというところです。
プロジェクトによっては手書きの後に実寸のワイヤーフレームを作成することもあります。
下の画像は立ち上げ当初のWebNAUTの実寸ワイヤーフレームですが、まさにこのプロジェクトでは手書きのワイヤーフレームの次にPhotoshopでこちらを作成しました。
イメージが明確に伝わった結果、紆余曲折あって全く違うデザインになっています。笑
メリット
- ブラウザ上で見てみると実際のサイズが掴める
- 手書きや資料化した段階のワイヤーフレームでは足りなかった要素にも気づきやすい
- 精度の高いワイヤーフレームはそのままデザインのガイドとして使用することができる
- 原稿も入れると文字数まで考えたレイアウトが出来るので、デザイナーも困らない
デメリット
- いきなり作ることはできない
- 要素の洗い出しや情報設計はしっかりと行う必要がある
実寸のワイヤーフレームを精度高く作ることで、クライアントとも社内メンバーとも、完成にかなり近いイメージを共有しながら議論することが出来ます。
サイトリニューアルなど、ページに入る要素、情報があらかじめ決まっている場合 → htmlワイヤーフレーム
ある程度大きな規模感のサイト構築に向いていて、レイアウトパターンを共通化したり、後工程でガイドライン作成をする場合には有効な手段です。
まずサイト内の要素・レイアウトをすべて洗い出し、レイアウトパターン化したhtmlを作成します。
このレイアウト用htmlの各要素の組み合わせでワイヤーフレームを作ります。
これらのデータ一式をFTPサーバにアップしてURLでワイヤーフレームを共有します。
メリット
- 「サイト内の全要素・レイアウト一覧」を整理できる
- ブラウザ上で確認できる
- ページ遷移をさせることができる
- 実際のサイトに近い形（デザインが乗っていない状態）でクライアントに確認できる
デメリット
- 作成するにも修正するにもコーディングの知識が必要
- ワイヤーフレームと合わせて仕様を記載することは出来ない
htmlワイヤーフレームを共有する際には、完成形ではないことを関係者に明確に伝える必要がありますが、ページ遷移や外部リンクまでワイヤーフレームの段階で確認することが出来るので、後工程がすこし楽になります。
また、デザインをこのhtmlワイヤーフレームに合わせて行えば、コーディングを一からする必要がありません。
以上、４つのパターンでワイヤーフレームについてご紹介しました！
こちらの記事から読まれた方はぜひ前編もお読みください。
タブレットやスマートフォンのアプリを作る時は、ワイヤーフレームを実際に端末に入れ、何人かで触ってみて導線やUIテストなどを行うこともあります。
イメージの中ではよく出来たUIだと思っていても、実際に触ってみると思わぬ使いにくさが見つかります。
PCサイトももちろんですが、スマートフォンやタブレット端末用のサイト・アプリを作るときには、ワイヤー段階でのUIテストがとても重要だと実感するこのごろです。