Webデザイン

Webデザインでプロトタイプを使うメリットとおすすめのツールを解説

この授業は次のような方におすすめです。

・より良いWebデザインを作るためのプロトタイプについて知りたい方

・プロトタイプを作るメリットについて知りたい方

・プロトタイプを作るためのツールについて知りたい方

この授業を受けていただくと、上のような疑問が晴れて、より良いWebデザインを作り上げるための第一歩が踏み出せますよ。

どうぞ最後までご覧になってください。

Webデザインにおけるプロトタイプとは

著作者:vector4stock/出典:Freepik

 

デザイニャー
デザイニャー
プロトタイプというのは、Webサイトやアプリなどの試作品のことで、操作性を評価する際に使われるんだニャン。

先生
先生
プロトタイプは、コーディングをする必要がなくて、紙やツールで簡単に作ることができるから、課題発見から修正までが簡単にできるんだ。

デザイニャー
デザイニャー
プロトタイプのを作ると、開発や制作するときに早い段階で問題点や改善点を確認できるというメリットがあるんだニャン。

先生
先生
またプロトタイプを使うことで、ユーザー目線を大切にしたUIやユーザーが得られる体験UXを高めることができるんだ。

ワイヤーフレームやモックアップとの違い

先生
先生
ワイヤーフレームとモックアップとは何なのかというのは次の通りだよ。

・ワイヤーフレーム ⇨ Webサイトを作る際に、どこに何をどんなふうに配置するのかを表現した情報設計のこと。

・モックアップ ⇨ 情報を設計した後にビジュアルデザインを詰めたもの。

デザイニャー
デザイニャー
これに対してプロトタイプというのは、完成品を想定した動的要素などを加えた試作品のことだニャン。

先生
先生
ただ、プロトタイプというのは、最初から完璧な試作品を作ることが目的ではないんだ。

デザイニャー
デザイニャー
情報設計とデザインを具体させることを目的にたもので、段階に応じてプロトタイプを何回か作って、情報設計の段階から評価と改善を繰り返していくんだニャン。
Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説この授業は次のような方に是非受けてもらいたいです。 ・Webサイト制作のためにワイヤーフレームを作ることになった方 ・ワ...

プロトタイプ以外で評価を行うには

デザイニャー
デザイニャー
プロトタイプを作ってWebサイトを公開する前に評価を行う以外には、公開した後に実データを元にして評価を行うこともあるんだよニャン。

先生
先生
その主な評価方法は次の2つだよ。

・A/Bテスト

・ヒートマップ

A/Bテスト

デザイニャー
デザイニャー
A/Bテストというのは、Webサイトを公開した後に行われる数値的な効果検証を行うためのテストだニャン。

先生
先生
そうだね。例えば、2つの異なるファーストビューを比べてみて、どちらがCVに対して効果が高いか検証するときにA/Bテストを行うんだ。

デザイニャー
デザイニャー
Google Optimizeなどの外部の無料ツールを使うことで、コーディングをしないで簡単に比較することができるんだニャン。

先生
先生
ただ、プロトタイプを使ったユーザビリティテストと比べて、Webサイトを訪れたユーザーがどんな行動をとっているのかというデータを割り出すことはできないんだ。

デザイニャー
デザイニャー
だから、数値を測定するなど、定量データの検証のときだけに使われる手法なんだニャン。

ヒートマップ

デザイニャー
デザイニャー
ヒートマップというのは、CVなどの定量的なデータとWebサイトを訪れたユーザーの行動などのデータの両方を評価することができるツールなんだ。

先生
先生
ヒートマップは、無料から使えるツールで、熟読している部分や離脱している部分、クリックされた場所などがわかるツールなんだ。

デザイニャー
デザイニャー
ヒートマップは、定量と定性の両方の面から評価することができるんだニャン。

先生
先生
早くWebサイトを公開する必要がある場合や、効果検証と改善のサイクルを早く回したい場合には、ヒートマップを使うことがおすすめだよ。

デザイニャー
デザイニャー
ヒートマップを使ってユーザーの真理を読んだことで、CVが2倍以上になったという例もあるそうだから、ヒートマップというのは役に立つツールなんだニャン。

