実際のデータを使用したプロトタイピング–フレーマーチュートリアル

公開: 2022-03-11

Framerは、最も強力なアプリプロトタイピングツールの1つです。 iOSからAndroidまで、あらゆるモバイルデバイスの設計に使用できます。プログラミングを少し知っている場合は、比較的簡単なプログラミング言語であるCoffeeScriptに基づいているため、その機能は事実上無制限です。デザイナーは、想像力とコーディングスキルによってのみ制限されます。

フレーマー-それはなんですか？

この記事をフォローするには、少なくともフレーマーの基本的な知識が必要です。 デザインモードとコードエディタを使用します。 知識を補足したい場合は、以前のフレーマーの記事を読むことができます：見事なインタラクティブプロトタイプを作成する方法、プロトタイプを改善するための7つのシンプルなマイクロインタラクション

実際のデータでフレーマーを使用する理由

設計またはプロトタイピングでよくある問題は、実際のデータが不足していることです。既存の製品に対して新しい機能を設計する場合、架空のコンテンツを使用する代わりに、論理的で関連性のあるリアルなコンテンツを表示できます。たとえば、ユーザーの写真など、あらゆる種類のデータにすることができます。このように、偽のコンテンツを考え出すために時間を無駄にすることはなく、無効なデータを使用することから生じる間違いは回避されます。利用可能なすべてのデータが表示され、どのコンテンツがまだ必要かを確認できます。その結果、利害関係者や開発チームとのコミュニケーションがより効果的になります。さまざまなユースケースシナリオを中心に設計することも可能です。

新しい関数を設計するとき、すべてのユーザープロファイルが完全であるとは限らず、ストア内のすべてのカテゴリに同じ数量の商品があり、すべての商品が同じデータを表示するわけではないことを忘れることがあります。実際のデータを使用したプロトタイピングは、LEGOブロックから何かを構築することと比較できます。架空のゆるい形状で作業する代わりに、ボックスから既存のコンポーネントを使用して、実際の何かを構築できます。

実際のデータでプロトタイプを作成しましょう！

Framerの本当の楽しみは、データベースからリアルタイムで更新される実際のデータが使用されるときに始まります。たとえば、写真付きのユーザープロファイル、住所、株価、為替レート、天気予報、トランザクション情報など、アプリが通常使用するあらゆるデータを適用できます。リアルタイムのプロトタイピングと実際のデータを組み合わせると、非常に強力な製品設計が実現し始めます。また、悪名高いラテン風の「loremipsum」プレースホルダーテキストを使用する必要がなくなります。

UberによるMapboxAPIと組み合わせたフレーマープロトタイプ — UberのBryantJowによるMapboxAPIを使用したUber。

実データを使用したAPI：それは何ですか？どのように使用しますか？

アプリケーションプログラミングインターフェイス（API）は、アプリケーションと通信するためのインターフェイスです。 アプリをレストランとして想像してみてください。 食べ物はデータであり、給仕はAPIです。 あなたは給仕に食べ物を頼みます—それがあなたがする必要があるすべてです。残りはウェイトスタッフ（API）とキッチン（データベース）が担当します。

それはすべて、特定のデータベースに存在する実際のデータへのアクセスに関するものです。

APIとは何ですか？

すべてのアプリには、データのキャプチャと表示を可能にするAPIがあります。一部のAPIは公開されており、一部は内部製品でのみ使用されます。

公開されているAPIは、新しいアプリケーションを構築するために広く使用されています。たとえば、気象アプリケーションを作成するには、いくつかの気象データが必要です。パブリックAPIを共有する多数の天気予報ウェブサイトの助けを借りて、それは非常に簡単です。さらに、さまざまなAPIを組み合わせて、まったく新しい製品を作成できます。

実際のデータはどこで入手できますか？オープンAPIリスト

さまざまなデータを提供する多くの公開されているAPIがあります。これは、Framerで実際のデータを使用してプロトタイピングするのに最適な5つの候補リストです。これらの各APIは、フレームワークで簡単に処理できるJSON形式のデータも返します。

ランダムユーザー–初心者にとって間違いなく最高のAPIです。アバターからメールアドレスまで、完全でランダムなユーザープロファイルを生成します。

OpenWeatherMap –これは非常に使いやすいAPIです。それはあなたがどんな場所でも現在の天気と予報をチェックすることを可能にします。このAPIを使用すると、温度、湿度、風速などのデータを表示できます。

