レスポンシブ Web デザイン手法を実装し、ウォーターフォールモデルに別れを告げる 5 つのステップ (グラフィックチュートリアル)

ウォーターフォールモデルに別れを告げましょう: レスポンシブ Web デザインを実現するための 5 つのステップを教える Sanlian チュートリアル

次の Web デザインプロジェクトはレスポンシブにする必要があると上司をようやく納得させることができたことをお祝いします。彼らを説得するのは難しいだろうが、今満足していてはいけない。現在、このプロジェクトで最も重要な問題は、「チームを率いてレスポンシブなデザインを構築するにはどうすればよいか」ということです。
レスポンシブな導入典型的な「ウォーターフォールモード」の開発プロセスはよく知られているでしょう。システム要件の分析から始まり、次に設計、フロントエンドとバックエンドの開発、最後に評価と実装が行われます。ウォーターフォール開発の主な特徴は直線性です。1 つのフェーズが完了すると、次のフェーズがすぐに開始され、2 つのフェーズがほぼシームレスに連携します。「ウォーターフォールモデル」の開発プロセスは、一連の段階を順番に実行するように設計されており、作業を一方向に進めるだけで済みます。残念ながら、問題が蓄積され続けると、さまざまな困難な問題に対処するために速度を落とさなければなりません。
「ウォーターフォールモデル」開発プロセスデモンストレーション図：
ウォーターフォール開発プロセス

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

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

