WEB制作関連

ペーパープロトタイピングのすすめ

みなさんはWEBサイトの画面設計をする時に何を利用するでしょうか。

PowerPoint、Excel、Visioやilluslator、Fireworksなど選択肢はいろいろあると思いますが、ここでは紙を使ったプロトタイプの作成を紹介します。

やることは簡単です。

ブラウザに見立てたB4くらいの紙を用意してそこに切り取って作ったイメージエリア、テキストボックスやフォーム要素などを並べながらインターフェイスを考えます。

できあがったらサイトに見立てて遷移や入力をシミュレーションしてみます。

実際にやってみると、不思議と画面とにらめっこしていては気付かない問題点に気付けたり、リテラシーのあまり高くない人でも意見がでてきやすくなったりしました。

家を建てる際に建築士の方が精巧な模型をつくって家主にイメージを伝えるのに似ていますね。特に家などは工事をはじめてから間取りを変えるなんてできませんしね。

クライアントから「ワイヤーフレームじゃよくわからない」なんて言われた時などにぜひ活用してみるとよいと思います。

ペーパープロトタイピングにぴったりのツールがあったのであわせてご紹介しておきます。

uxpin_01.jpg

uxpin_03.jpg

この記事を読んだ人はこんな記事も読んでいます

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    ここまでできる!HTML5できたゲームまとめ

    HTML5のアプリとしての拡張をフルに活用してつくられたゲームのまとめ…

  2. WEB制作関連

    おしゃれは足元から。フッターの素敵なWEBサイト30個

    最近は「ファットフッター」などと呼ばれ、厚めのフッターにサイトマップな…

  3. WEB制作関連

    スクリーンショットを利用したWEBデザイン30個

    WEBサービスやアプリケーションの紹介には欠かせないスクリーンショット…

  4. WEB制作関連

    カッコいいグランジ風のフォント45個まとめ

    グランジ系フォントのまとめです。個人利用向け中心ですが好みのものが多か…

  5. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(1)作業スケジュール

    個人的な感覚値ですが、優秀なWEBディレクターさんは総じてMS Exc…

  6. WEB制作関連

    X’MASにぴったりなPhotoshopのレイヤースタイル

    クリスマスにぴったりなゴールドがお洒落なPhotoshopのレイヤース…

コメント

  1. WEBディレクタなら参考にしたい手書きの画面設計書

    様々なアプリケーションを試し、試行錯誤しながらWEBサイトの画面設計を行ってます…

  1. この記事へのトラックバックはありません。

  1. WEBマーケティング

    マーケティング心理学|クレショフ効果
  2. Design Items

    食べ物をテーマにしたクリエイティブな広告いろいろ
  3. LifeHack・仕事術

    プレゼン・企画書づくりに役立つ記事・ツールまとめ
  4. WEB制作関連

    EVERNOTEの新機能「Site Memory」実装編
  5. 話題・トレンド

    ガンダムもそう遠くない未来になってきた!?
PAGE TOP
Top