課題とユーザー
ビジネス目標、プロダクトを使う人々、達成する必要のあるタスクを確認します。次のバージョンの優先事項と作業範囲を一緒に定めます。
成果：プロダクトブリーフ、優先事項、仮説。
サービスプロダクトデザイン
プロダクトデザイン
画面に取りかかる前に、課題、ターゲット、プロダクトモデル、主要なシナリオ、コアインターフェースに取り組みます。SKARR.PROでは、仮説の検証と代替プロダクトモデルの検討も行います。
画面の前に。
プロダクトそのものを。
アイデアの段階から、既存プロダクトの改善、新機能の開発まで対応します。その出発点を、プロダクトモデル、コアインターフェース、そして合意した場合は動作するコードへと形にします。
漠然とした問いから
動作するプロダクトへ。
プロダクトの構想、インターフェースデザイン、開発を一貫して進めます。一緒に行った判断は、人々が使うソフトウェアに反映されます。
最初に作業範囲を合意し、重要な判断を一緒に確認します。作業を通じて新たな発見があれば、前提を見直します。
プロダクトの仕様がすでに定まり、画面、フロー、状態のデザインが必要な場合は、UX/UIデザインをご覧ください。
一緒に取り組むこと
をご紹介します。
それぞれの段階で、未解決の問いを次の作業につながる判断へと変えていきます。
プロダクトモデルと主要なシナリオ
プロダクトの概要、価値の生み出し方、特に重要なユーザーフローを明確にします。各ステップで必要な情報と、ユーザーが行う判断を整理します。
成果：ユーザーフローとプロダクトの構造的な基盤。
コアインターフェース
プロダクトの価値を届ける画面のビジュアル、情報の優先順位、各アクションに伴う状態を設計します。SKARR.PROでは、決定前にプロトタイプを使って仮説や代替モデルを検証します。
成果：実際の画面で合意したコアインターフェース。
プロダクトを支えるシステム
プロダクト全体で一貫性を保つコンポーネント、タイポグラフィ、動作を整えます。SKARRではコアを、SKARR.PROでは将来の機能を支えるシステムを構築します。
成果：プロダクトに必要な規模のデザインシステム。
合意した場合はコードまで
コアはReactで直接デザインできます。シナリオ検証用のインタラクティブなプロトタイプ、または合意した動作を備えた実稼働インターフェースとして実装します。Figmaは必須の中間工程ではありません。
成果：合意した作業範囲に応じた、インタラクティブなReactプロトタイプまたは動作するReactインターフェース。
視野を広げる。
次の一手を明確に。
短時間で完了するモバイルタスクとチームのワークスペースでは、情報の整理方法が異なります。
ヘルスケアアプリ。
ステータス、詳細、アクションを1つの構成に。
Webアプリやダッシュボードでは、ステータス、詳細、アクションをわかりやすく整理します。チームは対応が必要な項目を確認し、背景情報を開いて、作業を進められます。
開発中のプロダクトを想定した、サンプルデータ入りのビジュアルコンセプトです。上部のバンキングアプリでは、同じ考え方を小さな画面でご覧いただけます。
作業の進め方を見るプロダクトの構造。
次につなげられるコア。
明確なプロダクトモデル、主要なシナリオ、コアインターフェースをお届けします。成果物はデザインファイル、または合意した場合はインタラクティブなReactプロトタイプや動作するReactインターフェースです。
追加の改善、より広範なデザインシステム、追加機能の開発については、次のステップとして合意します。
作業の
進め方。
4つの段階で進め、各段階の最後に次の作業につながる判断を行います。
01
分析と調査
重要な問いに応じて、ビジネス、ユーザー、利用状況を調査します。ビジネスとプロダクトの分析、ユーザー調査、競合ベンチマーク、プロダクト監査を行います。成果は、プロダクトブリーフ、優先事項、仮説です。
02
構造設計とプロトタイピング
情報設計、ナビゲーション、コンテンツの階層、ユーザーフローを設計します。プロトタイプを使って、詳細なデザインに進む前に、主要なシナリオや重要なインタラクションのロジックを検討します。SKARR.PROでは、代替プロダクトモデルのプロトタイプを作成して比較します。
03
ビジュアルコンセプトとコアインターフェース
プロダクトの見た目、使い心地、動作を検討し、代表的な画面で方向性を示します。実際のコンテンツ、画面サイズ、各アクションに伴う状態を反映しながら、コアインターフェースを仕上げます。
04
開発、テスト、引き渡し
開発に合意した場合は、Reactで作業範囲を実装し、主要なユーザーフローと状態をテストして、実装をデザインと照合します。合意したファイル、ソースコード、セットアップ手順をお渡しします。
プロダクトに必要な作業の深さを
お選びください。
どちらのオプションも、月単位のプロダクト業務を対象としています。各プランに含まれる内容は、表でご確認いただけます。
| 項目 |
SKARR
オーダーメイドの画面デザイン。独自のビジュアル言語。
$7,000 / 月
作業月あたり
SKARRを購入
Stripeによる安全な決済 |
SKARR.PRO
体験全体をより深く、細部まで設計。あらゆる接点で。
$12,000 / 月
作業月あたり
SKARR.PROを購入
Stripeによる安全な決済 |
|---|---|---|
| 取り組む内容 | ||
| 開始時点 | 開始時点 方向性が明確なプロダクト。課題、ターゲット、次のバージョンの作業範囲を一緒に定めます。 | 開始時点 モデルがまだ定まっていないプロダクト。1つに決める前に、複数の方向性を検討します。 |
| プロダクトモデルとシナリオ | プロダクトモデルとシナリオ 1つのプロダクトモデルと、それに必要な主要シナリオ。 | プロダクトモデルとシナリオ 代替プロダクトモデルを比較し、選んだモデルの主要なシナリオを検討します。 |
| コアインターフェース | コアインターフェース 階層、状態、ビジュアルを考慮してデザインしたコア画面。 | コアインターフェース 詳細なデザインに進む前に、プロトタイプで仮説を検証したコア画面。 |
| 作業の深さ | ||
| 調査 | 調査 重要な問いに応じて、ビジネスとプロダクトの分析、ユーザー調査、プロダクト監査を行います。 | 調査 同様の調査に加え、未解決の問いに応じて競合ベンチマークや追加調査を行います。 |
| デザインシステム | デザインシステム コアインターフェースのコンポーネント、タイポグラフィ、動作。 | デザインシステム 将来の機能を支える、拡張されたシステム。 |
| 改善の反復 | 改善の反復 各段階で重要な判断を一緒に確認します。 | 改善の反復 モデル、シナリオ、インターフェースの細部をさらに繰り返し検討します。 |
| 協業方法 | ||
| 月ごとの作業 | 月ごとの作業 当月のプロダクト業務。作業開始前に、対応範囲と予定する成果物を合意します。 | 月ごとの作業 選択した作業の深さに応じた、当月のプロダクト業務。作業範囲と予定する成果物は、開始前に合意します。 |
| コードでデザイン | コードでデザイン コアの成果物はデザインファイル、または合意した場合はインタラクティブなReactプロトタイプです。 | コードでデザイン コアの成果物は、合意に応じて、デザインファイル、インタラクティブなReactプロトタイプ、または動作するReactインターフェースです。 |
| 納品内容 | 納品内容 プロダクトブリーフ、ユーザーフロー、コアインターフェース、合意した引き渡し資料。 | 納品内容 同じ成果物に加え、検証済みの仮説、比較したモデル、拡張システムを含みます。 |
着手する
前に。
Figmaファイルが必要ですか？それとも、コード上でプロダクトをデザインできますか？
どちらも可能です。コアはFigmaでデザインすることも、Reactで直接、インタラクティブなプロトタイプとして制作することもできます。チームでどのように確認し、その後作業を進めるかに合わせて、開始時に形式を決めます。
UX/UIデザインとはどう違いますか？
UX/UIデザインは、すでに定義されたプロダクトの画面、フロー、状態を扱います。プロダクトデザインはそれより前の段階から始まり、課題、ターゲット、プロダクトモデルを踏まえて、コアインターフェースを形にします。
プロダクトデザインには開発も含まれますか？
合意した場合、核となる部分をReactで実装できます。インタラクティブなプロトタイプ、または動作するインターフェースを制作します。アプリケーション全体の開発、サーバーサイド、各種連携は、別途範囲を定めます。
市場調査の代わりになりますか？
いいえ。プロダクトに関する意思決定のために、ビジネス、人々、利用状況を分析します。正式な市場調査はこの作業に含まれません。
月が終わった後はどうなりますか？
結果を一緒に確認し、次のステップを決めます。さらなる改善、より幅広いシステムの構築、追加機能の開発などが考えられます。
まだご質問がありますか？
プロダクトについて相談する