ウェブサイトのワイヤーフレーム

ウェブサイトのワイヤーフレームは、ページ概略図や画面設計図とも呼ばれ、ウェブサイトの骨格となるフレームワークを表す視覚的なガイドです。^[1]^{: 166}ワイヤーフレームという用語は、骨格となるフレームワークを使用して 3 次元の形状とボリュームを表す他の分野から取られています。^[2] ワイヤーフレームは、特定の目的を最もよく達成できるように要素を配置する目的で作成されます。その目的は通常、ビジネス目標と創造的なアイデアによって推進されます。

ワイヤーフレームは、インターフェース要素やナビゲーションシステムを含むウェブサイトのコンテンツのページレイアウトや配置、およびそれらがどのように連携するかを表します。 ^[3]^{: 131}ワイヤーフレームでは、機能性、動作、コンテンツの優先順位に重点が置かれているため、通常、書体、色、グラフィックは使用されません。^[1]^{: 167}言い換えれば、画面の見た目ではなく、画面の機能に重点が置かれています。^[1]^{: 168}

ワイヤーフレームは、鉛筆で描いたり、ホワイトボードに描いたり、さまざまな無料または商用のソフトウェアアプリケーションを使用して作成できます。ワイヤーフレームは、通常、ビジネスアナリスト、ユーザーエクスペリエンスデザイナー、開発者、ビジュアルデザイナー、およびインタラクションデザイン、情報アーキテクチャ、ユーザーリサーチの専門知識を持つ人によって作成されます。

ワイヤーフレームは次の点に重点を置いています。

利用可能な機能の範囲
情報と機能の相対的な優先順位
特定の種類の情報を表示するためのルール
異なるシナリオがディスプレイに与える影響^[1]^{: 169}

ウェブサイトのワイヤーフレームは、基礎となる概念構造、つまり情報アーキテクチャを、ウェブサイトの表面、つまり視覚的なデザインに結び付けます。 ^[3]^{: 131}ワイヤーフレームは、ウェブサイトのさまざまな画面テンプレート間の機能と関係を確立するのに役立ちます。反復的なプロセスであるワイヤーフレームの作成は、ページのプロトタイプを迅速に作成し、デザインコンセプトの実用性を測定するための効果的な方法です。ワイヤーフレームは通常、「フローチャートやサイトマップなどの高レベルの構造作業と画面デザイン」の間に始まります。^[1]^{: 167}ウェブサイトを構築するプロセスの中で、ワイヤーフレームは思考が具体化する場所です。^[4]^{: 186}

ワイヤーフレームは、モバイルサイト、コンピュータアプリケーション、または人間とコンピュータの相互作用を伴うその他の画面ベースの製品のプロトタイプ作成にも使用されます。^[2]

ワイヤーフレームの用途

ワイヤーフレームは、さまざまな分野で活用されます。開発者はワイヤーフレームを使用してサイトの機能をより具体的に把握し、デザイナーはワイヤーフレームを使用してユーザーインターフェイス(UI) プロセスを推進します。ユーザーエクスペリエンスデザイナーと情報アーキテクトはワイヤーフレームを使用してページ間のナビゲーションパスを表示します。ビジネスアナリストはワイヤーフレームを使用して、画面のビジネスルールとインタラクション要件を視覚的にサポートします。

ビジネス関係者はワイヤーフレームをレビューして、デザインを通じて要件と目的が満たされていることを確認します。^[1]^{: 167}ワイヤーフレームを作成する専門家には、ビジネスアナリスト、情報アーキテクト、インタラクションデザイナー、ユーザーエクスペリエンスデザイナー、グラフィックデザイナー、プログラマー、プロダクトマネージャーが含まれます。^[2]

ワイヤーフレームは情報アーキテクチャとビジュアルデザインをつなぐため、共同作業になる場合があります。これらの専門的役割が重複しているため、衝突が発生する可能性があり、ワイヤーフレームは設計プロセスの中で議論の多い部分になります。^[4]^{: 186}ワイヤーフレームは「必要最低限の」美学を意味するため、デザイナーがワイヤーフレームが実際の画面レイアウトをどの程度正確に表現する必要があるかを判断するのは困難です。^[1]^{: 168}

