WNT-Know-how-20130208
Know-how

ワイヤーフレーム作成手法のメリット・デメリット(後編)

ワイヤーフレーム作成手法のメリット・デメリット(後編)

サイト設計の集大成となるワイヤーフレーム。今回は後編として、デザインの前段階、本気のワイヤーフレームと、レイアウトパターンを使ったhtmlワイヤーフレームについてご紹介します。

前回の記事では、プロジェクト初期に作成するワイヤーフレームについてご紹介しました。
手書きのワイヤーやPowerPoint、Excelをつかったワイヤーフレームが登場しましたが、今回は更に詳細情報が盛り込まれたワイヤーフレームです。


原稿、見出し、マージンなど、詳細まで決める → PhotoshopやFireworksを使って実寸ワイヤーフレームを作成

デザインの前段階、本気のワイヤーフレームというところです。
プロジェクトによっては手書きの後に実寸のワイヤーフレームを作成することもあります。

下の画像は立ち上げ当初のWebNAUTの実寸ワイヤーフレームですが、まさにこのプロジェクトでは手書きのワイヤーフレームの次にPhotoshopでこちらを作成しました。

手書きワイヤーフレームイメージ

イメージが明確に伝わった結果、紆余曲折あって全く違うデザインになっています。笑

メリット

  • ブラウザ上で見てみると実際のサイズが掴める
  • 手書きや資料化した段階のワイヤーフレームでは足りなかった要素にも気づきやすい
  • 精度の高いワイヤーフレームはそのままデザインのガイドとして使用することができる
  • 原稿も入れると文字数まで考えたレイアウトが出来るので、デザイナーも困らない

デメリット

  • いきなり作ることはできない
  • 要素の洗い出しや情報設計はしっかりと行う必要がある

実寸のワイヤーフレームを精度高く作ることで、クライアントとも社内メンバーとも、完成にかなり近いイメージを共有しながら議論することが出来ます。


サイトリニューアルなど、ページに入る要素、情報があらかじめ決まっている場合 → htmlワイヤーフレーム

ある程度大きな規模感のサイト構築に向いていて、レイアウトパターンを共通化したり、後工程でガイドライン作成をする場合には有効な手段です。
まずサイト内の要素・レイアウトをすべて洗い出し、レイアウトパターン化したhtmlを作成します。

WebNAUTイメージ

このレイアウト用htmlの各要素の組み合わせでワイヤーフレームを作ります。
これらのデータ一式をFTPサーバにアップしてURLでワイヤーフレームを共有します。

メリット

  • 「サイト内の全要素・レイアウト一覧」を整理できる
  • ブラウザ上で確認できる
  • ページ遷移をさせることができる
  • 実際のサイトに近い形(デザインが乗っていない状態)でクライアントに確認できる

デメリット

  • 作成するにも修正するにもコーディングの知識が必要
  • ワイヤーフレームと合わせて仕様を記載することは出来ない

htmlワイヤーフレームを共有する際には、完成形ではないことを関係者に明確に伝える必要がありますが、ページ遷移や外部リンクまでワイヤーフレームの段階で確認することが出来るので、後工程がすこし楽になります。
また、デザインをこのhtmlワイヤーフレームに合わせて行えば、コーディングを一からする必要がありません。

以上、4つのパターンでワイヤーフレームについてご紹介しました!

こちらの記事から読まれた方はぜひ前編もお読みください。

タブレットやスマートフォンのアプリを作る時は、ワイヤーフレームを実際に端末に入れ、何人かで触ってみて導線やUIテストなどを行うこともあります。
イメージの中ではよく出来たUIだと思っていても、実際に触ってみると思わぬ使いにくさが見つかります。
PCサイトももちろんですが、スマートフォンやタブレット端末用のサイト・アプリを作るときには、ワイヤー段階でのUIテストがとても重要だと実感するこのごろです。

thumbnail_b_direction_130204_2

記事が気に入ったらシェアしよう

この記事を書いたメンバー

佐藤 ゆり奈 ディレクター

東京生まれ、茨城育ち。キャンプと漫画とくだらない笑いが大好きです。
今まではなんでも自分でやりたい派でしたが、最近はチームの成長を一番に考えてます。

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 乙女座
  • 天秤座
  • 蠍座