Webデザインにおいてプロトタイプを作る3つのメリット

先生
先生
プロトタイプを作ってWebデザインを行うメリットは次の3つだよ。

・ユーザ視点で検証がしやすい

・クライアントとの意識の共有をすることができる

・全体の方向性だけでなく、細かい動作も検証できる

ユーザ視点で検証がしやすい

デザイニャー
デザイニャー
プロトタイプを作らないでWebサイトを完成させると、ユーザーにとって使い勝手が悪い点がわかることがあるんだニャン。

先生
先生
その場合、その悪い点がわかった段階から、改善策を洗い出してWebサイトの改修をしないといけなくなり、その結果改修の規模が大きくなって、コストの負担が大きくなってしまうんだ。

デザイニャー
デザイニャー
でも、事前にプロトタイプを作っておくと、ユーザー視点で検証しながら、Webサイトを完成させることができるんだニャン。

先生
先生
それに、問題点が出てきても、早い段階で改修することができるから、結果的にリリースの段階で、ユーザーの満足度を高めることができるということなんだ。

クライアントとの意識の共有をすることができる

デザイニャー
デザイニャー
プロトタイプを作る2つ目のメリットは、プロトタイプを作成してクライアントと打ち合わせをすると、クライアントとの意識を共有することができるということなんだニャン。

先生
先生
そうだね。コミュニケーションを円滑にすることができて、議論をしやすい環境を作ることができるんだ。

全体の方向性だけでなく細かい動作も検証できる

デザイニャー
デザイニャー
プロトタイプを作る最後のメリットは、全体の方向性だけでなくて、細かい動作も検証することができるということなんだ。

先生
先生
Webサイトでアイコンを押したら前面に画像が表示されるUIを作りたい場合、その画像ををゆっくり表示させたいのか、表示させる画像の大きさはどれくらいにするのか、どこを押したら閉じるのかというように、ユーザーが見やすくて使いやすいものを検証することができるんだ。

デザイニャー
デザイニャー
それに、ユーザーに近い立場の人に検証してもらうことで、ボタンが小さすぎて押しづらいとか、このヒーローイメージだとチカチカして気になるというような、細かいフィードバックを得ることもできるんだニャン。

プロトタイプを作成する方法

デザイニャー
デザイニャー
プロトタイプは、Webサイトを作っていく段階に応じて、検証する目的や要素の具体度が違ってくるんだニャン。

先生
先生
ここでは、次の2つのプロトタイプに特化して説明していくよ。

・ワイヤーフレームのプロトタイプ

・モックアップのプロトタイプ

ワイヤーフレームのプロトタイプ

デザイニャー
デザイニャー
ワイヤーフレームの段階では、ペーパープロトタイプという、紙に手書きで簡単に書くことが多くあるんだニャン。

先生
先生
この段階のプロトタイプは、デザインの具体性が低い低忠実度ど呼ばれていて、ワイヤーフレームやコンセプトが決まってさえいれば、コーディングやツールが使えなくても作ることができるんだ。

デザイニャー
デザイニャー
ペーパープロトタイプでできることは、例えば評価する側がWebサイトのボタンに見立てて作った箇所をクリックしたときに、テストを実施した側が遷移先のページを出すというように、人力でページ内にどんな動作が出るのかを表現することができるんだニャン。

先生
先生
低忠実度のプロトタイプのメリットは、短い時間で作成したり変更できたりすることだよ。ワイヤーフレームで作った導線やナビゲーションの位置にレイアウトなど、想定した通りにユーザーがWebサイトの中を行動できるかを素早く評価してくれるんだ。

モックアップのプロトタイプ


出典:【2019年版】無料でモックアップ画像を作りまくれるWebサービスまとめ

デザイニャー
デザイニャー
ビジュアルデザインの段階では、モックアップで作ったデザインを元にして、見た目や操作性の評価を行うんだニャン。

先生
先生
そのときには、実際にユーザーや知り合いなどに操作してもらって課題を見つけるんだ。

デザイニャー
デザイニャー
実際に操作してもらうために、プロトタイピング作成ツールを使うんだニャン。

