ワイヤーフレームは何枚必要か(効果的なワイヤーフレーム作成のためのガイド)。

 ワイヤーフレームは何枚必要か(効果的なワイヤーフレーム作成のためのガイド)。

John Morrison

ワイヤーフレームは何枚必要か(効果的なワイヤーフレーム作成のためのガイド)。

新しいウェブサイトのデザインプロジェクトは、ワイヤーフレームの過多から始まることがよくあります。

プロジェクト開始時に何十枚ものワイヤーフレームを作成してクライアントに見せても、理解が深まるとは限らず、逆に圧倒されることもあります。

デザインの他の多くの側面と同様に、ワイヤーフレームは、多くの場合、より少ないことがより多くなる芸術です。

ここでは、より効果的なワイヤーフレームの作成方法と、実際に必要なワイヤーフレームの枚数の目安をご紹介します(さらに、どのワイヤーフレームが最も重要で、どのワイヤーフレームを見逃す可能性があるかについてのアイデアもご紹介します!)。

デジタルアセットを探る

ワイヤーフレームは何枚必要か?

ウェブサイトデザインプロジェクトの開始時にどれだけのワイヤーフレームが必要かは、構築の範囲と規模によって異なります。

小規模なサイトでは、大規模なサイトに比べてワイヤーフレームの数が少ないことが多い。 しかし、必ずしもそうとは限らない。

一般的に、Webサイトのワイヤーフレームの数を示す指標は、サイトマップに根ざしています。 Webサイトがどのように構成されているか、メッセージを伝えるために必要なページやページタイプは何階層か。

多くのクライアントは、ワイヤーフレームの段階でデザインを「見る」ことができます。 何十枚ものアウトラインを見せても、コンテンツが埋まっていくまでは意味がありません。 だからこそ、少ない方がいいのです。 ワイヤーフレームをいくつか使って、サイトの基本構成「ルール」を決めれば、クライアントはデザインのコンセプトを感じ取ることができるでしょう。

ウェブサイトのサイトマップとアウトラインから始める

タイトルの質問の答えの始まりは、ウェブサイトのコンテンツを整理することです。 これは、デザインが出来上がる前に行われることです。

トップページ、サブページ、サブページ、ショップアイテム、ブログ記事など、視覚的にどのように構成されるかを記したサイトマップを作成します。

当然ながら、似たようなコンテンツタイプのページが集まってきて、ワイヤーフレームの輪郭がほぼ見えてきます。

この段階では、まだ十数枚のワイヤーフレームを作成する必要があると思うかもしれませんが(ウェブサイトによって異なります)、それらを絞り込むことができますのでご安心ください。

シンクモジュラー

たくさんのワイヤーフレームから数枚のワイヤーフレームにする方法をご紹介します。

プロジェクト全体を1ページずつアウトライン化するのではなく、複数のページで使用・再利用できるようなモジュールパーツを考える(ミックスアンドマッチ・ワイヤーフレームです)。

このコンセプトは時間の節約になるだけでなく、ページ間で使用できる一連の複製・再現可能なパーツを用意することで、デザインに一貫性とパターンを生み出し、サイトが完成したときにユーザーがより簡単に操作できるようにすることができます。

また、クライアントが自分でイメージする手間が省けるのもメリットです。 しっかりとした説明と、忠実度の高いワイヤーフレームがあれば、クライアントはデザイン全体のコンセプトをより理解できるようになるかもしれません。

すべてのWebサイトに必要な5つのワイヤーフレーム

プロジェクトで作成するワイヤーフレームの数を効率化する場合、具体的にどのようなものが必要なのでしょうか。

まずは、サイト全体の構成に必要なものを視覚的に把握できる5つの基本的なワイヤーフレームから始めましょう。 ワイヤーフレーム(およびページ)に組み合わせることで、より迅速かつ簡単に構築できるよう、モジュール化したパーツで考えることを忘れないようにしましょう。

ホームページ

ワイヤーフレームには、ナビゲーションやフッターなど、ページに必要な要素を含むホームページのデザインの全体像が描かれている必要があります。

クライアントによっては、ホームページの忠実なワイヤーフレームがあることで、アイデアを最終的なデザイン段階に押し上げることができます。 クライアントがプロジェクトの方向性を完全にイメージできるように、2~3種類のハイファイ・オプションを作成することを検討してください。

