Posts Tagged “UI”

Twitter bootstrapをよく参考にするけどフロントエンドフレームワークについて思うこと

Twitter Bootstrap というフロントエンド開発フレームワークが2011年の夏くらいに出ました。と時をほぼ同じくして、僕もその当時に携わっていたプロジェクトで同じようなフレームワークを作っていたので、Bootstrapはいいなあ、おしゃれだなあ、と思いつつ、作りかけのフレームワークの完成度を上げていきました。

バージョン1
バージョン2

その際、よくBootstrapのコードを眺めたり真似したりしていたんですが、さすが海外の天才が作ったのは違うよね、勝てないよね、と思っていたんですが、最近は、でもそこまでの機能はいらんよねと思うようになってきました。

IDEAxIDEAさんなんかがゾッコンらしい記事がありますが、そのくせ、「そのままのデザインはイヤだ」みたいな記事もときどき見ます。個人的には、WebサービスのUIは全部Bootstrapになればいいと思ってます。なぜか。デザインがいいから、とかじゃなくて「オレオレデザイン」じゃなくなるからです。保存ボタンや重要なアクションがあるボタンは青で、画面内で吹き出しが出たりページトップに戻ったりするボタンは白、みたいに共通の使い分けができるというのが理由です。

デザインが一般化すればするほど、Webサービスの利用目的を阻害する要因が減っていくはず、と考えます。iPad3の発表会でも、「デジタルデバイスが究極に進化すると、その存在を感じさせなくなる」という一言がすべてです。「このボタンは何だっけ」とか「あの操作をするにはどうすればいいんだっけ」という疑問は全部無駄な行動で、本当はそのボタンを押す目的があるはずです。編集した画像を忘れないように保存しておきたい、とか(保存を自動にすることでそれは達成されるけど気持ち的な問題もあるし)。ユーザにサービス自体の体験を向上させるためには、デザインも機能もすべてが透明になる必要がある、と僕は思っていて、現状、フロントエンド開発で最もそれに近いのはBootstrapじゃないかと思うのです。だからこそ、スキンはあんまり変えない方がいいと思ってます。

サムネイルの感触を試してみる

サムネイルをクリックすると大きい画像を表示します、という見せ方はよくあると思います。そのとき、大きい画像の出し方を考えるあまり、サムネイルの感触はお座成りになっていることがあるなぁ、と思うことがありました。
たとえば JS の Lightbox や Thickbox に代表される表現。あれは、拡大画像をいかにかっこよく見せるか、を考えられたものであって、サムネイルについては、いかに簡単にスクリプトを仕込むことができるか、という部分によって大事さが端折られてるようにも思えるのです。

まずはこれを見てください。

webで3Dテキストを作る実験

3Dテキストの実験です。

この文字、浮き出て見えません?
青い文字を読もうとすると赤い文字が、赤い文字を読もうとすると青い文字が浮き出て見え…る気がします。目の錯覚を利用しています。

3Dテキスト
浮き上がって見えるかな。。。

3Dテキスト
浮き上がって見えるかな。。。

どうだ。ダメか。

※モニタによるっぽいですね。