WNT-Know-how-20130206
Know-how

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

thumbnail_b_direction_130204_1

今回のテーマはデザインやマークアップの前段階、「ワイヤーフレーム」です。
前編・後編の2つに分けてご紹介致します。まずはこちらの前編から。

ワイヤーフレームを作成する手段は、手書き、パワーポイントやPhotoshopなどのアプリ、オンラインツールなど、様々なものがあります。
それぞれにメリット・デメリットがありますので、ビーワークスではプロジェクトの段階と目的に合わせてワイヤーフレーム制作の手段を使い分けることが多いです。
ということで今回は、プロジェクトの段階ごとに、適したワイヤーフレームの作成方法、メリット・デメリットを整理してみました。


プロジェクト初期のアイディア出し、ブレストなど。 → 手書きでガリガリ

仕様を詰めて行く段階やページ内の要素が明確に決まっていない段階には「手書きワイヤーフレーム」が適していると思います。

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

メリット

  • 頭の中にあることをすぐに形に出来る
  • 紙とペンがあれば作成できる
  • 手書きワイヤーフレームだとアイディア段階だというのが分かるので周りの人が意見を出しやすい

デメリット

  • 要素のレイアウトを変更しづらい
  • 実寸ではない
  • 細かい要素やマージン指定まではしづらい

私自身もワイヤーフレームはまず手書きのものから作ります。
イメージや考えを形にしてみることはもちろん、細かいマージンやラベル文言は気にせず、情報の優先度を整理したり、大まかなレイアウトを検討したりするのに便利です。
また「手を動かす」ことは「考え」と「身体感覚」を結びつけ、アイディアが生まれやすくなるという効果もあるそうですので、ガシガシ書いてみることをおすすめします。


UI・情報設計を詰め資料化、提案する → PowerPoint、Excelで作成

手書きワイヤーフレームをもとにブレストを行い、UI・情報設計を詰め、資料化するという際にはPowerPointやExcelを使います。

WebNAUTイメージ

メリット

  • レイアウトや要素幅の調整がしやすい
  • クライアントとの共有がしやすいアプリケーションである
  • ワイヤーフレームの周囲に仕様説明を記載できる

デメリット

  • 実寸ではない
  • デザインのイメージまでは表現しづらい

手書きに比べると、より詳細な情報が盛り込まれたワイヤーを作ることが出来ます。
デザインイメージまで盛り込むことは難しいですが、逆に「まだデザインではない」ことが明確に分かるので、要素の過不足や情報の配置に焦点を当てた議論がしやすいのが最大の特長だと思います。

以上、まずは2つの手法のメリットでメリットをご紹介しました。
後編の記事ではより本格的なワイヤーフレームをご紹介します。

thumbnail_b_direction_130204_1

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

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

佐藤 ゆり奈 ディレクター

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

成果につながるWeb制作を

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

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

  • 採用情報

    採用情報

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

  • 制作実績

    制作実績

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

  • 蟹座
  • 獅子座
  • 乙女座