【1月ユーザー会】株式会社エクソル様による登壇レポート記事
目次
ユーザー会での事例登壇の様子をレポート！
この記事はユーザー会での株式会社エクソル 田中さんの事例登壇の様子をお届けするレポート記事です。
今回は「社外向けのシステムで使える！相手が便利になるトヨクモ製品プチ工夫」でご登壇いただきました！
トヨクモ製品のプチ工夫について
株式会社エクソルは、太陽光発電システムの開発・設計・施工を行う2001年創業の太陽光の総合企業です。設計・調達・建設を一貫して行うEPC事業や、発電所の運用・保守を担うO&M事業も展開しています。
現在契約中のトヨクモ製品は、FormBridge、kViewer、PrintCreatorの3製品です。
私自身はエクソルでの情シス4年目になりまして、kintone hive Tokyo 2023やCybozu Daysなど、定期的にkintone関連で登壇しています。Xやnoteでの発信もしているので、気になる方はフォローをお願いします。
今回、プチ工夫がテーマということですが、前提として現在契約中のトヨクモ製品は「誰かに入力してもらったり、見てもらったりする、相手ありきのサービス」だなと思いました。
ここから、トヨクモ製品のプチ工夫は、「相手が便利になりそうな、よい方法や手段」だと解釈して考えてきました。
本日は、そんなプチ工夫をご紹介するために、以下2つの事例をご紹介します。
- とあるWeb申請フォーム
- kintone Café Tokyoの受付環境
とあるWeb申請フォームは、トヨクモ製品やkintoneの操作経験なしの社外の方が使うフォームです。
kintone Café Tokyoの受付環境についても、20人〜40人程度が来場して、社外の方が使うことを想定したものとなっています。
それぞれにおける「相手が便利になりそうな、よい方法や手段」としてのプチ工夫を解説していくので、ぜひ参考にしてください。
事例1.社外向けWeb申請フォーム
1つ目の事例は、社外向けのWeb申請フォームです。
こちらは不特定多数の社外の方が触ることを想定したフォームになっていて、FormBridge、kViewer、PrintCreatorの3製品を連携して構築しています。
システムの流れとしては、まず取引先にFormBridgeのフォームを開いてもらいます。こちらのフォームには、kViewerルックアップを設定しています。
フォームの入力が完了すると、PrintCreatorから直接書類を出力できます。
これまでは取引先が当社の営業に依頼をしてExcelなどで書類を作成していたのですが、このシステムでは社員の作業が不要になったので、Web化の成功事例となっています。
<h3>分かりやすさと使いやすさを追求</h3>
こちらのWeb申請フォームにおけるプチ工夫ポイントは大きく3つです。
まず、1つ目。初見の方でも、フォームを開いてからどこを触ればいいのか分かるよう操作説明は端折らずに、すべて1つずつ記載しています。
次に、2つ目。数字やドロップダウンなどの単なる入力以外の部分は、なるべく図で示すことを意識しています。
今度はフォームの下半分の解説です。
3つ目の工夫として、CSSでフォームの行間をFormBridgeのデフォルトよりも狭くしています。
全部で40行程度あるため、通常の行間だと回答ボタンに行き着くまでのスクロール回数が増えて指に負担をかけてしまうと考え、実装しました。
なお、プチ工夫の域を出ると思ったので除いていますが、JavaScriptでCSVファイルをドラッグ&ドロップして、一括でまとめて入力できる機能を実装しています。
事例2.kintone Café Tokyoの受付環境
2つ目の事例は、kintone Café Tokyoの受付環境についてです。社外の方が使うことを想定しているのは1つ目の事例と同じですが、流れが異なります。
まずは、参加者に会場に設置しているQRコードをスマートフォンで読み取っていただき、kViewerで作成した参加者一覧のカードビューに入っていただきます。
ビューの一覧から、自分が申し込みしたアカウント（レコード）を探してもらい、そこから受付フォームに遷移していただきます。
受付フォームの内容に間違いがないことを確認後、最後にPrintCreatorを経由して受付画面を出力してもらうというのが一連の流れです。
受付係が、受付画面に表示されているQRコードを読み込むと、参加ステータスに応じて「懇親会費用の受け取り処理」などが出てくるので、リアルでのやり取り後、受付完了となります。
kViewerのプチ工夫
今回、kintone Caféの受付環境を構築するにあたり、さまざまなプチ工夫を盛り込みました。
最初に、kViewerのビューで工夫したポイントを4つご紹介します。
まずは1つ目。kintone Café Tokyoでは参加者が50人近くになるため、kViewerの表示数をデフォルトの20から50にしています。
2つ目。すべての余白を極力狭くして、カード1枚あたりの縦の長さを狭くすることで、ビュー全体の縦の長さを短くしています。こちらは基本機能で設定可能です。
なお、余白を狭くするのに加えて、文字列を結合することで、横に長く縦に短いカードビューを作り出しています。こうすることでリストビューに近い形での表示を実現できます。
3つ目。出席済（受付済）のレコードは、JavaScriptでグレーアウトするようにしています。
受付側は誰が来ていないのか簡単に把握できますし、あとから来た人も自分のレコードを見つけやすくなるので便利です。
最後に、4つ目。参加者に自身のレコードをタッチして、レコード詳細画面に入ってもらうと、受付フォームへの遷移ボタンが表示されますが、こちらの文言を変えています。
初期状態では「編集」という文言になっていますが、基本機能で自由に変更できるので、より導線がスムーズになるよう「自分のアカウントです」と書き換えています。
作業者目線で、「編集」よりも「自分のアカウントです」の方が、実際の作業に近く分かりやすいのではないかと考え、このように設定しました。
kintoneの情報を外部から閲覧・編集｜kViewerとFormBridgeの連携方法
FormBridgeのプチ工夫
FormBridgeでは、主に2つのプチ工夫を入れています。
1つ目。参加者にQRコードを読み込んでもらって受付する関係上、スマートフォンの1画面に収まるように、全体の情報量を極限まで減らしています。
2つ目。FormBridgeの「回答」ボタン、およびPrintCreator連携で表示される「出力」ボタンの文言を変えています。
受付なのに「回答」や「出力」と表示されるのは不自然だと思ったため、「記載内容問題ありません」や「受付票出力」など、より自然な文言になるようカスタマイズしています。
PrintCreatorのプチ工夫
最後に、PrintCreatorのプチ工夫を解説します。
ポイントとして、各情報ごとに文字の大きさを調整しています。
kintone Café Tokyoにおいては、一番見たい情報が「懇親会の参加or不参加」だったため、特に大きめに表示しています。
懇親会に参加するか否かで受付のオペレーションが変わるため、こうすることで現場がよりスムーズに業務に取り掛かれると思い設定しました。
なお、受付票のQRコードを読み込むと、読み込んだユーザーのレコードのみが表示されているkintoneの一覧画面に飛ぶ設定をしています。
こちらのコードやカスタマイズ方法について、詳しくは私のnoteで解説しているので、よければ参考にしてください。
まとめ
最後にまとめです。今回ご紹介した事例のように、相手目線での操作感はしっかり意識して開発するようにしています。
相手目線で考えることで、全体的に見やすくなったり、使いやすくなったりとプチ工夫できるポイントが多くなると感じました。
これからも積極的にプチ工夫していけるよう、保守性が下がらない範囲で意識しつつ、こういった登壇などの場でアウトプットして、どんどん広めていきたいと思います。
本日はありがとうございました。
ご登壇ありがとうございました！
田中さん、今回はご登壇いただきましてありがとうございました！
フォームやビューを作る際に、利用者目線を忘れないというのは本当に大事なことですよね。
ぜひ、今日から真似できる工夫がたくさんあるのでぜひエッセンスをフォーム/ビュー/書類に組み込んでみてください！
トヨクモ製品は何度でも使える30日間の無料お試しを実施しております。
気になる方は、ぜひ以下のフォームよりお申し込みください。
https://www.kintoneapp.com/trial
