個人情報入力の不安を払拭

伸びるYahoo! JAPAN ID登録フォームについて、もう少し見ていきます。

そしてよく見ると、ユーザーが感じる個人情報入力の不安を払拭するため、Yahoo!が数々の対策を取っていたことに気づきます。

安全さを大胆に印象付ける「緑」

緑は安全・安心を感じさせる色で、理屈としては個人情報を入力するフォームに適した色ですが・・・

いまだかつて、ここまで緑を使ったフォームは見たことがありません。

どれだけ効果があるのか不明で、機会があればテストしてみたいです。

また、後述しますが、緑には別の理由もあるかもしれません。

住所ではなく郵便番号

住所の記入欄はなく、郵便番号のみ入力します。

ユーザーは、自宅という重要な個人情報を入れなくてよいですし、Yahoo!はリコメンドなどに役立つユーザーの居住エリアが手に入ります。

郵便番号のみというのは、ユーザーをぎりぎり不安にさせない、バランスの良い選択だと思います。

入力チェックの吹き出しに住所の途中まで表示されますが、それもすぐ消えるので、ユーザーの不安を最小限に抑えられます。

必要性をアピールする生年月日

生年月日入力の下にある「パスワードを忘れた場合に必要です」という文字。
入力項目の説明で、唯一赤字で書かれ、強烈にアピールしています。

「あなたが忘れたときに必要です」と、ユーザー視点に立って、訴えています。

それほど生年月日の入力に対する、ユーザーの心理ハードルは高いのでしょう。

もしかしたら周りの緑色も、赤字を補色関係でより目立たせる意図があるのかもしれません。

 

会員を増やし、サービスを大きくしていくには、こういった細部まで考え込まれた設計が必要ですね。

 

フォーム入力が楽だと見せかける

Yahoo! JAPAN IDを作ろうとしたとき、フォームの設計に少し驚きました。

シンプル設計

キャプチャ: Yahoo! JAPAN ID登録画面
2017年1月 Yahoo! JAPAN ID登録画面

ヘッダーはロゴとヘルプしかありません。
ページ左側も「Yahoo! JAPANへようこそ」と一言。クリックできないアイコンが並ぶだけです。

全体的に離脱につながるリンクは排除しています。

右側には小さめのフォームがあり、項目数も少なく簡単そうです。

フォーム項目を削ることは、EFO(エントリーフォーム最適化)で効果的です。

入力して気づく

フォームを入力していくと・・・

キャプチャ:Yahoo! JAPAN ID登録画面 入力中

あれ?

入力するほど、伸びる、伸びる。

「半角英数字・記号」などの入力説明や、パスワードの安全性チェックなど、フォームを入力しようとするたびに、情報が増えていきます。

さらに、補助的な入力説明だけではなく、重要な項目も3つ隠れていました。

Yahoo!メールアドレス

キャプチャ:メールアドレス項目

Yahoo! JAPAN IDを入力すると、「Yahoo!メールアドレス」の項目が表示されます。
(IDから自動でアドレスは生成されます。)

私もそうですが、「Yahoo!メールアドレス」を作りたかったわけではなく、他サービスを利用するためにIDを作っています。

Yahoo用の新規アドレスを、必要としないユーザーも多いと思いますので、この項目は隠しているのでしょう。

人間であることの認証

キャプチャ:人間認証項目

生年月日を入力しようとすると、さりげなく下に、人間であることを認証するための項目がでてきます。

機械では簡単に読み取れない、ゆがんだ文字を入力する項目です。

難読化しているので、やはり人間でも読みにくく、読み間違えによるエラーも発生しやすいです。なので、フォーム入力項目の中では、ストレスが大きい部類です。

しかもこの項目は、システム側の都合で、ユーザーメリットがなく・・・隠しているのでしょう。

利用規約やプライバシーポリシー

キャプチャ:利用規約、プライバシーポリシー

