paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

FigmaのWebデザインを本物のスマホアプリに変換できる「Bravo Studio」を使ってみた!

f:id:paiza:20200226130321j:plain
どうも、まさとらん(@0310lan)です!

今回は、UI / UXなどのWebデザインを手軽に作れるFigmaと連携してスマホアプリが作れる無料サービスをご紹介します。

プログラミングは一切不要で簡単なタグをFigmaのレイヤーに記述するだけで、アプリに変換できるユニークな機能が搭載されています。また、Airtableと連携してインタラクティブなアプリも構築できます。

さらに、ネイティブアプリのソースコードにも書き出せるので、アプリストアへの登録も可能です。

手軽にスマホアプリを開発したい方やデザイナーの方も含めて、ぜひ参考にしてみてください!

Bravo Stuido

f:id:paiza:20200226130132j:plain

■「Bravo Studio」の使い方

それでは「Bravo Studio」をどのように使えばよいのかについて見ていきましょう!

まずはトップページの【Sign up】ボタンから無料のユーザー登録を済ませておきます。

f:id:paiza:20200226130628j:plain


FigmaやGoogleのアカウントで簡単にログインできますが、メールアドレスからでも登録が可能です。

f:id:paiza:20200226130643j:plain

登録したアドレス宛にログインコードが送付されるのでそれを利用して正式にユーザー登録を済ませておきます。


すると自分専用の【マイページ】が表示されます!

f:id:paiza:20200226130657j:plain


次にFigmaとの連携も済ませておきましょう!

「Bravo Studio」は、Figmaで作成したデザインを利用してスマホアプリに変換するサービスです。そのため、もしFigmaのアカウントを持っていない場合は先にユーザー登録を済ませておいてください。(Figmaも無料で登録可能です)

Figma

f:id:paiza:20200226130727j:plain


Figmaのアカウントを取得したら、「Bravo Studio」のマイページから【Import from Figma】と書かれたボタンをクリックしてください。

f:id:paiza:20200226130802j:plain


次に【Link your Figma account】をクリックして、自分のFigmaアカウントと連携します。

f:id:paiza:20200226130812j:plain


アクセス許可の承認が必要なので【Allow Access】ボタンをクリックすれば完了です!

f:id:paiza:20200226130939j:plain

これでFigmaのデザインをスマホアプリに変換するための準備が整いました。

■Figmaのデザインを準備しよう!

それでは実際に「Bravo Studio」を利用してFigmaで作られた画面デザインをスマホアプリに変換してみましょう!

ただし、肝心のデザインをまだ用意していない方もいると思うので、今回は公式に提供されているテンプレートを利用してみます。

以下のURLをクリックしてFigmaからテンプレートデザインを表示してみましょう!

<サンプルのテンプレート>
https://www.figma.com/file/d1Eutahvfkif8mTxZ82MKk/Travel-app-by-Bravo-template


テンプレートを開くと以下のような画面が表示されます。

f:id:paiza:20200226131256j:plain

すでにスマホアプリの画面がいくつか構成されているのが分かりますね。


最初に【Duplicate to your Drafts】からテンプレートをコピーしておきましょう。

f:id:paiza:20200226131329j:plain


このテンプレートをよく見ると、画面左側のレイヤーパネルに見慣れないタグが記述されているのが分かります。

f:id:paiza:20200226131339j:plain

上記の例だと[menu:slide]と書かれた部分ですね。

実は、このタグが「Bravo Studio」でFigmaのデザインをスマホアプリに変換できる秘密になります。たとえば[menu:slide]の記述は画面をスライド表示するという意味のタグになります。これが、あとで「Bravo Studio」を利用したときにスライドアニメーションの動きへと変換してくれるわけです。


「Bravo Studio」のタグは、他にもさまざまな種類が以下のように提供されています。

  • [menu:modal] モーダルウィンドウとして表示
  • [container:top-bar] 画面上部に固定する
  • [component:video:URL] 任意の動画を自動再生する
  • [action:phone:電話番号] 電話アプリを起動する
  • [action:email:メールアドレス] メールアプリを起動する
  • [action:share:URL] スマホのシェア機能を利用する
  • [component:web-view:URL] 任意のWebサイトを直接表示する

