はじめに
ほたー おはようございます! こんにちは!
今回は6月6日～6月10日にFigmaで作成した「最初の3匹選択アプリ」のプロトタイプについて要点を解説します。
プロトタイプというのは「こんなアプリを作りたい」というアプリデザインの見本となるものです。
実際にユーザーが利用するアプリにするには見た目だけでなくサーバーサイドの実装を行ってデータの一覧・新規追加・編集・削除機能を盛り込む必要があります。
Figmaは使い方次第でアプリデザインを簡単に作れるようになるデザインツールです。
作成してから2週間と大分遅く記事を投稿しますのでFigmaのどういった機能が便利か振り返りながら書きました。
Figma閲覧用URL
今回解説する「最初の3匹選択アプリ」のプロトタイプは以下のURLから閲覧することができます。
URLからデザインを開いた後にファイルタイトル（SelectPartnerApp）をクリックしてプルダウンから「duplicate to your drafts1」を選択しますと自分のアカウントに複製することが可能です。複製したデザインは編集することができるようになります。
最初の3匹選択アプリ解説
「最初の3匹選択アプリ」を次の順序で解説します。
- 動作の流れを整理したフロー図の説明
- 「最初の3体選択」を題材にした理由の説明
- 実際に動作を切り取った動画の説明
- 本アプリで気づいたポイント、工夫したポイントの説明
それではごゆっくりどうぞ
フロー図
最初に作成したアプリの動作手順をフロー図を用いて説明します。
下画像をご覧いただけますでしょうか？「最初の3匹選択アプリ」のフロー図になります。文字サイズが小さいと思われますので画像をクリックしますと元画像が表示されるので拡大されます。
フロー図からアプリを次に書く構造にしたいことが分かっていただければ幸いです。
- 緑・赤・青のビンから1つ選択します。
- 「はい、いいえ」ボタンどちらかを押して選択したビンで本当によいか決めます。
- 選択したビンに入ったモンスターが元気いっぱい飛び出します。
実際は最初の選択画面の前に導入画面がございますが、クリックするか5秒待つことで次の画面に進む流れであり利用者が何かする要素がないので省いています。
それでは次になぜFigmaで初めて公開するアプリデザインの題材に「最初の3体選択」を選んだか説明します。
「最初の3体選択」を題材にした理由
フタから飛び出す姿のイメージが容易だったため
6月の標語は「フタを開ける」つまり既に持っているものでやりくりすると決めていました。
ならば6月に作るアプリではフタを開けるを直接的に想起させるのが良いと感じました。
最初はフタをクリックするだけで中身が飛び出すようにデザインを作りました。それだけだと面白くないのでゲームのようにしたいと考えました。
そこでポケモンの要素を用いることにしました。最初の3体選択はポケモン本編をプレイして序盤に必ず訪れるイベントです。ポケモンが手持ちにいないと野生のポケモンと戦えません。ポケモンは十年以上にわたって遊んだ経験のあるジャンルです。ビンを選択した後に元気いっぱい中身が飛び出すイメージが容易にできました。剣盾では選択したときに喜ぶポーズを見せるようになり身振り手振りも進化していると感じました。
中身が飛び出すのであって「とびだすなかみ」ではございません。それはナマコブシというポケモンの特性です。
続いては最初の3体を選択したときの動作を切り取った動画を作成しましたので紹介いたします。
最初の3体選びました（動画あります）
本アプリで緑のビンを選択した場合を切り取った動画を作成しましたので確認をお願いいたします。動画で黒い縦線が入っている画面がございますが後で説明するSmart Animate機能の影響です。ご了承ください。
緑のビンを選択して赤・青のビンが右にずれる動作と「はい」ボタンを押して中にいた魚戸ホタル（蕾）が飛び出す動作は後で説明するSmart Animate機能を用いて実現しています。「いいえ」ボタンを押してモーダルが表示される動作はインタラクション機能のOpen Overlayを用いて実現しています。
上記のように様々な工夫を施しましたので、次の「デザインの要点」で説明いたします。
赤のビン、青のビンを選択した場合についても切り取った動画を作成しました。よろしければ下にあるボタンをクリックして確認をお願いいたします。こちらには「いいえ」ボタンを選択する動作がございませんので10秒ほど短くなっております。
デザインの要点
「最初の3体選択アプリ」のデザインを作成するに当たって気づいたポイント、工夫したポイントをできるだけ簡潔に説明します。Udemyの講座で学んだ機能のおさらいから新しく導入した機能・プラグインまで自分が「ここは紹介しておきたい」という内容になっています。
レイアウトグリッド
UdemyのFigma講座でグリッドレイアウトに従ってデザインを作成すると整理されたデザインになると学びました。その点を今回のプロトタイプ作成でも意識しました。
1画面の大きさは以下の通りになっています。この大きさと同じフレームを作成してLayout gridを適用しました。
画面比率が4:3のスクエア型になってしまいました。今回は仕方ないですが次回以降は16:9のワイド型になるようにします。ビンのフタが開いて魚戸ホタルが飛び出すアニメーションにある程度の高さが必要でしたということで…。
画面上部のヘッダーや下部のメッセージボックスの大きさは64としました。ビンを囲んだフレームの大きさは 横：840 × 縦：416としました。このように縦横の長さが8の倍数になるようにしました。
例外もございます。背景のフレームからヘッダーとメッセージボックスを除くと縦の長さが532となり8の倍数ではございません。画面比率を守るため例外を受け入れます。
Constraints（制約）
Constraintsとはフレーム（外枠）のサイズが変わったときに、中の要素をどこと繋ぎ止めるか位置のルールを決める機能です。
プロトタイプを作成する際にフレーム端を引っ張って拡大・縮小したときにレイアウトが様変わりしないか確認しました。実際に引っ張ってみた動画を作成しましたので確認をお願いいたします。
動画で示したようにデフォルトの状態からレイアウトが様変わりしていません。今後も新しいデザインを追加しては引っ張ってズレていないか確認することを決まり事にします。
横に広がってほしいデザインあればLeft→Left and rightに変え、下に留めたいデザインあればTop→Bottomに変え、常に中央に来てほしいデザインあれば上下左右Centerに変える。変更に強いデザインに私はしたい。
コンポーネントの強力さ
一番「デザイン作成時間の短縮につながるだろう」と確信したのがコンポーネント
コンポーネントはよく使うデザインを再利用できる1部品にする機能です。1コンポーネントから派生して複数のインスタンスを作成でき、編集すると即座に全てのインスタンスへ反映するためデザインを直す手間が省けます。
Figma閲覧用リンクを開いた方は左メニューにあるPages / Elementを見てもらえますか。全てのコンポーネントが関連するフレームごとに分けて配置されています。
実は「いいえ」ボタンを押した後の画面を実装するまでビン・ヘッダー・フッターのみコンポーネント化していました。しかし「はい」ボタンを押してもモンスターが飛び出すアニメーションを作ろうとしたとき、フタが横にずれたことでビンを囲むフレームの横幅が大きくなりました。これはAuto layoutがズレることを意味しており問題です。なのでモンスター画像・ビン・ボトルをコンポーネント化し、囲んだフレームもコンポーネント化しました。その結果フタが横にずれてモンスターが飛び出すアニメーションを実装することができました。
あと背景も使いまわすのでコンポーネント化しました。大半のフレームがインスタンスもしくはDetach Instanceでインスタンス自体を解除したフレームになりました。
最初からコンポーネント化を前提に作っていれば時間短縮できたはずなので次回以降に活かしていこうと考えています。
Variants機能
Variants機能は複数のコンポーネントの状態をひとつにまとめて管理する機能です。同じ機能を持っていて見た目が違う場合にVariants機能が使えそうです。6月のもくもく会の記事では「はい、いいえ」の確認ボタンを例に説明したので今回はモンスター画像の状態変化を例に説明します。
まずコンポーネント側でVariants機能を下画像のように適用しました。設定する前に名前を「/（スラッシュ）」で区切るとプロパティの値が自動で入力され管理しやすくなります。
状態名をモンスターが直立でビンにエフェクトがないものがDefault、モンスターに角度が付き象徴したアイコンを周りに漂わせビンが輝いているものがHoverとします。下動画を見てもらえうと次のような状態変化になっていることが分かります。
- ビンにフォーカスを当てると状態がDefault→Hoverに変化
- ビンからフォーカスを外す、もしくは別のビンにフォーカスを当てると状態がHover→Defaultに変化
このようにコンポーネントの状態管理に便利なのがVariants機能です。今後も使う機会が多いと予想されるので学習できてよかった機能です。
ちなみにモンスター画像はFigmaではなくCLIP PAINT STUDIO DEBUTを使って描画しています。魚戸ホタルはイカをモデルに造形しているので皮膚の色を変化させる擬態能力も持っています。初代の有名なポケモンの画像を彼らに見せて「最初の3匹選択アプリのデザインを作りたいから色を変えて☺」とお願いし変色したという設定です♪
Smart Animation
画面遷移はPrototypeから設定すると学びましたが、Smart Animate機能を用いると滑らかな遷移を実現することが出来ます。
Smart Animate機能を用いた画面遷移は「いいえ」ボタンを押したときのモーダル以外すべての画面で行われています。最初の選択画面でビンを選択した後の動作でSmart Animateを設定しなかった場合、他のビンがすぐ消える形になり「他の子はどうなったの😢」と心配になります。Smart Animateを設定すると遷移するまで他のビンが写るので「この子が選ばれたんだな😄」と認識できます。
ビンから元気よく飛び出す動作は下画像のようにAnimationにSlide inを設定してSmart animate matching layersにチェックを入れることで実現しました。
選ばれた魚戸ホタルさんがフタから元気に出てきた姿を見ると喜ばしいです。動きが付くことで生きてるように見えるんだなと思いました。
実はフタから飛び出すアニメーションをGIF画像で実現しようとしていました。しかし次の順番でうまくいかないことがわかり断念しました。
- FigmotionでGIFを書き出すと連続写真のように残像が残るアニメーションになりました。調べると全てのフレームをレンダリングしてしまう性質があるようでした。
- mp4→GIF変換をEZGIFから行いましたが背景色が透過しませんでした。
- GIF画像作成にGiffyCanvasというプラグインがあることを知ってダウンロードし、アニメーションっぽくフレームを並べた後に起動してGIF画像を作成しました。するとモンスターの色が変わってしまい、画質も粗くなりました。
フタから飛び出す動作には①フタが横にずれる②フタが消える③モンスターが飛び出す④ビンが消える、と4段階あります。GIF画像を作るのは動作が1つの場合に限定することに決めました。GIFを作る機能自体はインストール時の動作など単純な状態変化を見せることが出来るので便利です。
新しく活用したプラグインの紹介
UdemyのFigma講座の後に新しくインストールしたプラグインから実際に役立ったプラグインを紹介します。
テキストスタイルを選択してプレビューを見て、良ければ適用することが出来ます。通常はプレビューを見ることが出来ないので便利です。
画像や写真から5色抽出し、カラーパレットを自動で生成してくれるプラグインです。別のDraftファイルでポケモンの公式画像から色を抽出して3匹の魚戸ホタルにそれぞれ色付けしました。
画像から背景を切り抜いてくれるプラグインです。作成した魚戸ホタルの画像から白い背景を切り抜きました。Unsplashなど外部の画像にも使えそうなので便利です。
カラーパレットの色の名前を一括変更できるプラグインです。通常は1つ1つ色を変更するのですが面倒で管理しづらいので便利です。
このプラグインはマウスオーバーしたときに現れるモンスターを象徴したアイコンで利用しています。無料で利用可能であり種類も豊富なため便利です。
他にもAutoflowやContrastやRename Itなどプラグインをインストールしましたが活用できているとは言い難いです。活用すればプロトタイプ作成時間が短縮できると期待します。
またプラグイン選びで参考にした記事を紹介します。
導入画面
長くなった説明もいよいよ最後になります‼ 最後に導入画面の紹介と説明をします。下のスライダーを確認していただけますか？
はじめのページで魚戸ホタルに興味を持つネコ（ハチワレ）が登場します。「う～ん、どうしようかな」と悩んでいるところに博士ポジションのネコ（茶トラ）が颯爽と登場!!
魚戸ホタルが愛嬌がありヒトに興味を示す知能も高い生き物であることを伝えます。するとネコが「ぜひとも紹介してください」と目を輝かせたところで研究所に連れていかれ、最初の3体からパートナーとなる1体を選ぶことになります。
導入画面を作った理由は「魚戸ホタルが欲しい」という動機を持たせるためです。アプリの利用者を物語の登場人物に見立てて「何が欲しいのか」を可視化する必要があると思いました。何が欲しいのかわからない登場人物は人間味に欠けており共感するのが難しいですからね。今後作る開発物でも利用者が何をするアプリなのかという説明書きが必要だと思います。現在本職で開発・改修しているアプリでも機能を実装した後にマニュアルを作成しています。「利用者が一目で理解できるように」と心がけており、個人開発でも取り組んでいきます。
最後に
本当に本記事の投稿が遅くなりました、すみません。
6月のもくもく会の記事を書いた後、次の出来事がございました。
- 6/13～6/14 カクヨムエッセイ6話「まどおーむ揺籃」投稿
- 6/15～6/16 魚戸ホタルの沖漬け絵作成（使いまわしの効く立ち絵作成）
- 6/17～6/18 母・祖父・祖母と淡路島旅行
- 6/19 お休み
- 6/20 Abema TVで「天心 vs 武尊」の再放送を神妙な心持ちで見ました。同じ時代に生まれた最強同士の決闘は闘いのスタイルの磨き上げ、勝者と敗者が決まるという格闘技の競技性を感じ取ることができて素晴らしかった。
- 6/21 夏至 会社に携帯電話を忘れた😅
- 6/22～6/24 本記事作成
6/17～6/18の淡路島旅行の前にやり残しを作りたくなかったため他のことに時間を当てていました。
淡路島旅行では正月以来に祖父・祖母と会いました。杖なしで支えきれなくなった祖父の身体を肩を持つことで支えました。一緒に入った風呂は転倒しないように気を付けつつ、祖父の背中を流したり、一緒に湯舟に入って「気持ちいいなぁ～」と感覚を共有しました。祖父から「ありがとう」と言葉をもらい、良いことをしたと感じ心のリフレッシュになりました。また全身マッサージ1時間や水風呂への入浴もあり体のリフレッシュもしました。旅行を通して清々しい気分になりました。
6/19のお休みというのはブログを書こうとログインしたら404エラーになり興がそがれたので何もしないことにしたということです。
ブログ書くのに期間が開くと書き方が抜け落ちるものですね。1週間に1回はブログなりエッセイなり長文を書くように心がけたいものです。
以上になります。
それでは最後まで読んでいただきありがとうございました。ほたー
