紙や静止画の設計図だけでは、操作したときの引っかかりまでは分かりません。当社は、早い段階でクリックして試せるプロトタイプを作り、実際の利用者に触れてもらうことで、設計の誤りを開発前に見つけます。
確認が取れた設計は、そのままフロントエンドの実装まで担当できます。設計者が実装を見ることで、細かな挙動のずれを防ぎ、お客様の開発チームへ渡すコードの品質も保ちます。
低忠実度プロトタイプ
ワイヤーフレームをつなぎ、画面遷移と操作の流れだけを確認する試作です。1〜3日で作り、構成の誤りを早く見つけます。
Service 04
プロトタイピング・フロントエンド実装
完成してから気づく前に、動くもので確かめる。
概要
進め方と期間の目安
- 1
検証したい問いの整理
何を確かめるためのプロトタイプかを決め、作る範囲を絞ります。全画面を作らないことが要点です。
- 2
試作・内部確認
プロトタイプを作成し、チーム内で操作して不備を直します。テスト用の課題文も用意します。
- 3
ユーザーテスト・改善
利用者に操作してもらい結果を整理して、設計へ反映します。必要なら再テストを行います。
- 4
実装・引き渡し
確定した設計を実装し、動作確認を経て引き渡します。ソースと説明資料を併せて提供します。
成果物と使用技術
成果物・お渡しするもの
- クリック可能なプロトタイプ
- ユーザーテストの計画書と結果報告
- テストでの発見事項と設計修正案
- フロントエンドのソースコード
- 実装の説明資料（構成・命名・注意点）
- 公開後の改善項目リスト
使用する技術・手法
このサービスのご質問
プロトタイプはどこまで作り込みますか？
検証したい問いに必要な範囲だけです。たとえば入力の流れを確かめたいなら、その画面だけを実際に近い挙動で作り、他は省略します。
バックエンドの開発も依頼できますか？
当社はフロントエンドまでです。API仕様の相談には応じますので、バックエンドを担う開発会社と連携して進めることは可能です。
実装したコードはどう渡されますか？
Gitリポジトリ一式と説明資料でお渡しします。お客様側で継続開発できるよう、命名規則と構成の方針も文書にします。
費用の目安
プロトタイプの忠実度と実装する画面数で変わります。下記は目安です。バックエンドとの連携範囲により大きく上下しますので、お見積りは個別にご提示します。
| プラン | 費用の目安 | 内容 |
|---|---|---|
| 検証用プロトタイプ | 80万円〜（約1か月） | 主要な流れの高忠実度プロトタイプ1式と、5名前後のテスト1回。 |
| 画面実装 | 200万円〜（約2か月） | 10画面前後のフロントエンド実装。デザイン済みの画面が前提。 |
| 検証から実装まで | 500万円〜（約4か月） | プロトタイプ、テスト2回、20画面前後の実装、レビュー対応。 |
費用はあくまで目安です。内容を伺ったうえで、お見積書をご提示します。
関連する事例
予約管理画面のプロトタイプ検証とコンポーネント実装
予約枠の変更や取り消しを受付スタッフが電話応対しながら行うため、片手でも迷わず操作できる画面が求められた。仕様書だけでは、操作感の合意が取れ…
- 3→0回テスト中の誤タップ
- 2回開発前のユーザーテスト
営業ダッシュボードの再設計とタブレット対応の実装
営業会議で使うダッシュボードに指標が40以上並び、会議のたびに「どこを見るのか」の確認から始まっていた。タブレットで見ると表が横にはみ出し、…
- 40→5指標初期表示の指標数
- 10分会議冒頭の確認時間の短縮