インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

Web開発で欠かせないモックアップをローコードで手早く作成する(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

上流工程でのモックアップ作成」はWeb開発において欠かせない重要なステップです。しかし、多くの場合、モックアップ作成には時間がかかります。そこで登場するのが、モックアップよりもさらに高度な「実際に動作するプロトタイプ」までを手早く作成することができる「ローコードツール App Builder」です。

インフラジスティックス製の「App Builder」はWebアプリケーションのUIデザインをドラッグ&ドロップで作成することができるローコードツールです。 今回の記事では、App Builder を使って「Webアプリケーションのモックアップ」を作成して、完成したモックアップを「プレビュー(URL共有)」するところまでを解説します。

本日の流れですが、

  • 画面の「デザインレイアウト」を決めます。
  • UI部品を「ドラッグ&ドロップ」で配置します。
  • 完成したモックアップを「URLで共有」します。

また、App Builder は「モックアップ」として作成したUIデザインから、1ピクセルのズレもなく「コード(HTML , CSS , Angular , Blazor , WebComponents)」を自動生成することができる「WYSIWYGエディタ」になっており、UIデザインからプログラミングの業務フローを効率化できるローコードツールになっています。

それでは、早速見て行きましょう。

https://jp.infragistics.com/products/appbuilder

前提条件について

App Builder を実際に操作したい場合は、無料トライアルへご参加ください。

1. 画面の「デザインレイアウト」を決める

まず「デザインレイアウト」を決めるために、App Builder の「新しいアプリ」を作成してみましょう。

画面の「デザインレイアウト」を決める

App Builder を起動すると、あなたのプロジェクト一覧が表示されます。プロジェクト一覧の「新しいアプリ」ボタンを押下してください。

プロジェクト一覧の「新しいアプリ」ボタンを押下する

つぎに、今回はデザインレイアウトに「Header + nav + content(上ヘッダー+左ナビ+右コンテンツ)」のテンプレートを選択してみましょう。ヘッダーとナビゲーションが自動作成されます。複数のビューを管理するようなWebアプリケーションでよく見るデザインレイアウトだと思います。

「Header + nav + content(上ヘッダー+左ナビ+右コンテンツ)」を選択する

テンプレートを選択するだけで、Webアプリケーションの「デザインレイアウト」を作成することができました。ここから更にUI部品をドラッグ&ドロップ操作で配置していきましょう。

2. UI部品を「ドラッグ&ドロップ」で配置する

Header + nav + content(上ヘッダー+左ナビ+右コンテンツ)」のテンプレートでは、「3つのビュー」がサンプルとして自動作成されます。このビューに対してUI部品をドラッグ&ドロップで配置していきましょう。

  • ビュー1に「グリッド」を配置する
  • ビュー2に「カテゴリーチャート(棒グラフ)」を配置する
  • ビュー3に「ファイナンシャルチャート(株価グラフ)」を配置する

まず、「ビュー1(View 1)」に対して「グリッド」をドラッグ&ドロップで配置します。

ビューにグリッドをドラッグ&ドロップで配置する

つぎに、「ビュー2(View 2)」に対して「カテゴリーチャート(棒グラフ)」をドラッグ&ドロップで配置します。

ビューにカテゴリーチャート(棒グラフ)をドラッグ&ドロップで配置する

最後に、「ビュー3(View 3)」に対して「ファイナンシャルチャート(株価グラフ)」をドラッグ&ドロップで配置します。

ビューにファイナンシャルチャート(株価グラフ)をドラッグ&ドロップで配置する

このように、App Builder を活用することで、Webアプリケーションのモックアップを、ドラッグ&ドロップの操作のみでサクサク作ることができました。それでは完成したモックアップのプレビューを見る手順へ進みましょう。

3. 完成したモックアップのプレビューを開始する

完成したモックアップをエンドユーザーへ見ていただきたい場合に、App Builder は画面右上の「共有ボタン」を押下するだけで、クラウド保存されたプレビューを開始することができます。

共有ボタンを押下する

プレビュー専用URLを取得する

実際にモックアップのプレビューを見てみよう

プレビュー

下記のプレビューは「実際に作成したモックアップのプレビュー(共有URL)」ですのでご覧ください。

プレビューを見る

https://appbuilder.indigo.design/app/odbtsq3nzc34/preview
画像をクリックするとプレビューへジャンプします

もっと知りたい場合

今回のようにプレビューでURLを共有した場合、エンドユーザー側ではデザインを編集をすることはできず、プレビューの閲覧のみが許されています。この機能についてもっと知りたい場合は下記をご参照ください。

jp.infragistics.com

「App Builder」で「モックアップ」を手早くつくろう!

上流工程でのモックアップ作成」のステップは、エンドユーザーとのコミュニケーションにおいて非常に重要です。顧客からのフィードバックを速くし、開発チーム内でのコミュニケーションを円滑にします。

ぜひ画面開発に App Builder をご活用ください!この記事が画面開発の Tips となれば幸いです。App Builder のすべての機能は無料でお試しいただけます。App Builder 無料トライアルにアクセスして、最新バージョンを入手してください。

  • 「こんなことは実現できるの?」
  • 「どうやって実装すれば良いの?」

といった開発上の疑問にソリューションコンサルタントが直接お答えします。

ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。

https://jp.infragistics.com/products/appbuilder