衝突を避けるには、ユーザー要件を理解しているビジネスアナリストが基本的なワイヤーフレームを作成し、デザイナーと協力してワイヤーフレームをさらに改善することが推奨されます。ワイヤーフレームのもう 1 つの難点は、静的な表現であるため、インタラクティブな詳細を効果的に表示できないことです。現代の UI デザインには、拡張パネル、ホバー効果、カルーセルなどのさまざまなデバイスが組み込まれており、2D ダイアグラムでは課題となります。^[1]^{: 169}

ワイヤーフレームの主な利点は、あらゆるインターフェースをアジャイルな方法で反復できることです。これは、多くの場合ユーザビリティテストと呼ばれるプロセスを通じて行われ、ユーザーはインターフェースを操作し、思考プロセスについて声に出して考えたり、より構造化された質問に答えたりする機会が与えられます。ユーザーと試行するたびに、ユーザーエクスペリエンス研究者はインターフェースとの一般的な操作を特定し、データを統合して、それに応じて再設計することができます。^[5]

ワイヤーフレームは一般的に忠実度が低いため、変更が非常に簡単でコスト効率に優れています。ワイヤーフレームのポイントは、インターフェイス内の基本構造、高レベルのインタラクションパターン (クリティカルポイントとも呼ばれます) のデザインをキャプチャすることです。^[5]そのため、デザイナーは迅速に作業することができ、グループメンバーが協力して次のイテレーションに「全力疾走」するアジャイル環境に最適です。

ワイヤーフレームにはさまざまな詳細レベルがあり、忠実度、つまり最終製品との類似度に基づいて 2 つのカテゴリに分類できます。

低忠実度

ラフスケッチや簡単なモックアップに似た低忠実度のワイヤーフレームは、簡単に作成できます。これらのワイヤーフレームは、長方形とラベルを使用してコンテンツを表すより抽象的なものであるため、プロジェクトチームがアイデアを伝え、より効果的に共同作業するのに役立ちます。^[4]^{: 185}ダミーコンテンツ、ラテン語のフィラーテキスト（lorem ipsum）、サンプルまたはシンボリックコンテンツは、実際のコンテンツが利用できない場合にデータを表すために使用されます。^[1]^{: 175}たとえば、実際の画像を使用する代わりに、プレースホルダーの長方形を使用できます。

低忠実度のワイヤーフレームは、プロジェクトにおけるチームコミュニケーションを促進するために使用することができ、プロジェクトの初期段階で使用されます。^[6]^[7]

高忠実度

高忠実度のワイヤーフレームは、実際のウェブページのデザインに近いレベルの詳細が組み込まれているため、ドキュメント作成によく使用され、作成に時間がかかります。^[4]^{: 185}

単純な図面や忠実度の低い図面の場合、紙のプロトタイプ作成が一般的な手法です。これらのスケッチは単なる表現であるため、動作を説明するための注釈（隣接するメモ）が役立ちます。^[1]^：194より複雑なプロジェクトでは、コンピューターソフトウェアを使用してワイヤーフレームをレンダリングすることが一般的です。一部のツールでは、Flashアニメーションなどのインタラクティブ機能や、 HTML、CSS、JavaScriptなどのフロントエンドWebテクノロジーを組み込むことができます。

高忠実度のワイヤーフレームには、よりリアルなコンテンツ、特定のタイポグラフィの選択、画像寸法に関する情報が含まれます。低忠実度のワイヤーフレームとは異なり、高忠実度のワイヤーフレームには実際の画像を含めることができます。色の選択は含まれていませんが、色のさまざまな値をグレースケールで表現できます。^[6]^[7]

ワイヤーフレームの要素

ウェブサイトの骨組みは、情報デザイン、ナビゲーションデザイン、インターフェースデザインの3つの要素に分けられます。ページレイアウトはこれらの要素が集まる場所であり、ワイヤーフレームはこれらの要素間の関係を表すものです。^[3]^{: 131}

