子供に説明!Arduinoの部品

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

まずは簡単なところから

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

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

 

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

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

 

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

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

 

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

写真:バスの降車ボタン

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

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

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

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

よし、説得できました。

使う部品は?

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

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

写真:Arduino本体

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

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

 

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

写真:LED

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

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

 

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

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

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

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

 

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

写真:抵抗器

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

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

長男「うん!」

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

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

 

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

写真:ボタン

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

 

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

 

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

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

 

 

IoT×プログラミング教育の始まり

「機械を作りたい!」

駅の改札機の修理現場を目撃して、長男(6歳)が言いました。

う~ん、お父さんは、機械にそんな強くない。
だけど、IoTだとか、プログラミング教育だとか、世の中は流れに逆らえない。

「よし、週末に作ろう!ただし、長い道のりになるよ。」

ということで、ものづくりの楽しさを、親子で一緒に学んでいこうと思います。

ロボットを作ろう!

機械といってもザックリしすぎているので、何かしらの機能を持つロボットを作ってみようかと思います。

 

長男に書いてもらったロボットです。

細かい・・・

さて、圧倒的に電子工作の知識不足なので、まず親が勉強しないと・・・。

Amazonギフト券 「紺」の罠

年賀状を弟に送ったら、返事の手紙と一緒にAmazonギフト券が届きました。

Amazonの研究をしている時に、なんとタイムリーな!

良い弟を持ちました。

Amazonギフト券が届いた経緯

年賀状が1枚余ったので、4歳の息子の名前を使って、弟(息子から見ると叔父)に送りました。

せっかくなので、クイズを書きました。

「もんだい たまはたまでも おしょうがつに もらえる たまは?」

 

待つこと数日・・・

期待を裏切らず、返事が届きました。

「もんだい ねんがじょう に こどものなまえを つかって おとしだまを ようきゅうする ごくあくひどう な ひとは だれでしょう」

4歳の息子には、「ようきゅう」や「ごくあくひどう」という言葉が分かっていませんでしたが、とりあえず「おとうさん!」と、正解していました。

すばらしい勘です。

 

手紙には、Amazonギフト券が同封されていました。

以前、私が、「子供のプレゼントはAmazonで買っている」と言っていたのを覚えていたのでしょう。

なぜ1万円のギフト券?

同封されていたのは、コンビニで売っているやつで、1万円のギフト券です。

他にどんな種類があるのか調べてみると、金額の違う4色のカードがあるようです。

画像:Amazonギフト券
Amazon公式サイトより転載

左から、3,000円、5,000円、10,000円、20,000円。

10,000円の紺色が、一番Amazonらしい配色です。

まるで、10,000円ギフト券を買うように暗示をかけられているような・・・

弟は、まんまとAmazonの罠にハマった?

こんな兄に、10,000円送るような弟じゃなかったはずです。

Amazonサイト 紺へのリニューアルはまさか!?

2015年にAmazonサイトは、ヘッダーを紺にリニューアルしています。

まさか、10,000円ギフト券の販売数を上げることも計算に入れていたり!?

 

さすがに、強引なこじつけか・・・。

 

ただ、UXデザインの勉強をするときは、単にサイトのデザインだけを考えず、顧客との接点全てを視野に入れて考えないといけません。

今回届いたAmazonギフト券のおかげで、ふと視界が開けました。

弟に感謝します。

そして、うちの子は、あと3人いるので、また手紙を出してみようかと思います。

Amazonは「黒」を選ばず「紺」を選んだ

Amazonのヘッダー配色で気になることがあります。

昔のAmazonはヘッダーが白かった

2015年7月まで、Amazonのヘッダー(ページ上部)は白かったです。

キャプチャ:2015年7月のAmazon
2015年7月当時のAmazon

商品を目立たせるためなのか、余計な色を使わない。気持ちいい白さです。

デザイナーがこんなUIデザインを提案したら、怒られるような配色です。

しかし、Amazonのことなので、ABテストを繰り返して検証された、ユーザーに実際使われる配色なのかと考えていました。

突然重い色がドン!

それが、2015年8月に大幅にリニューアルされ、ヘッダー部分に比較的大面積の重い色が来ました。

キャプチャ:2015年8月のAmazon
2015年8月にリニューアルしたAmazon

今さら、ヘッダーとコンテンツを明確に色分けするデザインなんて、売上が上がるとは思えないし・・・

腑に落ちない配色。というのが、第一印象でした。

「黒」ではなく「紺」!?

ただ気になったのは、ヘッダーの色。
無難な「黒」が使われず、「紺」を使っています。

そして、Amazonのアクセントカラー「オレンジ」が、検索ボタンに使われたこと。

つまり、「検索」、「カートに入れる」、「レジに進む」といった、購入へつながる重要な「オレンジ」のボタンを、補色の「紺」で目立たせるのが狙いでは!?

キャプチャ:Amazon補色
Amazonヘッダーとボタンが補色の関係に