…など

他にも全部で数十種類のタグがあり、用途に合わせて記述していくだけで実際に動作するスマホアプリに変換できるのが大きな特徴でしょう。(タグの詳細はこちら


もう1つタグを追加してみましょう!

[component:video:URL]というタグは、指定した動画URLを画面に表示できる機能があります。そこで、以下の動画URLを利用してタグを追加してみましょう!

<動画URL>
https://storage.googleapis.com/coverr-main/mp4%2FBlue%20Joy.mp4


追加する場所ですが、テンプレートの【Featured activity】スクリーンの中にある【Activity preview】にそのまま記述していきます。

f:id:paiza:20200226131849j:plain

タグを記述するだけなので簡単ですね。


最後に、画面上部にある【①Share】ボタンから【②Copy link】をクリックしてURLをコピーしておきましょう!

f:id:paiza:20200226131901j:plain

(※リンクが【can view】に設定されているかを確認しましょう)

このURLを利用して「Bravo Studio」からスマホアプリに変換できるようになります。

■Figmaのデザインからプロトタイプを作成しよう!

Webデザインの準備ができたので、さっそくスマホアプリとして機能するかプロトタイプを作ってみましょう!

「Bravo Studio」のマイページから【Import from Figma】と書かれたボタンをクリックします。

f:id:paiza:20200226131924j:plain


さきほどコピーしておいたFigmaのURLを貼り付けます。

f:id:paiza:20200226131946j:plain


すると、Figmaのデザインがスマホアプリに変換されて取り込まれます。同時にQRコードも表示されているのが分かります。

f:id:paiza:20200226131956j:plain

このQRコードを専用のアプリで読み込めば、自分のスマホからアプリを操作できるというわけです。専用アプリはiOS / Androidどちらも無料なのでダウンロードしておきましょう!


次に、専用アプリを起動して【Preview an app】ボタンをタップします。

f:id:paiza:20200226132335j:plain


するとスキャンモードが起動するので、さきほど表示されたQRコードにカメラをかざしてみましょう!

f:id:paiza:20200226132556j:plain


「Bravo Studio」で変換されたアプリが表示されます!

f:id:paiza:20200226132607j:plain

実際のスマホアプリのように操作可能で、タグを追加した部分についてもしっかりと動作していることを確認してみてください。


たとえば [menu:slide] のタグを追加した画面は、以下のようにスライドアニメーションとして機能しています。

f:id:paiza:20200226132623g:plain


さらに [component:video:URL] で追加した動画は以下のように自動再生されます。

f:id:paiza:20200226132641g:plain

このようにして他にもさまざまな機能を持ったタグを追加していくことで、多機能なアプリを誰でも手軽に構築できます。

■Airtableと連携してみよう!

「Bravo Studio」のもう1つの魅力として、他のWebサービスと連携できる仕組みが提供されています。そこで、今回は手軽なデータベースとしても利用できるAirtableと連携する手順についてご紹介しておきます!

たとえば、Airtableにスポットの名称・料金・画像などのデータを保存しておき、そのデータをスマホアプリに反映させるような使い方ができるわけです。


そこで、まず最初にAirtableにログインした状態で以下のテンプレートURLにアクセスしてみましょう!

<テンプレートURL>
https://airtable.com/shrko7bqkuohxXKrE


サンプル例としてスポット情報が格納されたリストが表示されるので、画面上部にある【Copy base】をクリックして自分のAirtableにコピーします。

f:id:paiza:20200226132740j:plain


コピーできたら【HELP】をクリックして【API documentation】の項目を選択してください。

f:id:paiza:20200226132759j:plain


画面左の【AUTHENTICATION】を選択して連携するためのエンドポイントをコピーしましょう。

f:id:paiza:20200226132811j:plain

エンドポイントの構成は以下のとおりです。

https://api.airtable.com/v0/【アプリID】/Adventures?api_key=【APIキー】


【アプリID】は自動的に自分のIDが挿入されているはずです。

【APIキー】に関しては、Airtableのアカウント情報から【Generate API key】をクリックすると生成されるのでコピーして使いましょう。

f:id:paiza:20200226132833j:plain


「Bravo Studio」に戻り、メニューから【Data Library】を選択して新規作成ボタンをクリックします。

f:id:paiza:20200226132843j:plain


データ連携ページが表示されるので、画面下にある【New Request】の項目をクリックします。

f:id:paiza:20200226132853j:plain

ポップアップウィンドウが表示されるので、適当なコレクション名を入力しておいてください。


次に、Request URLの項目にさきほどコピーしたエンドポイントを貼り付けて【Send】ボタンをクリックします。

f:id:paiza:20200226132907j:plain


するとResponseにAirtableのリスト情報が一覧表示されます。

f:id:paiza:20200226132917j:plain


まず最初に【.data.records[ ]】にチェックを入れて、右側の選択ボックスを【All】に設定しましょう。

f:id:paiza:20200226150629j:plain

これでAirtableのデータをすべて取得できるようになります。

続けて必要な箇所にチェックを入れていくのですが、今回は以下の項目を選択しておきましょう。

.data.records.fields.Price
.data.records
.fields.Length
.data.records.fields.Photos[0].url
.data.records
.fields.Activity Name

上記のように、スマホアプリに反映させたい情報にチェックを入れるだけです。今回の場合はスポット名称・価格・時間・画像のデータになります。


プロジェクトの画面に戻り、スマホアプリに反映させたい画面を選択します。(※「Adventure list」の画面を選択)

f:id:paiza:20200226133023j:plain


データ連携の設定画面が表示されるので、Airtableのコレクションとさきほどチェックを入れたRequestを選択して【ADD CONTENT】をクリックします。

f:id:paiza:20200226133037j:plain


Figmaで構築されたデザインのレイヤーを選択します。ここで選択したレイヤーに、Airtableのデータが流し込まれるイメージになります。

f:id:paiza:20200226133048j:plain

今回の場合は以下のレイヤーを選択しておきましょう。

  • Activity card
  • Main image
  • Activity Name
  • Price
  • 2 hrs


最後に選択したレイヤーとデータをひも付けておけば完成です!

f:id:paiza:20200226133117j:plain


プロジェクト画面に戻り、【Update】をクリックして更新してからプレビューをしてみましょう!

f:id:paiza:20200226133128j:plain


Airtableのデータがスマホアプリに反映されて、さまざまなリストが表示されています!

f:id:paiza:20200226133139j:plain

もちろんAirtable側のデータを編集すればスマホアプリ側にも反映されるようになっています。

このようにさまざまなデータと連携できれば、アイデアしだいでおもしろいアプリが開発できるようになるでしょう。

■ネイティブアプリとして書き出そう!

「Bravo Studio」には本物のネイティブアプリとしてソースコードに書き出せる機能が搭載されています。

メニュー上部にある【Dwonload】ボタンをクリックして、iOS / Androidそれぞれの【Request】ボタンをクリックするだけです!

f:id:paiza:20200226133202j:plain

ソースコードへの書き出しには少し時間が掛かかるので、書き出しが完了したらメールで連絡を受け取れるようになっています。

だいたい数十分ほど待っていれば連絡が来るので、そのメールに記載されているダウンロードリンクからソースコードを取得できます。iOS / Androidそれぞれ「.ipa」「.apk」ファイルとして取得できます。

あとはこのファイルをストアに登録すれば、誰でもダウンロード可能なスマホアプリとして公開できるわけです。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、Figmaのデザインをスマホアプリとして変換可能なWebサービスをご紹介しました。

「Bravo Studio」はまだ公開されたばかりのサービスなので現在もどんどん新機能が開発されています。たとえば、近日中にユーザー認証機能を追加できたり、CRUD操作によるデータの制御などもできるようになります。

プログラミング不要で手軽にスマホアプリを開発したい方は、ぜひこのサービスを活用してオリジナルアプリを公開してみてはいかがでしょうか。


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.