ワイヤーフレームを活用して最短で良質なサービス体験を設計しよう

Relicのプロダクト開発は「なるべく早くプロトタイプをつくり、検証とブラッシュアップを繰り返し完成度を上げていく」ことを重視しており、具体的なデザインに着手するまえにワイヤーフレーム（Webサイトのレイアウトを検討するための設計図）を活用しています。

このページでは、新規プロダクト開発においてワイヤーフレームを活用するメリットをRelicでの実例を踏まえてご紹介します。

ワイヤーフレーム作成のメリット

アウトプットイメージが明快になる

スピードが求められる新規事業開発において、チーム内のコミュニケーションコストをいかに減らしていくかは重要な課題です。ワイヤーフレームを用いた情報共有は文字のみでの共有に比べ、視覚的にアウトプットイメージが理解しやすくなります。その結果、チーム間でのコミュニケーションの誤解が軽減され無駄な作業の「戻り」が軽減され、効率的な開発が可能になります。

実機での操作感を早期に検証できる

当然のことですが、プロダクトがユーザーに長く愛されるためには、それが使いやすく設計されている必要があります。そのため新規プロダクト開発では、実際に触りながらの「ユーザー目線でのフィードバック」が大切になります。ワイヤーフレームを早期に構築することで、ユーザー体験(UX)の検証に多くの時間を使えるようになります。

ドキュメントのみでの情報共有でのトラブル

・目的ごとに仕様書を細分化して用意する必要があるので、部門やメンバーごとで認識のブレが生じる

・開発工程に差し掛かってから、文字でのやりとりでは気付けなかったトラブルが発覚

ワイヤーフレーム制作のメリット

・アウトプットイメージが明確になるため、議論が発散しづらい

・画面遷移のアニメーション等、視覚的な検討を早期に行える

・UXの検証に多くの時間を使える

ワイヤーフレームの制作方法

平面での検討

まず最初はadobe ADやfigmaを用い、２Dで情報の配置やサービスの導線を確認していきます。あくまでも「使用イメージ検証のための視覚化」が目的の為、細部のクオリティというよりは、大まかな情報配置、導線を考慮し設計します。

プロトタイプにサービスのトーンを追加して、徐々にデザインに仕上げる

実機画面による検討

平面上の検討の次は、実際の使い心地、ユーザーの「体験」を検証するために実機で操作できる環境を構築します。実際のプロダクトを触りながら、仕様書に目を通すだけではわからない「ユーザー目線でのフィードバック」を早い段階から重ねていきます。

このようにRelicのプロダクト開発は「最初に仕様書を作り上げてから設計を始める」のではなく「なるべく早くプロトタイプをつくり、検証とブラッシュアップを繰り返し完成度を上げていく」プロセスを重視している為、不確実性の高い新規事業領域でも安定して高い成果を実現できます。

お問い合わせ

Relicは「新規事業」というドメインに特化しているからこそ、業界、業種を問わず、多くの領域でサービスを開発してきました。デザインや開発に関するご相談など無料で承ります。お気軽にご連絡ください。

お問い合わせ窓口