このワイヤーフレームがあれば、実際のデザインプラン(ある程度ビジュアルなもの)ができ、プロジェクトを推進するのに十分な自信を持つことができるはずです。

モバイルホームページ

より多くのユーザーが携帯電話でウェブサイトにアクセスしていると思われる今、モバイルホームページの同じハイファイワイヤーフレームを持つことは重要です。 各ハイファイワイヤーフレームには、小さなスクリーンで要素がどのように積み重なり、再配置されるかを詳細に示すモバイルパートナーを含める必要があります。

関連項目: パワーポイントにPDFを挿入する方法

タップやスワイプとクリックなど、異なるインタラクションがあれば、それを記録しておくと、適切な機能が得られるかもしれません。

セカンダリー(最上位ナビゲーション)ページ

トップページからの最初のクリックは何ですか? そのページタイプのワイヤーフレームが必要です。

1つのワイヤーフレームに、ここに必要な要素をすべて盛り込み、2つ目のページでは不要な部分を削ぎ落とすことができるように考えましょう。

これにより、コンテンツのマイナーチェンジに伴うワイヤーフレームの繰り返しの時間と労力を削減することができます。

お問い合わせまたは会社概要ページ

ほとんどのWebサイトには、お問い合わせや会社概要のページがあります(多くのWebサイトでは両方あります)。 このページは、ほとんどのWebサイトで最もアクセスされ、重要な要素の1つであるため、これら両方のページのワイヤーフレームを前もってデザインします。

ショップやブログのページ

最後に、ウェブサイトの目的を考えてみましょう。 多くの場合、情報提供やeコマースといったカテゴリーに分類されます。 そのようなページのワイヤーフレームをデザインします。

このようなワイヤーフレームには、フルインデックス(アイテムやブログ記事のショーケース)と詳細ページ(単一のアイテムやブログ記事)の2種類のページが含まれることがあります。

大規模なサイトのための追加ワイヤーフレーム

Webサイトのデザインによっては、もっと複雑なニーズがあり、ワイヤーフレームを追加する必要がある場合もあります。

まずは、上記で紹介した基本的なワイヤーフレームを作成し、クライアントの承認を得た上で、デザインプロセスに組み込みます。 その後、追加のワイヤーフレームを作成します。

一度に全部作ることもできますが、多くのクライアントにとって、一握りのワイヤーフレームを見て消化するのは大変なことです。 一度にサイト全体のアウトラインを押し付けようとしないことをお勧めします(相手が望むものでなくても、早急に承認してしまうことになり、長期的にはプロジェクトが頓挫する可能性があります)。

その他にも、ワイヤーフレームを入れることがあります:

  • サービスや価格のページ
  • 予約、メニュー、フォトギャラリーなど、独自の要素を盛り込んだ特別ページ。
  • 地図や位置情報ページ
  • チェックアウトや追加アイテムなど、Eコマースの詳細ページ
  • メールマガジンやサインアップページ
  • ユーザーログインまたはプリファレンス
  • ユーザーが作成したコンテンツやフィード
  • 重いデータの可視化またはテーブル

結論

プロジェクトは千差万別なので、ワイヤーフレームの枚数に決まりはありませんが、まずは機能的なワイヤーフレームをいくつか用意することで、あなたやクライアントがプロジェクトをイメージしやすくなり、正しい方向へ進むことができます。

ワイヤーフレームを作り続けるのは簡単ですが、それらをすべて機能的なウェブページにするのは大変です。

関連項目: ハロウィンのグラフィックデザイン:10 Spooky Tips & Ideas

そして、もし後からもう一枚ワイヤーフレームが必要になったとしても、道具を駆使して素早く作り上げることができるので心配はいりません。

John Morrison

ジョン・モリソンは、デザイン業界で長年の経験を持つ熟練のデザイナーであり、多作な作家でもあります。知識を共有し、他の人から学ぶことに情熱を持っているジョンは、業界トップのデザイン ブロガーの 1 人としての評判を確立しました。彼は、仲間のデザイナーにインスピレーションを与え、教育することを目的として、最新のデザイン トレンド、テクニック、ツールに関する研究、実験、執筆に日々を費やしています。デザインの世界に夢中になっていないときは、ジョンはハイキング、読書、家族との時間を楽しんでいます。