CSS Nite LP35フォローアップ（4）松田 直樹さん（まぼろし）

2014年6月14日（土）ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、松田 直樹さん（まぼろし）の『マルチデバイス対応な実案件で使う、Bootstrap のすゝめ』セッションのスライドなどをシェアします。

• スライド

フォローアップ

Bootstrap をはじめとした CSS フレームワークをプロジェクト内でどう活用するか、というテーマでお話させていただきました。アンケートにて「使ってみたくなった」という反応も多くいただきまして大変うれしく思っております。

コンポーネントデザイン・設計ルールとしての重要性をお伝えしましたが、実装におけるCSS フレームワークのメリットとしてはやはり「楽できる」という点です。実装を楽にすることで、サイトの「設計」フェーズにより時間をかけることができるようになります。

設計重視という傾向は、「Content is King」とも言われるように「サイトの本来の目的はコンテンツを伝える」ことを重視することに他なりません。Webデザインという範囲が、「広義のデザイン」を指すようなデザインの原点に還る傾向になってきているわけですね。

この観点から、フレームワークを用いればプロジェクトチームの全員が効率よく「設計」に寄与できる素地ができるのでは、と感じています。ぜひチーム内で Boostrap のスキルを共有してみてください。

「勉強する」という意気込みより、「楽したい！」という動機の方が素早く仲良くなれるかと思います。

ありがとうございました！

以下、アンケートにていただいたご質問への回答です。

Rails + Bootstrap では、使わないコンポーネントをコメントアウトできない？

たしかに、他のフレームワークに Bootstrap などの CSS フレームワークが包含されているケースではこのような疑問は湧きますね。「bootstrap.scss」「_variables.scss」、この2ファイルを自前の作業領域で使うように環境を作ればカスタマイズは問題ないかと考えています。

なぜ WebデザインをIllustratorでされているのか？

SVGが大好き、ということもあるのですが、やはり複数のアートボードを一度に俯瞰できる点がいいですね。特に RWD のカンプを作る際には重宝します。

よく使うコンポーネントは？

これと言って偏りはないのですが、nav コンポーネントなどは使うと楽でしょうね。スマホ表示時には勝手に折りたたんでくれますので。

自社内のみでフローが完結しない場合の利用方法論は？

内外部スタッフが混在している場合など、自社内でフローが完結しないケースでの方がフレームワークを使う意義があると考えています。やはり「ルール」が事前にあることは意思疎通の改善にも繋がります。

動画

マルチデバイス対応な実案件で使う、Bootstrap のすゝめ／ 松田 直樹（まぼろし） from CSS Nite on Vimeo.