初心者でも分かるリアルなプロトタイプ作成講座を開講しました

株式会社estieでデザイナーをしている荒井謙(@rakenarai)です。
estieではデザイン全般とフロントエンドの一部実装を担当しています。 趣味はラジオを聞くことで、ハライチのターンとおぎやはぎのめがねびいきのヘビーリスナーです。ラジオメールを送るレベルで好きです。

このブログで書くこと

2021/4/30(金)の社内勉強会で行った「Flintoを用いたプロトタイプの作り方」について書きます。
この記事ではGmailのiOSアプリのインタラクションの一部をFlintoで再現する方法を解説します。
ちなみに、estieでは金曜日に勉強会とウイニングセッションを交互に開催しています。 勉強会は担当者がテーマを持ち寄る形で行っています。下記はフロントエンドエンジニアであるひげちゃんが以前書いたVue.jsについてのブログも勉強会で取り上げた内容ですので興味のある方はぜひご覧ください。
inside.estie.co.jp
Vue.jsは兼ねてから業務で書いていましたが、この勉強会のおかげで雰囲気で理解していた部分が整理されました。
また、エンジニアが日々どのようなことを意識してコードを書いているかも知ることができました。
このように日々の業務に活きる勉強ができる上、相互理解も深まるestieの勉強会は最高ですね(ポジキャン)

ウイニングセッションの様子は下記のブログで取り上げていますのでぜひご覧ください。
要約すると、全員の一週間の成果物を全力で褒め合う素晴らしい会です。後半の64のゲーム大会も大盛況です笑
inside.estie.co.jp
閑話休題。それでは早速プロトタイプについて勉強していきましょう!
冒頭はプロトタイプ自体の説明や各ツールの特徴などの説明になるので、すでにご存知の方やすぐ実践したい方は「FlintoでGmailアプリ(iOS)のインタラクションを再現しよう」まですっ飛ばして下さい!

プロトタイプとは

プロトタイプとは「試作品」のような意味合いで使われます。 このブログを読んでいる皆さんもプロトタイプという言葉自体は耳にしたことがあるかと思います。もしかしたら作ったことがある方もいらっしゃるかもしれません。
かく言う私も紙に書いたUIを撮影して画面遷移を作っただけのものから、UIデザインツールを用いて作ったもの、ざっくりコーディングして作ったものなど様々なプロトタイプをこれまで作ってきました。
作り込む度合いは時と場合によって判断が必要ですが、プロトタイプを作って後悔したことはありません。それくらい重要なプロセスだと思います。
f:id:estie:20210502201033j:plain

プロトタイプを作るとどんな良いことがある?

プロトタイプを作ることのメリットは色々あるのですが、私は「チームにとってのメリット」と「自分にとってのメリット」に大別されると思います。以下にそれぞれ詳細を記載していきます。

チームにとってのメリット

プロトタイプを作ることによってチームにもたらされるメリットは2つあると思います。
1つは地に足のついた議論を行うための認識合わせ、もう1つは早い段階で仮説の検証ができることです。
「あのページに載せる情報はAとBとCで、Bを押したらモーダルビューが表示されて、Dという情報が見られると良いよね」なんて会話は辛いですし、複数人でやろうものなら認識がブレてかなり危険です。
全員の認識を揃えるためのツールとしてプロトタイプを用いて、議論を重ねながら適宜プロトタイプを修正していくのが良いと思います。
f:id:estie:20210524143405j:plain プロトタイプはチーム内だけでなく、ユーザーインタビューなどで社外の方に見せる際にも有用です。
本日紹介するFlintoのようなツールで作り込んだプロトタイプを使えば、アプリに近しい使い心地に対してよりリアルなフィードバックを得ることができます。
デザインしてコードを書いて頑張って作ったけど全然使われないなんてことはとても悲しいですし、会社にとっても避けたいことです。わずかなコストしか投下していない早い段階で失敗を知るために(もちろん成功を確信するためにも)プロトタイプは役立ちます。
かの難波六太(漫画『宇宙兄弟』)も「失敗を知って乗り越えたモノならそれはいいモノだ」と言っているのできっと間違いないです。

alu.jp

自分にとってのメリット

プロトタイプを作ることでどんなメリットが自分にあるのか。
勉強会の目的としてはこちらを共有することの方が大きかったです。特にインタラクションを作り込めるツールでプロトタイプを作ると今まで気がつかなかったことに気がつくようになります。
例えば勉強会でも例に出したものですが、Gmailとcookpadのアプリのハンバーガーメニューのインタラクションの相違点にどれだけ気がつくでしょうか。

f:id:estie:20210503111230g:plainf:id:estie:20210503111009g:plain

メニューの項目はもちろん、アニメーションの速さや黒背景の透過具合など様々な違いがあります(はてなブログに圧縮したgifを貼ったら色とかやばいことになってしまいました…すみません)
勉強会では、気づきにくいけどデザイナー的に気になるポイントとして「ステータスバーとハンバーガーメニューの関係性」について話しました。