情報デザイン

情報デザインとは、理解しやすいように情報を配置し、優先順位を付けるプレゼンテーションのことである。情報デザインはユーザーエクスペリエンスデザインの領域であり、情報を効果的に表示して明確なコミュニケーションを図ることを目的とする。ウェブサイトの場合、情報要素はユーザーの目的とタスクを反映するように配置する必要がある。^[3]^{: 126}

ナビゲーションデザイン

ナビゲーションシステムは、ユーザーがウェブサイト内のページ間を移動できるようにする一連の画面要素を提供します。ナビゲーションデザインは、サイト内を移動するためのオプションをユーザーが理解できるように、含まれるリンク間の関係を伝える必要があります。多くの場合、ウェブサイトには、グローバルナビゲーション、ローカルナビゲーション、補助ナビゲーション、コンテキストナビゲーション、礼儀ナビゲーションなど、複数のナビゲーションシステムが含まれています。^[3]^{: 120–122}

インターフェースデザイン

ユーザーインターフェース設計には、ユーザーがシステムの機能を操作できるようにインターフェース要素を選択して配置することが含まれます。^[3]^{: 30}目標は、使いやすさと効率性を可能な限り高めることです。インターフェース設計でよく見られる要素は、アクションボタン、テキストフィールド、チェックボックス、ラジオボタン、ドロップダウンメニューです。

参照

参考文献

^ abcdefghij Brown, Dan M. (2011).デザインの伝達: デザインと計画のための Web サイトドキュメントの開発(第 2 版). New Riders Press . ISBN 978-0321712462。
^ abc Angeles, Michael (2014年9月25日). 「ワイヤーフレーム」. Konigi Wiki . 2018年5月5日時点のオリジナルよりアーカイブ。 2011年3月25日閲覧。
^ abcdef Garrett, Jesse James (2010).ユーザーエクスペリエンスの要素: Web とその先に向けたユーザー中心設計。New Riders Press。ISBN 978-0321683687。
^ abcd Wodtke, Christina; Govella, Austin (2009).情報アーキテクチャ: Web の設計図(第 2 版). New Riders Press . ISBN 978-0321600806。
^ ab ホルツブラット、カレン;バイエル、ハグ。「コンテキストデザイン」（PDF）。2023-11-01に取得。
^ ab 「Low-fidelity vs. High-fidelity Wireframes - Steadfast Creative」。 Steadfast Creative。 2016-09-13 。 2018-02-06に閲覧。
^ ab 「ワイヤーフレーム: 低忠実度 vs. 高忠実度」。Dupont Creative。2016年 11 月 27 日。2019 年 7 月 8 日閲覧。

[brown-1] Brown, Dan M. (2011).デザインの伝達: デザインと計画のための Web サイトドキュメントの開発(第 2 版). New Riders Press . ISBN 978-0321712462。

[konigi-2] Angeles, Michael (2014年9月25日). 「ワイヤーフレーム」. Konigi Wiki . 2018年5月5日時点のオリジナルよりアーカイブ。 2011年3月25日閲覧。

[garrett-3] Garrett, Jesse James (2010).ユーザーエクスペリエンスの要素: Web とその先に向けたユーザー中心設計。New Riders Press。ISBN 978-0321683687。

[wodtke-4] Wodtke, Christina; Govella, Austin (2009).情報アーキテクチャ: Web の設計図(第 2 版). New Riders Press . ISBN 978-0321600806。

[Holtzblatt-5] ホルツブラット、カレン;バイエル、ハグ。「コンテキストデザイン」（PDF）。2023-11-01に取得。

[:0-6] 「Low-fidelity vs. High-fidelity Wireframes - Steadfast Creative」。 Steadfast Creative。 2016-09-13 。 2018-02-06に閲覧。

[dupont-7] 「ワイヤーフレーム: 低忠実度 vs. 高忠実度」。Dupont Creative。2016年 11 月 27 日。2019 年 7 月 8 日閲覧。