みかづきブログ その3

3ヶ月つづけてみました。

レギュラー番組ゼロでもCM出演があれば暮らしていけるのだろうか?

f:id:kimizuka:20170718181708p:plain

こどもが生まれてからは、朝、一緒にEテレを観てから出社してます。

先日、いつものようにEテレを観ていたら、「コニちゃん」というキャラクターがでてまして、

にほんごであそぼ コニちゃん満腹 [DVD]

にほんごであそぼ コニちゃん満腹 [DVD]

「そういえば、ポンキッキーズに『コニーちゃん』ってキャラクターでてたなー。」

コニーちゃんのクリスマス(カレンダー付き)

コニーちゃんのクリスマス(カレンダー付き)


と懐かしい気持ちになりました。
(コニちゃんも小錦さんが演じており、その時点で懐かしい気持ちになりました)

懐かしい気持ちのまま、

「Eテレを贔屓にしてたけど、たまにはポンキッキーズを観ようかなー。」

と妻に話してみると、

「え!?ポンキッキーズなんてとっくの昔に終わった(※1)よ!」

と言われました。


え!?


まじかよ!



ガチャピン、ムック、いま無職なのかよ!



そりゃー。UQモバイルのCMにもでるわけだ。


「宇宙人家族」篇

と思いました。

(※1)調べてみると、2017年4月から、BSフジで「ポンキッキーズ」が再開したようです。これでCMを降板になっても安心ですね。^ ^





ツイッターで #台無しプロダクト を発表してます!
こちらもよろしくお願いします。

GoogleMapにスクロールを吸収されるのは嫌だ(スマホでは2本指で操作したい)

kimizuka.hatenablog.com

以前、PC版についてはこんな記事を書きましたが、スマホ版はどうしたもんかと思っていました。
(上に透明なDIVとかを置いてクリックすると消えるようにとかしてました)

しかし、最近スマホでGoogleMapを見ると、

f:id:kimizuka:20170716220852p:plain

2本指での操作が必要となってます。
これは便利だ。

いつからこうなったんだろうと調べてみると、

cloud-ja.googleblog.com

去年の11月に導入された機能の模様です。
iframe埋め込みするだけで自動的にこのオプションが有効になる模様。これは便利だ。

だた、マウスホイールイベントのOFFは相変わらずAPI経由じゃないと行えない模様。
API経由で地図の操作を2本指にしたい時は、 gestureHandlingオプション をつかえば良いとのこと。

スクロールとパンの動作  |  Google Maps JavaScript API  |  Google Developers

ただし、APIを無料で呼び出せるのが、1日25,000回までなのでアクセスがあるサイトに導入するのはなかなか迷うところです。

利き手に合わせてUIがうまれるまでの経緯 👐

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに昨日公開できる状態になりました。

(PC版はまだできてないのですが)

今回のサイトで一番こだわったところはなんといっても、聞き手に合わせたUIです。

f:id:kimizuka:20170704221415g:plain

今回はこのUIが生まれた経緯についてまとめたいと思います。

ことのきっかけ

年始から マテリアルデザイン を勉強したことがきっかけです。


とまあ、こんな感じでマテリアルデザインを勉強しては、CSSで再現してというのを繰り返し、
マテリアルデザインっていいなぁって思っていたのですが、

このダイアログをつくったときにちょっと思いました。
「ボタンをboldで処理しているけど、ボタンってわかるのであろうか?」と。

まあ、わかる人にはわかるでしょう。
インスタグラムとかもそうなってますし。

ただ、まったくスマートフォンをつかったことがない人はどうでしょうか?

そもそもスマートフォンが世に出た頃は、
スマートフォンは未知の物体であったわけで、
だからこそ、スキュアモーフィックデザイン(実世界の似たような機能を持ったものをモチーフにしたデザイン)が流行ったわけです。
未知の物体に対して、アフォーダンスを生み出すためのモチーフだったわけなのです。

確かにスマートフォンがこれだけ普及しきった昨今。
もはやスキュアモーフィックデザインの出番は終わったと考える人もいるでしょう。
しかし、本当にそうなのでしょうか。
敢えていま、スマートフォンをもう一度、大きなタッチディスプレイと捉えたとしたら、
どういうアプローチがとれるであろうか?的なことを考えはじめたわけです。

しかし、現実問題、僕は画作りができないわけで、
そんな僕でも相違工夫でなんとかなるアプローチはないかなぁと考えはじめました。

で、思い出したのが、こちらの記事です。

kimizuka.hatenablog.com

大きなタッチディスプレイに対し、
親指で操作できる範囲を示すモチーフとしてカードを斜めに並べるというアプローチ。
これは使えるのではないかと。
マテリアルデザインでもカード型のUIの例はたくさんありますし。
レイアウトの工夫で新しいアフォーダンスを生み出せるのではないかなぁと考えました。

しかし、このデザインには大きな欠点がひとつありました。
レイアウトが完全に右利き、というか右手で操作する用なのです。

しかし、その対策は驚くほどあっさり思いつきました。操作する手に合わせてレイアウトを変更しようと。
昔から野球が好きで、投手の聞き手に合わせて、入る打席を切り替えるスイッチヒッターに対し、
かっこよさを感じていたのが大きな要因のひとつだと思います。
スイッチヒッターのように相手に合わせて自分を変えるUIをつくるぞ。と。そう考えたのです。

そしてそんなこんなで、完成したのが、こちらのUIなのです。

kimizuka.fm


つくってみて、この方向性には大きな可能性を感じました。
手始めに利き手に合わせてデザインを変えるUIをつくってみましたが、
例えば性別によってUIを変えたり、年令によってUIを変えたり、演奏したことがある楽器によってUIをかえたりすれば、
もっともっとつかいやすく直感的なUIをつくれるかもしてないと思っています。
引き続き、研究していこうと思いまいた。

と。そんなかんじです。