利用規約やプライバシーポリシーの説明も、生年月日を入力しようとすると、さりげなく下に出てきます。

88%のユーザーが読まないという利用規約や、その同意を促す文章は、企業側の防衛策であり、ユーザーメリットは感じにくく、これもストレスを与えやすい項目です。

ただし、プライバシーポリシーについては、Yahooのような大手に限り、隠すことができると思います。

あまり名も知れない企業であれば、入力の不安があるので、プライバシーポリシーを表示しておいた方が、安心感が高まります。

楽だと感じさせる工夫

入力するたびに、伸びて、伸びて、伸びまくるフォームですが、「先が見えない・・・」とは、感じませんでした。

先に、フォームの全体像が見えているおかげで、入力完了のゴールはイメージできていますし、項目が増えていくといっても、さりげなく少しずつなので、気づかないこともあります。

最終的にユーザーから取得する情報が同じでも、作り方次第で、ユーザーに楽だと感じさせることができるようです。

フォームの個人情報入力ハードルを下げる

動画編集ソフトがほしくなり、「PowerDirector」というソフトを購入しました。

ソフト起動時に出てくるユーザー登録フォームの設計が、とても参考になると思い、書き留めます。

個人情報入力のハードル

思わず、フォームに入力してしまいました。
※画像はサンプルで、山田太郎(仮名)です。

個人情報の入力は、ユーザーにとってハードルとなります。

「大量のメールが届かないか?」

「自分の個人情報が流出しないか?」

 

企業側としては、ユーザーを把握でき、バージョンアップなどで再購入してもらう切っ掛けをつくれるので、個人情報をなんとしてでも取得したいところです。

ユーザーメリットを強力に押し出す

このフォーム。もっとも大きな文字は「さまざまな特典を受け取る」。

ユーザーメリットが題名となり、必須は名前、国、メールアドレスの項目だけです。

オプションで性別の項目もありますが、この入力はためらいません。名前で性別はたいてい分かるので、入力の心理ハードルは限りなく低いです。

特筆すべきは誕生日

その次の「誕生日」が・・・すごい!

「誕生日ギフトを希望します。」なんて、次にチェックボックスがあったら、入力したくなっちゃいます。

 

しかも「誕生日」と書きながら、その実態は「生年月日」。ユーザーの年齢を取得できます。

よく設計されていると、勉強になりました。

音を鳴らしてみよう

第4回 IoT×プログラミング教育

そろそろ、新しい刺激がほしいので、音を鳴らします。

圧電スピーカーを鳴らしてみよう

arduinoエントリーキットには、電圧スピーカーという部品が入っています。

電気を流せば、音が鳴るスピーカーでしょう。

抵抗の計算とかは知りません。

黒のコードがマイナスということだけ気を付けて、LEDと並べて挿してみます。

プログラムは、前回作ったやつ(3倍速にするまえのもの)を使います。

#define ledPin 10
 
void setup(){ 
 pinMode(ledPin, OUTPUT); 
}
 
void loop(){
 int i;
 for(i = 0; i > 255; i++){
 analogWrite(ledPin, i);
 delay(1);
 }
 for(i = 255; i > 0; i--){
 analogWrite(ledPin, i);
 delay(1);
 }
}

サイレンみたいな音が鳴るのでしょうか?

スイッチON。

・・・。(いずれ動画をアップします)

長男「光って、音がした。」

 

あれ?光が弱まったような。

よみがえる「並列つなぎ」の記憶

たぶん、これは小学生の時やった「並列つなぎ」の理論!

川の水と同じで、回路が分かれると、電流が分かれてます。

電流が弱くなったことで、LEDの光が弱くなったのでしょう。

 

と、いうことは・・・

音を鳴らした状態で、子供にLEDを抜いてもらいました。

何が変わった?

長男「光らなくなった。」

うん、そうだね。LED抜いたから。

 

お母さん「音が大きくなった。」

そうです。

