私は社内向けのウェブアプリケーションを作っていますが、最近使っているCSSフレームワークtwitter-bootstrapが便利だったので紹介します。といっても開発者には有名すぎるので、今回はResponsive designに絞ってみます。

エンジニアの立場からWebに感じる事

Webデザイナーと話していて隔たりを感じるのが、受け取ったデータに対する考え方です。WebデザイナーはITリテラシーの高くない人のことも常に考慮しているので、可変な部分をなるべく無くし、正確で完全な一意の表現として渡そうとしている気がします。

私は2000年あたりからインターネットを使っていたし、コンピュータに疎いというわけではないので、違った感覚を持っています。それは、”データは過不足無く渡すが表現形式は受け手に任せる”という文化です。UNIXコマンドの出力はそれの典型だと思います。UNIXのやり方は、シンプルな出力結果を無数に繋ぎあわせて複雑な処理を可能にしています。送り手側の装飾は無いほうが、受け手の都合に合わせて加工しやすいのです。HTMLはマークアップ言語というくらいでデータ列に意味を持たせることに専念し、デバイスやユーザに最適な表現形式を生成するのはブラウザの仕事であると考えていました。なので1ピクセルの修正に頭を悩ませるのはナンセンスだとも。

ただし、あらゆるITリテラシーの人がWebに触れる現代で、その考え方はかならずしも万人に適用できる訳ではありません。表現形式を受け手に任せるということは、受け手のスキルもある程度無くてはならないのです。これも職人的なUNIXコマンドの出力と、ユーザフレンドリーなWindowsのおしゃべりな出力を比較すればわかりやすいですね。

しかし、ここにきてスマートフォンの登場により、Web開発者は閲覧者のさまざまな環境に対して一層注意深くなる必要が出てきました。モバイル用ブラウザも多機能になり、ユーザの代わりに表現形式を決めるクッションとして十分機能するようになったのも一因です。

レスポンシブデザイン

これまでは受け手の環境を考慮するとして、HTMLやCSSのスイッチを使用していたサイトも多かったと思います。ケータイ/PCならこちらのリンク、といった具合のも多かったですね。現在はケータイ/PCという区分ではなく、スマートフォン、タブレット、PC、その他将来の未知のデバイスまで考慮しなくてはなりません。それらに対して全て用意していったら大変な労力を要します。

そこで、ユーザエージェント毎ではなく、ウィンドウ幅でデザインを動的に変更できるレスポンシブデザインがちらほら話題になりはじめました。レスポンシブデザインで単一ページを作れば、デバイス毎のページを作る手間もかかりません。

私はなにより、従来のWebデザイナーと、”受け手に表現形式を任せる”文化の折衷案として期待しています。この受け手というのは何もユーザ自身である必要は無く、ブラウザやOS、物理デバイスに肩代わりさせていいわけです。”受け手のコンピュータに表現形式を任せる”、これに足るようブラウザやモバイルデバイスも進化してきています。

twitter-bootstrap

さて前節と脈絡無くフレームワークの話題になりますが、それを実現するには静的なHTMLが作れるだけではダメで、技術的な知識が必要になってきます。自前でCSS/JSを書くと大変なので既存のフレームワークを調べてみましたが、かなりの数があるようですね。

iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ

このうち、Railsアプリケーション用のgemも出ているtwitter-bootstrapが良さそうだったので使ってみました。twitter社が出しているオープンソースのフレームワークです。

Twitter Bootstrap

上記サイトがマニュアルとデモを兼ねています。Scaffoldingのページ下部  Responsive design がレスポンシブデザインの解説になっています。<div class=”hidden-phone”>などと書くだけで簡単にデバイス毎の表示/非表示を指示できますし、divで作ったブロックなどは自動で縦に並んでくれます。

私が気に入ったのは、プログラマの怠惰なところを上手くカバーしてくれてるからです。プログラマは機能さえそろってればいいじゃんという考え方をしてしまうし、デザインの勉強をきちんとしているわけではないから無頓着です。twitter-bootstrapは華美でなく、かつ欲しい部品が揃っているところですね。他のはスクラッチから画像を用意しなければならなかったり、あるいはJavascriptなどで大掛かりに組んであってオーバースペックなものだったりします。.cssと.jsを配置するだけというのも良いです。ただ適用するだけでそこそこcool (いや作ってる本人はかなりcoolだと思ってる) になります。

Webの今後

XHTMLとかもありましたけど、一層、データと表現形式の分離が進んだらいいですね。レスポンシブデザインでもやはりモバイルの制約には適わないという話もありました。
(例: [翻訳]モバイル向けの CSS Media Queries は見掛け倒しである )

一方、動的でインタラクティブなサイトも多いし、そのようなエンターテイメントの世界とで並列していくのでしょう。UIの楽しさは、使いやすさとイコールではないので、作り込むほどに使いにくくなるのでは日常的に情報を得るツールとは別な次元な気がします。