高齢者や障がい者もアクセスしやすいサイトを--kintoneをフル活用したメールフォーム作成のアイデア

kintoneの不満点を解消したい

櫻井氏（以下、櫻井）：では、続いての選手の挑戦を見ていきたいと思うのですが、久米選手はどんな選手でしょうか？

伊佐政隆氏（以下、伊佐）：久米選手は、奥様が綺麗！

櫻井：綺麗。その一言。

伊佐：とにかくその一言。

櫻井：では、愛の力、見せていただきましょう。久米選手の演技です。オンユアマーク、セット。

久米純矢（以下、久米）：はい、今、妻が綺麗とご紹介をいただきました、久米と申します。よろしくお願いいたします。ありがとうございます。

今日は壁を超えるということで、私はkintoneでビジュアル操作をしてみるとどうなるかということを、お話しさせていただきたいと思っております。よろしくお願いいたします。

まずは軽く自己紹介をします。久米と申します。今日は福岡ソフトバンクホークスの服を着ていますが、福岡からやってまいりました。中小企業さんのIT化のご支援などを中心にしていて、kintoneがベストプラクティスで、業務改善できると思ってご提案をしております。

それでは先に進めさせていただきたいと思います。よろしくお願いいたします。

まず私がkintoneの操作において、ちょっと不満だなと思っているところです。またお客さまからもけっこう言われることが多いので、動画に少しまとめたものを見ていただければと思います。

（スライドを指して）詳細を開いてちょっと編集したいなと思ったときに、詳細を押して、それから編集のボタンを押して、なにか修正をして、保存のボタンを押したらまた詳細画面にいって、そして一覧にいったらやっと全体が見える、みたいなことがあると思います。

忙しい業務でみなさん過ごされていると思いますが、ちょっとしたことをやるだけでも、今のでも4か5ステップぐらいかかりました。「けっこうこれって手間がかかって面倒くさいんだよね」とよく言われます。

全体が見えて、ドラッグ＆ドロップで操作

久米：もちろんここのレコードの編集を押してもできますが、全部の項目がここに出ているわけではありませんし、横にビョーっと長くなったりするので、やはり使いづらいことはよくあると思います。

すべての場合ではありませんが、ちょっと私の場合で考えてみたパターンもありますので、このあと進めていきたいと思います。

私がkintone操作において不満に思っていること、「ちょっと更新したいだけなのに、手間が多くてバリしゃーしぃねー」となります。あ、「しゃーしぃ」は福岡県の博多の言葉で、面倒くさいという意味です。

続いて、編集して一覧に戻るとよく再検索が行われます。なので本当はこの辺にあったやつがもう1回上にいって「うわあ、残念」みたいな気持ちにもよくなります。それから全体がよく見えることと、登録更新が同時にできないかな、と思うこともあります。それからもっと直感的に、単純に操作できないかなともよく思います。

ぜひこういったところに共感いただけた方は、今日の私のセッションがお役に立つのではないかなと思っております。

じゃあどうするんだ。「全体が見えて、ドラッグ＆ドロップで操作できたらとてもいいのに」と、私は気づきました。

ということで、実演をさっそくしてみたいと思います。実際、多くのところで私もいろいろなお話を受けて、やはり面倒くさいと。なにかもっと簡単にできないかなと用意したのが、こういったものです。

こちらが、みなさんがよく見るような画面ではないかと思います。サイズが上手くあっていないかもしれませんが、（スライドを指して）これがいわゆる一般的な一覧の画面になっているかと思います。

ですが、ここのところをビジュアル的にちょっと操作をしてみると、なにかうまく出てないですね。この一覧の画面の状態を、JavaScriptのカスタマイズを入れてこういったかたちにしてみました。

これはいったいどんな状態を狙っているかといいますと、いわゆる棚とかそういったところに、データのレコードをこういった状態でオブジェクトとしてやっています。

コワーキングスペースやマンションでの管理も可能

久米：実はこれはjQueryで作ったJavaScriptのオブジェクトなので、こういったことができます。

例えば、（スライドを指して）今これがD‐2にあるので、それをB‐4に動かしてよと。これをその状態で動かすと、ダブルクリックで保存されます。つまり一覧で見たときに、この配置を指定します。みなさんもお仕事でいろんな方に指示を出すときに、「A‐1のところにあるものをどこどこに動かしてね」ってよく指示されることがあると思います。

kintone上でこれをやろうと思ったら、けっこう面倒くさいことが起こります。なのでこういったときに、ドラッグ＆ドロップだけで動いて、保存できてレコードがちゃんと更新される。こういったこともカスタマイズしてできると、すごく役に立つのではないかなということが、今回私からのご提案です。

実際にこれがどういったところで役に立つかという場面も、少しご紹介しておきましょう。

まさに今紹介したような、棚もしくは倉庫などに「どこどこにあるよ」と言っていただく。それとあとは、コワーキングスペースなどフリーアドレスのオフィスに対して、朝着いたときに「ここ僕が席取っていますよ」とドラッグして取ることもできます。

それから作業タスクの優先順位をドラッグ＆ドロップで変えられる。また、配達ロッカー、マンションなどの中にもあります。これらも上手く管理することができます。

Have a Nice kintone Life！　ということで、よろしくお願いいたします。ありがとうございました。

フォームを全てkintone上で設定

櫻井：では、続いて登場するたにぐち選手は、どういう選手でしょうか？

伊佐：たにぐち選手はいつも冷静で、クレバーな印象があります。

櫻井：それでは6分間どんな演技を見せてくれるのか。まいりましょう。たにぐち選手の演技です。オンユアマーク、セット。

