Web制作コンセプトやデザイン手法のまとめ
Updated / Published
Web業界に携わって10年ほどになりますが、その期間だけでも様々な制作コンセプトやデザイン手法が誕生してきました。これからも新しい制作コンセプトやデザイン手法が次々と生み出されてゆくのでしょうが、同時にWeb制作としてやらなければいけないことも増えたと痛感させられることしきりです。
PCサイトを作るだけのWeb制作時代から、フィーチャーフォンの携帯端末用サイトをセットで作るWeb制作時代が到来したかと思えば、現在はタブレット・スマートフォンを含めたマルチデバイスなWeb制作時代に。未来のWeb制作時代は一体どうなっているのか...なんてことを考えると頭が痛くなるのは、やらなければいけないことは増えているのにそれに伴うコスト感覚も一緒に増えるどころか、減退しているようにさえ感じられるからでしょうか。
というわけでクライアントにコストについて説明する立場の人たちが理解しておかなければいけないWeb制作コンセプトやデザイン手法について、コスト感覚をあわせてまとめてみました。盛り返せるように頑張っていきましょう、Web業界！
Web制作コンセプトについて
グレイスフルデグラデーション (Graceful Degradation)
- 対象
- 基準はモダンブラウザ
- 説明
- 新しい技術を取り入れるだけ取り入れて制作し、でき得る限りのユーザエクスペリエンスをモダンブラウザ向けに提供すること、そして古いブラウザには必要最低限の機能だけを提供することを目的とした制作コンセプト。
- コスト
- 実制作に係るコスト、確認（テスト）に係るコストともに新しい技術を取り入れて制作する分、増大しがちです。また、日本企業においては、クライアントが大きな企業であればあるほど、実装に漕ぎ着けるまでの説得が困難になりがちで、ディレクション面に係るコストも膨れ上がる側面があります。
ポリフィル (Polyfill)
- 対象
- 基準はモダンブラウザ
- 説明
- モダンブラウザ向けの新しい技術も多く取り入れて制作するが、新しい技術には対応していない古いブラウザにはJavaScriptやブラウザ独自の拡張機能で新しい技術の代替をさせ、どのブラウザにおいても同じ高水準のユーザエクスペリエンスを提供することを目的とした制作コンセプト。
- コスト
- 実制作に係るコストも古いブラウザ用に余分にスクリプトなどを書かなければいけないため増大になりがちです。それ以上に確認（テスト）に係るコストはよく見落とされがちですが、爆発・炎上することもあるほど危険視すべきです。その反面、ディレクション面に係るコストは、役員の方は古いブラウザを常用されていることが多いため、役員プレゼンなどでは受けが良く、すんなり進めていけるとも考えられます。
プログレッシブエンハンスメント (Progressive Enhancement)
- 対象
- 基準は古いブラウザ
- 説明
- どのブラウザにおいても一定水準のユーザエクスペリエンスを提供し、加えてモダンブラウザにはできるだけリッチなユーザエクスペリエンスを提供することを目的とした制作コンセプト。
- コスト
- 実案件ベースにおいてもっとも採用されていることの多いコンセプトだけに、他のコンセプトに比べて実制作コスト・確認（テスト）に係るコストともに抑えることができます。ディレクション面に係るコストも標準的でしょう。
Webデザイン手法について
レスポンシブ (Responsive)
- 対象
- マルチデバイス環境
- 説明
- メディアクエリ、フルードイメージ、フルードグリッドなどのレイアウトを駆使して、どのスクリーンサイズにおいても適切にテキストを読むことができて、ボタンが押せて、レイアウトが見切れないように作り込むデザイン手法。
- コスト
- 実制作に係るコスト、確認（テスト）に係るコストともに膨れ上がります。ディレクション面に係るコストは、クライアントにも説明しやすく受けが良いので、すんなり納品まで漕ぎ着けられるように思えますが、「このときはこういう風にできないの？」などクライアントからの要望が多くでてきて、増大しがちです。
アダプティブ (Adaptive)
- 対象
- マルチデバイス環境
- 説明
- （レスポンシブが常時テキストが読みやすくボタンが押しやすいレイアウトを保てるように変化するのに対し）メディアクエリを用いて、スマートフォン用サイズ・タブレット用サイズのように特定のスクリーンサイズ（ブレーク・ポイント）に対してのみ、テキストが読みやすい、ボタンが押しやすい形のレイアウトへと変更されるように作るデザイン手法。たとえば、ブレーク・ポイント前ではテキストが見切れていたり、ボタンを押すことが困難になっている場合がある。
- コスト
- レスポンシブに比べて、実制作に係るコスト、確認（テスト）に係るコスト、ディレクション面に係るコストすべて抑えることができます。
フルード (Fluid)
- 対象
- 主にPCブラウザ環境
- 説明
- 横幅、パディング、マージンを指定する際の単位を相対値で指定して、ブラウザサイズに応じて相対的・可変的に幅が変わるように作り込むデザイン手法。単位を%で指定している場合はリキッドレイアウト（Liquid Layout）、リキッドレイアウトに加えて最小幅と最大幅を設定している場合はフレキシブルレイアウト(Flexible Layout) 、単位をemで指定している場合はエラスティックレイアウト(Elastic Layout)と呼ばれるものもこのデザイン手法の部類。
- コスト
- 幅固定に比べてデザイン面で苦慮することが多い点が実制作に係るコストを増大させる要因になりがちです。
幅固定 (Fixed)
- 対象
- 主にPCブラウザ環境
- 説明
- 横幅、パディング、マージンを指定する際の単位を全て直感的でわかりやすいpxで指定して作成するデザイン手法。ブラウザサイズに応じた変化はしないので、指定された横幅よりもブラウザサイズが小さい場合は、レイアウトが見切れることになる。
- コスト
- もっとも短期間で作れるので、あらゆる面のコストを抑えられます。ただし、現在のWeb制作においてはクライアントにしっかりと説明責任を果たしておかないと、スマートフォンで読みづらいことなどが後々もめる要因になり、ディレクション面に係るコストを膨れあがらさせるやもしれません。
参考までに以下の動画が簡潔でわかりやすく、雰囲気だけでも理解できるようになっています。