以前の白いサイトでは、サイト全体の「白」と「オレンジ」の色差がそこまで大きくなかったです。

Amazonで使われている色を、CIE2000とかいう色差式の計算に当てはめると、

リニューアル前 白とオレンジの色差・・・27.1
リニューアル後 紺とオレンジの色差・・・68.1

ということで、2.5倍くらい色差を感じて、認識しやすい配色に改善されたようです。
(色と色の距離、面積など、いろいろ度外視しています。)

より導線を目立たせ、購買へ繋げる。

色彩学を用いた配色変更だったのかもしれません。

あくまでも仮説です。

WordPress 常時SSLのためのパス変更

前回、このブログを常時SSLにしようとしたら、画像パスがHTTPで読み込まれているため、警告が出てしまいました。

今までの記事の画像を、全てHTTPS で読み込む方法を探ります。

最短で知りたい人は

下記の記事がおすすめです。丁寧にやり方が書かれています。

エックスサーバー独自SSLが無料!WordPressサイトをHTTPS化する方法

 

WordPress歴 の浅い人は

以下のやり方で何とかなります。

まず、WordPressの管理画面で「設定」を選びます。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」が「http://・・・」となっているので、「https://・・・」に書き換えます。

書き換えたら下にスクロールして、「変更を保存」を押します。

これでサイトを見てみると・・・

 

変わりません。

何も変わらず、画像がHTTPで読み込まれると、警告がでています。

新規投稿で画像を読み込むときは、HTTPSで読み込まれるのですが、過去の画像のパスまでは変わらないようです。

力技!

過去全てのパスを一括変換できそうですが・・・

始めたばかりのこのブログは、画像量がたかが知れているので、手作業で画像パスをHTTPSに書き換えることにしました。

画像だけでなく、記事にもリンクをはっている場合、修正を忘れないようご注意ください。

もし大量に修正するパスがあったら

プラグインで一括変換できるようです。

冒頭で紹介した記事へどうぞ。

常時SSL時代へ「Let’s Encrypt」

Googleが常時SSL化を本格的に推し進めているので、当ブログも常時SSLに対応することにしました。

ボタン一つで、しかも無料!

当ブログは、Xサーバーで運営していますが、なんと無料SSL「Let’s Encrypt」を、ボタン一つで導入できるらしいです!

Googleに呼応してか、SSL導入のハードルが、ここ数年でどんどん下がっています。

思わぬ落とし穴

驚くほど簡単に常時SSL導入完了!?

さて、アクセスしてみると・・・

キャプチャ:てまりブログSSL失敗
てまりブログ(2016年1月)のキャプチャ ※Chromeディベロッパーツールを開いています

警告でてます。SSL通信になっていません。
WordPressのデフォルトテンプレートから、まったくいじっていないのに。

ブログ記事に投稿した画像全てが、HTTPで読み込まれているみたいです。

よし。常時SSL化は、また今度にしよう。

無料で問題ないのか?

ところで無料SSLは、本当に大丈夫なのでしょうか?やはり、気になったので調べました。

昔、SSL導入でお世話になったグローバルサインのブログ記事が分かりやすかったです。

2014年11月にElectronic Frontier Foundation(EFF)の他、MozillaやCisco Systems、ミシガン大学などが協同で「Let’s Encrypt」と呼ばれる無料SSLプロジェクトを立ち上げました。

信頼度十分の組織です。

SSLの導入コストを軽減し、ネットセキュリティの改善を目指す志に救われます!

高価なSSL認証が必要なケースは?

値段によって暗号化の品質は変わらないようですが、世間に認知されている企業やそのサービスのサイトでは、もっとも高価で認証レベルも高い「EV」を選んで損はないと思います。

EVにすると、アドレスバーに本物のサイトであることの証明が表示されます。

Chromeなどのブラウザが、SSL対応ページの表示を目立たせてくれるので、「このサイトは本物か!?」と、疑うとき、左上に目が行くユーザーも、増えてきていると思います。

キャプチャ:三菱東京UFJのEV
三菱東京UFJサイトの表示例

 

弊社の場合、「temari.inc」なんて表示させても、「てまり」では怪しさを軽減できないので、当分無料SSLで十分でしょう。

動くChromeのサイト内検索

昨日に続き、Chromeについて。

サイト内検索が動く

UIデザイナーしか興味を示さない、マニアックなところですが・・・

Chromeサイト内検索をするとき、ヒットした文字が検索ボックスの下にあると、ボックスがよけてくれます。

キャプチャ:Yahooトップでのサイト内検索
Windows版Chromeを使い、Yahooトップで「カテゴリ」とサイト内検索した場合

あまり気づかれないですが、UIの目指すところは、あまりに自然に使えて気づかれないこと。

職人魂を感じます。

Macの場合、アニメーションしながら移動

MacのChromeでは、検索ボックスがよけるとき、ぬるっとアニメーションしながら移動します。

OSによって、見せ方を変えているのでしょうか?

