Marvelとの完璧なプロトタイプとハンドオフデザイン

Sep 11, 2025

操作方法

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

企業チームのためのInvision Appとブランドの新しいデザインハンドオフツールよりも短い学習曲線を使用すると、MarvelがチームでWebおよびモバイルアプリケーションをプロトタイピングするための迅速かつ楽なソリューションになる可能性がある時間はありません。

Marvelは、チームがスケッチのアイデアから最初のテストの概念まで、チームが彼らのデザインを取るのを助けます（スケッチまたはマーベル自体のどちらかに作られました）。その共同ツールは、利害関係者が彼らの言うことがあるだけでなく、デザインワークフローの一部になることを奨励します。

01.最初のMarvelプロジェクトを作成します

Marvel's new design screen, indicating the locations of the buttons to create new designs. — プロジェクトを選択したら、デザインプロセスを開始するには、2つのボタンのいずれかをクリックします。

Marvelで始めるには、あなたの名前と電子メールアドレスだけが必要な場所にサインアップしてください。設計プロジェクトまたはプロトタイププロジェクトを選択します。プロトタイププロジェクトは、すでにデザインした画面をアップロードしたとき（通常はスケッチ中）です。デザインプロジェクトは、スクラッチから始めているときに、標識独自のデザインツールを使用して低忠実なモックアップを作成したい場合があります（これは迅速な反復とブレーンストーミングのための素晴らしいオプションです）。

デザインプロジェクトを選択してから名前を付けてからiPhone Xを選択して[プロジェクトの作成]ボタンをクリックします。ここから（ここではプロジェクトダッシュボードをON OUTから呼び出します）、左側のデザインボタン、またはウィンドウの中央の[設計開始]ボタンをクリックします。

02.低忠実度プロトタイプの設計

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — このカメラ画面のように、既製のコンポーネントを使用して適応させることができます。

ここで私たちの中心的な目的は、最終的な結果がどのように見えるかを心配する時間を無駄にすることなく、私たちのアイデアを素早く視覚化することです。ここから、タブバーのような形、画像、テキスト、既製のコンポーネント、およびこのカメラ画面のような全画面コンポーネント全体でさえ、（左側のサイドバーから選択され、右手を使用してrestyled）サイドバー）。

シーズンではないデザイナーでも、テキストレイヤの作成、および単純な視覚的な変更を描画し、シーズンのデザイナーがどれほど早く迅速になり、[プロジェクトへの追加]ボタンをクリックすることができます。

あなたはベクトル描画、マスキング、その他の複雑なデザインツールを期待することはできませんが、それでもスケッチ、Adobe XDまたはFigmaのユーザーであれば非常によく知らせます（実際には、スケッチからの高等度のデザインの輸入について議論します。しばらく）。あなたが期待できるのは、ズーム、整列、グループ化、基本的なビジュアルデザインツール、ドラッグ、リサイズ、回転などのマウスコントロール、そしていくつかの便利なキーボードショートカットです。

03.フィードバックを受信します

しかし、Marvelはデザイナーだけではありません。業界標準のデザインアプリで最終的なデザインを作成するために設計者が要求するかもしれませんが、アイデアはあらゆる種類の利害関係者（マネージャ、クライアント、開発者など）から来るべきです。

あなたの主な役割がチーム内にあるものであっても、それはスーパーが簡単に言うべきです：「ねえ、これはアイデアになることができますか？」そしてそれから視覚的にそれを実演します。驚異ポップモバイルアプリは、これらの単純化されたデザインツールをモバイルデバイスにもたらすことによって、さらに簡単なデザインツールを縮小することによって、アイデアが最も奇妙な時に私たちにやってくることができるので、さらにエントリーの障壁を減らします。紙にスケッチされたアイデアは、デバイスカメラを使用してインタラクティブな偏心画面に変換できます。デザインは民主化されている必要があります。ここで、誰かが複雑な設計アプリケーションの使用に制限されずに言うことができる。

04. Marvelをスケッチで統合する

あなたのチームと一緒に低忠実度のアイデアを生産的にブレインストーミングした後、あなたは選択のあなたのデザインアプリで最初の反復をモックアップしたいと思うでしょう。エクスポートされたPNG画面を任意のデザインアプリから完全にアップロードすることはできますが、スケッチは推奨されているアプリです。デザインハンドオフのためのPhotoshopサポートは後で来ますが、Adobe XDを作成したので、アドビはユーザーインターフェイスデザインのためにPhotoshopを宣伝していません。

ダッシュボードから、[設定]をクリックします。統合＆gt。スケッチプラグイン、プラグインをダウンロードしてください。インストールしたら、デザインファイルを開いたら、Sync SymedまたはSync Marvelバー内のすべてのボタンを押します（これはレイヤーリストの上に表示されます）。スクリーンを同期させるためのMarvelプロジェクトの選択を開始します。

