ユーザー エクスペリエンス (UX) は、ギャップを埋め、デザインを確実に変換する方法です。 マーケティング担当者は、Web サイトをデザインやコンバージョンの観点からのみ考えることを好むことがよくあります。 ワイヤーフレームを使用すると、ページ レイアウトとユーザー フローをテストして、新しい Web サイトがどのように機能するかを正確に確認し、最終的にコンバージョンを妨げる可能性のある潜在的なエラーを特定できます。 この投稿では、デザインと使用する作成ツールを備えた Web サイトのワイヤーフレームの例を見ていきます。
ウェブサイトのワイヤーフレーム
新しい Web サイト デザインの主な機能とナビゲーションは、Web サイトのワイヤーフレームを使用してマッピングされます。 コンテンツや配色などのビジュアル デザイン コンポーネントについて考える前に、サイトの機能を理解することができます。 チームは、Web サイトのワイヤーフレームを実用的なプロジェクト マップとして使用して、関連するタスクを完了したときにすべてがどこに向かうかを確認できます。
プロセスのこのステップは、時間がかかり不要であると考えているデザイナーやクライアントによってスキップされる可能性があります。 ただし、ワイヤーフレームは自己準備であり、適切な準備には時間がかかります。 ただし、戦略なしで作業すると、通常は時間がかかり、プロジェクトが完全に失敗する可能性が高くなります。
ウェブサイトのワイヤーフレームを作成する理由
Web サイトのワイヤーフレームを作成する理由はいくつかありますが、最も重要なのは、消費者を満足させるためにサイトの機能、使いやすさ、利便性を向上させるあらゆる機会を見つけてつかむことができるということです。 また、設計チームのメンバー間のコミュニケーションを改善し、クライアントからの情報を早期に収集することもできます。
基本的なウェブサイトのワイヤーフレームを構築する方法
＃1。 ウェブサイトの目的を決定します。
紙にペンで書き込んでワイヤーフレームの下書きを作成する前に、Web サイトの目的を知っておくと役に立ちます。 サーバーが管理できる限りトラフィックを増やしたいと思うことは明らかですが、サイトにいるすべての訪問者に何をしてもらいたいかを考えてください。
＃2。 ユーザーフローを認識します。
チームの全員が、訪問者が Web サイトの各ページをどのように操作すべきかを認識できるように、ワイヤーフレームはユーザー フローの特定と評価に役立ちます。 この段階では、訪問者がホームページに到達するために使用できる可能性のあるすべてのアクセス ポイントを概説してから、旅行の流れを確立するためのいくつかの主要なエントリ ポイントを選択する必要があります。
＃3。 ウェブサイトのワイヤーフレームのサイズを確立します。
設計している画面のサイズに応じて、ワイヤーフレームは異なるサイズにする必要があります。 モバイル デバイス、タブレット、およびデスクトップ コンピューターの画面のサイズはさまざまであり、デスクトップ コンピューターのウィンドウのサイズを変更できることは言うまでもありません。 インチやポイントではなくピクセルを使用して、ワイヤフレームの最も正確な仕様を取得します。
＃4。 Web サイトのワイヤーフレームのデザインを開始します。
ユーザー フローを表すワイヤーフレームを作成します。 ペンで紙に書く場合は、位置合わせを維持するために点線または方眼紙を使用することをお勧めします。 これにより、ワイヤーフレームの物理バージョンをデジタル バージョンに簡単に変換できます。
＃5。 変換ポイントを計算します。
ワイヤーフレームをスケッチしたら、ユーザーが各段階をどのように進めるべきかを正確に定義する必要があります。 手順をレイアウトしただけでは、ユーザーはプロセスを簡単に実行できないと感じる場合があります。
＃6。 不要な手順を廃止します。
反復的なワイヤーフレームは手順です。 制作の準備が整ったワイヤフレームは、XNUMX 回のスケッチで作成できることはめったにありません。 一部の Web ページは不要であり、統合してユーザーがクリックするリンクの数を減らすことができることに気付いたかもしれません。
＃7。 ワイヤーフレームに関する入力を取得します。
ウェブサイトを公開する前に、何度もテストと調整を行いますが、早い段階でワイヤーフレームに関する情報を入手することをお勧めします。 設計チーム、開発チーム、社内の担当者、および顧客と協力して、フロー自体に関する情報を入手してください。
ウェブサイトのワイヤーフレームの例
想像力をかきたて、自分に合ったワイヤーフレーム方法を確立するのに役立つ、最高の Web サイト ワイヤーフレームの例を以下に示します。 ウェブサイトのワイヤーフレームの例は次のとおりです。
＃1。 ウェブサイトのワイヤーフレームをスケッチする
紙やホワイトボードにスケッチを書き始めるプログラマーもいます。 グラフィック機能について実際に時間を費やす前に、この単純な手描きの方法で基本的な考え方を示します。
＃2。 詳細な手描きのワイヤーフレーム
手書きのワイヤーフレームは、必ずしも単純である必要はありません。 より正確なデザインを作成するには、鉛筆と紙に加えて定規を使用することもできます。
＃3。 低忠実度のワイヤーフレーム
最初のコンセプト デザインは、デジタルで作成され、単純なコンテンツ ブロックに表示される忠実度の低いワイヤーフレームを使用して改善されます。 どのグラフィック要素を開発し、どのコピーを作成するかを決定する際には、忠実度の低いワイヤーフレームが重要です。
＃4。 低忠実度のモバイル ワイヤーフレーム
ワイヤーフレームは、モバイル アプリやレスポンシブ Web サイト用にも作成されることに注意してください。 モバイル ユーザーがこれまで以上に頻繁に Web サイトにアクセスするようになると、多くのデザイナーはモバイル バージョンを最初にワイヤーフレーム化します。
＃5。 忠実度の高いワイヤーフレーム
グラフィック要素を過剰に生成することなく、より詳細に示すデジタル ツールを使用して忠実度の高いワイヤフレームを生成できます。 その結果、レビュープロセス全体で無視される可能性のある時間のかかる設計作業を必要とせずに、より魅力的な外観が得られます.
ウェブサイトのワイヤーフレームのデザイン
Web デザイン プロジェクトは、ワイヤーフレームの作成から始まります。 調査を行い、インスピレーションを得て、ビジネス目標についてクライアントと合意した後、この知識をワイヤーフレームに変換します。
ウェブサイトのワイヤーフレームデザインの例
ワイヤーフレームとは何か、なぜワイヤーフレームが重要なのかを理解したところで、いくつかの視覚的な例に移りましょう。 いくつかのワイヤーフレーム タイプがあることに気付いたかもしれません。 一方が他方より優れているか？ 常にではない; それはすべて、設計プロジェクトがどの段階にあるかによって異なります。 スケッチから始めて、そこから先に進むのはまったく問題ありません。
＃1。 ワイヤーフレーム スケッチ
デザイナーとしての経験がどれだけあっても、ペンと紙をつかんでスケッチを開始する方が簡単で、最初のアイデアをすばやく実現できる場合があります。 必要に応じて、雑然としたり、整然としたりできます。
＃2。 低忠実度のワイヤーフレームの例
このワイヤーフレームの例では、情報とデザイン要素を 12 列に分割するために、デザイナーはグリッドを作成しました。 設計を開始する前にグリッド構造を確立しておくと、後で時間を節約できます。 これは基本的な忠実度の低いワイヤーフレームで、ロゴ、ヒーロー画像、および補助画像の位置を、主に線と輪郭の付いたボックスを使用して示しています。 本文は薄い灰色のボックス内に表示されます。
＃3。 忠実度の高いワイヤーフレームの例
最終的なデザインのモックアップに近づくにつれて、忠実度の高いモックアップの詳細レベルが上がります。 この時点で、ヘッダーとサブコピーには実際のコンテンツが含まれる場合がありますが、本文のコピーはプレースホルダーのままである可能性があります。
モバイル ユーザー ジャーニーのこの忠実度の高いワイヤーフレーム モデルをチェックして、詳細を確認してください。 設計する前に、コンテンツと構成を考える絶好の機会です。 この忠実度の高いワイヤーフレームの例では、重要なタイムライン情報を伝えるためにチャートとマップが使用されています。
ウェブサイト ワイヤーフレーム ツール
利用可能な最も効果的なワイヤーフレーム機器のトップセレクションをまとめました.
＃1。 Adobe XD ウェブサイト ワイヤーフレーム ツール
2016 年の最初のリリース以来、Adobe XD は非常に人気があり、それには正当な理由があります。 このツールは、コラボレーション、プロトタイピング、ワイヤーフレーム作成に最適です。 他の人と一緒に作業している場合に確認するツールです。 インタラクションを開発するための選択肢を備えた Adobe XD には、簡単なスケッチから忠実度の高いワイヤーフレームまで、あらゆる機能があり、ユーザー フローを模倣できます。 3D 画像のレイヤリングに関しては、ツールの自動アニメーション機能により作業が簡単になりました。
＃2。 Miro ウェブサイト ワイヤーフレーム ツール
特にブレインストーミング セッション、インタラクティブなプレゼンテーション、デザイン思考ワークショップ、および同様の活動では、Miro は非常に有益で人気のあるツールです。 しかし、そのアプリケーションはそれだけではありません! ワイヤーフレーム機能があり、信じられないほど柔軟なツールです! チームは、ビデオチャット、BGM、および「召喚」機能を使用できます。 そして、それはほんの始まりにすぎません。
＃3。 Mockplus ウェブサイト ワイヤーフレーム ツール
Mockplus は、デザイナーが Web サイトやモバイル アプリ用のインタラクティブなワイヤーフレームをすばやく作成できるようにする、迅速なワイヤーフレーム作成およびプロトタイピング ツールです。 このツールを使用すると、設計者はデスクトップやモバイル デバイスで初期の設計コンセプトを共有してテストできます。 Mockplus は、ワイヤーフレームを開発するためのツールを提供するだけでなく、事前にインストールされた多種多様なコンポーネント、アイコン、UI、およびテンプレートを使用して設計を支援します. インタラクションとアニメーションの完全なセットがあると、よりリアルなワイヤーフレームを簡単に作成できます。 また、チーム全体が同じプロジェクトで作業できるようにする共同アプリケーションです。
＃4。 Wireframe.CC ウェブサイト ワイヤーフレーム ツール
モバイル Web サイトやアプリをワイヤーフレーム化するための、簡単で基本的で使いやすいツールです。 この Web ベースのワイヤーフレーム ツールは、レイアウトが紙の上にオブジェクトを作成し、それらを切り取り、デザインに貼り付けるのと似ているため、非常に簡単に使用できます。 Wireframe.cc のおかげで、マウスを多目的ツールに変えるのは信じられないほど簡単でした。 空白のキャンバスに目的のフォームをスケッチし、表示されるツールバーに表示される 9 つの選択肢から選択するだけです。 Wireframe.cc が提供するデザイン テンプレートは単純明快で、モバイル ランドスケープ、モバイル バーティカル、ウェブページのオプションがあります。
＃5。 Figma ウェブサイト ワイヤーフレーム ツール
チームの共有とコラボレーションに最適なクラウドベースのデザイン プラットフォーム。 多くのデザイナーは、素晴らしいプロトタイピングとグラフィック デザイン機能のために Figma を使用していますが、多くのデザイナーは Figma をワイヤーフレームと同一視しません。 それでも、この設計ツールを使用すると、低忠実度から高忠実度のワイヤフレームまで、希望するほぼすべての設計を柔軟に作成できます。 Figma の設計中心の方法論は、通常は困難なプロセスを簡素化することにより、概念を迅速にワイヤフレーム化するための優れたツールになります。
ウェブサイトのワイヤーフレームを作成する
特にテスト フェーズがうまくいかない場合は、ワイヤーフレームの作成に多大な労力がかかる可能性があります。 それでも、事前に時間をかけて UX の欠陥を解決することで、サイトが長期的に成功する可能性が高まります。 以下に示す Web サイト ワイヤーフレームの作成手順に従って開始できます。
＃1。 ワイヤーフレーム ツールを組み立てる
ワイヤーフレームは、それぞれ手動またはデジタルで作成できます。 最初のオプションを選択した場合に必要なのは、ペンと紙だけです。 ブレーンストーミングの目的で、一部のデザイナーは「忠実度の低い」紙のワイヤーフレームから始め、その後「忠実度の高い」デジタル版を作成します。 リアルタイムのコミュニケーションを必要とするチームやビジネスマンに最適な、ユーザーフレンドリーなグループベースのワイヤーフレーム インターフェイスを備えています。 ただし、静的ワイヤーフレームのみが可能です。
＃2。 ターゲット ユーザーと UX デザインを検討します。
ワイヤーフレームの下書きを始める前に、調査を行うことは有益です。 ターゲット市場を特定することから始めるべきです。 これは、訪問者が必要なものを見つけられるように、Web サイトのどの側面を最も強調する必要があるかを判断するのに役立ちます。 UX デザインのトレンドとベスト プラクティスについて調査することも良い考えです。 これにより、メニュー レイアウト、ロゴやその他の主要なブランディング コンポーネントを配置する場所、コンテンツ レイアウトなどに関する情報を得ることができます。 これらの特徴に関して言えば、ユーザーは慣例に従う Web サイトを好みます。
＃3。 理想的なユーザー フローを選択します。
訪問者が Web サイトで特定のタスクを達成するためにたどる経路は、「ユーザー フロー」と呼ばれます。 例として、e コマース Web サイトの XNUMX つのユーザー フローは、製品ページからチェックアウト手順の終了までです。 ユーザーが Web サイトで実行する必要がある主なアクションを把握することで、潜在的な目標ごとに最も単純なユーザー フローを作成できます。 Web サイトを使いやすく魅力的なものにすることで、UX を向上させることができます。
＃4。 今すぐ最初のワイヤーフレームを作成してください。
リソースと重要なデータを収集したので、ワイヤーフレームの下書きを開始できます。 この演習の目的は、完成した Web サイト デザインを作成することではないことに注意してください。 UX、または使いやすく理解しやすいページを設計する方法のみを検討しています。 そのためには、ワイヤーフレームの機能とフォーマットが、訪問者が Web サイトをどのように操作し、使用するかに関連している必要があります。
＃5。 ユーザビリティ テストは、デザインをテストする良い方法です。
最初のワイヤーフレームが完成したら、テストを行う必要があります。 これにより、Web サイトにとって最も簡単で自然な UX とユーザー フローを概説することに成功したかどうかを評価できます。 ウェブサイトのワイヤーフレームを作成するには、さまざまな方法があります。
＃6。 あなたのワイヤーフレームがプロトタイプになるかもしれません
ワイヤーフレームをテストし、Web サイトに最適な UX デザインを決定したら、ワイヤーフレームをプロトタイプに変換します。 プロトタイプには、静的なワイヤーフレームとは対照的に、いくつかの基本的な機能が組み込まれているため、ユーザー フローをより正確な方法でテストできます。
ワイヤーフレームは UX または UI の一部ですか?
UX デザイナーは、ワイヤーフレームの手法を利用して、Web ページ、アプリ、または製品のデザインのビッグ データ管理を指定および整理します。
ウェブサイトのワイヤーフレームには何を含めるべきですか?
- ロゴ。
- 検索ボックス。
- ブレッドクラム。
- ヘッダー。
- ナビゲーション
- ボディコンテンツ。
- 共有のためのリンク。
ウェブサイトのワイヤーフレームはどのように見えますか?
「ワイヤーフレーム」と呼ばれる単純な白黒のレイアウトは、Web サイトのページ要素、機能、コンバージョン ゾーン、およびナビゲーションの正確な寸法と位置を指定します。 サイトの構造を損なうような色、フォントの選択、ロゴ、またはその他のデザイン機能がありません。
2種類のワイヤーフレームとは?
- 忠実度の低いワイヤーフレーム。
- 中程度の忠実度のワイヤーフレーム。
- 忠実度の高いワイヤーフレーム。
関連記事
- ワイヤーフレームとは: Web デザイン、モックアップ、UX、および違い
- OKRソフトウェアの比較：10年の2023の最高のOKRソフトウェアを比較する
- 営業活動によるキャッシュフロー：用途とその用途
- フリーランスのグラフィックデザイナー: 定義、給与、履歴書、仕事
参考文献