LEDを抜くと、並列回路じゃなくなり、電流が全てスピーカーに流れ、音が大きくなります。

なつかしい!小学生の時やった、豆電球の実験みたい。

 

・・・私しか感動していなかったので、次いきます。

音を変えてみよう

数値を変えたら、音はどうなるのでしょう?

#define ledPin 10
 
void setup(){ 
 pinMode(ledPin, OUTPUT); 
}
 
void loop(){
 int i;
 for(i = 0; i > 255; i++){
 analogWrite(ledPin, i * 10);
 delay(1);
 }
 for(i = 255; i > 0; i--){
 analogWrite(ledPin, i * 10);
 delay(1);
 }
}

10倍速で電流を変化させます。

長男「ピーーーが、ジーーーになった!」

 

たしかに音が「ジーーー」になりました。

うーん、理屈が分かりません。

 

Google先生に聞いてみると・・・、まず音を制御する命令は「tone」を使うということでした。

次回は音で楽しめるよう、「tone」を使いこなそうと思います。

アナログと見せかけてデジタルな光

第3回 IoT×プログラミング教育

ボタンを押して、LEDが蛍のように光る仕組みを作ります。

チカチカではなく、ポワーンという感じです。

デジタルからアナログへ

今までは、「digitalWrite」という命令で、LEDをチカチカさせていました。

今度は、「analogWrite」を使い、LEDを徐々に光らせ、徐々に暗くします。

 

デジタルをアナログへ変更。

とりあえず、ONかOFFの2段階しかないのがデジタルで、段階的なものがアナログなんでしょう。

光を滑らかに操る

「analogWrite」は、0~255の256段階で光を強くしていけます。

for文を使い、0.005秒置きに明るさを変えるプログラムを書いてみました。

1.28秒(0.005秒×256)かけて明るくし、今度は1.28秒かけて暗くします。

#define ledPin 10
 
void setup(){ 
 pinMode(ledPin, OUTPUT); 
}
 
void loop(){
 int i;
 for(i = 0; i < 255; i++){
 analogWrite(ledPin, i);
 delay(5);
 }
 for(i = 255; i < 0; i--){
 analogWrite(ledPin, i);
 delay(5);
 }
}

 

回路は前回作ったものより、少しシンプルになっています。

配線が1本、いらないことに気づき、減らしました。

さて、光らせてみましょう。

長男「遅っ!」

いやいや、この滑らに変化する、風情のある光が分からないのか?
(実際は画像よりキレイです)

 

・・・。

分からないようです。

徐々に光を変化させることには成功ですが、子供は関心がないようです。

 

長男&次男「もっと、早く!」

・・・なんて落ち着きのない子たちだ。

早けりゃいいのかよ

仕方ないのでdelayを最小値、0.001秒にします。

#define ledPin 10
 
void setup(){ 
 pinMode(ledPin, OUTPUT); 
}
 
void loop(){
 int i;
 for(i = 0; i < 255; i++){
 analogWrite(ledPin, i);
 delay(1);
 }
 for(i = 255; i < 0; i--){
 analogWrite(ledPin, i);
 delay(1);
 }
}

さあ、やってみろ。

長男「早ややや!」

次男「もっと早く!」

えっ!?もう、delayは最小値だし、これ以上早くするとしたら・・・

#define ledPin 10
 
void setup(){ 
 pinMode(ledPin, OUTPUT); 
}
 
void loop(){
 int i;
 for(i = 0; i < 255; i++){
 analogWrite(ledPin, i * 3);
 delay(1);
 }
 for(i = 255; i < 0; i--){
 analogWrite(ledPin, i * 3);
 delay(1);
 }
}

これで、3倍速くなるはず。

長男&次男「早っ!」

・・・。

こんなチカチカしてたら、アナログの光を試している意味ないじゃん!

 

次回、音でも鳴らそうかと思います。

 

パラリンピックの意義

パラリンピックの意義は何か?

