WEBディレクターズガイド#7「プロトタイピング」
プロトタイプとは
今回はディレクターズガイドの7回目と言うことでテーマは「プロトタイピング」です。程度は諸々ありますが、プロトタイプは制作するWEBサイトの「試作品」にあたります。
設計した画面や制作したデザインにリンクや遷移エフェクトなどの動きを施し、実際に近い使用感･ユーザビリティを確認します。予め仕上がりに近いイメージを確認できるのでプロジェクトが進んでから大きな変更や修正を防ぐ効果があります。※制作諸条件（期間や費用など）によっては、最悪割愛せざるを得ない工程ではありますがやった方がお客様との認識のズレを早めに解消できます。
WEB屋の悲劇あるある
得てして見た目にこだわるお客様は多いです。「なかなかデザインが決まらなくてスケジュールが押してしまう…」「こだわりがめちゃくちゃ強い！」そういったケースは沢山耳にしますし、沢山ありました。。。。校了を頂いてからコーディングに回していては延々と終わりません。
そういった場合、大体設計の粒度に問題がある場合が多いのですが、「すぐにデザインは決まらないもの」と割り切って、基本部分（共通部分ともいう、主にUI周り）のみを固めてしまい、スタイリングについては「ここは（画像差し替えるだけなんで）変えれます。」「ここを変えるとなると追加でお金が発生するのでここは決めてください。」など、戻りの可不可の線引きをあらかじめやっておけばまだ被害は少なくできます。
ですがまだまだあり得るケースとしては、紙ベース（もしくはカンプレベル）でデザインのやり取りを進め、コーディングして（CMSの場合はテンプレも充てて）テストアップまでやりましたところが…
「思ってたものと違う！！もっと滑らかに動かしてください。」
「このメニュー開かないの？？」
「なんか使いづらーい」
「なぜこんなところにメニューが引っ付くんですか？取ってください」
「スマホってこうなるんでしたっけ？」
「プッシュ通知とかこないんですか？」
実際、テストアップまで進めて「修正して追い込みだ！」と作業の見通しを立てたところがこういった声により希望的な観測が儚く崩れ落ちた事ってありませんか？
今更ですがWEBは紙媒体とは違い、動きを伴い、UIを操作して階層を進んでいきます。つまり「お客様が挙動をイメージ出来ておらず、雑誌を見ているのと変わらない状態」であることからいざ動きを見た時に想定外に陥ってしまうことから上記のような声が生まれます。
プロトタイプの必要性
元来、テストアップしてから動きに伴う修正をかけるというのは想定外の工程であり工数が変動する場合がほとんどです。しかも！多くの場合こういったケースでお客様が追加費用を見てくれることはありません。
なので制作の早い段階でプロトタイピングの工程を挟んでおく事で、制作サイドとお客様との認識のズレを最小限まで留めることが出来るのかなと思います。しつこいようですが、この図は対お客様とのやり取りにも役立ちます。（縦軸は振り出しの粒度ではなく説明やパフォーマンスの粒度になりますが…）
しかしながら、きちんとしたプロトタイプを作ろうと思うとプロトタイプ開発～お客様レビュー～フィードバック～修正、のサイクルを組み込まなくてならず期間・費用的に余裕のないプロジェクトですとしっかりとこの工程を取ることができないケースもあります。
そこでいくつか手軽に使えるプロトタイピングツールを紹介したいと思います。（下記①～③はWindowsで使用できます。）
①inVision
inVisionです、無料～使用可能です。こちらはSketchとの相性がよく、そのままデータを取り込んでプロトタイプを作ることができます。また画像を取り込んでプロトタイプを作ることもできます。（リンクさせたい箇所に上からリンクを貼って画像同士をつないでいくようなイメージで手軽にプロトタイプを作れます。）
また個人的にとてもありがたい機能は、画像の領域を選択して「固定」マークにチェックを入れるとその部分は固定表示に出来る機能です。これはとても重宝します。
②Figma
こちらも無料から使用できるクラウドベースのデザインツールになります。パーツやテンプレートも豊富にありデザインのスピードも上げることができます。またチームでの作業を重視しているのでコラボレーション機能も充実しています。（私は現在こちらを使用しています。）特にFigjamと交互に行き来ができるのでMIROからFigjamを使うことが多くなってきました。
こちらは制作したデザインデータを矢印でつないでいく形で画面遷移を作っていく事が出来ますが、画面遷移エフェクトも色々と用意されており基本的な使い方（アドビ系の製品を使える方であれば比較的マスターは早いと思います）を覚えれば問題なく操作できると思います。
URLでシェア出来るので、いちいちサーバーに挙げて…みたいな操作も不要です。おすすめです。
③ADOBE XD
最後はADOBE XDになります。2021年に入ってからスタータープランが無料になり、幅広くユーザのすそ野を広げたのではないでしょうか？こちらは何といってもADOBE製品なのでイラレやフォトショとの相性も良いです。（当たり前ですが…）プロトタイプの作成難易度は上記Figmaと同じくらいです。
番外：Sketch
番外と書きましたが、単に私が使用していないだけでUIデザインツールとしてはとても著名なソフトになります。こちらですが、Macオンリーになります。WindowsではLunacyと言うWindows版Sketchと呼ばれるソフトを利用することが出来ますが、WEB系の方々はWindowsユーザの方が多く、回りでSketch使用しているユーザはそこまで多くいませんでした。（これがインタラクティブ系のデジタルコンテンツやスマホアプリUIなどになるとまた事情が変わってくるのですが…）
価格はこんな感じです。（1か月Freeで2か月目から個人ユースであれば$9（1000円弱）かかります。）
https://www.sketch.com/pricing/
実際にお客様にレビューしてもらうときは、どーすればいいの？
何となく、事前に仕上がりに近い状態で見てもらう事の重要性は把握できた。だけど、どういう視点を軸に見てもらえばよいか？つまりは実際にお客様に見せる際に何を重要視するべきか？と言うのがつかみづらい方もいらっしゃるかもしれません。作るサイトによりけり…なのですが、私の場合は、以下のルールを軸に、ユーザビリティ×アクセシビリティに関するチェックシートを用意して評価していました。
主観的に作る評価軸より、きちんと決まった機関が策定し、リリースしているルールやポリシーに則りポイントを示すのが良いと思います。（お客様の好みのデザイン修正もこういったルールに照らし合わせることで論理的にブロックできます。）
短期的な評価であれば、System Usability Scale（SUS）も有効だと思います。全部で10問（が理想）、ポジティブな質問とネガティブな質問を交互に織り交ぜることでユーザビリティに関するスコアを算出できます。詳しいやり方は下記に記載されていますので興味のある方は覗いてみてください。
最後に
いかがでしたでしょうか？
プロトタイプと一緒に見てもらう事で、仕上がりの共通認識をお互いより強く持つことができます。またデザインに関する承認は、担当者レベルではなくなるべく決裁者レベルでOKをもらってください。人も含め、握り合いの範囲が狭いと公開間近になり、デザインでひっくり返る事は現実にあります。(私のチームのメンバー案件では、公開直前の社長決裁時でデザインがひっくり返る憂き目や、メンバー総出でデザインパーツ制作に連日連夜かかった事もありました。。。私自身は駆け出しの頃、遅々としてデザインから進まない、メインビジュアルで止まってしまっている、、などやはり握りが甘い状態で進めてしまったことにより発生する弊害があったりなど反省点などは山ほどあります。。）
事情はそれぞれ異なりますが、デザインにこだわりが強いお客様は多く、こういった目に見える箇所（スタイリング）についてはすれ違いやすいところでもあるので、なるべく多くを事前に確認頂きプロジェクトの進行を円滑にしたいですね。（近年はスタイリングだけでなく、インタラクションに関しても留意しないといけないですよね。もちろんすべてのコンテキストが一貫してプロセス化された上で進むのがベストですが…）
ここから後は実装に入っていくため、工程を戻しづらく、修正内容によっては仕様変更せざるを得ない場合があります。
プロジェクトを生かすも殺すもある意味ディレクター次第なのです。
次回は「#8：原稿整理・実装」～コンテンツの品質がここで決まる～を書きたいと思います！！※情報設計にも少し触れます、何気に私の好きな工程です。
ありがとうございました！！
この記事が気に入ったらサポートをしてみませんか？