CSS Nite LP35フォローアップ（2）小川 裕之さん（ツクリベ）

2014年6月14日（土）ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、小川 裕之さん（ツクリベ）の『レスポンシブWebデザインのワークフロー』セッションのスライドなどをシェアします。

• スライド

フォローアップ

実例を交えてRWDをウォーターフォールのワークフローで進めるリスクと、それを改善したプロトタイプを中心としたワークフローの話をしました。

失敗例のように同じようなトラブルにあったという話は周りでもよく聞きます。これからレスポンシブWebデザインを始める方や、既に経験はあるけれど進め方に不安がある方は参考にしていただければ幸いです。また特に問題なく進められているという方も、その進め方にリスクが潜んでないか、これを機に見つめ直してみてください。

セッションの中でも話しましたが、ワークフローを変えるというのは簡単なことではありません。環境や立場上、変えたいと思っても難しいという話はよく耳にします。私もそういう時はあるのですが、その中でも他の立場の人に早めに情報を共有してもらうようにしております。それだけでもリスクに気がつく早さが変わってきます。

成功例のようなワークフローが浸透するにはまだ時間がかかるかも知れませんが、まずは取り入れられるところから実践してみてください。

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

以下、アンケートでいただいたご質問に回答致します。

プロトタイプは全ページ作るのか？

大枠の構成が異なるページの数だけ作ります。従って、トップと下層のベースとなるフォーマットのみが多いです。その他、他と異なる構成のページ、または機能の実装を確認してもらいたいページがあれば作成します。
事例では、トップと2種の下層ページフォーマット、lightboxを使用したギャラリーページのプロトタイプを作成しました。

カンプを作るときはどのプロトタイプの後か？また全ページ作るのか？

カンプを作るのはプロトタイプの後です。失敗例でも取り上げましたが、先にカンプを作ってしまうと実装で苦労する可能性があります。また、カンプを作るケースで進めるときは基本全ページ作ります。

RWDのメリット・デメリットとクライアントへの説明

下記スライドの14Pにメリット・デメリットをまとめてますので参考にしてください。また、どうしてもモバイルとPCで構成や内容を大きく変えたい場合、想定されるユーザーの利用シーンが限定的である場合などは、RWDでは無理な設計になりがちなので専用サイトを作るなど提案をしております。
レスポンシブWebデザインの基礎

プロトタイプ作成に使ってるツールは？

今回の実例ではオリジナルのグリッドシステムをベースに作成しました。ただ、最近の案件ではCSSフレームワークを使用して作成してます。

CSSフレームワークの活用については松田さんの資料を参考にしていただければと思います。またディレクターであれば、同様に松田さんが取り上げてましたWebflow、Adobe Edge Reflowなどのツールの使用を提案致します。
Webflow
Edge Reflow CC

動画

レスポンシブWebデザインのワークフロー／ 小川 裕之（ツクリベ） from CSS Nite on Vimeo.