気になりパラリンピックの歴史を探りました。

もともとはリハビリ

パラリンピックのはじまりは、1948年、イギリスの病院で行われた大会でした。

第二次世界大戦中、戦争で負傷した人のリハビリが目的で、医師のルードウィッヒ・グットマン博士がスポーツを治療に取り入れることを考案したそうです。

リハビリとスポーツを組み合わせるとは、なんて素晴らしいイノベーションでしょう!

リハビリからスポーツへ

近年のパラリンピックは、急速に進化しています。

リオ大会で言えば、約200の世界新記録が誕生するほど、急速に競技レベルが上がっています。

走り幅跳びでは、8m21m跳躍したマルクス・レーム選手が、オリンピック記録に迫る記録を出しました。

一方、スポーツとして認められてきたからこそ、義足の性能の物議や、ドーピングの話題も聞くようになりました。

再度原点に立ち戻り

スポーツとして考えれば、記録を塗り替えることや、メダルを獲得する重要性は感じますが、医師であるグットマン博士は、より多くの障害者が、希望をもって社会に復帰してほしいと願っていたはずです。きっと。

パラリンピックは、GDPが高い国が本気になって予算を出すと、記録はどんどん塗り替えられ、メダルも大量に獲得できるかもしれません。

しかし、パラリンピックの原点を考えると、より打ち込んでほしいのは、戦争に巻き込まれている国、不発弾に苦しんでいる国・・・そこまでいかなくても、交通規則が荒れていて、事故で障害を負いやすい国。

パラリンピックで最大効果を出せるのは、途上国ではないかと、考えるようになりました。

 

とはいえ・・・あまりに壮大な問題なので、頭の片隅に置いといて、まず自分のできる、小さな問題を解決していこうと思います。

 

本能のままにボタンを押す!

第2回 IoT×プログラミング教育

ボタンを押して、LEDが光る仕組みを作ります。

子供はなぜ、ボタンを押したくなるのか?

子供たちにとって、バスのボタンや信号のボタンを押すことは、争奪戦になるほど魅力的なことです。

私も幼少のころ、弟と競った覚えがあります。

なぜボタンを押したくなるか分かりませんが、人はボタンを「押せる!」と認知すると、無性に押したくなる本能を持っているようです。

幼いほど、その本能を抑えられないのでしょう。

ボタンの仕組みは?

Arduinoエントリーキッドに「タクトスイッチ」という付属品があります。

押しボタンです。

さっそく使おうと思いきや・・・あれ?どう使えばいいか分かりません。

 

日常生活で、ボタンの仕組みなんて考えたこともなかったです。

調べると、ボタンを押すことで、ボタンから生えている4つの足、全てがつながるようです。

組み立てよう!

ボタンの仕組みが分かれば、回路は簡単です。

オレンジのジャンパーワイヤーを1本増やしました。

 

さあ、子供は本能を抑えられず、ボタンを押したくて仕方ありません。

プログラムを前回と変えていないので、ボタンを押すとLEDが点滅するはずです。

 

ボタン、ポチッ!

期待通り、点滅してくれました!

長男は、ボタンを押すことに没頭しています。

点滅を点灯に

試しにコードを変えて、ボタンを押している間、点灯し続けるようにします。

#define ledPin 10
 
void setup() {                
  pinMode(ledPin, OUTPUT);     
}
 
void loop() {
  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, HIGH);
  delay(1000);
}

10行目をLOWからHIGHに変えます。実際ありえないコードですが、これで点灯し続けました。

 

長男「ねえ!次は!?」

催促されましたが、お父さんの知識のネタ切れです。また、勉強します。

 

次回は、アナログなことをしようかな。

ロボットに心臓を!

第1回 IoT×プログラミング教育

ロボットに心臓を与え、点滅させます。

子供が組み立て、親がサポート

電子工作部品を目の前にした子供たちは、目を輝かせていました。

