ローコードでデザイン思考を取り入れた楽しい開発

この記事は[FileMaker Advent Calendar 2020](https://qiita.com/advent-calendar/2020/filemaker)に参加しています🎅
そしてこの記事は、ポエムです:snowman:

#デザイン思考って？

何かプロダクトを生み出すときに
「ユーザーは本当の問題（現状何が悪いのか）がわからない」「何が欲しいのかわからない」
という前提で、潜在的な問題やニーズから出発し考える方法をデザイン思考と言います。
問題解決の思考法のひとつですね。

![デザイン思考.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237172/75218b90-48cd-b0a6-d3b5-c9f2f9b86ecd.png)

システムやアプリは、ユーザーが手にとってみるまで本当に欲しかったものがわからないものの代表とも言えるのではないでしょうか？

システムで解決したい問題も、求めるUIUXも、言語化できるのは全体のほんの一部で、潜在的に求めているものはシステムを使っていくうちに少しずつ見えてくるものなのではないかと思います。

#プロトタイプをさっと作って、触ってもらう
そこで、UIUXを提供できるプロトタイプをまず作って、実際にユーザーに触ってもらえると良いです。
UIまで作ってしまって一見その時間無駄そうに思えますが、使ってみて初めて　”こうして欲しい”　”こういう動きを求めていた”　ということがわかる場合には、急がば回れという感じです。

▼とても共感した記事
[UX先行開発のすすめ](https://qiita.com/UndyingSugimoto/items/b6ad43e84e625feec3e3)

#FileMakerはそういうの向いてると思う
FileMakerはUI,UXをGUIで作れるので、そのような開発手法と相性が良いです◎
UIを自由に作れるのはとても楽しいです。PowerPointでスライドを作るように、ボタンやフィールドを設定することができます。
いくつかUIを作って、動かしてもらうと良いです。

#業務システムこそUIUXデザインに気を使う

業務システムはデータ中心に作られたものが多いかと思いますが、業務システムこそUIUXデザインに気を使ってみると、データがどんどんたまります。
特に、アナログな業界ではちょっとした使い心地の改善でデータの書き込みが増えるので楽しいです。
![スクリーンショット 2020-12-20 15.00.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237172/f04b0914-1a82-b2f7-8ff8-c4b799cc6d2a.png)

#UIUXに気を使うことで、ユーザーの時間のロスを防げる
▼FileMakerで開発したデイサービス業務支援システムKotobukiです。
https://youtu.be/GPVBzDCNan4

[デイサービスで自社システムを作って楽をしています](https://qiita.com/gokkozemisei/items/79dd2e9a34fa06c67b32)

デイサービスで働く介護スタッフの多くが”自分はアナログ人間だから…”とipadを使うことに不安がありました。
70代の方やガラケーユーザーの方もいて、ユーザー体験がシステム側の人間と大きく違うということもあります。
非効率であっても、理解しやすい紙での運用を支持する方も多いです。
そういう方々が気持ちよく操作できるような設計はヒアリングをするだけではなかなか実現できません。

例えば、このように同じ色のボタンが隣に並んでいると、”印刷依頼”のボタンと”レクレーション”のボタンを押し間違えてしまう人が多いとわかりました。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3233373137322f35333131653139362d376533642d363161662d323136302d3237386365333133306137302e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237172/8492baf7-f531-1ae5-1f0c-78053c1c3897.png)

”印刷依頼”のボタンを押すと、Slackで事務所に連絡帳を印刷するよう投稿され、”レクレーション”のボタンを押すと行ったレクレーションを記録する画面に移動します。そのことは皆さん認識されているようです。
しかし、業務中に感覚的に何気なくボタンを押してしまうようで、そのつもりがないのに、”印刷依頼”が発生していました。

そのような経験から
”業務中にボタンの文字をあんまり読んでいないのでは？”
と仮説を立てます。

自分自身を振り返ってみても、座っているときはテキストを読むモードになっているけど、立ち上がって身体を動かしているときはテキストよりも”色”や”形”の情報の認識の方が優位になっている気がします。

その仮説を元に、同じ色のボタンを横に並べることをやめました。
間違ってボタンが押されることもなくなったので、時間のロスが減りました。

#ユーザー体験は育っていくので大丈夫！

こんな感じでちょっとずつシステムと仲良くなってもらうと、導入時には説明が必要だっただろうUIUXもすんなり受け入れてもらえるようになりました。
ひとつのシステムの中で統一性があれば、”このボタン押したら良さそう”と思ってもらえます。

#FileMakerの標準機能にちょっと小技を散りばめました✨
▼これからFileMakerいじってみたい方に、ぜひこちらをダウンロードして欲しいです。
[Kotobuki_LITE]

(https://note.com/allegro_penguin/n/n05fb152d0f6f)
ちょっとした小技が散りばめてあります！サンプルのひとつとして、どうぞ💁‍♀️

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">kotobuki_LITEには実はこうした裏技？（私が好きな使い方）を散りばめてあるので、ぜひ見つけてみて欲しいです🐧<br>例えば、”2020年　８月”と表示されている部分は、擬似フィールドで実際ボタンバーだったり、そこに透明のポップオーバーを重ねていたりします😀<br>年月は連続な値になるようにしています！ <a href="https://t.co/e5qVud57K3">https://t.co/e5qVud57K3</a> <a href="https://t.co/u4nNcwNkHD">pic.twitter.com/u4nNcwNkHD</a></p>&mdash; アレグロペンギン 🌓ぺんちゃん (@zemiseipen) <a href="https://twitter.com/zemiseipen/status/1296793895817240577?ref_src=twsrc%5Etfw">August 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>