クラウド型 ワークフロー

無料で作る「問い合わせ対応システム」応用4

段組み や 帯 を利用して使いやすい処理画面を作ろう。

こんにちわ!矢作です!

 

無料で作る「問い合わせ対応システム」シリーズは、前回までで自動的に(メールソフトを使わずに)回答メールを送信することができるようになりました。

 

今回の記事では、各工程の画面をより見やすくする方法について紹介します。

作った画面の振り返り

 

前回の記事(無料で作る「問い合わせ対応システム」応用3)までで作ったアプリでは、各工程の処理画面を使いやすくする、ことは配慮されていませんでした。その結果、いくつかの不満を持たれるのではないかと思います。

現時点の「問い合わせフォーム」の画面と、「回答する」工程の処理画面を見てみましょう。


問い合わせ者氏名、問い合わせ内容などの項目を入力する欄の幅が広すぎて、違和感を感じます。特に「問い合わせ内容」については、横に長過ぎると書きづらい、読みづらい、という不満を抱く可能性が高くなりそうです。

「回答する」工程の処理画面では、データを入力する欄は少ないのですが、画像のように空きスペースが多く、全体的に縦に長い画面になってしまっています。ムダに縦のスクロールが必要になるのは避けたいですよね。

 

次節以降で、データの入力欄の幅が長すぎず、ムダなスペースを減らした、引き締まった画面を作る方法を紹介します。

 

段組みを使って見やすくしよう

 

前節に書いたようなムダなスペースが大きく生まれてしまうような画面は、データ項目を最大4つまで横に並べることができる機能(段組み)を利用することで解消できます。

 

データ項目の段組み設定については、無料で作る「問い合わせ対応システム」応用3 で作成したアプリに対して行います。Questetra BPM Suite にログインの上、無料で作る「問い合わせ対応システム」応用3  で作成したアプリを編集できる状態にしておいてください。

 

データ項目の段組み設定はカンタンです。段組みしたい(横幅を狭くしたい)データ項目を選び、右側の詳細設定画面で「段組み」の値を 1 から 2 または 4に変更するだけです。

  • 段組み=1 → 横幅いっぱいのサイズ
  • 段組み=2 → 横幅全体の半分のサイズ
  • 段組み=4 → 横幅全体の4分1のサイズ

 

それでは全てのデータ項目の「段組」の値を 2 にしてみましょう。すると、データ項目設定画面の左側は次のようになります。

このように設定することで、問い合わせフォーム画面は次のようになります。

ムダに横幅が広くなくて落ち着いたフォームになりました。

「段組」をうまく設定することで、バランスの取れた入力画面にすることができます。

 

画面に仕切りを設けて見やすくしよう

 

「回答する」工程では、問い合わせ者が入力した問い合わせ内容と、問い合わせへの対応に関する内容が同時に表示されます。現時点の画面では、これら2種類の情報の間に仕切りが無いため、すぐにどこからどこまでが問い合わせないようなのか?ということが分かりづらくなってしまっています。

 

そこで、情報の塊を区別しやすくするために、情報の塊どうしの間に「帯」を設けてみましょう。

 

「帯」を設けるには次の手順で行います。

  1. 「帯」を置きたい場所に、ガイドパネル型のデータ項目を配置する。
  2. 1で配置したデータ項目の説明に、「帯」を作成するための HTML を記述する。
  3. 「帯」を表示したい工程で、1で配置したデータ項目の編集許可設定を “表示のみ” にする。

 

上記の手順で「帯」を設けることができるのですが、2 が難しそうですよね。でも、安心してください。「帯」を作成するための HTML を自動的につくるツールが用意サれているので、そのツールを使えば全く難しくありません。

 

まずは、ガイドパネル型のデータ項目を「帯」を置きたい場所に追加しましょう。データ項目名は、処理画面ではどこにも表示されませんので、なんでもOKです。

 

 

次に「帯」を作成するための HTML をそれぞれのガイドパネル型データ項目の “説明” にセットします。HTML を作るには、UI デコレータを使用します。

 

今回は「問い合わせ内容」「対応状況」という2つの帯を作ります。まずは、「問い合わせ内容」から作ります。UI デコレータをクリックして、「タイトル」に “問い合わせ内容” と入力します。次に注釈に書かれている文字は全て削除します。

 

コード、という部分に HTML が表示されていますが、これをコピーします。そして、プロセスモデラーに戻り、ガイドパネル型の “説明” にコピーしたHTMLを貼り付けます(ペーストします)。

 

 

もうひとつのガイドパネルにセットするHTMLを作るには、「問い合わせ内容」とセットしたところを、「対応状況」とすればOKです。

 

追加したガイドパネル型のデータ項目のデータ編集許可設定を、「回答する」工程と「助言/調査する」で “表示のみ” にしておけば(デフォルトでなっている)、帯が表示されます。

 

◇◇

各工程の処理画面を使いやすくする方法を紹介しました。段組みとガイドパネル型を利用することで、かなり見やすく使いやすくなったことをご理解いただけかと思います。

 

今回はここまで!


参考

 

YAHAGI Hajime の紹介

幸せを生み出すITを追求するクエステトラの一味です。 国産の BPM ソフト Questetra BPM Suite で日本・世界を幸せにしたい。
YAHAGI Hajime の投稿をすべて表示

あわせて読みたい
55.カイゼン Tips の前の記事 無料で作る「問い合わせ対応システム」応用3
55.カイゼン Tips の次の記事 無料で作る「問い合わせ対応システム」応用5
YAHAGI Hajime の他の記事 仕事がはかどる 3 つの HTML タグ

アーカイブ

 RSS