ウェブサイトをデザインする前にワイヤーフレームを作成する6つの利点（+例）
公開: 2022-01-20効果的なウェブサイトを設計するには、レイアウトの考案、ユーザーエクスペリエンス（UX）の考慮、特定の機能の実装方法の理解、コンテンツの作成、検索エンジン最適化（SEO）のベストプラクティスの組み込みなど、多くの要素が必要です。 そして、それはすべてブレーンストーミングセッションから始まります。そこでは、関係するすべてのクリエイティブがクライアントと集まり、必要なものとサイトに含めたいものを決定します。
これらの要件がすべてリストされたら、次の2つの方法のいずれかで進めることができます。プロジェクトの一部（コンテンツの作成、モックアップのデザインなど）を実行するようにクリエイティブに指示し、あなたがすべてであることを神に期待します。同じページで、またはワイヤーフレームを作成して、Webサイトがどのように表示されるかについてまったく同じビジョンに従って、全員が確実に作業できるようにすることもできます。 後者は、ワイヤーフレームを作成することで実現できます。
ワイヤーフレームとは何ですか？
ワイヤーフレームは、設計する主要なWebページの視覚的なガイドです。 その目的は、プロジェクトに取り組むすべての人の青写真として機能することです。 そうすれば、関係者全員が、ヒーローバナー、ナビゲーションバー、見出し、小見出し、コンテンツ、画像、動画、召喚状のボタン、グラフなど、各コンポーネントの行き先を正確に知ることができます。
それらは、設計の観点からは非常に単純です。 カラーや実際の画像、特定のテキストをまだ追加する必要はありません。 代わりに、サイトが完成したらどこにでも配置できるプレースホルダーを含めます。 これには、画像を表す正方形または長方形、コンテンツのlorem ipsumテキスト、および見出しと小見出しのH1、H2、およびH3フォントサイズが含まれます。
出典：Balsamiq
ワイヤーフレームの種類
ワイヤーフレームを作成するには、さまざまな方法があります。 必要に応じて、鉛筆でノートにスケッチすることができます。 結局のところ、これはあなたがアートコンテストに提出しているものではありません。 ただし、ソフトウェアを使用してそれらを作成している場合は、さまざまなソフトウェアプログラムでさまざまなタイプのワイヤーフレームを使用できます。
低忠実度のワイヤーフレーム
忠実度の低いワイヤーフレームは、単純な画像を表示します。 イントロ段落はここにあります。 製品の説明はそこにあります。 Xが描かれたこの正方形は、最終的には、会社で働くことにワクワクする笑顔の労働者がいるオフィスの写真になるはずです。 その画像をクライアントに説明することはできますが、ページ上のすべてが非常に基本的です。
ハイファイワイヤーフレーム
忠実度の高いワイヤーフレームは、サイトがどのように見えるかについて、より現実的なルックアンドフィールを反映しています。 これらには、実際のWebサイトのコンテンツと機能が含まれています。たとえば、CTAが表示する予定のページに読者を誘導するクリック可能なCTAボタンなどです。 また、ロゴ、タイポグラフィ、画像の寸法などを含めることもできます。
Webサイトのワイヤーフレームを作成する6つの利点
このプラクティスをWebサイトのデザインプロセスに取り入れ始めると、すぐにその多くの利点を実感し始めます。
1.彼らはウェブサイトの青写真を提供します
同じ部屋に10人で集まってウェブサイトのデザイン方法を話し合うことができます。 彼らは皆、サイトが必要とするページ、それらのそれぞれに含める情報、そしてウェブサイトを競争相手から際立たせる機能について合意することができます。 しかし、これは、彼ら全員がこれがどのように見えるかについて彼らの頭の中にまったく同じ画像を持っているという意味ではありません。
そのため、コンテンツがWeb開発者の想定よりも大幅に長いホームページテキストを書き込む場合、プロジェクトをコンテンツに送り返して短縮するか、デザインでレイアウトを作り直すために追加の時間が必要になります。 ワイヤーフレームを使用することで、このプロセスはより効率的になります。
2.ユーザーエクスペリエンス（UX）をより適切に評価できるようにします
理論的には素晴らしいと思われるものもありますが、実際にはうまく機能しません。 UXデザイナーが、子ページのドロップダウンメニューとともに、ナビゲーションバーにX個のアイテムを含めたいとします。 しかし、すべてが完了すると、これが混乱を招くだけであることに気づきます。
すべての要素を紙に書き留めることで、設計プロセスを開始する前にこれらの問題を確認できます。 このようにして、はるかに簡単な段階でそれらに対処できます。
3.全員が同じページにいることを確認します
設計チームの全員が、各Webページが作成される前にどのように見えるかを正確に知っているので、全員がより良い方向性を持って作業に取り掛かることができます。 そして、それがどのように展開するかについて質問や疑問がある場合は、最初のブレーンストーミングセッション中にそれを持ち出すことができます。
このプロセスにより、誰もが懸念事項について聞き、一緒にアイデアを提案し、すべての決定の背後にある思考プロセスを完全に理解することができます。
4.設計プロセスを合理化します
ワイヤーフレームが作成されると、変更を行ったり来たりするのに無駄な時間がなくなります。 このステップはまだプロジェクトの一部ですが、プロジェクトを開始する前に全員が合意した青写真があるということは、各チームメンバーがより効率的に作業できるようになることを意味します。
これはまた、各Webサイトでの作業にかかる時間が短縮され、締め切り前に終了してクライアントを満足させる可能性が高くなることを意味します。
5.Webサイトコンテンツの開発を容易にします
コンテンツの作成は主観的なプロセスです。 いくつかのベストプラクティスには、スタイルガイド、ブランドボイスに従うこと、特定の購入者のペルソナを念頭に置いて書くことが含まれます。 ただし、それでも長さと形式が大幅に異なる可能性があります。
ワイヤーフレームを開発することで、ライターは長さの制限や好みのフォーマットについてのアイデアを得ることができます。 単語数を指定する必要はありませんが、2つまたは3つの短いlorem ipsum段落を示すワイヤーフレームは、トルストイの小説を別の機会に残すことを知らせます。
6.サイトが構築される前にクライアントを表示できます
ウェブサイトをデザインする上で最も残念な経験の1つは、自分が作成したものに興奮しているときですが、クライアントにしかめっ面をして、それは彼らが考えていたものではないと言うだけです。 これは、あなたが作成したものが良くなかったことを意味するのではなく、あなたが両方とも大きく異なる結果を想像したことを意味します。
ワイヤーフレームを作成すると、クライアントは、サイトが作成される前に、サイトの必要最低限のバージョンがどのように表示されるかをかなり明確に把握できます。
ワイヤーフレーミングのベストプラクティス
現在、ワイヤーフレームを作成する方法はいくつかありますが、最良の結果を確実にするために、特定の手順に従うことをお勧めします。
チームでブレインストーミング
前述のように、最初のステップは、Webデザインに取り組むすべての人と一緒になることです。 このようにして、すべての人がアイデアを投げかけ、その背後にある理由を他の人に知らせることができます。 誰もが、他の誰かのレーダーに載っていないかもしれないプロジェクトでの彼らの特定の役割に影響を与える要因を考慮に入れるようになります。
最初にアイデアを描く
ブレーンストーミング中に（またはワイヤーフレーミングソフトウェアを使用して）ノートブックにワイヤーフレームの描画を技術的に開始することはできますが、最初の反復を完了するには、ドライイレースボードまたはペンと紙を使用する方が簡単な場合があります。 完了したら、それらの写真を撮り、ワイヤーフレームを作成するチームメンバーに電子メールで送信できます。 参照しやすいように、プロジェクト管理カードのタスクの説明にそれらを含めることもお勧めします。
出典：WhatPixel
色を最小限に抑える
ワイヤーフレーミングを行う場合、色や特定の画像について詳しく説明する必要はありません。 設計図はまさにそれです—サイトがどのように見えるかについての骨の折れる描写。 方向性を示すメモ（ここではブランドの色、そこには空白など）を含めることができますが、主要なデザイン要素に焦点を当てます。
機能についてメモする
Webページの特定の領域がどのように機能するかについてメモを取ります。 たとえば、ドロップダウンメニュー、画像カルーセル、訪問者のクイズ、またはある種のツールになる場合です。 Webデザイナーに何がどこに行くのかについての明確なガイダンスを与える一般的な詳細。
デスクトップとモバイルのワイヤーフレームを作成する
すべてのWebサイトはレスポンシブデザインである必要があります。 また、サイトはスマートフォンと同じようにデスクトップコンピューターに読み込まれないため、両方のディスプレイがどのように表示されるかを示すワイヤーフレームを作成します。 ナビゲーションバーがハンバーガーメニューになるか、大きな画面に並んでいたカードがモバイルデバイスに積み重ねられて表示される可能性があります。 すでに応答しているWebサイトテンプレートを使用している場合は、この手順をバイパスできます。
ワイヤーフレーミング時にすべきでないこと
Ok。 何をすべきかがわかったので、次にスキップするもののリストを示します。
すべてのページをワイヤーフレーム化しないでください
ワイヤーフレーミングの全体的なポイントは、時間を節約することです。 したがって、42の異なる製品を含むWebサイトを設計している場合は、1つの製品/サービスページをワイヤーフレーム化するだけです。 次に、ホームページ、Aboutページ、価格設定、ブログ、お問い合わせページなどの高額商品に焦点を当てます。
それらを完璧にするためにあまり多くの時間を費やさないでください
ワイヤーフレームは印象的である必要はありません。 Webページのスケルトンがどのようになるかを紹介する必要があります。 あなたが実際にウェブサイトをデザインしているとき、それらを美化するために努力を費やしてください。
毎分の詳細を含めないでください
すべての要素が何を意味するかについての役立つメモを含める必要がありますが、詳細に迷わないでください。 率直に言って、次のページのデザインに進んでください。 アートディレクターまたはWebデザイナーは、後ですべてを拡張できます。
ワイヤーフレームを作成するためのツール
ノートブックでの描画は、シンプルで簡単なプロセスです。 そして、どうしても、それがあなたのために働くなら、それのために行きなさい。 しかし、簡単に共有できるメディアを好む人のために、使用できるソフトウェアプログラムはたくさんあります。 最も人気のあるもののいくつかは次のとおりです。
Balsamiq
Balsamiqはとてもユーザーフレンドリーで、学習曲線はほとんどありません。 忠実度の低いワイヤーフレームの作成のみが可能ですが、それで作業を完了できます。 また、いくつかの段階的な計画を提供し、チームメンバーを招待して、リアルタイムで作成するのを見ることができるようにすることで、コラボレーションを可能にします。
Adobe XD
Adobe XDを使用すると、忠実度の高いワイヤーフレームを設計でき、クライアントにワイヤーフレームへのアクセスを許可できます。 その後、実際に変更を加えることなく、ワイヤーフレームの各要素にフィードバックを与えるメモを残すことができます。 また、UXとUIの設計を改善するためのチュートリアルも付属しています。
ソース：xd.adobe.com
スケッチ
SketchはMacユーザーのみが利用できます。 （つまり、それが何であるかです）。 チーム全体とリアルタイムで連携して、忠実度の高いワイヤーフレームを作成できます。 テンプレートライブラリはありませんが、多くのプラグインと互換性があります。
MockFlow
MockFlowは、ホワイトボードにスケッチしたような感覚のデジタル描画ツールです。 また、膨大なテンプレートライブラリが含まれており、PowerPointやAdobePDFなどの他のプラットフォームにワイヤーフレームをエクスポートできます。 無料版を提供していますが、有料枠にはもっと便利なツールが含まれています。
出典：MockFlow
フレーマ
Framerは、さまざまなツールを備えた無料のオプションを提供するため、予算が厳しいスタートアップや企業に適したツールです。 ライブラリに保持して将来のプロジェクトのレイアウトとして再利用できる基本的なワイヤーフレームを作成することもできます。
時間は金です。 そしてそれが失われたとき、あなたはそれを取り戻すことは決してないでしょう。 Webデザインプロセスにワイヤーフレーミングを実装すると、より効率的に使用できるようになります。 よりスマートに作業します。 欲求不満を避けてください。 プロジェクトをより早く完了します。 それは、どのように見ても、Win-Winのソリューションです。