こんにちは、新規事業を支援している青林です。
今日はプロダクト作りのステップ3の
『ワイヤーフレームを作る』
についてお話します。
ステップ2で画面遷移図の作成が完了したら、1画面内のイメージを作成していきます。
ワイヤーフレームを作成することで、
目的
- プロジェクトメンバー(デザインー、エンジニア)と認識を合わせる
- 議論のたたき台になる
- ユーザーテストの角度を高くできる
リアルなユーザーの声を集めることができます。
![F72839b5fc675bfc1933a6cbc6646ab1](https://cdn.dribbble.com/users/1301404/screenshots/9704978/media/f72839b5fc675bfc1933a6cbc6646ab1.jpg)
そして、ワイヤーフレームは3つの段階があります。
- 手書き
- フレーム
- 文章+画像
もくじ
1.手書きのワイヤーフレーム
![main.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F54596%2Ff5172779-88a0-cc00-eb20-c0fa0c8d73ac.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=da006c60c5d4afe63b1e0b98f2ac9e37)
ワイヤーフレームを作成するソフトウェアが少なかった2010年前半は手書きのワイヤーが多かったです。
最近はソフトウェアで画面の素材テンプレートを活用してワイヤーフレームを作成できるサービスが増えているので、手書きでの利用はチーム内でイメージを早く伝えるたいときなど限定的な感じがます。
手書きワイヤーフレームの評価
早さ
(4.0)
安さ
(5.0)
美しさ
(2.0)
テンプレート活用
(1.0)
チームでの議論
(3.0)
ユーザーテスト利用
(2.5)
総合評価
(2.5)
2.フレームを活用したワイヤーフレーム
![](https://newmix.co/blog/wp-content/uploads/2021/04/フレームタイプのワイヤーフレーム.png)
フレームタイプは画面内の要素がイメージできます。
しかし、画面内のテキストや画像がないので、ユーザーに見せてもどのようなサービスかイメージはできません。
なので、チーム内での議論には利用できますが、ユーザーテストへの活用で最適なフィードバックは得られません。
フレームを活用したワイヤーフレームの評価
早さ
(3.0)
安さ
(4.0)
美しさ
(3.5)
テンプレート活用
(5.0)
チームでの議論
(2.5)
ユーザーテスト利用
(1.0)
総合評価
(3.0)
3.文章+画像を活用したワイヤーフレーム
![](https://newmix.co/blog/wp-content/uploads/2021/04/イメージフレームタイプのワイヤーフレーム.png)
文章と画像を追加するとサービスイメージに近づきます。
デザイナが加わる手前の画面イメージからユーザーインタビューを実施することで、最小の稼働で最大のフィードバックが得られます。
文章+画像を活用したワイヤーフレームの評価
早さ
(2.5)
安さ
(4.0)
美しさ
(4.0)
テンプレート活用
(5.0)
チームでの議論
(5.0)
ユーザーテスト利用
(5.0)
総合評価
(4.5)
まとめ
文章+画像ありのワイヤーフレームを作成することで、下記の目的を解像度高く達成することができます。
目的
- プロジェクトメンバー(デザインー、エンジニア)と認識を合わせる
- 議論のたたき台になる
- ユーザーテストの角度を高くできる
2,3番目のイメージはFigmaを活用しています。
Webのテンプレートやモバイルのテンプレートを活用して、無料で早くワイヤーフレームを作成することができます。
また、Figmaは無料から十分の機能が利用開始できます。
ぜひFigmaを活用してユーザーからのフィードバックをもらって、サービス提供時の成功角度を上げてみてください。
![Figmaを使ってワイヤーフレームを作る](https://newmix.co/blog/wp-content/uploads/2021/05/Figmaを使ってワイヤーフレームを作る-520x300.png)