ノーコードツールでアプリを作るときは”見た目”が大事というお話
@pocket（アットポケット）のカスタマーサクセスをしている烏谷です。
カスタマーサクセスという仕事柄、お客様の状況を見ることが多いのですが、これは業務アプリ作成のヒントとして書いた方がいいかなと思ったので、今回は「ノーコードツールで作る際の見せ方」について記載します。
お話しの前提
「@pocket（アットポケット）」は、ノーコード（ノンプログラミング）でさまざまな業務管理アプリが作れるツールです。
「色々できて便利だ」というザックリとした印象が多いのですが、肝心の「使いやすさ」にはあまり注目されていない気がしています。
今回は「パッと見でわかる」「色分けで見やすい」などの”見た目”について書きます。
使いやすい”見た目”ってなんだろう
＠pocketは、特別な開発スキルが無くても超便利な業務システムを作れちゃいます。時にはSFA、時には車両管理…などなど、自社に合った活用幅で使用できます。
「やりたいことできるし機能的にはOK！」「これで半自動化できる！」なんてありがたい言葉をいただく反面、こんな困ったことが…。
「100項目の入力欄、すべて埋めてください」「一覧画面は50項目。頑張って探してください」
･･･無理ですよね。
結局は人間が使うものです。
できれば「誰が見てもわかる・使える」状態が理想ですよね。重要項目は赤色、必須は青色、みたいにパッと見でわかるやつです。
とりあえず原型
ざざっと顧客管理用のアプリを作ってみました。下記の画像は「顧客情報を入力する画面（詳細画面）」だと思ってください。
白黒の文字と枠だけで･･･どうでしょう、みにくいですよね。
郵便番号が顧客名の横にあるのもともかく、並びもガタガタだし…キレイでない。
このアプリ使ってやるぞ！という現場のモチベーションにも繋がらない。
あと、必須ってどれ？何が重要？などというメリハリも無い。
「ミーティングで顧客名は必須って聞いたけど、忙しいときは忘れそうだ」など、入力者や管理者のストレスも発生しがちです。
ちょっと色付けて揃えてみた
まず色を付けて、枠の長さを変えて、端を揃えて。
項目はさっきのものと変わっていませんが、比較したらどうでしょう。
見やすいですよね！
入力が必須の項目も、一目で見てわかるように「必須」とマークされてます。@pocketの機能ですが、あと必須項目にしておけば、入力漏れした場合も登録時に「必須です！」と教えてもらえます。入力漏れはありませんよね。
一覧画面も整えてみる。まずこれが原型。
では、詳細画面だけでなく、一覧画面も見てみましょう。
どうでしょう。
うーん…。画面は左右にはみでていて、スクロールバー出ちゃってるし…。
Excelみたいで悪くないけど、1件ずつ目で追わないと探せない。
問合せ対応や進捗確認時に「早く探さなくては！」と思ったら、ちょっと面倒なやつですよね。
一覧画面もちょっと手を加える
表示や検索性を少し改善してみます。
「顧客ランク」に色付けて。Excelみたいにフィルタ検索付けて。
こんな画面に。
さっきの原型と見比べると、見やすいですよね！
「顧客ランク」に色がついていてパッと見で見やすい。フィルタ検索もできてこれまた便利。そんなに難しい設定ではないので、慣れれば20秒くらいで修正できます。
おわりに
日々使うものは、わかりやすさ、使いやすさが重要で、やっぱり「見た目」は大事かなと思います。
でないと、せっかく作った業務アプリを、現場が使いたくない･･･使わない･･･なんてことが。
･･･もったいない。
今回はすごく簡単な内容でしたが「見た目」を意識して、もったいないを無くしましょう！というお話しでした。ノーコードツールで業務効率化をご検討の方や、ユーザ様のご参考になれば幸いです。