ユーザーフロー
プロダクト内でユーザーがたどる経路を設計します。導線の始まり、各ステップで起こること、終着点を整理し、主要なシナリオと重要な分岐を可視化します。
成果：画面のデザイン前にフローを合意します。
サービスUX/UIデザイン
UX/UIデザイン
範囲がすでに明確なプロダクトのデザインのみを行います。フロー、画面、状態、デザインシステムを設計し、開発担当者に引き継ぎます。モバイルアプリの画面も対象です。
フロー、画面、状態。
開発担当者にすぐ引き継げます。
範囲がすでに明確なプロダクトのデザインのみを行います。ユーザーフローを整理し、各状態を含む画面をデザインして、開発担当者が実装できるデザインシステムを引き継ぎます。モバイルアプリの画面も対象です。
プロダクトの方向性は明確。
次は画面の設計です。
タスク、対象ユーザー、範囲が決まっている段階で、プロダクトには一貫性のあるインターフェースが必要です。わかりやすいフロー、実際のデバイスで使いやすい画面、実際に起こりうる状況を網羅した状態を設計します。
お客様のプロダクトに沿ってデザインを行い、成果物をチームに引き継ぎます。このサービスに開発は含まれません。開発担当者がそのまま実装に使えるよう、ファイルを準備します。
プロダクト自体がまだ形になっていない場合は、プロダクトデザインをご覧ください。
デザインに
含まれるもの。
ユーザーフローから引き継ぎまで、インターフェースの構築に必要なものを用意します。
画面数
合意したプラットフォームと画面サイズに合わせ、Web、モバイルアプリ、またはその両方の各ステップのインターフェースを、現実的なコンテンツでデザインします。
成果：合意したシナリオに対応する画面。
状態
空、読み込み中、エラー、成功の状態や、ユーザーが操作を確定する直前の状態を設計します。SKARR.PROでは、独自のインタラクションや画面遷移も細部まで設計します。
成果：実際に起こる状況を網羅する状態設計。
デザインシステム
プロダクト全体で一貫するコンポーネント、タイポグラフィ、色、動作を設計します。SKARRは合意した画面を対象とし、SKARR.PROは今後の機能追加に向けてシステムを拡張します。
成果：チームが成長に合わせて拡張できるシステム。
引き継ぎ
コンポーネント、仕様、注記を含む、開発向けに整理されたFigmaファイルを用意します。SKARR.PROでは、開発中の担当者をサポートします。
成果：開発担当者が作業を進められる引き継ぎ資料。
画面を
利用状況に合わせて。
すべての画面と状態がひとつのシステムとしてつながってこそ、インターフェースは機能します。
Banking App。
全体の把握から意思決定まで。
支出の概要から特定のサブスクリプションに進み、選択肢を比較して、次の行動を決めます。その過程にあるすべての画面と状態が、ひとつの導線としてつながっています。
現在制作中の自社プロダクトです。インタラクティブなデモで画面の動きをご覧ください。
デモを試す開発担当者が実装に使える
Figmaファイル。
合意したフロー、画面、状態を、整理されたFigmaファイルでお渡しします。コンポーネント、タイポグラフィ、動作を含むデザインシステムも用意します。
このサービスに開発は含まれません。引き継ぎ後の変更は別途作業となります。SKARR.PROには、合意した引き継ぎ期間中の開発担当者へのサポートが含まれます。
フローから
引き継ぎまで。
プロダクトとその範囲をご提示ください。 一緒にインターフェースをデザインし、開発担当者に引き継げる形に整えます。
01
範囲を確認する
製品、その対象ユーザー、対応するシナリオを共有いただきます。既存の資料を確認し、対象プラットフォームを確定したうえで、今月の作業内容に合意します。
02
フローを整理する
ユーザーの導線と各ステップで必要な情報を整理し、画面デザインに進む前に合意します。
03
画面と状態をデザインする
Figmaで画面、状態、コンポーネントを作成します。主要な導線を一緒に確認し、細部を調整します。SKARR.PROでは、判断がまだ決まっていない箇所について複数案を検討します。
04
引き継ぐ
仕様と注記を加え、開発向けにファイルを整理します。SKARR.PROでは、合意した引き継ぎ期間中、開発担当者をサポートします。
インターフェースに必要な深さを
お選びください。
どちらも、範囲が明確なプロダクトのデザインのみを行います。画面、システム、引き継ぎの対応範囲を比較してください。
| 項目 |
SKARR
オーダーメイドの画面デザイン。独自のビジュアル言語。
$5,000 / 月
作業月あたり
SKARRを購入
Stripeによる安全な決済 |
SKARR.PRO
体験全体をより深く、細部まで設計。あらゆる接点で。
$6,990 / 月
作業月あたり
SKARR.PROを購入
Stripeによる安全な決済 |
|---|---|---|
| デザイン | ||
| 開始時点 | 開始時点 タスク、対象ユーザー、範囲がすでに明確なプロダクト。 | 開始時点 同じ内容に加え、検討する価値のある未決定のデザイン案も比較します。 |
| フローと画面 | フローと画面 合意したシナリオとプラットフォームに対応するユーザーフローと画面。 | フローと画面 ユーザーフローと画面。判断が未確定の箇所では複数案を検討します。 |
| 状態とインタラクション | 状態とインタラクション 合意した画面の空、読み込み中、エラー、成功の状態。 | 状態とインタラクション 同じ状態に加え、独自のインタラクションや画面遷移も細部まで設計します。 |
| デザインシステム | ||
| コンポーネント | コンポーネント 合意した画面に対応するコンポーネント、タイポグラフィ、色、動作。 | コンポーネント 将来の画面や機能に備えた拡張システム。 |
| プラットフォーム | プラットフォーム プロジェクトに応じて合意した、Web、モバイルアプリ、またはその両方。 | プラットフォーム Web、モバイルアプリ、またはその両方に対応し、画面サイズやプラットフォームに合わせてより細かく最適化します。 |
| 引き継ぎ | ||
| 月ごとの作業 | 月ごとの作業 今月のデザイン業務。作業範囲と予定する成果物は、開始前に合意します。 | 月ごとの作業 選択した対応レベルに応じた、月単位のデザイン業務です。作業範囲と想定される成果物は、開始前に合意します。 |
| 納品内容 | 納品内容 フロー、画面、状態、デザインシステムを含む、整理されたFigmaファイル。 | 納品内容 同じ内容に加え、検討した複数案と拡張されたシステム。 |
| 開発担当者へのサポート | 開発担当者へのサポート 引き継ぎ時の注記と質問への回答。 | 開発担当者へのサポート 合意した引き継ぎ期間中の開発担当者へのサポート。 |
着手する
前に。
インターフェースの開発も行いますか？
いいえ。UX/UIデザインには、デザインと引き継ぎが含まれます。デザインしたインターフェースの実装は別のサービスです。WebサイトとWebインターフェースにはフロントエンド開発、アプリケーションにはアプリ開発をご利用ください。
モバイルアプリの画面もデザインできますか？
はい。モバイルアプリの画面も対象です。プラットフォームと画面サイズは開始時に合意します。
こちらで用意するものはありますか？
プロダクトまたはその説明、対応するシナリオ、ブランドや現在の画面、分析データなどの既存資料、そして月の間に判断を下せる担当者が必要です。
プロダクトがまだ定義されていない場合はどうなりますか？
その場合は、より早い段階から作業を始めます。プロダクトデザインでは、画面を作る前にタスク、対象ユーザー、プロダクトモデルを整理します。
引き継ぎ後はどうなりますか？
開発担当者はファイルをもとに実装を進めます。合意した引き継ぎ期間中の質問対応はSKARR.PROに含まれます。追加の画面は新たな作業として合意します。
まだご質問がありますか？
インターフェースについて相談する