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

レスポンシブ 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 の違いと、いつ使用するか

推薦する

CSS グリッドレイアウトで列にアイテムを埋め込む方法

n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...

MYSQLストアドプロシージャコメントの詳細な説明

目次1. 使用方法2. 準備3. 文法3.1 変数と代入3.2 入力および出力パラメータ3.3 プロ...

MySQL ファジークエリの使用法 (通常、ワイルドカード、組み込み関数)

目次1. MySQL ワイルドカード ファジー クエリ (%,_) 1-1. ワイルドカードの分類1...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

MySQL で行を列に変換したり、列を行に変換したりする詳細な例

mysql 行から列へ、列から行へ難しい文章ではないので、詳しく説明はしません。文章を読むときは、一...

React Hooksを使用する際のよくある落とし穴

React Hooks は React 16.8 で導入された新しい機能で、クラスを使用せずに状態や...

CSS ボックスモデル内のパディングと略語の詳細な説明

上図のように、パディング値は時計回り(右上、右下)の複合属性であり、パディングの内側の余白がボックス...

Docker 実行オプションを使用して Dockerfile の設定を上書きする

通常は、最初に Dockerfile ファイルを定義し、次に docker build コマンドを使...

HTMLにスクリプトを追加する2つの方法と注意点

HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...

JavaScript でロジック判定コードを最適化する方法

序文日常生活で使用する論理的判断文には、if...else...、switch...case...、...

Linux lseek関数の使い方の詳しい説明

注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...

JavaScript イベント委任 (プロキシ) の使用例の詳細

目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...

Vueは視覚的なドラッグページエディタを実装します

目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...