Gmailはハンバーガーメニューが最上部のレイヤーとして左からスライドインしつつ、ステータスバーが非表示になりますが、cookpadはスライドインしてくるハンバーガーメニューより上にステータスバーが表示されています。
個人的にはハンバーガーメニューがステータスバーに入り込んでいくように動くcookpadアプリは少し違和感を覚えます。
ただ、ここで取り上げたいことはインタラクションの優劣ではなく、この違いを意識できるかどうかです。
もう少し長期的な視点で言うと、チームとしてこの違いに気がつき理想のインタラクションを議論し、作りたい世界観を正確に提供できるかどうかが大切だと考えています。
この僅かな違いは、まずは身をもってインタラクションについて学び、作ることで気がつくようになると思います。
そのような目をデザイナー以外にも持ってもらいたく、勉強会の題材としてインタラクション寄りのプロトタイプ作成を選びました。
かの矢口八虎(漫画『ブルーピリオド』)も知識の有無で見え方が全然違ってくると言っているのできっと間違いないです。

alu.jp alu.jp

プロトタイプはどうやって作る?

プロトタイプは紙とペンだけでも作ることができますが、よりアプリライクな挙動を再現するにはプロトタイピングツールを用います。
ただ、プロトタイピングツールはまさに戦国時代。
新しいプロトタイピングツールがリリースされたり、UIデザインツールがプロトタイピングツールとしての役割を担ったりとまさに群雄割拠の様相を呈しています。
f:id:estie:20210503113438j:plain
出典:Pixateに変わるプロトタイピングツールとは?5つのツールを徹底比較! | CyberAgent Developers Blog
プロトタイピングツールの栄枯盛衰の中で私のプロトタイピングツール遍歴もPOP → Prott → Pixate → ProtiPie → Flinto & Figmaとなっています笑
多くのプロトタイピングツールがありますが、これらは上記図の通り、トランジション型複合型インタラクション型に分けられます。
トランジション型は紙芝居をイメージしてもらうと良いのですが、単純に画面をリンクで繋いで遷移させただけのものです。
インタラクション型のツールは細かいアニメーションの作り込みが得意です。ただ、インタラクション型の中にはコードを書いて作るものもあるほど、習熟難易度が高いです。
複合型はその間でどちらもある程度できるバランスタイプのものです。
色々なプロトタイピングツールがあるだけに、目的に応じた使い分け(遷移中心に作りたいのか・アニメーションを作りたいのか)と自分にあったものを見つけることが重要だと思います。
今回紹介するFlintoは複合型に近いポジションにいると思います。
アニメーションと画面遷移どちらも比較的簡単に作ることができるので気に入って使っています。 前置きが長くなりましたが、プロトタイプ作成に入っていきましょう!今回扱うのはGmailのiOSアプリです。

FlintoでGmailアプリ(iOS)のインタラクションを再現しよう

再現するもの

  • 受信ボックスのスクロール
  • スクロールした際のメール作成ボタンのインタラクション
  • ハンバーガーメニュー押した際のインタラクション

事前準備

  • Figma
  • Flintoのインストール
  • GmailアプリのUI(Figmaで作成したUIはこちらです)

Figmaで作ったUIをインポートする

Step1からいきなりトラップ感あるのですが、Figmaからインポートするにはキャプチャの通り「Flinto > Sketchからインポート…」を選びます。
f:id:estie:20210502203723p:plain
その後Figmaのタブを選択し、表示されたFigmaのファイル一覧からインポートしたいものを選びます。
Import Frames」を押すとFigmaで作ったUIがインポートされます。
f:id:estie:20210502203734p:plain ファイルのローディング後、このようにFigmaで作ったUIがインポートされます。
f:id:estie:20210502203738p:plain
これでFlintoでプロトタイプを作る準備が整いました!

受信ボックスのスクロール

まずは受信ボックスがスクロールできるようにします。
手始めにハンバーガーメニューはこのタイミングでは使わないので非表示にします。左に並んでいるディレクトリのうち、「modal」の目のアイコンで表示・非表示の切り替えができます。

スクロールグループを作る

スクロールを作る方法はとても簡単です!スクロールさせたい要素をグループにしてそのグループを「スクロールグループ」にするだけです。
ここでは検索窓、受信ボックスというラベル、各メールのセルを内包している「scroll」というディレクトリを「スクロールグループ」にします。
f:id:estie:20210502203742p:plain

動きを確認する

Flintoはメニューの右上にある「プレビュー」ボタンからすぐにインタラクションの確認を行うことができます。スクロールの挙動を確認するとこのタイミングでは以下のようになっているかと思います。
f:id:estie:20210503111954g:plain
スクロール関連で少しブラッシュアップが必要なところが2点あります。
Gmailアプリではステータスバーの背景に白透過のレイヤーがあり、メールのセルがその下に滑り込んでいくようになっていますが、プロトタイプでは再現できていません。
また、スクロール領域の下部がタブバーと重なっているため、最後のコンテンツが見えなくなってしまっています。

スクロール領域を変更する

上記2点の問題はどちらもスクロール領域の指定位置が原因です。
「scroll」ディレクトリのスクロール領域の始点と終点を変更するだけでこれらの問題は解決できます。
f:id:estie:20210502205721p:plain
この変更をするだけで以下のようにステータスバーの下に各メールのセルが滑り込み、タブバーに最後のコンテンツが被ることなくスクロールを終えることができます。
f:id:estie:20210503113035g:plain

