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

推薦する

1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。

数日前、ある要件に取り組んでいたとき、MySQL で重複レコードをクリーンアップする必要がありました...

MySQLデータベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

クラウド サーバー Ubuntu_Server_16.04.1 に MySQL をインストールしてリモート接続を有効にする方法

1. MySQLをインストールします。対応するソフトウェアをインストールするには、次の 3 つのコマ...

Vueプラグインの実装で発生した問題の概要

目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...

この記事ではJavaScriptのガベージコレクションの仕組みを説明します

目次1. 概要2. メモリ管理3. ガベージコレクション4. GCアルゴリズムの紹介5. 参照カウン...

http.server に基づく LAN サーバーの構築プロセスの分析

皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

vue3.0+echarts は 3 次元の縦棒グラフを実現します

序文: Vue3.0はechartsの3次元縦棒グラフを実装します結果: 実装手順: 1. echa...

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

MySQL 5.7.17 圧縮パッケージのインストール不要の構成プロセス図

MySQL データベース管理ソフトウェアには、エンタープライズ エディションとコミュニティ エディシ...

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

Linux gzip コマンドのファイル圧縮実装原理とコード例

gzip は、Linux システムでファイルの圧縮と解凍によく使用されるコマンドです。このコマンドで...