デザインの提示は、アプリ開発における重要な要件の一つです。開発者は、アプリを成功させるためにあなたのデザインに依存しています。このガイドでは、あなたのデザインをInVisionで簡単に提供する方法を示し、あなたのデザインチームが常に最新のバージョンにアクセスできるようにします。InVisionを使用することで、あなたのアイデアが最適に視覚化され、コミュニケーションされる一方で、変更も簡単に反映させることができます。
主な発見
- InVisionは、デザインの簡単な同期と提示を可能にします。
- あなたのデザインをSketchから直接エクスポートし、InVisionにアップロードできます。
- このツールは、プロトタイプとの視覚的相互作用のためのさまざまなモードを提供します。
- フィードバックとコメント機能は、デザイナーと開発者とのコラボレーションをサポートします。
ステップバイステップガイド
ステップ1: InVisionで新しいプロジェクトを作成する
まず、InVisionを開いて新しいプロジェクトを作成します。「Prototype」を作成するオプションを選択し、iPhoneテンプレートを選んで、モバイルデバイスに最適な形でデザインを提示します。プロジェクト名として「Mobility Stream Udemy」を選び、「作成」をクリックします。
ステップ2: Sketchからデザインをエクスポートする
プロジェクトを設定したら、Sketchからデザインをインポートします。このプロセスでは、正しいアートボードを選択し、それをInVisionにアップロードすることを確認する必要があります。ファイルを直接ドラッグアンドドロップでInVisionプロジェクトに移動できます。複雑な問題を回避するために、Sketchから適切なエクスポート形式を選ぶことが重要です。
ステップ3: InVisionプラグインをインストールする
同期プロセスを簡素化するために、SketchのためのInVisionプラグインを使用するべきです。プラグインをインストールし、InVisionアカウントでログインして同期オプションを有効にします。これにより、SketchからInVisionプロジェクトにデザイン変更を直接転送でき、ファイルを手動でアップロードする必要がなくなります。
ステップ4: アーティファクトにインターフェースを付ける
今、アプリのユーザーインターフェースを作成し、各画面をインタラクティブにデザインできます。ビルドモードでボタンをクリックして、アプリ内のナビゲーションをシミュレートするホットスポットを作成します。「スライドイン」や「インスタント」などのさまざまな遷移を選択して、ユーザー体験をリアルに再現します。
ステップ5: トランジションを設定する
インタラクションを追加したら、画面間の遷移に適切なアニメーションを設定することが重要です。画面を切り替える際に有効になるアニメーションのタイプを選択できます。これらの詳細を開発者に明確かつ正確に伝えることで、期待される動作を実現できます。
ステップ6: 色と背景を設定する
すべての背景色やスタイルの詳細が正しいことを確認する必要があります。多くの場合、Sketchファイルで背景色を設定するのを忘れがちです。すべての画面を確認し、デザインで予定した背景がInVisionに正しく表示されているかをチェックします。すべてが調和して見えるように注意しましょう。
ステップ7: 同期と更新
すべての変更を加えた後、すべてを同期させる時間です。Sketchで変更を保存し、プラグインの同期ボタンをクリックします。これにより、新しい画面や調整が自動的にInVisionに更新されます。このプロセスは多少の時間がかかる場合があることに注意してください。
ステップ8: フィードバックを収集する
InVisionのコメントとフィードバック機能を利用して、デザインに関する一般的な質問を明確にします。プロトタイプ内で直接コメントを追加でき、その後、他のチームメンバーが回答できます。これは、あなたのデザインがブリーフィングに適合し、すべての期待が満たされることを確認するのに特に役立ちます。
ステップ9: プレゼンテーションの締めくくり
最後に、デザインをテストしてすべてが正しく機能していることを確認してください。作成したすべてのホットスポットを確認し、インタラクションをシミュレーションして、ユーザー視点からの経験を得ます。これにより、チームや開発者に提示する前に全体的なイメージが整っていることを確認できます。
まとめ - InVisionでデザインを成功裏に提供する
このガイドでは、あなたのデザインをInVisionにステップバイステップで提供する方法を学びました。InVisionで作業することがどれほど簡単か、またデザインの転送効率を向上させる方法を知りました。入念な準備と役に立つ機能の利用が、あなたのプロジェクトを成功させ、開発者に必要な情報を提供するのに役立ちます。
よくある質問
SketchのためのInVisionプラグインをどうやってインストールしますか？InVisionのウェブサイトからプラグインをダウンロードし、インストール手順に従ってください。
SketchからInVisionにデザインを同期するにはどうすればよいですか？変更を保存し、InVisionプラグインの同期ボタンをクリックして、デザインをアップロードします。
デザインで使用すべき背景は何ですか？すべての画面に対してユニークな背景色を使用し、InVisionに正しく表示されるようにしてください。
InVisionで直接フィードバックを集めることはできますか？はい、プロトタイプにコメントを追加し、他のチームメンバーからフィードバックを受け取ることができます。
アニメーションが正しく機能しない場合はどうすればよいですか？遷移の選択を確認し、各画面をテストして、すべてが意図した通りに機能しているか確認してください。