Windowsと比較すると、Macの方が、例えばアイコンが飛び跳ねたり、アニメーションを強めに使っている印象です。

OSに合わせて、Chromeの細部のアニメーションまで調整しているとしたら、恐ろしい作りこみです。

・・・単に、OSとハードの組み合わせが無数にあるWindowsでは、アニメーションを実装できないとか、技術的な理由かもしれません。

常時SSL時代へ本格的に移行!?

Chromeがバージョンアップし、「保護された通信」と、強烈に表示してきました。

アイコンを利用してシンプルなUIだったChromeが、ずいぶん目立つことを・・・
日本語特有の字画の多さで、必要以上に目立ってしまうのかもしれません。

それでも、ここまで文字スペースを使っているということは、Chromeも本気で常時SSL化を進めたいようです。

警告でるかも!

Chromeの開発者ブログ(英語ページ)によると、「最終的には、SSLに対応していないすべてのhttpページで、赤い三角形の警告を出す予定です。」

というようなことが、最後に書いてあります。

こんな感じになるんでしょうか。

企業サイトは、もう無視できませんね。

UXデザイナーに求められること

2017年が始まり、改めてUXデザイナーに必要なことを考えました。

UXデザイナーには、非常に多くのことが求められると思います。

  • デザイン能力
  • ビジネス能力
  • テクノロジー理解
  • 熱意

なんだか厳しい世の中となりました。

今回はデザイン能力について記述します。

 

デザイン能力

自社サービスのUXデザインをするのであれば、見た目の美しさを求めるデザインより、成果を出せるデザインを求められることが多いと思います。

PDCAを回し、より良いデザインを追求する。

WebサイトでABテストを行ったり、サービス利用者にインタビューをしたり・・・。

逆に、社外のクライアントが相手(特に決裁者と直接話せないような大企業)の場合、サービスの一部のデザインしか受注できない場合がほとんどで、しかも、論理的に説明できる効果重視のデザインが、受け入れられるとは限りません。

場合によっては、説明しなくても「いいね!」と喜ばれる、芸術性の高いデザインが必要となります。

ただし、最終的にはクライアントに成果を出してもらうことが大切です。

 

PDCAを回す機会を作ってもらい、成果を上げ、レポートを出すなど、徐々にクライアントの信頼を得る努力が必要です。

UXデザインは、サービス全体に関わるユーザーの体験や行動をデザインします。なので、意思決定をどれだけ権限委譲してもらえるかが、成功の鍵です。

 

Amazonを絶賛している裏で、ヤマトドライバーの悲鳴が

連日、AmazonのUIを絶賛する記事を書きましたが、そのさなか、「アマゾン多過ぎ」ヤマトドライバーから悲鳴続出、「利便性」が生んだ過酷な実態というニュースを目にしました。

クリスマスプレゼントを注文した身としては、後ろめたさを感じます・・・。
ヤマトさん、申し訳ないです。いつもありがとうございます。

より一層、CSよりESに

今年も過労のニュースが世間を騒がせました。
これまでもユニクロやワタミのように、CS(顧客満足度)を最重視した企業が叩かれましたが、今年はより一層、CSよりES(従業員満足度)に力を入れないといけない風潮になったと感じます。

ロイヤルホストが24時間営業をやめるといいました。
マクドナルドも24時間営業を減らすといいます。

私の身近なところでも、近所のスーパーが年末年始休みとなり、「買いだめしなきゃ!」と焦ったり、郵便局が1月2日の年賀状配達をやめると聞いて、「早く書かなきゃ!」と、焦ったり。

なんだか、懐かしい感覚です。

ESを重視することは肯定的に捉えています。

ヤマトのESも改善するのか?

「ヤマトドライバーの悲鳴」のニュースも、話題になることで改善につながるかもしれません。

「再配達にならないように気を付けよう。」「送料無料ってやっぱり無理があるよね。」とか、利便性を求めすぎることは悪いという風潮が強まっていきそうです。

Amazonとしても、ヤマトドライバーは大事なパートナーです。労働環境改善に取り組んでいくと思います。

時間がかかるかもしれませんが、「運送負荷を減そう!」という世論が味方して、大規模なドローン配送を実現できたり、Amazon自身が自動運転トラックを開発したり・・・

あれ?Amazonが運送業の仕事を奪い、また巨額の利益を得る?

2つの優良企業のES改善は注目

ヤマトも運送に革命を起こした日本を代表する企業です。ES改善に力を入れ、Amazonを超える運送の革命をもう一度起こしてほしいです。

ヤマトとAmazonが、ドライバーの過酷な労働環境をどう改善していくか注目しています。どちらの企業も経営のお手本として、学べることが多いはずです。

 

個人的にも、再配達を減らす努力をします。

トラックドライバーの過労は、人が死にます。

私自身、新卒で運送業界に入り、トラックドライバーとして連日夜遅くまで働き、疲労で死と直面した経験があり・・・。