@pocket BLOG ~業務・営業の強化ヒント集~

@pocketで作る業務アプリの作成ポイント「見た目を整えて使いやすくする」

@pocketは、開発スキルが無くても便利に業務システムを作れるノーコードツールです。利用用途もSFAや車両管理など、営業から総務まで様々な範囲でご利用いただけます。

「やりたいことができるし、機能的にはOK!」というようにありがたい言葉をいただく反面、当初の利用目的以上に活用が広がらないことも多くあります。

今回は@pocketのカスタマーサクセス担当より「@pocketを使ってもらうための工夫」として「見た目も重要」というポイントをお伝えします。

業務アプリ作成時によくある「困ったこと」

せっかく作ったものを現場があまり使いたがらない。最初に作ったアプリだけ使い、あまり利用範囲・対象が広がらない。

そのような声を聞くことがあります。

@pocketは2,500円/月(5ID含む)で、50アプリまでを作成・運用できるツールです(※スタンダードプランの場合)。

2,3個のアプリを作って運用する・・・。
もちろんそれで満足いただくことも多いとは思いますが、同じ金額で50アプリまで作成できるので、カスタマーサクセス担当としては、もっともっと使っていただきたいと思っています。

では現場が使うための工夫とは何でしょうか?今回は使いやすくするための「見た目」に絞って記載していきます。

業務アプリは見た目も重要

@pocketではデータを入力・表示する画面を簡単に作れます。

ドラッグ&ドロップで項目を増やして並べて、と自由に増やしていくことができます。その気軽さゆえに、どんどん作ってなんとなく使う、という方も多くいます。

たとえば下記の画面は顧客管理アプリを作成してみた例ですが、この顧客管理を入力する画面も数分あれば作成できます。

@pocketの実際の画面(顧客登録画面)原型

白黒の文字と枠だけで見にくい・・・と感じますよね。

自分が作ったアプリを自分で使う、という場合は気にならないかもしれませんが、やはり使用者から見ると見にくく感じると、どうしても使いたくなくなるものです。

この画面に、ほんの少し工夫することでさらにわかりやすくなります。次に例を記載していきます。

作成した画面の修正ポイント:「色づけ」など整形してみる

先ほどの画面に下記の4点、手を加えてみます。

  • 色を付けてみる
  • 幅をそろえてみる
  • 並び順をかえてみる
  • 必須項目を設定してみる
@pocketの実際の画面(顧客登録画面)改善版

いかがでしょうか。

ほんの少し整形しただけですが、最初の「白っぽい」画面より、見やすく感じるのではないでしょうか。必須項目の設定もしているので、登録漏れも発生しません。

見やすくて、入力漏れも防げる。最初の画面よりはかなり使いやすくなったのではないかと思います。

一覧画面も整形してみます(整形前)

先ほどは入力画面ですが、一覧画面も同様です。

一覧画面は「探しやすく」作る必要がありますが、ざざっと作れば下記のような画面にになります。

@pocketの実際の画面(顧客一覧画面)原型

この一覧画面、表計算ソフトにあるような感じで悪くはないのですが、1点大きな問題として「列が多すぎて、左右のスクロールバーが出ている」という問題があります。

また全体的に白く探しにくいと感じることもあるでしょう。少し修正をしてみます。

一覧画面は探しやすくするのがポイント:「色づけ」など整形

ここでは3つのポイントで修正します。

  • 一覧画面に不要な項目は非表示にする
  • 重要な項目を色づけする
  • 検索できるようにする
@pocketの実際の画面(顧客一エラン画面)改善版

見ていただきたいポイントは2点です。

1つは、顧客ランクの項目に色がついたこと。A、B、Cという文字を見なくてもパッと見てランクがわかります。

またそれぞれの項目に「フィルター検索」をつけました。画像の住所のところに検索枠が出ているところです。

見やすく・探しやすい。そのような一覧画面に変わったのでは無いでしょうか。

さいごに

ノーコードツールでは、気軽に業務アプリを作ることができるツールです。反面みんなで使っていくには、見た目もそこそこ重要だな、ということを感じていただければと思います。

@pocketは安価で様々な業務アプリが作成出来るツールです。無料トライアルも行っていますので、実際の画面でご確認ください。

@pocketを無料で使ってみる(30日間無料トライアル)
とりあえず@pocketの資料を無料で見てみる