チュートリアル：オンライン書店のモックアップを作る¶
このチュートリアルでは、ツールを使ってオンライン書店の画面を設計する方法を説明します。ここでは書店を例にしていますが、チャットアプリでも、ロールプレイングゲームでも、地域クーポンアプリでも、作業の流れ自体は同じです。
何を作るのか？¶
最初に考えるべきこと：アプリはどんなデータを扱うのか¶
オンライン書店とは何かを考えます。一般的には、本を一覧で見て、価格を確認し、カートに入れ、注文し、その注文の状態を確認できる仕組みを持つサイトです。これらができれば、利用者はまともなオンライン書店を利用したと感じるでしょう。
一覧画面では、本のタイトルと価格が表示されます。たとえば「コミックX」が800円で売られているとします。この価格は書店側が決めており、そのデータはどこかに保存されています。ブラウザ上で見えているのは、その保存されたデータです。
次に購入手続きの画面に進むと、カートの中身を確認し、表示された自宅の住所を確かめます。注文が完了すれば、本は後日届きます。このとき書店はあなたが以前に登録した住所を記憶しているから、いちいち入力する必要はありません。そして、当然のことながら、他の顧客に対しては、その顧客の住所を記憶していて表示されます。
このように、書店アプリは少なくとも「本」と「顧客」という二種類の「対象」を記憶し、表示します。これらはエンティティと呼ばれます。エンティティとは、システムが扱う対象です。多くのプログラミング言語では「オブジェクト」とも呼ばれているので、そういったほうが分かりやすいかもしれません。
実際のソフトウェアとモックアップ¶
今すぐ本物のオンライン書店を作ろうとすると、実際のデータベースに接続するコードを書き、サーバーを用意し、決済処理まで扱う必要があります。これには数か月かかるかもしれません。
そこで、その前段階としてモックアップを作ります。
モックアップは、いわばデジタルな紙芝居です。表面的に動いているように見せるだけのモデルであり、実際にはデータベースに保存したり、決済を処理したりはしません。計算も行わず、紙芝居にあらかじめ書かれた「答え」をそのまま見せるだけです。画面の見た目を並べ、ボタンを押すと次の画面に「めくれる」仕組みになっています。
この紙芝居を使うことで、実際にクリックして流れを試し、他の人に見せながら、そのアプリの構造が妥当かどうかを確認できます。時間をかけて実装する前に、全体の筋が通っているかを検証するための手段です。
詳細なモックアップと抽象的なモックアップ¶
モックアップを作ると決めたとき、次に問題になるのは、どの程度細かく作り込むかです。
初学者はしばしば、細部まで作り込んだモックアップを作ろうとします。たとえば「購入」ボタンの緑色を微調整したり、フォントサイズを細かく調整したり、配置を数ピクセル単位で整えて、本物そっくりな画面をつくろうとします。しかし、後から「そもそもこのボタンは別の画面に置くべきだった」と気づいた場合、それまでの作業はほとんど無駄になります。もし、あなたが学習や趣味のためのプロジェクトに取り組んでいるとしても、入念に作り込んだ「購入」ボタンだけを完成させることは、最も重要な経験…実際に完成品を作り上げる経験・自信・満足感を生み出しません。
そのため、このツールは、あえて抽象的なモックアップをつくることに限定しています。色は存在せず、フォントも指定できず、ボタンを数ピクセル動かすこともできません。コンポーネントの順序すら指定できず、自動の並び替えに任せるしかありません。このストイックな制約によって、見た目の調整に時間を取られないようにしています。
その代わり、次のような、構造に関する判断に集中することになります。
- この画面にはどんなデータがあるのか。
- あるデータの組み合わせを、一つのまとまりとして見せるべきか、それとも別々な情報として見せるべきか。
- どんなボタンがあり、そのボタンを押すとどこに移動するのか。
視覚的な細部に気を取られないため、短時間で全体の紙芝居を作ることができます。ここから実際に作り始めます。
書店アプリのモックアップを作る¶
Step 1: エンティティを定義する¶
まず、「本」という対象をツールに教える必要があります。
画面右側のサイドパネルを見ると、最初から「エンティティ」タブが選択されています。
「+ エンティティを追加」をクリックすると新しい項目が追加されるので、名前を「本」と入力します。
次に、このエンティティの持つ情報を定義します。エンティティ名の右にある「+」ボタンをクリックし、最初の項目を「タイトル」とします。型は string、つまり文字列です。
もう一度「+」をクリックし、「価格」と入力します。こちらは型を number に変更します。
これで「本」というエンティティが定義されたことになります。
同様に「顧客」というエンティティも作成し、「名前」と「住所」という2つの文字列プロパティを持たせます。
Step 2: 画面を用意する¶
次に、紙芝居のカードにあたる画面を作ります。
サイドパネルの「画面」タブを開き、入力欄に「販売画面」と入力して追加します。
続けて「会計画面」「購入完了画面」も追加します。
リストから「販売画面」を選択すると、左側の領域が「販売画面」の編集エリアになります。空白が表示されているはずです。
Step 3: 画面に内容を配置する（コンポーネント）¶
販売画面で本を表示するには、コンポーネントという部品を使います。
空白領域を右クリックするとメニューが表示されます。
コンテナはグループ化のための箱、テキスト・数値はデータ表示（型は自動判別）、ボタンはクリック可能な要素、入力は入力欄です。
1冊分の本の表示を作ってみます。
- 右クリックして「コンテナ」を選択します。
- 追加したコンテナの中を右クリックし、「テキスト・数値」を選びます。
- 「エンティティパス」というメニューが続けて表示されます。「エンティティパス」というのは、どのエンティティの、どのプロパティを表示するかを指定するものです。つまり、「このテキストコンポーネントは、どのデータを表示しますか？」と尋ねています。「本」を選び、展開されたリストから「タイトル」を選択します。
- コンテナに「本 > タイトル」というコンポーネントが追加されました。
- コンテナの中の何もない余白を再度右クリックし、「テキスト・数値」を選びます。次に「本」→「価格」を選択します。
- 最後に、コンテナに「ボタン」を追加し、ラベルとして「選択」を選びます。
これで1冊分の表示ができた状態になります。具体的には「ComicX」「800円」といったデータが表示されている様子をイメージしてください。
次に、複数の本を並べるために、このコンテナをコピーします。右上にあるCopyボタンを使い、オンライン書店のページらしい見た目になるまで複製します。5冊程度並べれば、それらしく見えるでしょう。
Step 4: 画面同士をつなぐ¶
ボタンを押したときに次の画面へ進むようにします。
作成したボタンを見ると、ドロップダウンがあるので、「画面を選択」を選び、「会計画面」を指定します。
これで画面の遷移が設定できました。「フロー」（流れ）の完成です。
Step 5: 他の画面も作る¶
次に会計画面を編集します。画面パネルから「会計画面」を選択し、本→タイトル、本→価格、顧客→名前、顧客→住所を表示するコンポーネントを追加します。さらに「OK」ボタンを置きます。
その次に「購入完了画面」も作ります。ここにはテキストコンポーネントを置き、表示文字列として、一番上の「...」を設定しておきます。これは「購入しました」や「ありがとうございます」といったメッセージを想定していますが、詳細な文言は今は重要ではありません。同様に「OK」ボタンを置き、販売画面に戻るように設定します。
Step 6: プレビューで動かす¶
ここまでで、データ定義、画面構成、ボタンの遷移が一通りそろいました。
画面上部のメニューバーにある「プレビュー」をクリックすると、デザイナ用のUIが消え、実際の表示だけが見える状態になり、ボタンはクリック可能になります。
ボタンを押すと会計画面、購入完了画面に切り替わることを確認できます。
画面上部の「プレビューを終了」ボタンで、編集画面に戻ります。
Step 7: プロパティ名を変更する¶
「住所」というプロパティ名を、「配送先住所」に変更したくなったとします。
その場合、サイドパネルのエンティティパネルから、「住所」をクリックすると、入力欄できるようになるので、「配送先住所」と入力し、Enterキーを押すとプロパティ名が変更されます。関連するコンポーネントは自動で名前が変わるため、それ以上の操作は必要ありません。
Step 8: 画面名を変更する¶
画面の名前は、後から変更することもできます。画面上部のヘッダー部分をクリックことで、名前を編集できます。
ヒント¶
たとえば、カードを表すコンテナがあるとして、このカード全体をクリックすると何かが起こるという様子を表現したい場合は、コンテナにOKボタンを追加し、このボタンを押すと画面が遷移するという方法で代用します。
また、カードをドラッグ & ドロップで動かしたい場合は、選択ボタンで動かしたいカードを選択して、「動かす先を指定する画面」に遷移し、そこでOKボタンを押すとカードが移動するしくみで代用します。このしくみは、ボタンだけでドラッグの仕組みをシミュレーションできるのはもちろん、あとからドラッグ&ドロップを実装するときに正しく設定するためにとても役に立ちます。「動かす先を指定する画面」は画面のコピー機能を使うと速いです。
数秒待ってから画面が遷移する場合や、アニメーションが終了すると画面に遷移するアプリを想定している場合は、OKボタンを押すと次に進むようにします。デザインの検討時には、一時停止できたほうがやりやすいです。
間違った操作をしてしまった場合、焦らずに「戻る」ボタンを押せば元に戻せます。
その先に進むには¶
この段階で、クリック可能なモックアップが完成しています。複雑なコードを書く必要もなく、見た目の細部に時間を使うこともないまま、アプリの構造が機能することを確認できたことになります。
すべての画面を同様に作り終えたら、上部の「エキスポート」ボタンから保存できます。JSON形式で保存すれば、後日また読み込んで作業を続けることができます。
また、「LLMテキスト」として書き出すこともできます。この形式は再読み込みはできませんが、紙芝居の構造を記述したテキストになっています。このテキストをAIに入力すれば、色やスタイルを設定した、非常にリアルな見た目のモックアップを作ってくれます。何を使ってもいいですが、Claudeをおすすめします。