読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

レスポンシブWebデザインの工数

「レスポンシブWebデザインって、工数的には良いの?悪いの?」という検証を兼ねて、3年前に作成したサイトを「レスポンシブWebデザイン」でリニューアルしてみました。

結論から言うと、制作工数は増えます。具体的に言うと、

「画面設計からビジュアルデザイン、html、css、jsまでの、いわゆるテンプレート作成までは、工数が増える。ただし、フロントエンドやバックエンドと言われる行程に関しては、工数は削減されるかもしれない。」

といった感じです。

工数の内訳

作業時間を測っていたのですが、内訳をかんたんに紹介すると、こんな感じです。

  • ワイヤーフレーム作成 1時間(全体の2%)
  • ビジュアルデザイン 8時間(全体の18%)
  • テンプレート設計 8時間(全体の18%)
  • コーディング 28時間(全体の62%)

合計45時間。

ワイヤーフレーム作成とビジュアルデザイン(全体の20%の工数)

ワイヤーフレーム作成とビジュアルデザインに要した工数を合算すると全体の2割でしたが、用意するレイアウトパターンは、スマホ版、タブレット版、PC版の3パターンなので、レスポンシブWebデザインじゃなくても、ここの行程でやることはほぼ変わらないと思います。

テンプレート設計(全体の18%の工数)

ここで言うテンプレート設計というのは、テンプレートを大量生産する場合に必要となる「基本方針」や「骨組みのコーディング」までのことです。

ディレクトリ構造を決めたり、フォルダ名・ファイル名の命名規則をつけたり、PHPを使う場合は、変数の設定をしたりします。レスポンシブWebデザインの場合は、これらに加えて、「ブレークポイント」の設定を実装する必要があります。
ブレークポイントについては以下の記事がわかりやすいです。

なので、まずは細かい装飾は置いておいて、レスポンシブWebデザインの根幹となる設計「cssのメディアクエリを使った、画面幅によるレイアウト変更」の実装を行います。通常のWebサイトでは実装・検証しない内容が含まれるので、工数が増える可能性があります。

コーディング(全体の62%の工数)

ここで言う、コーディングというのは、「ビジュアルデザイン」を再現するために、cssやjsなどで細かい装飾を実装し、テンプレートを大量生産してく作業のことですが、多くの時間(全体の6割以上)を割く結果となりました。以下苦戦した内容。

  • 背景画像の伸縮には、css3のbackground-size:containと一緒に、jsで要素の高さを算出する必要があった
  • 要素の高さを出力するjsの記述で、$(window).width()の記述位置が間違っていた
  • モーダル画面でカルーセルを実装しようとしたが、関数の記述順序が間違っていた

詳細は別で書こうと思いますが、要するに、予期せぬ不具合が多々発生して思いの他時間がかかった、ということです。ただし、解決策がわかれば、次は同じところで苦労しないはずなので、慣れるまでは時間がかると言ったところでしょうか。

レスポンシブWebデザインで大変なのは

以上より、レスポンシブWebデザインでは「テンプレート設計」や「コーディング」の作業で工数が増える可能性が高いです。

今回は個人の趣味のサイトだったので、自分の思うように効率化しましたが、これが企業サイトなどの場合、分業が発生して、「ビジュアルの通りにちゃんと再現してよ!」「いやいや時間かかるんだよー!」ともめることが必至でしょう。
なので、企業などチームでレスポンシブなサイトを作る時は、ビジュアルデザインなど上流工程の人も、その特徴をしっかり理解する必要があります。

例えば、ビジュアルに強いこだわりを持っている方は、数pxのズレも許せなかったりしますが、レスポンシブWebデザインの場合、数pxの調整はかなり難しいです。paddnig、marginによる余白の調整なんかは特にそうだと思います。

工数削減方法

ということで、少しでも工数を削減するために実践した工数削減方法です。

IEをサポートしない

css3を使いまくることで、横幅可変に耐えるテンプレートの実装が格段に楽になります。なので、css3をサポートしてないブラウザは思い切って捨てました。
企業サイトなどではそうはいかないケースがあると思うので、もし、IEをサポートする場合は、おそらく2倍3倍の工数がかかってくると思います。

フラットデザインにする

今回フラットデザインにしたのは、流行という理由と、工数削減という意味がありました。デザインに無駄がなく、必要最小限の画像しか使わないので、テンプレートを作成し易くなります。
デザインに対しては賛否両論ありますが、コーディングの工数削減という意味では、価値があると思います。

PHPやSassを使う

拡張機能だったり、フレームワークを使うと、やはり作業は捗ります。PHPを使えばhtmlの無駄を大幅に減らせますし、SassのCompassも使えれば、cssの実装は楽になります。
ただし、これらは慣れるまでは逆に時間がかかってしまうかもしれません。