先生
先生
その際に使うツールは次で紹介していくよ。

プロトタイプにおすすめの7つのツール

Figma

デザイニャー
デザイニャー
Figmaは、デザイン業務で使えるクオリティーのツールだニャン。

先生
先生
Figmaの便利な点は、次の3つだよ。

・マルチデバイス対応している

・リアルタイムに編集できる

・プロトタイプを簡単に作ることができる

マルチデバイス対応している

デザイニャー
デザイニャー
MacやWindowsのアプリはもちろん、ブラウザでも直接作ることができるから、アプリを入れていない場合もURLで簡単に共有することができるんだニャン。

リアルタイムに編集できる

デザイニャー
デザイニャー
さらに便利な点は、リアルタイムに編集できることだニャン。

先生
先生
バージョン管理の概念がないから、チームでデザインをするときに常に最新の状態で同時に編集できるんだ。

デザイニャー
デザイニャー
今のご時世になってからリモートワークが普通になってきたけれど、オンラインミーティングをしながら、Figmaを開いて直接コメント編集できるという操作性はとても便利だニャン。

プロトタイプを簡単に作ることができる

デザイニャー
デザイニャー
Figmaは、プロトタイプを作るのも簡単にできるんだニャン。

先生
先生
作成した要素を選んで遷移先をと紐づけるだけだからね。

デザイニャー
デザイニャー
遷移先のアニメーションも選ぶことができるんだニャン。

先生
先生
アプリの複雑な動きを表現することは苦手だけれど、Webサービスであったら、実装した状態とほぼ変わらないクオリティーのものが作れるんだ。

Sketch

デザイニャー
デザイニャー
Sketchは、Mac専用のデザインツールだニャン。

先生
先生
Adobe XDが出るまではデザインツールと言ったらSketchだけだったんだよ。

デザイニャー
デザイニャー
外部サービスとの連携が豊富で、やりたいことはほぼ全部Sketchのプラグインで解決できるんだニャン。

先生
先生
ファイル自体もデザインツールの中では軽い方だから、大規模なサービスのデザインをする際に重宝されているんだ。

デザイニャー
デザイニャー
Sketchにもプロトタイピングツールの機能がついているんだよニャン。

先生
先生
そうだね。プロトタイピング領域だとこれというような特徴はないんだけれど、アプリの遷移などに対応しているから、基本的にSketchだけでプロトタイプ作成をすることができるんだ。

デザイニャー
デザイニャー
Sketchはオフラインツールだけれど、Sketch Cloudを使うとオンライン上でプロトタイプの確認を行えるんだニャン。

先生
先生
難易度の方は、Figmaはデザイナーでなくても使いやすいのに対して、Sketchを使うには知識がないと難しいかもしれないね。

Adobe XD

デザイニャー
デザイニャー
Sketch一強だった時代に突然現れたのがAdobe XDなんだニャン。

先生
先生
SketchはMacでしか使えないんだけれど、Adobe XDはAdobeアカウントを持っていればWindowsでも使えるということで、Adobe XDを使うデザイナーが増えてきたんだ。

デザイニャー
デザイニャー
小規模なデザインだったら、無料プランでも間に合うところがXDの魅力だよニャン。

先生
先生
Sketchよりも便利な点は、レスポンシブデザインを考慮できることだよ。

デザイニャー
デザイニャー
デザインの段階で幅を可変にしたときにどんな動きをするのか確認することができるし、そのままそれをプロトタイプとして反映できるんだニャン。

先生
先生
マルチデバイスやマルチサイズに対応したデザインのプロトタイプを作るのにAdobe XDはおすすめだよ。

デザイニャー
デザイニャー
ただ欠点として、ファイルサイズが重くファイル分割しがちになるという部分があるんだ。

先生
先生
サービス規模によってはファイル管理をするのが大変になってしまうことを一応頭に入れておこう。
【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

Adobe After Effects

デザイニャー
デザイニャー
Adobe After Effectsは、動きの表現をするためのデザインツールだニャン。

先生
先生
Adobe After Effectsは、3D空間をデザインすることができるんだけれど、サービスデザインへの応用もできるんだ。

