WEB制作関連

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

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

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

やることは簡単です。

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

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

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

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

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

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

uxpin_01.jpg

uxpin_03.jpg

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

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

関連記事

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

    WEBディレクターの為のEXCEL術(3)作業が捗る小技10選

    WEBサイトを制作していると通常のワークフローの他にも原稿の作成やデー…

  2. WEB制作関連

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

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

  3. WEB制作関連

    フリーで使える布地のテスクチャー50個まとめ

    柄物や布の質感のあるものなど布地のテクスチャのまとめです。 (…

  4. WEB制作関連

    様々なカレンダーを実装するjQueryプラグイン25選

    日付の選択やスケジュールを表示する際に便利なカレンダー表示のjQuer…

  5. WEB制作関連

    色とWEBデザイン -みどり編-

    前回に続いて、色を切り口に集めたWEBデザインのまとめです。今回のテー…

  6. WEB制作関連

    情報を省スペース化するjQueryベースのアコーディオン

    主にメニューナビゲーションに利用されることの多いアコーディオンのギミッ…

コメント

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

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

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

  1. Design Items

    思わず笑顔になってしまうキースタンド。
  2. WEB制作関連

    WEBサイト高速化に便利!「Google PageSpeed Insight」
  3. 話題・トレンド

    アートの域に達したアイメイクがスゴイ。
  4. 話題・トレンド

    賛否両論 !?スターバックスのロゴがリニューアル
  5. WEB制作関連

    キャラクターを用いたWEBデザイン50個まとめ
PAGE TOP
Top