UI/UXデザインホームブログUI/UXデザインペーパープロトタイピングでユーザーインターフェースの改善を学ぶ-シェア-ツイート-ブックマーク-LINE我が社の本棚に、長いあいだ詰ん読になっていた本がありました。最適なユーザーインターフェースを効率よくデザインする」です。紙とペンで設計するユーザーインタフェースデザイン手法であるペーパープロトタイピングとはどのような物なのか、オウンドメディアの記事になるかなと思い、これを機に読んでみました。書籍とは関係ないですが、この動画をご覧ください。韓国のAjaxメールのペーパープロトタイプの記録動画です。これは完全にやり過ぎ感ありますが、なんとなくペーパープロトタイピングというものがどういうものかわかったでしょうか。デバイス役(パソコン役、スマホ役)のひとと、テスターが紙に手書きでかかれたインターフェースを間に、操作をテストしていくのです。ペーパープロトタイピングはユーザーテストであるペーパープロトタイピングは、手書きのインターフェースを使ったユーザーテストです。動作モックなどをつかってテストをするのは工数も、手直しもかかります。そのためプロジェクトのできるだけ早い段階に紙とペンだけ(付箋やテープもつかいますが)でテストをするわけです。ユーザーテストについては、過去の記事「ユーザーテストはじめの第一歩」にまとめていますので、参考にして頂ければと思いますが、ここに記載している「動作モック」が「ペーパープロトタイプ」に変わったと思って頂ければよいと思います。必要な役割に、デバイス役のひとが加わります。速く、低コストであるコーディングの前に問題を発見できるユーザーから、より多くの、そしてより質の高いフィードバックを得られる開発者だけでなく、チーム全員が、開発プロセスの早い段階で設計・評価に参加できる開発者に創造的な思考を促す手書きだからこそ、意見を言える。不完全さの利点すなわち、Photoshopや動作モックをつかったプロトタイプでは、出戻りが発生した場合、その修正にかかるフットワークが悪すぎます。そのためペーパープロトタイプで開発の初期に検証することで、問題点にたいしてスピード感ある改善をしようと言うことです。アプリやサイトが高度化するにつれ、問題点は早めにつぶしておく必要があります。紙とペンなら、実装すると修正が難しい部分でも素早く改善案を提示することができます。開発の初期段階でPDCAサイクルを回しやすいのです。ペーパープロトタイプとワイヤーフレームの違い見た目にていますので、ワイヤーフレームでペーパープロトタイピングが可能とおもってしまいますが、異なる点があります。ペーパープロトタイプは、実装のシミュレーションですので、クリックしたときのインタラクション画面などを用意する必要があります。操作可能である必要があるのです。逆に要素の大きさなど、あまりシビヤに考えずに書くことができます。テストができればよいのです。ワイヤーフレームは要素の場所取りが主たる目的ですので、要素の位置や大きさなどは厳密に検討する必要があります。一種の設計図である必要があります。使いやすさは問われません。ペーパープロトタイピングで明らかになった使い勝手を、ワイヤーフレームに反映する形になります。似ている2つのツールですが、目的がことなるのです。ペーパープロトタイプを先行して作成して、ユーザーテストを踏まえて、ワイヤーフレームに反映していくのがよい方法かと思います。ペーパープロトタイピングにあると便利なもの基本、紙とペンだけで行うペーパープロトタイピングですが、あると便利なものがあります。それは次のようなものです。ウインドウがすでに印刷されている用紙スマホ用は、スケッチパッドで入手可能な台紙があると、作業効率があがります。Web用はIllustratorなどで自作して印刷するとよいでしょう。太いペンと、細いペンウインドウと要素を書き分けるのに使います。背景領域を塗りつぶして、操作領域が明確にわかるようにします。作者は使わないと言ってたのですが、モーダルウインドウやプルダウンメニューを作るためにあったほうがよいでしょう。はさみで適当な大きさに切ってつかいます。はがせるテープ3Mのはがせるテープです。入力欄にキーボード打鍵にかわって入力してもらう時に、このテープの上に書いてもらって、ペーパープロトを再利用できるようにします。そのほか、チェックボックスの上に貼って、状態を書き込むなど、さまざまな場面で活躍します。UIステンシルおもにスマホ用ですが、主要なインターフェースが定規にかたどってあり、それをトレースすれば綺麗に書けるというものです。UIstencilsで手に入れることができます。プロトタイプツール道具ではないですが、POPのようなペーパープロトタイピング支援ツールをつかって、インタラクションをデバイスで操作させて検証する方法も考えられます。書籍発行時にはまだそのようなツールがなかった(DENIMという実験的なツールはありましたが)ので詳しく触れられてなかったですが、最近はたくさんのツールがありますので、検討の余地ありです。詳しくは「プロトタイプツールが花盛り、どれが便利?」の記事をご参照ください。その他、OHPシートなどがあると便利です。書籍の感想とか翻訳本にありがちな、回りくどさと、冗長なジョークが、読むのを疲れさせました。書籍はペーパープロトタイピングの本となっていますが、多くがユーザーテストを行うときの注意点や問題点について書かれており(もちろんペーパープロトタイピングが前提なのですが)その点では勉強になりました。プロジェクトの早い段階で、手間のかからないペーパープロトタイプでユーザーテストを行うこと、それが無駄な出戻りを減らし、より使いやすいインターフェースを作るヒントになる。最後に、著者は、ペーパープロトタイピングは便利な手法だが、ユーザー中心設計(HCD)という大きな概念の下にある手法にすぎないと述べていました。UXや、HCDの考え方を踏まえて、プロトタイプを作る必要があると思います。私も機会あれば、ペーパープロトタイピングにチャレンジしてみたいと思います。業務を受託したり、発注したりするときに、守秘義務契約(NDA)を締結することが多くなりました。[...]kigoulab2016年12月13日UI/UXデザインUXってなに?初心者にもわかりやすいように、自分なりに考えてみた。UX(ユーザーエクスペリエンス:ユーザー体験)というコトバが、一人歩きしています。[...]kigoulab2016年11月8日UI/UXデザイン今さら聞けない。[...]kigoulab2016年10月17日メニューホームUXデザイン診断キゴウラボとはサービスブログUXデザイン診断のお申し込み最近の投稿UI/UXデザインデザインは誤解されている。デザインは誤解されています。デザインは、一般には美術の領域と考えられています。現代のデザインは、美術の領域を超えて、思考方法や、経営手法としても活用されています。[...]tomix2019年11月14日Web制作SEOの基礎知識を初心者向けに話してきました。数日前、Googleが検索エンジンを刷新するという記事がアップされました。日本への展開まではまだ時間がありますが、検索順位に変動があると思われます。慌てることはありません。[...]tomix2019年10月30日UI/UXデザインUXってなに?初心者にもわかりやすいように、自分なりに考えてみた。UX(ユーザーエクスペリエンス:ユーザー体験)というコトバが、一人歩きしています。求人欄には、UI/UXデザイナー募集という項目が沢山ならんでいます。なんでUIと組み合わせなのでしょうか。自分が持っている「強み」ってなんなんでしょう。自分のこととなると、案外わかっているようでわかってない、いいや、客観的に言われて初めて「そうだったのか!」と気づくものかもしません。そもそも日本人に向いてない?PDCAはもう古い、PDCAは時代遅れだ、これからはこのメソッドだ、ツールだという記事をネットで見るようになりました。「PDCAはもう古い。これからはデザイン思考だ」と言うバズワードも出てくる始末です。矢沢ビル4Fミーティング専用スペースにつき、常駐していません。グレースコートA205宅配便、書留、お急ぎの郵便物はこちらの住所にお送り下さい。042-708-8380メールアドレスcontact[at]kigoulab.co.jp[at]を@に変えて送信して下さい。Reserved.お問い合わせ、お申し込みは下のボタンからお気軽にご連絡ください。お問い合わせUXデザイン診断のお申し込み。