Framerで実際のデータAPIを使用した天気予報アプリ — WojciechDobryによる天気予報アプリ。

Pokeapi –教育目的で作成された最高のAPIの1つ。ポケモンについて何かお探しですか？ここで見つけることができます。これは、ポケモンのメインゲームシリーズに関するすべての詳細を示す広範なデータベースにリンクされた完全なRESTfulAPIです。

Framerで実際のデータAPIを使用したポケモンモバイルUIの概念 — サイアウンによるポケモンUIコンセプト。

Instagram –使用するための承認が必要なリストの最初のAPI。ただし、そのサービスは非常にシンプルです。すべてのInstagramの写真とユーザーにアクセスして、新しいアプリに表示できます。

Framerで実際のデータAPIを使用したスマートウォッチのInstagram — 木村博信によるスマートウォッチのInstagram。

Mapbox –地図や道順からジオコーディング、さらには衛星画像まで、アプリケーションと簡単に統合できる多くの素晴らしいサービスを提供します。 Foursquare、Evernote、Instacart、Pinterest、GitHub、Etsyにはすべて共通点があります。これらのマップは、Mapboxを利用しています。

このAPIは、JSONファイルを返さないという点で以前のAPIとは異なりますが、すべてのMapbox機能へのアクセスを提供します。 Mapboxは、FramerでAPIを使用する方法に関する優れたチュートリアルも作成しました。

携帯電話のAPIを介したMapboxマップ — モバイルデバイス上のMapbox。

実際のデータを使用したフレーマーのランダムユーザーAPIチュートリアル

FramerでAPIを操作する方法を理解するために、RandomUserAPIから始めましょう。単一のアプリ画面、つまりユーザーリストが必要になります。

ステップ1：デザインモード

これは、名前、名前、アバターを含むユーザーのリストです。必要なのはそれだけです。このプロセスの最も重要な部分は、すべての要素に適切な名前を付けてグループ化することです。アバターと名前はボックスレイヤーにグループ化され、すべてのボックスはリスト内にグループ化されます。

デザインモードで実行する必要がある最後のことは、リストレイヤーをインタラクティブレイヤーとしてマークすることです。これを行うには、ターゲットアイコンをクリックするだけです。

ステップ2：JSONを理解する

まず、JSONとは何か、Framerの外部でJSONを取得する方法を理解する必要があります。 Random User APIのドキュメントで、APIからのデータのリクエストを見つけます。 https://randomuser.me/api/?results=20のようになります。ご覧のとおり、これはブラウザでJSONファイルを開く通常のリンクです。

現状では、まったくはっきりとは見えません。適切にフォーマットされたJSONファイルを表示するには、JSONviewと呼ばれるChromeプラグインを使用します。プラグインを使用すると、ファイルは次のようになります。

ずっといい。これで読みやすくなりました。このファイルには、APIに要求した後に受信したユーザーデータを含む結果の配列が含まれています。では、JSONファイルとは何ですか？技術的な詳細に立ち入ることなく、データベースからの特定のデータを含むJavaScript構文に基づくテキストファイルです。 JSONをFramerで使用して、そこからのデータを表示できます。

ステップ3：JSONファイルをFramerにインポートする

これで、JSONファイルを1行のコードでFramerにインポートできます。

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

JSONファイルを含むdataというオブジェクトを作成します。 print関数を使用して、JSONファイルが正しくインポートされたかどうかを確認します。

 print data

ステップ4：JSONファイルから特定のデータにアクセスする

次に、JSONファイル構造に戻ります。

このJSONファイルでは、 resultsはより多くのオブジェクトを含む配列です。各オブジェクトは異なるユーザーです。まず、これらのオブジェクトの1つをターゲットにする必要があります。印刷機能を使用して、何が起こっているのかをよりよく理解します。

 print data.results[1]

フレーマーコンソール：

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

括弧内の図は、配列内のオブジェクトの数を表しています。 data.results[1]を使用して、JSONファイル内の最初のユーザーのすべてのデータへのアクセスを受け取ります。

次に、名前や名前などの項目を表示できます。

 print data.results[1].name.first

フレーマーは"benjamin"で応答します。出来上がり！ APIからのデータへのアクセスが達成されました！

ステップ5：JSONからのデータを表示する

