非エンジニアの私がGoogle Stitchを使ってモックアップツールを作ってみた（ツール動作編）
こんにちは。製造ビジネステクノロジー部の細見です。
今回は、Google Stitchを使って、前回作ったモックアップツールの画面を、実際に動作するように設定していきます。
※画面を作るまでの経過プロセスは、下記をご参照ください。
前回作成時の画面を再確認
画面が動作するようにリンクを貼った後で、また画面を修正したい、となった場合、手間が掛かるので、まずはこれ以上の修正が無いかどうかをキャンバス上のそれぞれのページをクリックして点検します。
私は、この時点で、１画面、作成を忘れていたことに気付いたので、追加のプロンプトで画面の作成を指示しました。
画面上にリンクを貼る
実際に作った画面上で、どのボタンを押したら、どの画面に遷移するのか、を設定していきます。
キャンバス上で、全ての画面を選択した状態で、画面の上の方にある「Generate」へ進みます。
そして、新しい機能「Instant Prototype」というボタンがあるので、押下します。
すると、わずか20秒ぐらいで、一旦、粗く繋がった状態のツールが出来上がりました。
リンクボタンは9個設定したのですが、画面によってリンクが完成しているのは、１つのボタンだけだったり、5つリンクが完成している画面があったり、とページによって、結合できているボタンと、できていないボタンがあり、その数は、バラバラでした。
画面生成のプロセスで、画面を更新した時に、更新不要の画面が出てきて削除し、必要な画面のみ残す、という作業を繰り返したためかもしれません。一発で完成はしませんでした。
画面リンクの補正
画面の上の方にあるEditボタンを押し、編集モードにしてから、リンクが貼られていないボタンを選択して、ボタン押下後、どの画面にジャンプするのかを指定します。カーソルを当てた先に下記のような選択肢が出てきますので、「Connect to screen」を選択します。
右側画面で、リンク先の画面を指定したら、右下の「Apply Connection」のボタンを押下します。
すると、「接続の保存中」というメッセージが出た後、リンク貼り付けができていることが確認できました。
全ての画面ページ、全てのボタンにリンクを設定したら、モックアップツールの完成です。
注意点
Prototypeを作ってしまった後、画面の修正が必要になった場合は、再度、必要な画面を選択してから、新たにPrototypeを生成する必要があります。
私は、Prototypeを表示させた状態で画面修正してしまいましたが、キャンバス上に戻ると、どれが最新なのか、またごちゃごちゃした状態になってしまったため、Gemini(3.1 Pro)に相談しました。その回答は下記の通りでした。
振り返り
今回、モックアップツール作成にあたっては、Google Stitch 3 Flashを使用しました。
3 Flashでは一部のリンクが自動設定されませんでしたが、Thinking with 3.1 Proではより多くのリンクが自動設定される可能性があります。今後試してみたいと考えています。
また、あとから自分で画面修正の指示をする際には、若干の配慮が必要です。画面作成の際に、それぞれの画面のタイトルが自動生成されるのですが、画面名称とボタン名が完全一致していない場合、AIが自動リンクを生成できないことがありました。
このように、非エンジニアであっても、結構立派な完成度合いでモックアップツールを作ることができたことは、驚きでした。
システムの要件を入力するだけで作成できるため、営業や調達など、実務の様々な場面でも十分に活用できます。
【想定事例】
ーシステムの要件定義をする際、IT部門や開発エンジニアの人に主旨目的が伝わりにくい場合
ー開発メンバーや、プロジェクトに参画していないチームのメンバーたちと、イメージ合わせをしたい場合
ー要件定義が漏れていないかどうか、再確認したい場合 等々
今まで、システム開発においては、ユーザーの要件定義の際に、ExcelやPowerpointで資料を作って説明したり、ということが多かったように思います。
それが、このGoogle Stitchを使うと、ある程度、簡単に、画面そのものを生成することができます。
今後もGoogle Stitchは日々進化すると思いますので、もっと効率的なやり方を発見したいと考えています。
また発見した際には、このブログでお伝えします。
以上、少しでもお役に立てると幸いです。
