フラットデザインだけど3D回転するUIを実装できるjQueryプラグインつくった - TURNBOX.js
前々回のエントリで紹介した2.5dBUTTONをつくって「2.5の次は3.0だろ」ってことになって作った。過去に自社サイトのために作ったものだけれど、周囲で評判が良かったのでjQueryプラグインとして再構築して実装サンプルとソースと併せて公開しておいた。
こんな感じで使ってる
通常と詳細の表示切替はフェードイン・アウトに比べ、より連続的で関係性が理解しやすいアニメーションなので、ユーザはクリッカブルエリアの学習を往路で概ね復路分まで獲得できる。戻るボタンを要しないのでレイアウトの自由度も高い。またブラウザのサイズが小さくて詳細表示時には狭いといった場合においても、下の画像のように切替前・後の縦の長さを異なる値にできるのでとても便利だ。いわゆるアコーディオンの機能と同じだがそれの場合はクリックした要素がヘッダとしてその場に残りトグルスイッチとして機能することが多い。そしてユーザは大体開きっぱなしにするものだ。これの場合は全面がトグルスイッチの機能を有しているので完全な切替が可能だ。スマホなどの限られた僅かな表示領域においてもより多くの余白を確保したり、あるいは沢山のコンテンツを表示することができる。ちなみにタバコの箱を見ていて思いついた。
フラットデザインのおかげでレイヤー数は大幅に減った。コードも減った。工数を引き下げただけでなくレンダリング時間も短くなったが、レイアウトの定石を踏んでいくだけでビジュアルが画一化しがちだ。様々な試行錯誤はあれど、元々が抽象化を進めた代物だったせいなのか工夫はまるでじりじりと後ずさりしているだけかのように映ってしまうものも少なくない。
そこで別のアプローチのものを一つ作ってみた。フラットな外観はそのシンプルさゆえにインタラクションの表現を豊かにするだけでも新鮮な印象を与えやすい。ユーザの期待する動作には裏切らず、惑わすことなくして意外性を含めることが可能だとおもう。
とはいえ本プラグインの実装サンプルについては提供する機能のわかりやすさを優先したため、かなり虚飾的までに作っており不愉快な操作感ではあるが（"UPLOADER"の連続性を保った振る舞いはとても気に入ってる）シンプルにまとめさえすれば案外うまくいくんじゃないかなと思っている。
よかったらつかってね。
bandcampでNUITOの音源リリースした
フラットだけどhoverで出っぱってon_clickでへっこむボタンジェネレータ作った - 2.5dBUTTON
昨年の今頃に作ったのだけれど、完成したらなんとなくどうでもよくなってしまってその後すっかり存在を忘れていた。これからはフラットデザインがどうのこうのと騒がれてた時期だったと思う。今更もういっかなとためらいもしたけど公開しておいた。
こんなの。
GIF動画なのでフレームレートは低いけど、大体こんな感じ。形状・色・アニメーションのスピード、出っ張る距離がカスタマイズできるジェネレータを用意した。気に入ったのができたらZIPでDLできる。
作るに至った経緯
ボタンを押すとヘっこむ振る舞いは、ユーザの物理的なマウスクリックやキー押下の感触とは一致していたのだけれど、クリック感の無いタッチ端末が登場してからは、そこに多少の違和感を覚えるようになった。これを解消し、触れるという行動に一先ず最適化したのがフラットデザインなのかなと勝手に思ってるのだけど、デバイス別に用意するのではなくハイブリッドに使えるものはないのかなと思ったのがきっかけ。
たとえばiOSのSafariではタッチするとhoverに指定した挙動を再現する。これでは良くないのでタッチデバイスで読み込んだ場合(*1)は何の変哲もないフラットなボタンとして振る舞うようにした。余計なことを考えずともレスポンシブサイトなどに利用できるはずなので幾らか便利かなと思っている。
(*1 Modernizrで取得)
アイコンフォントを使ってる
アイコンは画像ではなくkudakurage氏のLigature Symbolsを利用している。フォントなので拡縮にもジャギらず対応し、色の変更も自由なので「icon_arrow_white_2x.png」みたいなものを量産しなくていいのでありがたい。かつてのアイコンフォントといえば、アイコンの持つ意味とは無関係な一文字にそれぞれ割り当てられていたが、これは文字列を置換する仕組み（例:download→ダウンロードアイコン）なのでとてもセマンティック。最近のIEなら対応しているし、レガシーIEユーザもだいぶ数が減ってきているのでメンテナンス性を考えると選択してよいんじゃないのと思う。
よかったらつかってくださいね。
とはいえ、一年前につくったものはやっぱり飽きてしまってるので近頃はレガシーIEにもスムーズにデグレードできるモダンくさいUIを作ってます。
体内アルコール量を予測するiPhoneアプリをリリースしたよ - alcCalc
とある日、エンジニアと仕事中に飲みに行ったのだけれど「飲んで車で帰れる時間っていつなのかわからんから結局会社に泊まるしかないよね」って話になった。そういうアプリあるんじゃないのかなとって思って調べたら意外と見当たらなかったので、じゃあ作ってみるかってテンションになってiPhoneアプリ開発については未経験だったけれども仕事の合間の時間を利用してちまちまと作ってた。
そしてできたのがこれ
https://itunes.apple.com/jp/app/alccalc-arukoru-fen-jie-ji/id887557458?mt=8&uo=4&at=10l8JW&ct=hatenablog
プロモ動画もつくった
alcCalc - YouTube
1日目は絵コンテで2日目は3DCGのテストと環境構築。その後、3日間ドラフトと2D素材を作って2日本番レンダリングの計1週間で作った。iPhoneアプリの映像制作については手早く作れることがわかったので次の記事くらいに詳しく記しておこうと思う。
そもそも算出は可能なのか
なんとなく可能だろうという半端な憶測で初めて使うXcodeでモックアップを作っていたのだけれど、UIの完成度が高まるに連れて不安が大きくなってきたのできちんと調べたところ意外と簡単であることがわかった。当然個人差はあるものの、カジュアルなものを想定していたので目安に足るならそれで十分だった。
機能とか
提供する情報
飲みはじめのタイミングでお酒の種別と量を入力したら設定された体重や性別（体内水分率）に基づいて現在の体内残存量・呼気濃度・血中濃度を概算して表示。併せて二日酔いの判定や分解完了時刻及びその残時間の表示する。
プリセットとは別に汎用入力もつくっておいた
世の中のお酒の種類ってどのくらいなのかなと思ってWikipediaで一覧を見てみたらとんでもない物量に面食らってしまった。プリセットを充実させると手軽さが損なわれるので居酒屋に置いてそうなものだけに留めて汎用入力に逃がした。個人的には生中ボタン１つだけでよかった。
英語対応した
翻訳なんて外注に投げれば良いのでこれはすべきだと思う。たとえばGengoなんかは安いしとても早い。
Gengo | オンラインで２４時間発注できる翻訳サービス
シェア機能もつけた
現在の酩酊具合に基づいたテキストが差し込まれる。めちゃくちゃ飲むと背景がアブノーマル色に偏移してゆき文章に誤字が含まれてくる。
せめてUIくらいは
機能も乏しければ壮大なコンセプトも何も無いアプリだ。しかしそのお陰で制約も殆ど無い。普段なら鬱陶しいと思うくらいのアニメーションやインタラクションをなるべく多く実装しようと決めた。結果として全体の9割くらいの時間を割いてしまったり、パーティクルを乱用して実機が熱々になったりもしたけれど、うまくシンプルにまとまったと思う。
しょうもない機能も入れたい
通信して統計をとったりログ機能をつけて月別摂取カロリーとか様々な情報を提供したり二日酔い判定を学習したりする機能は入れたかったのだけど面倒だから次のアップデートに保留した。代わりに大量に飲んだらフィーバーっぽい演出になったり、振ったら泡を模したパーティクルが増えたり実現できたものは色々入れておいた。
良かったらダウンロードしてね！
https://itunes.apple.com/jp/app/alccalc-arukoru-fen-jie-ji/id887557458?mt=8&uo=4&at=10l8JW&ct=hatenablog