では、チームでレスポンシブ Web デザインを実装するにはどうすればよいでしょうか。以下では、一般的なウォーターフォール開発の手順を確認し、レスポンシブにする方法を説明します。
レスポンシブ Web デザインを実装する方法ステップ 1: ウォーターフォール開発を計画するウォーターフォール開発では、フレームワークダイアグラムは主にレイアウトとウィジェットで構成されます。これらは特定のサイズ（通常はピクセル単位）に設定されており、調整の余地はほとんどありません。これらのワイヤーフレームは特定のグリッド/レイアウト寸法を提供しますが、画面解像度が異なるとレイアウトが変わってしまい、意味をなさなくなります。その結果、ナビゲーションメニューが使用できなくなり、フォームページにアクセスできなくなり、インターフェイスが乱雑になります。
レスポンシブ Web デザインはこの問題を難なく解決します。異なるビューごとに異なるウィジェットを設計する必要があり、ページ全体を「ページ」として扱わないでください。ページは最小の単位ではありません。むしろ、スクロールバー、テキストコンテンツ、フォーム、その他のコンポーネントが、ページ全体を構成する最小の要素です。ワイヤーフレームはさまざまな画面サイズを考慮する必要があるため、レイアウトの寸法は固定されません。レイアウトは3列から2列に変更でき、最小の表示デバイス（モバイルスマートフォン）では1列表示に調整することもできます。
同時に、Web サイトのユーザーエクスペリエンスも変更する必要があります。小さな画面では、スクロールバーをマウスだけでなく指でも操作する必要があります。つまり、ブロック図はテンプレートではなく単なるプロトタイプ作成ツールであり、ディスプレイ上で正しく機能することを確認するには、ある程度の開発とテストが必要になります。これらの初期テストの前に設計が開始されると、未知の開発上の問題が発生します。いずれにせよ、プロジェクトの基本的なビジョンはそのまま維持する必要があるため、部門間のオープンなコミュニケーションチャネルを維持することが不可欠です。
ステップ 2: ウォーターフォールモード開発の設計ウォーターフォールモード開発の次のステップは、フレームワークダイアグラムに従って設計し、フォント、色、間隔などの設計ツールとテクニックを使用して、カラフルで活気に満ちたものにすることです。通常、デザインは何度も変更され、デザインの継続的な更新を通じて、ブランドとデザインの仕様が徐々に改善されます。
レスポンシブ Web デザイン割り当てられたプロジェクトの時間とリソースをより有効に活用するために、レスポンシブ Web デザインでは、レイアウトとコンポーネントをさまざまなサイズで設計する必要があります。レスポンシブ Web デザインは、もはやピクセルパーフェクトなデザインではありません。デスクトップブラウザーと互換性のあるデザインを完成させること自体が非常に困難ですが、固定されていないグリッドで柔軟なウィジェットを設計し、さまざまなサイズのレイアウトとウィジェットを設計する作業負荷は管理可能であると考えています。
あらゆる環境で柔軟なレイアウトを実現する HTML を使用することで、デザインの品質が向上します。全体的なユーザーエクスペリエンスに焦点を当てるのではなく、すべてのブラウザーの幅を考慮するのは時間の大きな無駄です。たとえば、回転バナーのテキストが小型のモバイルデバイスでレスポンシブであること、標準的な人間の指先として業界で推奨されている最小サイズ 44 ピクセル内に収まるように設計されていることを確認する必要があります。ユーザーエクスペリエンスを考慮した設計は、あらゆる画面サイズでの製品の外観と操作性を考慮した設計と同じくらい重要です。
ステップ3：ウォーターフォール方式での開発ウォーターフォール開発方式では、設計図をお客様に確認していただいた後、フロントエンド開発を行うと、細かい画面でさまざまな問題が見つかります。残念ながら、ウォーターフォールモデルの線形的な性質により、これらの予期しない問題はプロジェクトの進行中にのみ発生する可能性があります。
レスポンシブ Web デザインアジャイルでレスポンシブな開発プロセスでは、デザインは柔軟なグリッドに基づいている必要があります。コンポーネントは開発者によって計画され、プロトタイプ化され、各段階でテストされる必要があります。コンポーネントが可能な限り最小の構成要素となるようにするには、コードを最適化する必要があります。コンポーネントはレイアウトに簡単に追加したり、レイアウトから削除したりできるため、これは最初の設計では計画されていませんでした。開発者、設計者、プランナー間の良好な連携により、必要な変更によって発生する問題を回避します。このようにして、チームメンバーは合意に達し、問題を早期に発見して解決することができます。
ステップ 4: 忍耐強いテストウォーターフォール開発標準的なウォーターフォール開発の最終段階は、ユニットテストと機能テストを通じてサイトを評価することです。この段階で問題が発見されると、プロジェクトの当初のコンセプトを再計画する必要が生じる可能性があり、場合によっては、新しく発売されたデバイスがプロジェクトに大きな打撃を与えることもあります。要件分析チームと設計チームは、これらの変更を考慮して再計画と再設計を行う必要があり、修正にさらに多くの時間を費やすことになります。
レスポンシブ Web デザインレスポンシブ開発では、すべての段階が複数のブラウザーとさまざまな画面サイズでテストされるため、問題を早期に発見できます。これにより、特定のモバイル環境がフレームワーク図と一致しない問題が明らかになり、さまざまなプラットフォームでの設計のパフォーマンスを理解することもできます。レスポンシブ Web デザインにより、プロジェクトのプロトタイプができるだけ早く完成し、顧客が結果を早く確認して双方にメリットのある状況を実現できます。
ステップ 5: 問題を早期に発見し、できるだけ早く解決します。従来のウォーターフォール開発プロセスには、設計とインターフェースの反復のプロセスはありません。ウォーターフォール開発では、プロジェクト構築プロセスの細かい点が無視されるため、問題が発生し、顧客の期待と矛盾することになります。顧客との継続的かつタイムリーなコミュニケーションを通じて、最終的に問題は解決されましたが、これらの誤った決定の重大さは認識されませんでした。
レスポンシブ Web デザインレスポンシブなアプローチでは、動的なコードを使用して実装プロセスを段階ごとに顧客に示しながら、同様の進歩を達成します。このように、この初期作業は次の段階の作業の推進に役立ち、締め切り前に重要な修正を行うことができます。
概要アジャイルなレスポンシブ Web デザインを採用すると、ウォーターフォールモードから解放されます。これにより、設計と開発の作業が簡素化され、効率が向上し、あらゆるプラットフォームでブランドイメージが最大化されます。本当の課題は、ウォーターフォール型開発から脱却し、レスポンシブなデザインチームになることです。しかし、次の 5 つの手順に従うだけで、ウォーターフォールモデルとはおさらばし、レスポンシブ Web デザインと「こんにちは」と言えるようになります。
ゲスト著者の Travis Sheppard 氏は、BGT Partners のテクノロジー担当副社長です。 BGT は、2010 年、2011 年、2012 年に Advertising Age 誌によって最も働きやすい 15 の企業に選ばれました。同社は世界中の企業にインタラクティブなマーケティングおよびテクノロジーソリューションを提供し、ブランドプロモーションの強化、より多くのパートナーの獲得、ビジネス変革の実行を支援しています。
出典: さようならウォーターフォール: レスポンシブ Web デザインを実装するための 5 つのステップ

<<: HTML でテキストの折り返しを実装する例 (HTML でテキストと画像が混在)

>>: MySQL の where と on の違いと、いつ使用するか