【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン：D89クリップ（42）

LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカスされたHTML5とか勉強会レポート

[＠IT] PC用表示関連情報

LINE

Hatena

LESS、Twitter Bootstrap！

　2012年3月13日、ニフティで「第27回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやデザイナー向けの勉強会です。今回のテーマは「リッチクライアントをデザインする」でした。

　HTML5やCSS3を利用することで、インタラクティブなコンテンツを作れるようになりました。その代わりにコンテンツをどうデザインするか、どうアプローチするかといったことを、デザイナーだけでなくデベロッパーも意識する必要があります。セッションではデザイナーとデベロッパーの対談があり、それぞれの生の声が聞けました。

HTML5インタラクティブデザイン

　html5j.orgの管理人で、シーエー・モバイルのWeb先端技術フェロー白石俊平さん（@Shumpei）と、同じくシーエー・モバイルのデザイナー稲田真帆さんから「HTML5インタラクティブデザイン - デザイナとデベロッパーによる生対談」というセッションがありました。セッション資料、セッション動画は公開されています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　セッションでは「Developers Summit 2012」の「次期Internet Explorer、IE10とHTML5 API」というセッション向けに作成したWebアプリケーションの制作過程が、白石さんと稲田さんの対談形式で説明されました。作成されたWebアプリケーションは、以下のリンクから確認できます。

　IDB Feed ReaderではIndexedDBを利用したということですが、デザイナーとしては見た目が変わらないと意味がなく、IndexedDBの動作が速くてもあまり面白みがなかったと説明がありました。

　MOGUTARO Eats Files!では、最初は稲田さんがPhotoshopで一枚絵を作りデザインしたそうです。ただし、一枚絵ではアプリケーションの動きが分かからない、さまざまなスクリーンサイズへの対応が難しいといった問題があり、最終的には動作するパーツごとの絵を作成したそうです。

　アプリケーションを作成する中で、デザイナーとデベロッパーの思考の違いとしてデザイナーはUIから考え、デベロッパーは裏回りを作っているからサイトを裏から考えていると感じたそうです。

　デザイナーとデベロッパーが協業する場合の今後の改善点として、ファイルの命名ルールをあらかじめ決めておけばよかったと白石さんは感じたそうです。Japanese Chalkboardではマウスカーソルにチョーク型の画像を利用しています。当初の想定よりも多く画像の変更が発生し、デザイナーの書き出す画像のファイル名と、デベロッパーがコードで指定するファイル名が異なり、コードを何度も修正することになってしまったそうです。

　デベロッパー側としてはプログラミングの都合でコードの修正が発生しているため、デザイナー側伝えづらかったそうです。またデザイナー側としても利用する色ごとにファイル名を分けており、ファイル名の命名方法は意識していたそうです。

　こういったことからも、インタラクティブなデザインを実現するにはコミュニケーションが不可欠だったそうです。またお互いの領域についてある程度理解が必要で、デベロッパーからデザイナーに利用するAPIや技術の説明をすることで、コミュニケーションが活発になったそうです。

ウェブデザイナのためのLESS

　次のセッションは、サイバーエージェントの斉藤祐也さん（@cssradar）の「ウェブデザイナのためのLESS」でした。セッション資料、セッション動画は公開されています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　最初に斉藤さんからLESSの説明がありました。LESSを利用することでCSSをより便利に使えるそうです。具体的には、変数、ミックスイン、入れ子ルール、四則演算、関数といった機能を、CSSで利用できるようになります。

　LESSはnode.jsを利用していますが、LESS.app、WinLESS、SimpLESS、CodeKit などのGUIアプリケーションが登場し、これらを利用してCSSへの変換を行う方法が一般的になってきているそうです。

　斉藤さんはLESSのオフィシャルサイトの日本語訳を個人で作成されています。使用方法やシンタックスが日本語で解説されていて、とても充実しています。最新の情報はオフィシャルサイトの参照を推奨されています。

　また斉藤さんはIITというBoilerplateを開発されています。Boilerplateとは「再利用が可能なコード集」といった意味合いです。IITは斉藤さんが考えるベストプラクティスを集めたLESSのBoilerplateで、コラボレータも募集中ということです。

　LESSには変数やミックスインといった、コードの再利用を前提とした機能がありBoilerplateに適しています。自分なりのBoilerplateを作成することで開発の初期コストを下げることができるそうです。

続・Twitter Bootstrap入門

　槙俊明さん（@making）からは「続・Twitter Bootstrap入門」という発表がありました。セッション資料、セッション動画は公開されています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　Twitter BootstrapはTwitter社が提供するWebアプリケーションのフロントエンドツールで、CSSフレームワークの1つということです。プログラマやデベロッパーはデザインを苦手としていることが多いですが、Twitter Bootstrapを利用すると、手軽にスマートなデザインを作成できるそうです。

　基本的にはCSSのクラスを設定することでスタイルを適用していきますが、一部のコンポーネントではJavaScriptを利用する必要があります。レイアウトのコンポーネントには固定レイアウトと流動レイアウトがあり、レスポンシブなレイアウトも利用できるそうです。

　Twitter Bootstrapの弊害として、そのまま使っていると他のサイトと同じようなデザインになってしまうことがあるそうです。最近ではBootswatchというサイトで、カラーが変更されたテーマが配布されているそうです。またStyleBootstrap.infoというサイトでは、自分で手軽にカラーを変更できるそうです。

　Twitter Bootstrapにはさまざまなコンポーネントがあり、Webアプリケーションの管理画面や、簡単なモックアップの作成に重宝します。ただし同じようなデザインになりがちなので、今後はデザインを差別化するサービスが増えていくと思われるそうです。

HTML5クイズ！

　最後はhtml5j.orgスタッフのの吉川徹さん（@yoshikawa_t）から、「HTML5クイズ！」という発表がありました。セッション資料、セッション動画は公開されています。

　html5j.orgは「Developers Summit 2012」にブースを出していました。ブースでは来場者の方に、HTML5に関するクイズを解いていただきました。筆者もスタッフとしてブースの運営を行っていました。Google、Microsoft、Mozilla、Opera、W3C、Yahoo!からクイズの景品としてノベルティを提供していただき、2日間で207名の方にクイズに参加していただきました。

　実際のクイズは以下のサイトで解くことができます。