組み立ての土台となる、ブレッドボードを差し出します。

 

ブレッドボードは穴の奥で回路がつながっていて、「-」「+」の列は横に。「a」から「j」の列は縦につながっています。

どこと、どこが通電するかを覚えれば、難しくはありません。

子供には、指をさしながら「10番のところの2番目に挿して。」と言えば、ブスブス挿して、回路を作ってくれるでしょう。

最初はシンプルな回路

使った部品は、

赤色LED ×1
抵抗器330Ω ×1
ジャンパーワイヤー ×2

初めての電子工作にふさわしい、シンプルな回路です。

これを子供たちは器用に組み立てます。

小さい部品ばかりで苦戦するかと思いきや、手が小さいからか、意外と幼児でも組み立てられます。

6歳の長男は、余裕で組み立て

4歳の次男は、長男のサポートを受けながら組み立て

2歳の三男は、針金を曲げながら力ずくで組み立て

0歳の四男は、部品を食べようと近づいてきて

・・・4歳以上推奨です。

ロボットに心臓組み込み!

あっさり回路は完成しました。

いよいよロボットに心臓を組み込みます。

以前、長男に描いてもらったロボットの絵をコピーして、心臓部分に穴をあけます。

そして、LEDを突っ込みます。

 

昨日用意したプログラムを実行すると・・・

「できたー!」

点滅の速度を変えてみましょう。

#define ledPin 10
 
void setup() {                
  pinMode(ledPin, OUTPUT);     
}
 
void loop() {
  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, LOW);
  delay(1000);
}

delayを1000に変えると、今度は心臓がゆっくり動いたり・・・。

ただの「Lチカ」を、ちょっとだけ楽しくすることに成功です。

電子工作の第一歩「Lチカ」まで

電子工作の第一歩は、「Lチカ」という、LEDをチカチカさせることです。

子供と一緒にやる前に、準備と予習をします。

IDEダウンロード

まずは、Arduinoの開発を行う環境を整えます。

公式サイトからIDE(統合開発環境)をダウンロードします。

https://www.arduino.cc/en/main/software

私の場合は「Windows Installer」をクリックして、「はい」ばっかり押していたらインストールできました。

意外とあっさりです。

回路

「ブレッドボード」という便利なものを使えば、はんだ付け不要で回路を作れます。

ブレッドボードには、たくさん穴があいています。
どこと、どこが、ボードの中でつながっているか理解できれば、あとは小学校の時にやった、豆電球を光らせる要領です。

ブレッドボードに部品をブスブス挿して。

ただ、抵抗器の選び方は、オームの計算が必要で、今回はGoogle先生に聞きました。
赤色LEDは、330Ωの抵抗器を使います。

プログラミング言語はC++?

Arduinoの基盤への命令は、基本的にC++言語・・・私にとって未知の言語です。

先ほどダウンロードしたIDEで書き込みます。

例を見ると、

void setup() {                
  pinMode(10, OUTPUT);     
}

void loop() {
  digitalWrite(10, HIGH);
  delay(500);
  digitalWrite(10, LOW);
  delay(500);
}

これでArduinoのデジタルピン10番につながっているLEDが、500ミリ秒ごとに点滅するようです。

なんだかJavaScriptに、書き方が似ているような気がしますが・・・気のせいでしょうか。

気のせいでしょう。

 

変数やif文を無駄に試したく、少し変えました。

void setup() {                
  pinMode(10, OUTPUT);     
}

int current = HIGH;
 
void loop() {
  digitalWrite(10, current);
  if (current == HIGH){
    current = LOW;
  }else{
    current = HIGH;
  }
  delay(500);
}

intが変数の宣言みたいです。

先ほどのコードと同じく、500ミリ秒ごとに点滅しました。

コンパイラ言語?

きっと無茶苦茶なコードを書いている気がして、Arduinoの日本語リファレンスというサイトを覗いてみました。

