ユニバーサル社会で役立つデザインや技術の研究
「機械を作りたい！」
駅の改札機の修理現場を目撃して、長男（6歳）が言いました。
う~ん、お父さんは、機械にそんな強くない。
だけど、IoTだとか、プログラミング教育だとか、世の中は流れに逆らえない。
「よし、週末に作ろう！ただし、長い道のりになるよ。」
ということで、ものづくりの楽しさを、親子で一緒に学んでいこうと思います。
機械といってもザックリしすぎているので、何かしらの機能を持つロボットを作ってみようかと思います。
長男に書いてもらったロボットです。
細かい・・・
さて、圧倒的に電子工作の知識不足なので、まず親が勉強しないと・・・。
年賀状を弟に送ったら、返事の手紙と一緒にAmazonギフト券が届きました。
Amazonの研究をしている時に、なんとタイムリーな！
良い弟を持ちました。
年賀状が１枚余ったので、4歳の息子の名前を使って、弟（息子から見ると叔父）に送りました。
せっかくなので、クイズを書きました。
「もんだい たまはたまでも おしょうがつに もらえる たまは？」
待つこと数日・・・
期待を裏切らず、返事が届きました。
「もんだい ねんがじょう に こどものなまえを つかって おとしだまを ようきゅうする ごくあくひどう な ひとは だれでしょう」
4歳の息子には、「ようきゅう」や「ごくあくひどう」という言葉が分かっていませんでしたが、とりあえず「おとうさん！」と、正解していました。
すばらしい勘です。
手紙には、Amazonギフト券が同封されていました。
以前、私が、「子供のプレゼントはAmazonで買っている」と言っていたのを覚えていたのでしょう。
同封されていたのは、コンビニで売っているやつで、1万円のギフト券です。
他にどんな種類があるのか調べてみると、金額の違う4色のカードがあるようです。
左から、3,000円、5,000円、10,000円、20,000円。
10,000円の紺色が、一番Amazonらしい配色です。
まるで、10,000円ギフト券を買うように暗示をかけられているような・・・
弟は、まんまとAmazonの罠にハマった？
こんな兄に、10,000円送るような弟じゃなかったはずです。
2015年にAmazonサイトは、ヘッダーを紺にリニューアルしています。
まさか、10,000円ギフト券の販売数を上げることも計算に入れていたり！？
さすがに、強引なこじつけか・・・。
ただ、UXデザインの勉強をするときは、単にサイトのデザインだけを考えず、顧客との接点全てを視野に入れて考えないといけません。
今回届いたAmazonギフト券のおかげで、ふと視界が開けました。
弟に感謝します。
そして、うちの子は、あと３人いるので、また手紙を出してみようかと思います。
Amazonのヘッダー配色で気になることがあります。
2015年7月まで、Amazonのヘッダー（ページ上部）は白かったです。
商品を目立たせるためなのか、余計な色を使わない。気持ちいい白さです。
デザイナーがこんなUIデザインを提案したら、怒られるような配色です。
しかし、Amazonのことなので、ABテストを繰り返して検証された、ユーザーに実際使われる配色なのかと考えていました。
それが、2015年8月に大幅にリニューアルされ、ヘッダー部分に比較的大面積の重い色が来ました。
今さら、ヘッダーとコンテンツを明確に色分けするデザインなんて、売上が上がるとは思えないし・・・
腑に落ちない配色。というのが、第一印象でした。
ただ気になったのは、ヘッダーの色。
無難な「黒」が使われず、「紺」を使っています。
そして、Amazonのアクセントカラー「オレンジ」が、検索ボタンに使われたこと。
つまり、「検索」、「カートに入れる」、「レジに進む」といった、購入へつながる重要な「オレンジ」のボタンを、補色の「紺」で目立たせるのが狙いでは！？
以前の白いサイトでは、サイト全体の「白」と「オレンジ」の色差がそこまで大きくなかったです。
Amazonで使われている色を、CIE2000とかいう色差式の計算に当てはめると、
リニューアル前 白とオレンジの色差・・・27.1
リニューアル後 紺とオレンジの色差・・・68.1
ということで、2.5倍くらい色差を感じて、認識しやすい配色に改善されたようです。
（色と色の距離、面積など、いろいろ度外視しています。）
より導線を目立たせ、購買へ繋げる。
色彩学を用いた配色変更だったのかもしれません。
あくまでも仮説です。
前回、このブログを常時SSLにしようとしたら、画像パスがHTTPで読み込まれているため、警告が出てしまいました。
今までの記事の画像を、全てHTTPS で読み込む方法を探ります。
下記の記事がおすすめです。丁寧にやり方が書かれています。
エックスサーバー独自SSLが無料！WordPressサイトをHTTPS化する方法
以下のやり方で何とかなります。
まず、WordPressの管理画面で「設定」を選びます。
「WordPress アドレス (URL)」と「サイトアドレス (URL)」が「http://・・・」となっているので、「https://・・・」に書き換えます。
書き換えたら下にスクロールして、「変更を保存」を押します。
これでサイトを見てみると・・・
変わりません。
何も変わらず、画像がHTTPで読み込まれると、警告がでています。
新規投稿で画像を読み込むときは、HTTPSで読み込まれるのですが、過去の画像のパスまでは変わらないようです。
過去全てのパスを一括変換できそうですが・・・
始めたばかりのこのブログは、画像量がたかが知れているので、手作業で画像パスをHTTPSに書き換えることにしました。
画像だけでなく、記事にもリンクをはっている場合、修正を忘れないようご注意ください。
プラグインで一括変換できるようです。
冒頭で紹介した記事へどうぞ。
Googleが常時SSL化を本格的に推し進めているので、当ブログも常時SSLに対応することにしました。
当ブログは、Xサーバーで運営していますが、なんと無料SSL「Let’s Encrypt」を、ボタン一つで導入できるらしいです！
Googleに呼応してか、SSL導入のハードルが、ここ数年でどんどん下がっています。
驚くほど簡単に常時SSL導入完了！？
さて、アクセスしてみると・・・
警告でてます。SSL通信になっていません。
WordPressのデフォルトテンプレートから、まったくいじっていないのに。
ブログ記事に投稿した画像全てが、HTTPで読み込まれているみたいです。
よし。常時SSL化は、また今度にしよう。
ところで無料SSLは、本当に大丈夫なのでしょうか？やはり、気になったので調べました。
昔、SSL導入でお世話になったグローバルサインのブログ記事が分かりやすかったです。
2014年11月にElectronic Frontier Foundation（EFF）の他、MozillaやCisco Systems、ミシガン大学などが協同で「Let’s Encrypt」と呼ばれる無料SSLプロジェクトを立ち上げました。
信頼度十分の組織です。
SSLの導入コストを軽減し、ネットセキュリティの改善を目指す志に救われます！
値段によって暗号化の品質は変わらないようですが、世間に認知されている企業やそのサービスのサイトでは、もっとも高価で認証レベルも高い「EV」を選んで損はないと思います。
EVにすると、アドレスバーに本物のサイトであることの証明が表示されます。
Chromeなどのブラウザが、SSL対応ページの表示を目立たせてくれるので、「このサイトは本物か！？」と、疑うとき、左上に目が行くユーザーも、増えてきていると思います。
弊社の場合、「temari.inc」なんて表示させても、「てまり」では怪しさを軽減できないので、当分無料SSLで十分でしょう。
昨日に続き、Chromeについて。
UIデザイナーしか興味を示さない、マニアックなところですが・・・
Chromeサイト内検索をするとき、ヒットした文字が検索ボックスの下にあると、ボックスがよけてくれます。
あまり気づかれないですが、UIの目指すところは、あまりに自然に使えて気づかれないこと。
職人魂を感じます。
MacのChromeでは、検索ボックスがよけるとき、ぬるっとアニメーションしながら移動します。
OSによって、見せ方を変えているのでしょうか？
Windowsと比較すると、Macの方が、例えばアイコンが飛び跳ねたり、アニメーションを強めに使っている印象です。
OSに合わせて、Chromeの細部のアニメーションまで調整しているとしたら、恐ろしい作りこみです。
・・・単に、OSとハードの組み合わせが無数にあるWindowsでは、アニメーションを実装できないとか、技術的な理由かもしれません。
Chromeがバージョンアップし、「保護された通信」と、強烈に表示してきました。
アイコンを利用してシンプルなUIだったChromeが、ずいぶん目立つことを・・・
日本語特有の字画の多さで、必要以上に目立ってしまうのかもしれません。
それでも、ここまで文字スペースを使っているということは、Chromeも本気で常時SSL化を進めたいようです。
Chromeの開発者ブログ（英語ページ）によると、「最終的には、SSLに対応していないすべてのhttpページで、赤い三角形の警告を出す予定です。」
というようなことが、最後に書いてあります。
こんな感じになるんでしょうか。
企業サイトは、もう無視できませんね。
2017年が始まり、改めてUXデザイナーに必要なことを考えました。
UXデザイナーには、非常に多くのことが求められると思います。
なんだか厳しい世の中となりました。
今回はデザイン能力について記述します。
自社サービスのUXデザインをするのであれば、見た目の美しさを求めるデザインより、成果を出せるデザインを求められることが多いと思います。
PDCAを回し、より良いデザインを追求する。
WebサイトでABテストを行ったり、サービス利用者にインタビューをしたり・・・。
逆に、社外のクライアントが相手（特に決裁者と直接話せないような大企業）の場合、サービスの一部のデザインしか受注できない場合がほとんどで、しかも、論理的に説明できる効果重視のデザインが、受け入れられるとは限りません。
場合によっては、説明しなくても「いいね！」と喜ばれる、芸術性の高いデザインが必要となります。
ただし、最終的にはクライアントに成果を出してもらうことが大切です。
PDCAを回す機会を作ってもらい、成果を上げ、レポートを出すなど、徐々にクライアントの信頼を得る努力が必要です。
UXデザインは、サービス全体に関わるユーザーの体験や行動をデザインします。なので、意思決定をどれだけ権限委譲してもらえるかが、成功の鍵です。
連日、AmazonのUIを絶賛する記事を書きましたが、そのさなか、「アマゾン多過ぎ」ヤマトドライバーから悲鳴続出、「利便性」が生んだ過酷な実態というニュースを目にしました。
クリスマスプレゼントを注文した身としては、後ろめたさを感じます・・・。
ヤマトさん、申し訳ないです。いつもありがとうございます。
今年も過労のニュースが世間を騒がせました。
これまでもユニクロやワタミのように、CS（顧客満足度）を最重視した企業が叩かれましたが、今年はより一層、CSよりES（従業員満足度）に力を入れないといけない風潮になったと感じます。
ロイヤルホストが24時間営業をやめるといいました。
マクドナルドも24時間営業を減らすといいます。
私の身近なところでも、近所のスーパーが年末年始休みとなり、「買いだめしなきゃ！」と焦ったり、郵便局が1月2日の年賀状配達をやめると聞いて、「早く書かなきゃ！」と、焦ったり。
なんだか、懐かしい感覚です。
ESを重視することは肯定的に捉えています。
「ヤマトドライバーの悲鳴」のニュースも、話題になることで改善につながるかもしれません。
「再配達にならないように気を付けよう。」「送料無料ってやっぱり無理があるよね。」とか、利便性を求めすぎることは悪いという風潮が強まっていきそうです。
Amazonとしても、ヤマトドライバーは大事なパートナーです。労働環境改善に取り組んでいくと思います。
時間がかかるかもしれませんが、「運送負荷を減そう！」という世論が味方して、大規模なドローン配送を実現できたり、Amazon自身が自動運転トラックを開発したり・・・
あれ？Amazonが運送業の仕事を奪い、また巨額の利益を得る？
ヤマトも運送に革命を起こした日本を代表する企業です。ES改善に力を入れ、Amazonを超える運送の革命をもう一度起こしてほしいです。
ヤマトとAmazonが、ドライバーの過酷な労働環境をどう改善していくか注目しています。どちらの企業も経営のお手本として、学べることが多いはずです。
個人的にも、再配達を減らす努力をします。
トラックドライバーの過労は、人が死にます。
私自身、新卒で運送業界に入り、トラックドライバーとして連日夜遅くまで働き、疲労で死と直面した経験があり・・・。
プルダウンメニューには、ユーザーに操作ストレスを与える領域、魔の三角地帯が潜んでいます。
マウスカーソルとユーザー視点を結ぶ直線と、メニューの縁で囲まれる三角地帯です。
マウスカーソルの通り道なのに、マウスオーバーが解除され、プルダウンメニューが消えたり、別のメニューが表示されます。
「宝くじ」を押そうとしたら・・・あれ！？「投資信託」に！？
製品、サービスが豊富で、プルダウンで表示させる情報量が多い大企業サイトに起こってしまう問題です。
対策として昔Amazonは、プルダウンメニューからマウスカーソルが外れても、一定時間プルダウンを消さない処理をしていました。
また、副次効果として、メニュー操作中にちょっとマウスカーソルが行き過ぎても、プルダウンが消えないメリットもあります。
すばらしい。
・・・はずでした。
2016年現在のAmazonを見てみると、「マウスカーソルが外れても、一定時間プルダウンを消さない処理」がなくなってます。
なぜ！？
ユーザーにプルダウンが消えるまで待たせることが、許せなかったのでしょう。
もともとAmazonの魔の三角地帯は小さいし、必要なかったのかもしれません。
いや、そうではなかった・・・。
恐れを感じるほど、細かいことをやっていました。
メニューの上をマウスカーソルが左右に移動したときは、プルダウンが消えますが、
斜め下に移動したときは、プルダウンが消えません！
最高のUIを目指し、どこまでも操作性を追求するAmazon。
Amazonの記事を書いているだけで、人生が終わってしまいそうなほど、工夫が詰め込まれています。