レスポンシブWebデザイン制作のワークフローもモバイルファーストで

レスポンシブWebデザイン制作のワークフローは今までのWebサイトのデザイン制作ワークフローと違う手法が適しているかもしれません。
 

従来のワークフロー

今までのWebサイトのデザイン制作ワークフローは、PC用、スマホ用のワイヤーフレーム、デザインカンプといったドキュメントをもとに、クライアントと認識合わせをしてから、HTMLコーディングを始めるのが通常です。
 

レスポンシブWebデザインのワークフロー

しかし、レスポンシブWebデザインの場合、画面横幅に応じて画面表示が変化する仕組みなので、PC用、スマホ用といった概念はなく、画面横幅に応じたすべてのワイヤーフレーム、デザインカンプを準備するのは非現実的です。
  
レスポンシブWebデザイン制作のワークフローは、クライアントと認識合わせする用にワイヤーフレーム、デザインカンプを用意する方法は回避します。
 
まずは実際にHTMLコーディングをしたモックアップ、プロトタイプをつくって、モックアップ、プロトタイプをもとに、見せ方・動作などをクライアントと認識合わせて、細部のHTMLコーディングをすることで終わりになります。
 
さらに、CSSフレームワークを使えば効率的にモックアップ、プロトタイプを作ることができます。
 

ワークフローもモバイルファーストで

従来のWebサイト制作はまずPC用の画面デザインをクライアントと認識合わせしてPC用の画面デザインが確定してから、そのあとにスマホ用の画面デザインを決めていくことがよくある方法です。
 
その場合、まずはPCサイトを先にリリースして、スマホで閲覧してもPCサイトを見せる形が採用されることが多いです。
 
しかし、レスポンシブWebデザインは画面横幅に応じて画面表示が変化する仕組みなので、PC用、スマホ用といった概念はなく、先にPC用、そのあとにスマホ用といった進め方は合わないのです。
 
といっても基準は必要なので、PCではなく、スマホを基準に作成するとよいと思います。モバイルファーストです。
 
理由としては、レスポンシブWebデザイン採用する理由がスマホ対応であることが多かったり、ワンソース管理なので画像などが大きいと表示すると重かったり、タッチデバイス特有の動きに対応できていなかったりするためです。
 
また、ユーザもPCよりスマホから閲覧することが多くなっているので、スマホ重視のモバイルファーストがおすすめです。
 

まとめ・感想

レスポンシブWebデザインで製作する場合は、従来の製作手法とは違うマインドが必要なので、初めてレスポンシブWebデザインを利用するときは事前にワークフローの認識合わせをしておくことが重要です。
 
そして、スマホを重視して、スマホを基準に作成するモバイルファーストがおすすめです。