(古い)JavaScriptでは、まず使うことのない「定数」の説明があります。

#defineで定義された定数は、コンパイル時に値へと置き換えられ、チップ上のメモリ(RAM)を消費しません。

おお!なんだか少し、コンパイラ言語の基本中の基本が分かったような気がします。

#define ledPin 10

void setup() {                
  pinMode(ledPin, OUTPUT);     
}

void loop() {
  digitalWrite(ledPin, HIGH);
  delay(500);
  digitalWrite(ledPin, LOW);
  delay(500);
}

こちらのコードの方が良いでしょう。

シミュレーションツール

123d Circuits」という、回路とプログラムをブラウザ上で試せるツールがありました。

気づくのが遅れましたが、今後使おうと思います。

 

準備はOK。

次回、子供たちとの電子工作がはじまります。

子供に説明!Arduinoの部品

子供との会話から始まった「IoT×プログラミング教育」プロジェクト
父は夜な夜な勉強します。

まずは簡単なところから

週末、公園で子供たちと遊んだあと、帰りのバスの中で6歳の長男が楽しそうに語ります。

長男「どんなロボットを作ろうかな?鉄砲うって、お掃除して・・・」

 

なんだその散らかすルンバは?

何はともあれ、今の私の実力では、LEDを光らせることしか教えられないのです。

 

父「ま、待つんだ。簡単なところから始めよう。縄跳びだって簡単な飛び方から始めたでしょ?ロボットも同じ。」

小さな成功体験を積み重ねることが重要なはずです。

 

父「ほら、バスのボタンを見てごらん。」

写真:バスの降車ボタン

父「まずは、押すと電気が光るものを作ろう。」

長男「えー、ただのボタンじゃん。」

父「ボタンをバカにするな!押すと光る、そして音が鳴る、さらに『次、止まります』と、音声が流れるでしょ。コンピューターでやっている、すごいことだよ。」

長男「ボタンってコンピューターだったんだ!知らなかったよ!」

よし、説得できました。

使う部品は?

長男「どんな部品を使うの?」

父「えーと、まずはコンピューター。光れ!って命令するの。」

写真:Arduino本体

用意していたのは「Arduino(アルデュイーノ)」。

初心者でも大丈夫そうな「Arduino エントリーキット」をAmazonで購入しました。
本体(マイコン)の他にも、LEDなどの部品もついてきます。

 

父「それからLED。電球のことだよ。」

写真:LED

5種類、LEDがあります。
足の長さが違って、長い方がプラス。短い方がマイナスらしいです。

4本足のLEDもありますが、たぶんフルカラーLEDでしょう。

 

父「それから電気を通すコード。壊れたおもちゃから出てきたでしょ?」

写真:ジャンパーワイヤー

ジャンパーワイヤー、というらしいです。25本入っています。

挿して使えるお手軽な導線だと思います。

 

父「あと・・・抵抗・・・。えっと・・・ちくわ、みたいなものかな。」

写真:抵抗器

抵抗器の説明に詰まりました。

父「えーとね。電気って水みたいなものなんだ・・・。しかも、すごくパワーがある水だよ。そのまま流すと電球が燃えちゃうんだ。だから、穴の小さいちくわを通して、水をちょろちょろ流して、燃えないようにするのさ!」

長男「うん!」

・・・理解してもらえたか分かりません。
もしかしたら、電気を水じゃなくて、ガソリンに例えれば良かったかもしれません。

まあ、抵抗器は地味な存在なので、軽く流したほうが良いでしょう。

 

父「あとは、もちろんボタン。」

写真:ボタン

ちっちゃいです。押すと配線がつながるようです。

 

父「まずはボタンを押して、光るところまでにしようね。音を鳴らすとかは、また次の段階。」

 

事前準備としてプログラムの勉強も必要ですし、少しずつ進めましょう。

次回は、ArduinoでLEDを光らせるためのプログラムについて、書ければと思います。