最近のWEBデザインってプロトタイピングを軸とした
UIデザインが主流になっていますよね。
そもそもプロトタイピングって？
という方に向けて簡単にご説明します！
プロトタイピングとは?
近年ではWebサイトやアプリケーションにもプロトタイピングが用いられるようになり、ディレクション、デザイン、コーディングなどが、これまでの制作フローとは大きく変化してきています。
なぜプロトタイプを作るのかを学んでいきましょう！
プロトタイピングの基本
プロトタイピングとは、意味としてはソフトウェアやプロダクトにおけるprototype、つまり原型や模型を試作することです。
Webサイトやアプリケーションにおいては、ペーパープロトタイプと呼ばれる紙に
手書きのモックアップから、Scriptを使ったモーションなど動きの見えるアニメーションまでをプロトタイプとして製作する場合もあります。
どうしてプロトタイピングをするの？
これまでのWebサイトなどの画面デザインは、色、タイポグラフィ、レイアウトなど、デザインの基本ともいえる平面デザインが中心でした。
近年では、スマートフォンやタブレットなどのデバイスが多様化し、Webサイトやスマホアプリが絡み合い、画面内で多様に表現が変化することが一般的に。
それに伴い見た目のみでなく、より本物に近いプロトタイプを用いて、操作性や満足度を考量する必要が生じてきたのです。そのため、プロトタイピングの手法が用いられるようになったのです。
プロトタイピングの効果・メリット
情報の共有をスムーズに
開発の現場では、いかにスムーズにコミュニケーションをとり、情報を個人ではなくチームで共有するかが大切ですよね。
一般的なWebサイトの仕様書や、ディレクターのプロジェクト設計図だけでは、
これらの情報を素早く、正確に把握することは難しく、勘違いや再確認を行う工数が発生しやすくなります。
→これらの情報をわかりやすく再現し、全体の設計や機能、構造などの情報を共有することがプロトタイピングでは可能なのです！
大幅な修正や変更を減らせる
これまでの製作工程では”ウォーターフォール(デザイナーやディレクター、エンジニアを縦に並べ、上流工程で決まったことを下流工程で作業していくこと)”とよばれる開発フローがよく見られました。しかし、この方法では、どのような機能なのかわかりづらかったり、必要な工数が判断できなかったりするために、プロジェクトの途中で大きな修正が発生することもありました。
→デザイナーやエンジニアを含めた全体でプロトタイピングに参加することで、ある程度リアルな表現を共有し、開発側との機能面の確認や、必要なコンテンツの事前把握によるデザイナーとのやりとりの軽減など、全体の手戻りを削減できる！
ユーザーやクライアントの目線で確認できる
静的な画面や紙面では、画面内のコンテンツは確認できますが、動作等はイメージがつきにくいため、クライアントや実際にサービスを利用するユーザーの立場から見た意見を拾うことが困難でした。
→プロトタイピングでは、機能実装前の簡易版として早い段階で作成されるため、第三者の意見を取り入れやすく、想定外なニーズや機能を開発めに洗い出してプロジェクトを進めることが可能です。
プロトタイピングの意味
プロトタイピングは簡単に確認できる反面、目的をしっかり持っていないと必要のない修正や変更が発生しやすくなります。
まずは、プロトタイプで何をするのか、何ができるのかを考えてみましょう！
Webサイトやアプリケーションのプロトタイピング
Webサイトやアプリケーションのプロトタイピングを行う際に、陥りやすいミス
- ビジュアルにこだわりすぎてしまう
- 機能を後回しにしてしまう
- 要所だけのプロトタイプで全体が見えない
完成度の高いビジュアルデザインはもちろん大切だけれど、
まずは全体が見えるかどうかに重点を置きましょう！
ここで大事なのは、全体の構成と機能、UIデザインです。
プロトタイピングでできること
“全体の構成”を含めた”ストーリーの確認”
ストーリーとは、ユーザーがどのようにそのページに訪れ、どのように眺め、どのように使い、
最終的にどのようにゴール(次のページ)に到達し、一連の体験にどれだけ高い満足度を持ってもらえるかです。
”UIデザイン”を含めた”デザインの確認”
できるだけ実寸で確認し、できれば実際にタップして移動し、その操作性が見え方をリアルに体感することで、
静的な画面では見えてこないレイアウトや色使いの問題点が見えてきます。
“機能”を含めた”インタラクションの確認”
ユーザーが気持ち良いと感じる動きや、その動きの機能の意味を表現できているか、
またページの遷移などが自然に理解できるようになっているかなどを確認し、静的なデザインでは見ることのできない見せ方と魅せ方をl案がえよう！
プロトタイピングにオススメなAdobe XD
現在のAdobeで唯一デザインからプロトタイピング、さらに共有まで行えるアプリケーションがXDです。IllustratorやPhotoshopとの連携して操作できるため、IllustratorやPhotoshopを操作したことがある人ならば、スムーズに導入することができるでしょう。
Adobe XD 製品サイト
https://www.adobe,com/jp/products/xd.html
まとめ
いかがだったでしょうか？
プロトタイピングの技術と知識を身につけることで大幅な作業効率の向上が期待できます。
オススメな書籍をご紹介するのでこちらも参考にしてみてください。
プロトタイピングを身につけるオススメな書籍
プロトタイピングの基礎とXDの操作を身につけるのにオススメな書籍がこちらです。
「Adobe XD UIデザインとプロトタイプ制作教科書」
著：北村 崇