たにぐちまこと氏（以下、たにぐち）：みなさんよろしくお願いいたします。株式会社エイチツーオー・スペースのたにぐちと申します。

私はWebのクリエイターでして、kintoneでそのWebの壁を越えるというチャレンジをしています。今回お作りしたのはWebのメールフォームです。ちょっと見ていただきましょう。

お名前やメールアドレスを入力する欄がありまして、そこに必要事項を記入していきます。確認をするボタンを押したときに、不備があれば「メールアドレスをご記入ください」とエラーメッセージが出て、きちんと入力がすべて済めば、確認画面を経て送信ボタンをクリックすることで、そのデータがkintoneに入っていくということです。

実際にkintoneに入っていったデータが、こういったかたちになるというものです。

正直よくあるフォームでして、お問い合わせもデータベース化だったり、予約の管理に実際使われている方も多いかなと思うんですけれども、今回私が作ったソフトはポイントが3点あります。

よくあるGoogleフォームもそうなのですが、ドメインがGoogleのものなので、申込みボタンから先がGoogleになってしまう。もしくは他社のサービスになってしまうことがあるのですが、今回ワードプレスのプラグインの形式で作っていますので、完了まですべて御社のドメインで運用していただけます。

そしてプラグインなどの場合ですと、1個だけフォームを連携できるといったものはあるのですが、今回お作りしたものは無制限で管理していただけます。

そして3点目です。kintoneですべて管理という部分なのですが、こちらはこれをちょっと見ていただきましょう。

よくあるプラグインは、ワードプレス側でさまざまな設定を行って、kintone側でそのテーブルを設計してくっつけるというかたちをよくとります。しかしワードプレスに慣れていない方もけっこういらっしゃるので、今回のフォームはすべてkintone上で設定ができるようにしました。

高齢者や障がい者もアクセスしやすいサイトを

たにぐち：例えば返信メールの内容や完了画面のメールの内容なども、すべてこちらでできます。また、フォームのレイアウトもkintoneでできますので、例えば今「姓」があって、その隣に「名」という入力欄を設けました。

今左右に並ぶように配置したのですが、この状態でワードプレス側で今回作ったプラグインで同期という処理を行います。

こちら管理画面から同期ボタンをクリックしていただくと、これでkintoneと同期できてきちんと左右に並んでフォームがレイアウトされるように作っています。

これはkintoneでレイアウトのAPIというのがあるので、そこから情報を取ってきてレイアウトをできるだけ再現するように作っているというものです。

さてこれでもまだフォームとしては普通なのですが、弊社は実は、コーポレートテーマとして「ちゃんとWeb」というテーマを掲げています。どなたにも使いやすいWebをきちんとちゃんと作っていきましょうよ、というのが私のメッセージなんですけれども、世の中のフォームを見ていきますと、ぜんぜんちゃんとしていない印象なんです。

みなさんのフォームはどうでしょうか。

（スライドを指して）例えばこちらに今フォームの例があります。

ちゃんとしていない部分があるのですがどこでしょうか？　3、2、1、はやいですね。いっぱいあります。

例えばラベルに不備があったり、エラーメッセージが不適切だったり、さまざまな部分でダメなところがあります。どういう観点でダメかといいますと、こちらの「A11y」という言葉、ご存じでしょうか。

アクセシビリティという言葉の略称なのですけれども、アクセスできるアビリティということで、どれぐらいアクセスしやすいかということです。これには高齢者ですとか障がい者の方。

例えばまったく目が見えないけれども、音声ブラウザ、ボイスオーバーという機能でWebを見ている、聴いているという方がいらっしゃいます。そういった方もきちんとアクセスできるサイトを作りましょう、というのが「ちゃんとWeb」です。

今回このフォームを作るにあたって、アクセシビリティを長年研究されてきた株式会社インフォアクシアさんにアドバイスを受けまして、さまざまなアクセシビリティに配慮した部分を作っています。

入力画面で残すのはエラーの項目だけ

例えば「ちゃんとポイント」1つ目としまして、必須と明記しています。よく※（米印）とか、赤文字とかあるのですが、あれはダメです。必須ときちんと書いてあげます。

また、任意という項目にも任意の明記をしてあげると、より親切になります。こちらもサポートしております。そして必須の項目は、もちろんkintone上で「必須項目にする」としますと、同期して必須項目になります。

「ちゃんとポイント」2つ目、エラーメッセージは入力欄よりも上です。これはよく入力欄の下にエラーメッセージを表示する方がいるのですが、音声ブラウザで聴いている方はエラーメッセージを聴き取った上で戻って入力しないといけないのですごく操作がしづらいのです。

そこで今回のフォームは、入力欄の上にエラーメッセージを表示しました。ちなみにエラーの項目もさまざまございまして、値の制限最少・最大も、メールアドレスの書式やURLの書式もチェックします。

「ちゃんとポイント」3つ目です。残すのはエラーの項目だけ。これはちょっとかなり新鮮です。よくあるフォームは入力が終わった項目も残しておいて、ダメな項目だけ赤字になっているといったことがあるのですが、音声ブラウザで聴いている方は全部聴き取らないといけなくて非常に大変なので、エラー項目だけを残すようにしています。

ただこれは特殊な設定なので、いろいろ好みがあると思いますので、オプションで設定できるようにしています。

他にもいろいろな部分でアクセシビリティに配慮したフォームを作りまして、今回せっかくですのでワードプレスのプラグインとして、配布させていただきます。

プロバージョンは有償にしようと思っています。ちゃんとしたフォームということで名前は「ちゃんとForm」としました。グローバル名も考えておりまして、英語名は「Chanto Form」です。https://chanto-form.com で今日からベータリリースしますので、もしよろしければチェックしてください。

以上です。ありがとうございました。