05.プロトタイプのインタラクション

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — ある画面から別の画面にリンクするためのホットスポットを作成するための領域をドラッグする

しかし、もちろん、それらに対話を追加していない場合は、プロトタイプをテストすることはできませんので、今やりましょう。 Marvelダッシュボードに戻ると、同期した画面が表示され、画面モードに入る画面の表示をクリックします。

ここから、ウィンドウの両側にある左右の矢印を使用して画面をナビゲートし、一定の秒数の後に[タイマー]をクリックして、[表示に役立ちます）、または[追加しない]をクリックします。あなたの最初のコメントや画面上の注釈。

おそらく最初に気づくことは、それぞれ画面の左右の角の近くに表示される固定ヘッダーと固定フッターボタンです。これらのボタンはドラッグ可能で、スクロール可能なビューポートの上部に固定されているヘッダーセクションのカットオフ領域をマークするように移動することもできます。上右隅のテキストフィールドを使用して、この値を手動で指定することもできます。

しかし、どのように私たちは実際に1つの画面を別の画面にリンクしますか？簡単：マウスで、別の画面にリンクする画面上の領域をドラッグします（これは「HotSpot」と呼ばれます）。これを行ったら、インターフェイスがウィンドウの下部に表示されます。これにより、ユーザーが実行される場所をカスタマイズすることができます。インタラクション中に起こる遷移、およびそのインタラクションをアクティブにするためにどのようなジェスチャをアクティブにするか（TAP、スワイプなど））。

そしてもちろん、私たちは低い忠実度のモックアップでさえもこれらのプロトタイピングツールを使うことができます。実際には、コメント機能を使用してみて、議論し、繰り返しすることをお勧めします。

06.開発者へのデザインを渡す

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — デザインハンドオフは、デザインや開発者が互いに機能するのが簡単です

あなたのチームが最終デザインに完全な自信を保持しているとき、コメントとユーザーテストツールを使用して検証された場合、それを検査してコードすることができる開発者にそれを手渡す時が来ました。デザインが渡されるとデザイナーが「完了」ではなく、デザイナーや開発者が常に開発を監督するのに常に調和していることを忘れないでください。開発者はいくつかの質問をすることができるので、これらのコメント機能はまだ非常にアクティブになるはずです。

Playボタンを押してから、左下隅のハンドオフをクリックしてデザインハンドオフインタフェースを開きます。ここから、開発者はデザイン要素をクリックすることができ、右側のサイドバーを使用しているものを作成する個々のスタイルを検査することができます（スケッチ、figma、またはAdobe XDのインスペクタインターフェースのように）。ここで唯一の違いは、開発者がコピーボタンをクリックしてスタイルをコードとしてクリップボードにコピーすることができることです。

この記事はもともとネットの発行301、Webデザイナーや開発者向けの世界で最も売れている雑誌で発行されました。購入 発行301 または ネットを購読する 。

反復プロトタイプの中でもっと洞察を得る

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morbyは彼女のトークを与えていますが、2018年4月25日から27日までニューヨークの生成時の毎回勝利のデザインを作成するのを助けることができます。

ほとんどの企業が新しいWebデザインを作成する必要があるとき、プロセスは通常ピッチングアイデアで始まり、デザインに移動し、開発、そしてライブになります。しかし、それがうまくいかない場合はどうなりますか？それは時間、努力、そしてお金がたくさん費やすためだけに費やすためだけに費やすためだけです。

幸いなことに、彼女の話で 2018年4月25日から27日までニューヨークを生成します 、クリアヘッドでの研究責任者であるMarisa Morbyは、反復プロトタイピングとテストを使用して、より速く、簡単、そしてより安価な新しいデザインを作成し検証するためのより良い方法を示します。

ニューヨークを生成する2018年4月25日から27日までに行われます。 今すぐあなたのチケットを入手してください 。

関連記事：

10トッププロトタイピングツール
18歳のワイヤフレームツール
プロトタイピングの落とし穴を回避する方法

Marvelとの完璧なプロトタイプとハンドオフデザイン

01.最初のMarvelプロジェクトを作成します

02.低忠実度プロトタイプの設計

03.フィードバックを受信します

04. Marvelをスケッチで統合する

05.プロトタイプのインタラクション

06.開発者へのデザインを渡す

反復プロトタイプの中でもっと洞察を得る

操作方法 - 最も人気のある記事

誰かを写真に撮る方法

超迅速なJavaScriptへの21ステップ

パターンスタンプツールを使用してテクスチャを作成する

あなたがPhotoshopでできることを知らなかった10のこと

より現実的な数字を描く方法

WebGLで液体効果を作成する方法

Adobe Illustratorでの視点を作成する

Mayaでより良い文字アニメーションを作成する

カテゴリ