プロトタイプ作成ツール Justinmind でメッセンジャーを作ってみた!その 2

前回のブログ記事「プロトタイプ作成ツール Justinmind でメッセンジャーを作ってみた!」ではステップ 1 から 3 までを紹介しました。

  1. Justinmind のダウンロード
  2. テンプレートの作成
  3. ログイン フォームの作成

今回のブログでは、チャット画面作成、連絡先作成、リスト作成を行っていきたいと思います。

ステップ 4: チャット画面の作成

チャット画面は、メッセンジャー アプリで最も重要になります。以下の UI 要素を今回は使用したいと思います。

  • 丸いチャットの会話枠
  • アイコン (写真を添付するアイコンなど)

長方形や三角形のウェイジェットを使用して、チャットの会話の枠を作成します。

長方形の UI 要素を選択します。プロパティのタブ内で、ウィジェットの枠の色を選択します。その後、ウィジェットに丸みを持たせるように変更します。三角形のウィジェットをキャンバスにドラッグし、サイズ調整して先ほど変更した長方形ウィジェットの横に配置します。これで、チャット枠の完成です。最後に、すべてのウィジェットを選択し、右クリックで全ウィジェットをグループ化します。

今作成したチャットの枠をコピーして貼り付けることにより、会話画面を作成することができます。この際に、自分の会話と相手の会話の枠の色を変えることをお薦めします。今回は、灰色と緑色にしました。

次はアイコンを作成していきます。今回は Justinmind が用意している iOS や Android のアイコンを使用します:

  • 矢印のアイコン
  • カメラのアイコン
  • 送信アイコン

Justinmind の Web サイトから無料のウィジェット ライブラリをダウンロードできます。まだ、ダウンロードしていない方は、開発元 Web サイトより今すぐダウンロードできます。

ステップ 5: 連絡先の作成

次は、連絡先の画面を作成していきます。名前を連絡先とします。

連絡先を作成するには、データ リストが必要になります。 [Data Master] のパレットから新しい [Data Master] を作成します。

ダイアログ内で以下のフィールドを作成します:

  • 画像
  • 名前
  • メールアドレス

名前とメールアドレスのタイプが [Text] になっていること、画像のタイプが [File] になっていることを必ず確認してください。

データ リストを画面にドラッグすると、ダイアログが表示されます。ダイアログに名前を設定しリストから該当する [Data Master] を選択します。作成した全フィールドを追加します。パレットから [Data Master] を右クリックし、レコードの表示と編集を選択します。これで、データを追加できるようになりました。

プロパティ パレット内でリストのフォント、色、レイアウトを変更するなど自分のサンプルに合ったデザインにカスタマイズすることができます。

ステップ 6: チャット リストのプロトタイプ作成

メッセンジャー アプリには、メッセージ履歴を表示する画面が存在します。

このスクリーンを作成するには以下のものが必要になります。

  • チャットを表示するための Data Master
  • フロートのアクション ボタン
  • タブのナビゲーション

チャット リストの作成

スクリーン パレットから新しいスクリーンを追加し、テンプレートの内容を選択します。

チャット リストを作成するには、ステップ 5 からの手順を繰り返します。チャット リストや連絡先は同じ手順により作成することができます。

フローティング アクション ボタンの追加

次に、フローティング アクション ボタンを作成していきます。

長方形のウィジェットをキャンバスにドラッグし、色を選択します。ボタンの上にアイコンを追加することで、ユーザーがボタンの機能をすぐさま把握することができます。

アイコンとウィジェットの両方を選択し、それらを [Dynamic Panel] にグループ化します。 プロパティ パレット内の [Position] オプションで [Display pin position] をチェックします。[Margin X] に対して [Fixed] を、[Margin Y] に対して [Pin to bottom] を選択します。

ユーザーが今作成したスクリーンをスワイプした際に、フローティング アクション ボタンが決まった位置に残るようになりました。

タブ ナビゲーション

今作成したスクリーンにタブを追加していきます。

タブは以下を表示するようにします。

  • チャット
  • 連絡先ステータス
  • 通話

長方形ウィジェットを使用してタブを作成します。プロパティ パレット内で、それらのウィジェットに名前を付けます。ウィジェット間に少しスペースを空けて、それぞれのウィジェットが平行に並ぶように配置します。背景を表示するために、下にある長方形ウィジェットをドラッグします。

メッセンジャー アプリの作成!まとめ!

メッセンジャー アプリの作成には一目で見てわかりやすく操作が簡単であることが重要です。

Justinmind に関する詳細は、今すぐ弊社 web サイトをご覧ください。

また、30 日間無償評価版も弊社 web サイトからダウンロードできます。

参照記事「How to design a messenger app in Justinmind」2018/10/2

シェアする

  • このエントリーをはてなブックマークに追加

フォローする