折り紙スタジオでモバイルアプリをプロトタイプする方法

Jan 27, 2026

操作方法

ユーザーがWebおよびモバイル上での経験が高い期待を持つ世界では、プロトタイピングとユーザー評価が重要です。これは、ますます高い忠実度と繁栄しているプロトタイプに次第に反復するのが一般的です。 ユーザー体験 業界はこの重要な一連の活動を中心に成長しました。最終的に、プロトタイピングステージでソフトウェアを正しく取得すると、後で時間やお金が節約されます。

10トッププロトタイピングツール

プロトタイプ化するためにあなたが取ることができる多くのアプローチ、そしてそこにある多くのツールがアシストされています。ブロック上の最新のものの1つはです折り紙スタジオ、Facebookによって開発され、MacOSのために無料で利用可能です。

折り畳みスタジオは、実際に石英作曲家のためのプラグイン（MacOSのXcode開発環境内の視覚的プログラミング言語）のプラグインとして生み出しを開始しました。

これは、それが大きな名前の開発者によって構築されているだけでなく、電力と単純さの組み合わせのために、高忠実度の対話型プロトタイプを引き起こすのをもたらします。

Origami Studioを使用してプロトタイプを構築することができます。

01.新しいプロトタイプ

Start by creating a new iPhone 8 prototype — 新しいiPhone 8プロトタイプを作成することから始めます

私たちは猫の写真をスワイペしていることを可能にするモバイルアプリのためのプロトタイプを作成します。折り紙スタジオをインストールしたら、スプラッシュ画面から新しいiPhone 8プロトタイプを作成します。

02.レイヤーを追加します

私達は私達のプロトタイプをすぐに私達のプロトタイプに追加し始めることができます。この場合は、画面上部に位置するロゴを追加します。右上の+ボタンを使用してレイヤーを追加し、「イメージレイヤ」を選択します。その後、レイヤーのプロパティを強調表示して変更することで、サイズを変更して適切に配置できます。私たちのブランドの後、私たちの「好き」ボタンとして機能するために画面の下部にあるハートイメージを追加します。

03.インタラクションの作成

For interactions you'll need to create a patch — インタラクションの場合、パッチを作成する必要があります

私達は私達の心臓のボタンがユーザーのやり取りに応答する必要があります。プレビューウィンドウでは、モバイルデバイス上のタッチを表すためにカーソルが変更されたことがわかります。これに対応するには、「パッチ」を作成する必要があります。これは、入力を受けて出力を生成する折り紙での関数です。空の灰色の領域をダブルクリックして新しいパッチのリストを表示し、「Interaction」を検索します。パッチを配置して画面に表示されます。

04.相互作用をレイヤーにリンクさせます

Change the patch properties so that it only responds when you click in the right place — 適切な場所をクリックしたときにのみ応答するようにパッチプロパティを変更します。

現時点では、あなたのパッチはプロトタイプ上のどこにでも接触に対応します。クリックしてそれをテストすると、[下]と[タップ]プロパティがリアルタイムで変更されます。パッチ内の[レイヤー]プロパティを選択した場合は、ハートイメージを含むレイヤーにリンクすることができ、その特定の領域をクリックするのにのみ対応します。

05.アニメーション

A pop animation will give users a bit of visual feedback — POPアニメーションはユーザーに少し視覚的なフィードバックを与えるでしょう

今度は私達の対話が引き起こされたときに何かが起こりたいです。もう一度パッチを作成する、今度は「POPアニメーション」です。これは弾力効果を生み出すために使用されます。これまでのとおりのプロパティを残しますが、以前に作成したインタラクションのタップ出力と新しいPOPアニメーションの番号入力の間のリンクを作成します。これを行い、それぞれの横にある小さな円をクリックしてドラッグします。今すぐ状態をクリックすると、InteractionがPOPアニメーションの「進行状況」出力の変更をトリガーすることがわかりました。

06.トランジション

You can change the extent to which objects change size when they're clicked — クリックしたときにオブジェクトがサイズ変更される範囲を変更できます。