スクロールした際のメール作成ボタンのインタラクション

ある程度スクロールするとFloatingActionButton的に右下に常に表示されている「作成」ボタンから文字がなくなりペンだけの正円のボタンに変わります。次はこのインタラクションを作りたいと思います。

ビヘイビアを使ってインタラクションを再現する

Flintoの「gmail」という画面にある全ファイルを選択して「ビヘイビア」を押します。
f:id:estie:20210503113002p:plain
ビヘイビアという機能はFlintoでアニメーションを作る上でかなり多用します。
個人的にはFlintoを愛用している理由の半分くらいにビヘイビアの使いやすさがあります笑
ビヘイビアを押すと以下のようなビヘイビア編集画面に遷移します。
f:id:estie:20210503113209p:plain
ビヘイビアの基本的な考え方は初期状態と新規状態を定義し、状態変化のトリガーを指定することでアニメーションを作ることです。
イメージ的にはJavaScriptと近しいと思います。
早速プラスボタンから新規状態を作成してみましょう!新規状態とは作成ボタンから「作成」という文字列が消え、ボタンの形が正円になり縦横中央にペンのアイコンが表示されているものです。
幅116高48の角丸ボタンの新規状態は以下のように指定します。

  • 幅48高48の正円に変形させる
  • 作成テキストは透明度0%にする(少しX座標を値を増やすとそれっぽくなります)
  • ペンアイコンは正円に対して縦横中央にする

新しく定義した新規状態への状態変化のトリガーはスクロールなので、前段で作成したスクロールグループにスクロールイベントを付与し、ターゲットとして新規状態を選択します。
また、新規状態への変化が完了するまでのスクロール量も指定することが可能です。
f:id:estie:20210503113251p:plain
これだけで作成ボタンのインタラクションは出来上がりです。
挙動の確認はスクロールの確認と同じくプレビューからも可能ですが、ビヘイビアで初期状態・新規状態をクリックしてチェックすることもできます。
また、Shiftを押しながら初期状態・新規状態をクリックするとスローモーションでインタラクションが見られるので込み入ったアニメーションを作った際とても役立ちます。
f:id:estie:20210503122032g:plain

完成した作成ボタンアニメーション

f:id:estie:20210503124028g:plain

ハンバーガーメニュー押した際のインタラクション

ビヘイビアを活用してハンバーガーメニューの挙動を再現する

まずはスクロールを作る際に非表示にした「modal」ディレクトリを表示状態に戻しましょう。
ハンバーガーメニュー押下時のインタラクションも前段で作ったビヘイビアに新規状態を追加する形で作っていきましょう。
ハンバーガーメニューを押下するとメニューは左からスライドインし、黒透過のレイヤーが出現するというインタラクションなので、メニューは左に移動させ、黒透過のレイヤーは不透明度を0%にしておきます。
f:id:estie:20210503114907p:plain
ビヘイビアで追加するメニューが表示されている新規状態には以下を指定します。

  • メニューの位置のX座標とY座標を(0, 0)とする
  • 黒透過レイヤーの不透明度を100%にする
  • ステータスバーの不透明度を0%にする

こちらの指定を行うと以下のように動きます。
f:id:estie:20210503124100g:plain
こちらのアニメーションのトリガーはハンバーガーメニューなのでそのレイヤーに「タップ」というイベントを指定し、ターゲットをハンバーガーメニュー(新規に定義する状態が複数になったのでリネームしました)としてます。

メニューを閉じるインタラクションを作成する

こちらもとても簡単にできます。黒透過のレイヤーに対してタップイベントとターゲットを指定し、トランジションを反転をONにします。(トランジションを反転がミソです)
f:id:estie:20210503115138p:plain

完成!

f:id:estie:20210503120758g:plain
作成ボタンを押した際のメール作成画面への遷移やキーボードのインタラクションなどはブログの尺の都合上割愛しました…
作り方が気になる方はぜひ@rakenaraiまでご連絡ください笑
メール作成画面はトランジションを使用して作っています。ちなみにトランジションの指定が簡単なことがFlintoを使うもう半分の理由です!
Flintoのファイルも公開しておきますので、そちらも是非見てみてください。
www.dropbox.com

余談

この前の年末年始休暇で1日1インタラクションを作っていました。11個を以下にまとめていますので興味ございましたらご覧ください! twitter.com ラインナップはこんな感じです。
f:id:estie:20210503131730p:plain

最後に

株式会社estieは2人目のデザイナーを募集しています!
事業用不動産の領域は、ITのプレーヤーがまだまだ少なくほぼ手付かずですが、東京は世界の都市をみても最大級のマーケットです。
ダイナミックな市場を自分たちの手で変化させる醍醐味がestieにはあります。市場規模12兆円にも及ぶ巨大産業のDXを一緒に進めませんか?
herp.careers デザイナー採用資料も公開しています。カジュアルにお話しするだけでも大歓迎ですのでお気軽に(@rakenarai)ご連絡ください!