ProtoはレスポンシブWebデザインで構築するためのWebデザインフレームワークです。

レスポンシブWebデザインを使ってWebサイトを構築していくならベースとして使ってみたいのがProtoです。Sassを使ったレスポンシブWebデザイン用のデザインフレームワークです。


サンプルです。


ブロックを追加しました。

Protoの基本要素はブロック、センター、グリッドとなっていて、デスクトップ/タブレット/スマホでクラスを指定します。さらにnot-phoneなどと指定するとスマホの場合だけ非表示にできる要素を指定できます。

ProtoはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

MOONGIFTはこう見る

レスポンシブWebデザインに対して批判的な意見もありますが、個人的には今後のWebサービス開発の主軸として欠かせなくなるだろうと考えています。単純にデバイスごとのビューを用意しても良いですが、デスクトップ/タブレット/スマートフォンと3パターン用意すればそれだけコストがかかってしまいます。

そのため、レスポンシブWebデザインを習得し、構築できるようになれば低コストで多様なデバイスに対応したWebサイトが構築できるようになります。習得は容易とは思いませんが、必ず強力な武器になるはずです。

Proto: Rapid Prototyping for Responsive Web Design

AdamWhitcroft/Proto