必要なものが必要なものは遷移パッチです。これにより、POPアニメーションの進行出力の変化として移動するために、低値と高い値を指定できます。その後、遷移の出力値をハートイメージ層のScaleプロパティにリンクして、クリックしてクリックしたときにサイズを変更します。これで、ハートをクリックすると、サイズの簡単な変更をアニメートすることができます。しかし、それはまっすぐに正常にポップされているので、それは大丈夫ではありません。

07.スイッチ

Use switch patches to toggle objects between different states — スイッチパッチを使用して、さまざまな状態間でオブジェクトを切り替えます

スイッチパッチは、2つの状態の間を切り替える方法です。これは私たちが「好き」ボタンに望んでいるものです。スイッチパッチに渡される入力は、 'ON'状態と 'OFF'状態の間でそれを反転することができ、それは次にその後のパッチへの出力として渡されることができます。新しいスイッチを作成し、相互作用とPOPアニメーションの間に置きましょう。その後、心をクリックして小さくて大きな状態の間で切り替えることができます。

08.より複雑な動作

By experimenting with patches you can add more complex behaviour to your prototype — パッチを実験することで、プロトタイプに複雑な動作を追加できます。

おめでとう！あなたが再び時間と時間を使用する最も一般的なパッチを使って、最初のインタラクティブ機能を作成しました。より複雑な動作を作成するために、より多くのパッチを追加できます。現在のものの後ろにある別の色のハートレイヤーを作成しましょう。次に、それを同時にスケーリングするために新しいパッチを追加して、オリジナルのレイヤの不透明度を変更して表示されます。さて、あなたが心をタップするとき、それはより大きくそしてより小さくするでしょう、しかし色を変えるように見えるように見えます。

09.カルーセル

It's time to bring on all the cats — すべての猫をもたらす時が来ました

プロトタイプを完成させるには、ユーザーに「好き」を許可したい猫と画像カルーセルを追加しましょう。これを行うには、まずレイヤグループを追加する必要があります。各画像は別々の層になり、X座標がますますオフセット座標を持ち、それらが本質的に1つの項目のスクリーン上に見えるもののみで一列のサイズで並んでいます。

10.左右のスワイプ

Follow these steps to add a classic swiping action to your carousel — あなたのカルーセルに古典的なスワイプアクションを追加するために、次の手順に従ってください

それを作るために私たちがする必要がある最後のことは、左右のスワイプにカルーセルをスクロールすることができます。これを行い、カルーセル層グループ（個々の画像ではない）にリンクするためのスクロールインタラクションを作成します。相互作用は、それを移動するためにカルーセルのXプロパティにリンクすることができるX座標を出力します。間の間に、Clucelの端の外側の座標にスクロールしないように値を制限するために使用することができるクリップパッチを追加します。

11.次のステップ

Now you've learned the basics you can add more advanced features — 今すぐあなたがより高度な機能を追加することができる基本を学びました

それでおしまい。あなたは非常に基本的なアプリを作成しました。また、折り紙スタジオの「フレーム」を使用してデバイスの背景に配置することもできます。パッチを使用する基本に精通しているので、より高度な動作を作成することができます。折り紙スタジオのウェブサイトには、アプリで一般的に見られる一般的な機能を実装する方法を説明します。

この記事はもともとCreative Web Design Magazine Web Designerの第270号に掲載されました。 ここに問題270を購入してください または ここでWeb Designerを購読してください 。

関連記事：

2018年にアプリの設計を形作る傾向
ウェブサイトのプロトタイプを構築するための3つのトップ方法
モックアップ、ワイヤフレーム、プロトタイプについて知る必要があるのはすべて

折り紙スタジオでモバイルアプリをプロトタイプする方法

01.新しいプロトタイプ

02.レイヤーを追加します

03.インタラクションの作成

04.相互作用をレイヤーにリンクさせます

05.アニメーション

06.トランジション

07.スイッチ

08.より複雑な動作

09.カルーセル

10.左右のスワイプ

11.次のステップ

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

ブランドタイポグラフィ：完全なガイド

WordPressでクライアントポータルを構築する

ローカル開発環境の設定方法

角度を角度に追加する

アフィニティデザイナを備えたレトロロゴを作成する方法

モデリングをスピードアップするための6つの方法

塗料の影の色を混ぜる方法

Unreal Engine 4でゲーム環境を作成する

カテゴリ