ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに昨日公開できる状態になりました。
Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日
（PC版はまだできてないのですが）
今回のサイトで一番こだわったところはなんといっても、利き手に合わせたUIです。
今回はこのUIが生まれた経緯についてまとめたいと思います。
ことのきっかけ
年始から マテリアルデザイン を勉強したことがきっかけです。
要素を変形させるときに、幅変形と高さ変形のタイミングを微妙にずらすとおしゃれということを教えていただきました。https://t.co/y44iypp15b
— 君塚史高 (@ki_230) 2017年5月9日
HTMLとCSSでトグルボタンUIをAndroid風に仕上げてみました。https://t.co/8YK1nDqcyD
— 君塚史高 (@ki_230) 2017年5月2日
CSSでいまどきのメニューボタンのアニメーションをつくりました。https://t.co/WRYnEfDkTi
— 君塚史高 (@ki_230) 2017年4月17日
Android風のスライダーUIをつくりました。
— 君塚史高 (@ki_230) 2017年1月24日
当たり判定とデザインを分離して充分な当たり判定を確保しているところがこだわりの一品となっております。https://t.co/NChysxH4bT
とまあ、こんな感じでマテリアルデザインを勉強しては、CSSで再現してというのを繰り返し、
マテリアルデザインっていいなぁって思っていたのですが、
https://twitter.com/ki_230/status/871573084100149248
このダイアログをつくったときにちょっと思いました。
「ボタンをboldで処理しているけど、ボタンってわかるのであろうか？」と。
まあ、わかる人にはわかるでしょう。
インスタグラムとかもそうなってますし。
ただ、まったくスマートフォンをつかったことがない人はどうでしょうか？
そもそもスマートフォンが世に出た頃は、
スマートフォンは未知の物体であったわけで、
だからこそ、スキュアモーフィックデザイン（実世界の似たような機能を持ったものをモチーフにしたデザイン）が流行ったわけです。
未知の物体に対して、アフォーダンスを生み出すためのモチーフだったわけなのです。
確かにスマートフォンがこれだけ普及しきった昨今。
もはやスキュアモーフィックデザインの出番は終わったと考える人もいるでしょう。
しかし、本当にそうなのでしょうか。
敢えていま、スマートフォンをもう一度、大きなタッチディスプレイと捉えたとしたら、
どういうアプローチがとれるであろうか？的なことを考えはじめたわけです。
しかし、現実問題、僕は画作りができないわけで、
そんな僕でも相違工夫でなんとかなるアプローチはないかなぁと考えはじめました。
で、思い出したのが、こちらの記事です。
大きなタッチディスプレイに対し、
親指で操作できる範囲を示すモチーフとしてカードを斜めに並べるというアプローチ。
これは使えるのではないかと。
マテリアルデザインでもカード型のUIの例はたくさんありますし。
レイアウトの工夫で新しいアフォーダンスを生み出せるのではないかなぁと考えました。
しかし、このデザインには大きな欠点がひとつありました。
レイアウトが完全に右利き、というか右手で操作する用なのです。
しかし、その対策は驚くほどあっさり思いつきました。操作する手に合わせてレイアウトを変更しようと。
昔から野球が好きで、投手の聞き手に合わせて、入る打席を切り替えるスイッチヒッターに対し、
かっこよさを感じていたのが大きな要因のひとつだと思います。
スイッチヒッターのように相手に合わせて自分を変えるUIをつくるぞ。と。そう考えたのです。
そしてそんなこんなで、完成したのが、こちらのUIなのです。
つくってみて、この方向性には大きな可能性を感じました。
手始めに利き手に合わせてデザインを変えるUIをつくってみましたが、
例えば性別によってUIを変えたり、年令によってUIを変えたり、演奏したことがある楽器によってUIをかえたりすれば、
もっともっとつかいやすく直感的なUIをつくれるかもしてないと思っています。
引き続き、研究していこうと思いまいた。
と。そんなかんじです。
