アプリによるコミュニケーションが活発になるなか、メッセンジャー アプリの利用者数はその中でも急上昇してきています。HubSpot によると 50 億以上の人がメッセンジャー アプリを利用しています。今やほとんどの人にとって欠かせないアプリになっているのではないでしょうか。ビジネスから私的な場まで幅広くメッセンジャーはコミュニケーション ツールとして利用されています。
今話題のプロトタイプ作成ツール Justinmind を利用して実際にメッセンジャー アプリを作成してみました。
今回は、Justinmind のダウンロード、テンプレート作成、ログインフォーム作成を行っていきます。次回のブログでは、チャット画面作成、連絡先作成、リスト作成を行っていきたいと思います。
ステップ 1: Justinmind のダウンロード
Junstinmind をお持ちでない方は、30日間無償の評価版をご利用できます。
弊社 Web サイトから Justinmind の評価版をダウンロードしてみてください。
ダウンロードが完了すると、Justinmind を立ち上げ、新しいプロトタイプ作成を行います。
iOS、Android、またはお好みのデバイス サイズを選択できます。
ステップ 2: テンプレートの作成
Justinmind は、テンプレート機能を提供することで繰り返し作業を削減し、作業時間を大幅に短縮することができます。
テンプレートを使えば、Justinmind のスクリーン上の内容を繰り返し何度も使用することができます。設定したテンプレートは、自動で作成される全ページに表示されます。テンプレートは、Web サイトやアプリ上で何度も使用されるメニュー ナビゲーションのような要素の作成にとても便利な機能です。
テンプレートに必要なもの:
- Bottom navigation
- Slide menu
テンプレートの作成を開始するには、テンプレート パレットにある [+] ボタンをクリックし、テンプレート名を設定します。テンプレート内で、固定されたボタン ナビゲーションを作成します。
[Dynamic Panel] をスクリーンの下へドラッグします。プロパティのパレット内で、[Display pin position options] をチェックします。これで、[Dynamic Panel] をピン留めすることができるようになります。[For Margin X] に対して [Pin to center] を、[For Margin Y] に対して [Pin to bottom] を選択します。
[Dynamic Panel] の中で、それぞれのスクリーンに対してウィジェット パレットからウィジェットを追加します。これらのアイコンは、ナビゲーションのアイコンとして使用します。
今回は、以下のアイコンを作成します:
- チャット
- お気に入り
- 通知
- プロファイル
まずは、スライド メニューを作成していきます。[Dynamic Panel] を異なるキャンバスにドラッグします。ここで、必ずパネルがモバイルのインターフェイスの左外側に配置されていることを確認してください。これで、パネルがコマンドにより表示画面にスライドされるようになります。このあとはメニュー内容をパネルに追加していきます。
メニュー アイコン ウィジェットをウィジェット パネルからドラッグし、モバイル インターフェイス上に配置します。このアイコンにイベントを追加して、アイコンをクリックするとメニューが表示されるイベントを作成します。さらに、メニュー アイコンをクリックし、[On Toggle] と [Move] イベントを追加します。[Easing] ドロップダウン メニューからお好みの効果を選択し [OK] をクリックします。
ステップ 3: ログイン フォームの作成
新しいスクリーンをスクリーン パレットから作成します。ダイアログのドロップダウン からテンプレートを選択し、[OK] をクリックします。
ユーザー名とパスワード用に 2 つのテキスト フィールド ウィジェットをスクリーン上にドラッグします。ボタン ウィジェットをログイン用にスクリーン上に追加します。
プロパティ フィールドからインプット フィールドに カスタマイズされた [placeholder] をコピーし追加できます。パスワード用の UI 要素をクリックし、[text] から [パスワード] に変更します。これらの変更は、プロパティの [Type] オプションから設定することができます。
この続きは、次回ブログで紹介していきます。
- チャット画面作成
- 連絡先作成
- リスト作成
- メッセンジャーアプリの完成！
Justinmind に関する詳細は、今すぐ弊社 web サイトをご覧ください。
また、30 日間無償評価版も弊社 web サイトからダウンロードできます。
参照記事「How to design a messenger app in Justinmind」2018/10/2