デザイニャー
デザイニャー
動きのあるリッチなサービスなんだけれど、Adobe After Effectsは、使いこなすのがすごく難しいそうなんだニャン。

先生
先生
かっこいいサービスの動きを確認したい時にはAdobe After Effectsが良いと覚えておこう。

Flinto

デザイニャー
デザイニャー
Flintoは、インタラクションをするためのデザインツールだニャン。

先生
先生
Sketchプラグインを出しているから、全体のUIデザインをするにはSketchで、画面単位のアニメーション/インタラクションにはFlintoというように使い分けることができるんだ。

デザイニャー
デザイニャー
Flintoはとても優秀なツールで、作り込んだ高いクオリティのプロトタイプを作れるんだニャン。

先生
先生
SketchFlintoの2つがあったら、動きの多いデザインでも大体作成することができるんだ。

Prott

デザイニャー
デザイニャー
Prottは、コードを書かないで本物みたいなアプリを再現できるという国産のプロトタイプツールだニャン。

先生
先生
UIが全部日本語だから使いやすいんだ。プロトタイプの作成は次の3ステップで簡単にできるよ。

①画像を取り込む

②画像の繋ぎ合わせる

③アニメーションを指定する

デザイニャー
デザイニャー
実機で動かすことでリアルなユーザー体験を再現することができるから、ユーザーテストにも使えるニャン。

先生
先生
作成したプロトタイプはメール、URL、QRコードでチームメンバーにシェアすることが気軽にできるし、コメント機能でメンバーからのフィードバックも簡単に行えるんだ。

デザイニャー
デザイニャー
社内外への提案の時に役立つプレゼン機能もついているニャン。

InVision

デザイニャー
デザイニャー
InVisionは、全世界のユーザー数が400万人を超える、グローバルで一番使われている、トランジション型のツールだニャン。

先生
先生
映画だから難しそうだけれど、操作自体はそんなに難しいものではないよ。

デザイニャー
デザイニャー
フィードバックする時にはプロトタイプ上にコメントを直接残すことができて、スレッド形式でチャットをすることができるという、共同作業がしやすいツールなんだニャン。

AIを使ったプロトタイピングツールも登場してきている

デザイニャー
デザイニャー
最近、色々な領域にAIが活用され始めているけれど、プロトタイピングツールも、海外ではすでにAIを使ったプロトタイピングツールが利用され始めているんだニャン。

先生
先生
AIプロトタイピングツールでは、手書きのイメージをスマートフォンで撮影すればコーディングされてアプリをすぐに作ることができるようになっているんだ。

デザイニャー
デザイニャー
今までプロトタイプを作る役割をしていたのはデザイナーだったけれど、AIツールを使うことで、デザイナーでなくてもプロトタイピングをすることができるようになるんだニャン。

先生
先生
だからデザイナーは、良質なUXを提供する最終成果物を制作することに集中できるようになるんだ。

デザイニャー
デザイニャー
このようなAIプロトタイピングツールが日本でも主流に使われるようになる日はそう遠くない未来に来るかもしれないニャン。

Webデザインにおけるプロトタイピングについてのおすすめの1冊

先生
先生
Webデザインにおけるプロトタイピングについてを知りたいなら次の本を読んでみると良いよ。

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

まとめ

先生
先生
この授業では次のようなことについてお話ししてきたよ。

・Webデザインにおけるプロトタイプとは

・ワイヤーフレームやモックアップとの違い

・どうしてプロトタイプがUXで使われるのか

・プロトタイプをいつどう使うのか

・プロトタイプ以外で評価を行うには

・A/Bテスト

・ヒートマップ

・Webデザインにおいてプロトタイプを作るメリット

・プロトタイプが必要になる場面とは

・プロトタイプを作成する方法

・ワイヤーフレームのプロトタイプ

・モックアップのプロトタイプ

・プロトタイプにおすすめのツール

・Figma

・Sketch

・Adobe XD

・Adobe After Effects

・Flinto

・Prott

・InVision

・AIを使ったプロトタイピングツールも登場してきている

・Webデザインにおけるプロトタイピングについてのおすすめの1冊

・Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

私たちは頑張るあなたを応援しています。