ウォーターフォールモードに別れを告げる: レスポンシブ Web デザインを実現するための 5 つのステップ

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることができたことをお祝いします。彼らを説得するのは難しいだろうが、今満足していてはいけない。現在、このプロジェクトで最も重要な問題は、チームを率いてレスポンシブなデザインを構築するにはどうすればよいかということです。

応答性の紹介

典型的な「ウォーターフォール モデル」開発プロセスはよくご存知でしょう。システム要件の分析から始まり、設計、フロントエンドとバックエンドの開発、そして最後に評価と実装が行われます。ウォーターフォール開発の主な特徴は直線性です。1 つのフェーズが完了すると、次のフェーズがすぐに開始され、2 つのフェーズがほぼシームレスに連携します。 「ウォーターフォールモデル」の開発プロセスは、一連の段階を順番に実行するように設計されており、作業を一方向に進めるだけで済みます。残念ながら、問題が蓄積され続けると、さまざまな困難な問題に対処するために速度を落とさなければなりません。

「ウォーターフォールモデル」開発プロセスデモンストレーション図：

いわゆる「レスポンシブウェブデザイン」とは、ウェブサイトの構築過程で同じコードセットを使用することで、ウェブサイトのコンテンツをPC、タブレット、スマートフォンのブラウザで正常に表示できるようにすることです。 PC、モバイルなど向けに同じコンテンツの複数のバージョンを作成する時代は終わりました。これで、あらゆるオペレーティング環境に対応できる非常に柔軟な Web サイトを構築できるようになります。

「レスポンシブ」なデザインプロセスを次の図に示します。

では、なぜウォーターフォール モデルではなくレスポンシブ デザインを使用するのでしょうか。ウォーターフォール モデルは標準のデスクトップ ブラウザーのみを対象に設計されており、他の設計および開発環境をほとんど考慮していません。これが最大の欠点です。アジャイル レスポンシブ デザインでは、これらのクロスプラットフォームの問題を最初から考慮し、ウォーターフォール モデルでは省略されるタスクである、より詳細な初期フレームワークの構成、設計、テストを実行します。実装されると、レスポンシブ デザインに基づく Web サイトは、PC、モバイル デバイス、タブレットで正しくレンダリングされます。

さまざまなデバイスにおけるレスポンシブ デザインの効果:

では、チームでレスポンシブ Web デザインを実装するにはどうすればよいでしょうか。以下では、一般的なウォーターフォール開発の手順を確認し、レスポンシブにする方法を説明します。

レスポンシブウェブデザインの実装方法ステップ1: 計画

ウォーターフォール開発

ウォーターフォール開発プロセスでは、フレームワーク図は主にレイアウトとウィジェットで構成されます。これらは特定のサイズ（通常はピクセル単位）に設定されており、調整の余地はほとんどありません。これらのワイヤーフレームは特定のグリッド/レイアウト寸法を提供しますが、画面解像度が異なるとレイアウトが変わってしまい、意味をなさなくなります。その結果、ナビゲーション メニューが使用できなくなり、フォーム ページにアクセスできなくなり、インターフェイスが乱雑になります。

レスポンシブウェブデザイン

この問題を解決するのは難しくありません。異なるビューごとに異なるウィジェットを設計する必要があり、ページ全体を「ページ」として扱わないでください。ページは最小の単位ではありません。むしろ、スクロールバー、テキスト コンテンツ、フォーム、その他のコンポーネントが、ページ全体を構成する最小の要素です。ワイヤーフレームはさまざまな画面サイズを考慮する必要があるため、レイアウトの寸法は固定されません。レイアウトは3列から2列に変更でき、最小の表示デバイス（モバイルスマートフォン）では1列表示に調整することもできます。

同時に、Web サイトのユーザー エクスペリエンスも変更する必要があります。小さな画面では、スクロール バーをマウスで操作するだけでなく、指で操作できるようにする必要があります。つまり、ブロック図はテンプレートではなく単なるプロトタイピング ツールであり、ディスプレイ上で動作することを確認するには開発とテストが必要になります。これらの初期テストの前に設計が開始されると、未知の開発上の問題が発生します。いずれにせよ、プロジェクトの基本的なビジョンはそのまま維持する必要があるため、部門間のオープンなコミュニケーション チャネルを維持することが不可欠です。

ステップ2: デザイン

ウォーターフォール開発

ウォーターフォール開発では、次のステップはフレームワーク図に従って設計し、フォント、色、間隔などの設計ツールやテクニックを通じてカラフルで生き生きとしたものにすることです。通常、デザインは何度も変更され、デザインの継続的な更新を通じて、ブランドとデザインの仕様が徐々に改善されます。

レスポンシブウェブデザイン