ついに！残っているのはデータを表示することだけです。ここで、デザインモードのすべてのレイヤーを対象とする単純なループを作成する必要があります。この前の記事で、ループを使用したレイヤーのターゲティングについて詳しく読んでください。

x = 0を使用して、JSONデータから配列内の最初のオブジェクトをターゲットにしています。次に、リストの子要素ごとに、JSONデータからデータを割り当てます。ループの最後に、配列内の次のオブジェクトからのデータを使用するために+1を追加します。

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

それでおしまい！これで、デザインモードに戻ってデザインを試すことができ、実際のデータがプロトタイプに表示されます。

上記のFramerファイルはこちらからダウンロードできます：https：//framer.cloud/djmvG

Instagram API –フレーマーのリアルタイムデータ

Instagramは、リアルタイムデータで旅を始めるための興味深い出発点です。手順は比較的簡単に実行でき、APIは興味深いデータを提供します-完全なアクセス権を取得します。記事のこの部分では、Instagram APIを使用して、Instagramのプロフィールデータ（名前、最新の写真、いいねの数）を表示する簡単なプロトタイプを作成します。

フレーマ設計モードと実際のデータプロトタイプ — Instagramからデータを取得するには、5行のコードとアクセストークンのみが必要です。

ステップ1：アクセストークンを取得する

Instagram APIを使用するには、アクセストークンが必要です。これは、2つの異なる方法で取得できます。

最も一般的な方法は、Instagram for Developers Webサイトにアクセスして、指示に従うことです。このプロセスは、技術者以外の人にとっては複雑になる可能性があります。
幸いなことに、それを取得するための簡単で安全な方法があります。 Pixel Unionは、はるかに簡単なワンクリックプロセスを開発しました。彼らのウェブサイトにアクセスし、[アクセストークンの取得]ボタンをクリックします。

ステップ2：クロスドメインリクエストを有効にする

アクセストークンを受け取った後、1つの小さなトリックが必要です。 Instagramはローカルホスト（Framer）からのAPIリクエストを許可しないため、サーバー側のクエリを使用する必要があります。それらの1つはJSONProxyです。彼らのウェブサイトに行き、Instagram APIからのリクエストを貼り付けて、GOを押します。

完了すると、Instagram APIリンクを使用する代わりに、JSONProxyリンクを使用できます。

ステップ3：フレーマーでシンプルなアプリを設計する

このデザインには、名前のプレースホルダー、最新の写真を表示する長方形、画像の下のいいねの数の3つの重要な要素しかありません。これらはすべて、コードエディタで再利用できるインタラクティブレイヤーとしてマークされています。

ステップ4：Instagramのデータを使用するための4行のコードを書く

Framerの最終プロトタイプ：コードエディタ — データを取得するためのFramerの5行のコード。

ここでのフローは、RandomUserAPIの場合と同じです。 Instagramから任意のユーザーデータにアクセスできます。

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

それでおしまい！ 5行のコードで、Instagramが提供するライブデータと実際のデータを使用してプロトタイプを作成できます。ここから実用的なプロトタイプをダウンロードします：https：//framer.cloud/iYAXl。 （このプロトタイプを実行するには、独自のアクセスキーを追加する必要があることに注意してください。）

まとめ–長所と短所

APIを介してデータベースから取得した実際のデータを使用するプロトタイプを作成することで、新しい創造的な可能性と製品設計をチェックする機能が明らかになります。製品と100％一貫性のあるプロトタイプを作成し、実際のユーザーで新しい機能をテストできます。。システム内のすべてのデータのプレビューにより、設計に含める必要のある要素を見逃しにくくなり、実際のデータにアクセスできるため、偽のデータの使用に起因する設計ミスが回避されます。

とはいえ、Framerでの忠実度の高いプロトタイピングは非常に高価です。目的の効果を得るには多くの調整が必要です。これは時間とお金を浪費します。 Random User APIの例に示されているように、APIとの通信は難しくありませんが、APIから優れたプロトタイプを作成するには、依然として多くの時間が必要です。

それにもかかわらず、十分な対策を講じた場合、それは確かに検討する価値があります。実際のデータを使ったハッピープロトタイピング！

•••

Toptal Designブログでさらに読む：

UIデザインのベストプラクティスとよくある間違い
空の状態–UXの最も見過ごされている側面
シンプルさが鍵–最小限のWebデザインを探る
モバイルインターフェースのヒューリスティック原則
読みやすさのための設計–Webタイポグラフィのガイド