割り当てられたプロジェクトの時間とリソースをより有効に活用するには、レスポンシブ Web デザインでさまざまなサイズのレイアウトとウィジェットを設計する必要があります。レスポンシブ Web デザインは、もはやピクセルパーフェクトなデザインではありません。デスクトップ ブラウザーと互換性のあるデザインを完成させること自体が非常に困難ではありますが、固定されていないグリッド内で柔軟なウィジェットを設計し、さまざまなサイズのレイアウトやウィジェットを設計するという作業負荷は管理可能であると考えています。

あらゆる環境で柔軟なレイアウトを実現する HTML を使用することで、デザインの品質が向上します。全体的なユーザー エクスペリエンスに焦点を当てるのではなく、すべてのブラウザーの幅を考慮するのは時間の大きな無駄です。たとえば、回転バナーのテキストが小型のモバイル デバイスでレスポンシブであること、標準的な人間の指先として業界で推奨されている最小サイズ 44 ピクセル内に収まるように設計されていることを確認する必要があります。ユーザー エクスペリエンスを考慮した設計は、あらゆる画面サイズでの製品の外観と操作性を考慮した設計と同じくらい重要です。

ステップ3: 開発

ウォーターフォール開発

ウォーターフォール型の開発方式では、設計図を顧客に確認してもらうと、その後のフロントエンド開発の段階で細かい画面でさまざまな問題が見つかります。残念ながら、ウォーターフォール モデルの線形的な性質により、これらの予期しない問題はプロジェクトの進行中にのみ発生する可能性があります。

レスポンシブウェブデザイン

俊敏かつ応答性の高い開発プロセスでは、設計は柔軟なグリッドに基づいている必要があります。コンポーネントは開発者によって計画され、プロトタイプ化され、各段階でテストされる必要があります。コンポーネントが可能な限り最小の構成要素となるようにするには、コードを最適化する必要があります。コンポーネントはレイアウトに簡単に追加したり、レイアウトから削除したりできるため、これは最初の設計では計画されていませんでした。開発者、設計者、プランナー間の良好な連携により、必要な変更によって発生する問題を回避します。このようにして、チームメンバーは合意に達し、問題を早期に発見して解決することができます。

ステップ4: 忍耐力のテスト

ウォーターフォール開発

標準的なウォーターフォール開発の最終段階は、ユニットテストと機能テストを通じてサイトを評価することです。この段階で問題が発見されると、プロジェクトの当初のコンセプトを再計画する必要が生じる可能性があり、場合によっては、新しく発売されたデバイスがプロジェクトに大きな打撃を与えることもあります。要件分析チームと設計チームは、これらの変更を考慮して再計画と再設計を行う必要があり、修正にさらに多くの時間を費やすことになります。

レスポンシブウェブデザイン

レスポンシブ開発プロセスでは、すべての段階が複数のブラウザとさまざまな画面サイズでテストされるため、問題を早期に発見できます。これにより、特定のモバイル環境がフレームワーク図と一致しない問題が明らかになり、さまざまなプラットフォームでの設計のパフォーマンスを理解することもできます。レスポンシブ Web デザインにより、プロジェクトのプロトタイプができるだけ早く完成し、顧客が結果を早く確認して双方にメリットのある状況を実現できます。

ステップ5: 問題を早期に発見し、早期に解決する

ウォーターフォール開発

従来のウォーターフォール開発プロセスでは、設計とインターフェースを反復するプロセスはありません。ウォーターフォール開発では、プロジェクト構築プロセスの細かい点が無視されるため、問題が発生し、顧客の期待と矛盾することになります。顧客との継続的かつタイムリーなコミュニケーションを通じて、最終的に問題は解決されましたが、これらの誤った決定の重大さは認識されませんでした。

レスポンシブウェブデザイン

レスポンシブ ソリューションでは、動的コードを使用して、同じ進行状況を維持しながら、実装プロセスの各ステップを顧客に示します。このように、この初期作業は次の段階の作業の推進に役立ち、締め切り前に重要な修正を行うことができます。

要約する

アジャイルなレスポンシブ Web デザインを採用すると、ウォーターフォール モデルから解放されます。これにより、設計と開発の作業が簡素化され、効率が向上し、あらゆるプラットフォームでブランド イメージが最大化されます。本当の課題は、ウォーターフォール型開発から脱却し、レスポンシブなデザイン チームになることです。しかし、次の 5 つの手順に従うだけで、ウォーターフォール モデルとはおさらばし、レスポンシブ Web デザインと「こんにちは」と言えるようになります。

ゲスト著者の Travis Sheppard 氏は、BGT Partners のテクノロジー担当副社長です。 BGT は、2010 年、2011 年、2012 年に Advertising Age 誌によって最も働きやすい 15 の企業に選ばれました。同社は世界中の企業にインタラクティブなマーケティングおよびテクノロジーソリューションを提供し、ブランドプロモーションの強化、より多くのパートナーの獲得、ビジネス変革の実行を支援しています。

出典: さようならウォーターフォール: レスポンシブ Web デザインを実装するための 5 つのステップ