ワイヤーフレームとは何?Webデザインの初心者へ

ワイヤーフレームの定義、特徴、役割、基本構成要素、実例から、ワイヤーフレームというものをWebデザインの初心者に詳しく紹介します。この記事を読むことで、ワイヤーフレームの意味を明らかにすることができます。

ワイヤーフレームとは

ワイヤフレームとは、Webページ、UIまたは任意のスクリーン内のもののレイアウトと構成の視覚的表現で、簡単に言えばサイトやアプリケーションの設計図のことです。これは、ワイヤー(線)とフレーム(骨組み)だけ使う2次元モデルです。間取り図と家を建てることの関係のように、ワイヤフレームはWeb制作やUI設計にとっては、デザインの下書きとして設計、開発の参考になり、作業がうまく進めることに役立ちます。そのため、ウェブサイトやUIを構築しようとする人にとって、ワイヤフレームは構築を開始する基礎となります。

ワイヤーフレームの特徴

ワイヤーフレームの3つの特徴から、この種の図をよりよく理解できます。

1. ワイヤフレームは、ページ要素、サイト機能、及びWebサイトまたはUIのナビゲーションの特定のサイズと位置を概説するシンプルな黒白レイアウトです。

2. 色、フォント、グラフィックなどの実際のデザイン要素はワイヤフレームに含まれていません。

3. ワイヤフレームはページの骨で、ページ内の要素どのように配置するのかという基本的なフレームワークです。

ワイヤーフレームの役割

なぜワイヤーフレームがWeb制作やUIデザインに活用されているのか、その原因を検討すると、ワイヤーフレームがWeb、アプリケーションなどの構成を視覚化にするということにあるのではないでしょうか。以下、ワイヤーフレームの役割から、ワイヤーフレームを使うメリットを詳しく説明します。

  1. 構造をはっきりと視覚化し、インタフェースの特徴を明確にする。
  2. ワイヤフレームは、プロジェクトの最初の実際のプロセスです。それは抽象的なアイデアを、具体的​​なものに変換します。ワイヤフレームにより、ページ内の機能がどこ、どのように動作するかについてのことが明らかに表示されます。

  3. デザインにおける問題や見落としなどを発見しやすい。
  4. デザインの下書きとして、ワイヤーフレームは簡単に修正、変更することができます。ページのレイアウトには何か問題があるとか、何の要素は見落とすとか、設計者が何の改善意見があるとか、何の変化があっても、すぐに簡単に見つけて、解決することは可能です。

  5. Web制作において時間と労力を節約する。
  6. 前述の「デザインにおける問題や見落としなどを発見しやすい」という点があるから、すべてのことをワイヤーフレームデザインのときに最適化にすることになり、実際の設計段階に問題を見つけたり、解決したりする必要はありません。これは設計を効率的に完了することに役に立ちます。

  7. 設計者間でのコミュニケーションを促進する。
  8. デザインにかかわる人々に共有可能で、Webサイトの構造のイメージであるワイヤーフレームは設計者間の意見交流、開発検討などを促進する役割も果たしています。

ワイヤーフレームの基本構成要素

Webサイトワイヤーフレームを作成する前に、必要な構成要素を考慮しなければならないのです。以下が示す通りに、ワイヤーフレームの基本要素として、ロゴ、ヘッダー、検索フィールド、ナビゲーションシステム、コンテンツ、フッターなどが含まれます。ブレッドクラム、補足ナビゲーション、メインビジュアルなどの要素があるかどうかはサイトのタイプや役割に決めます。

  1. ロゴ
  2. 検索フィールド
  3. ブレッドクラム(設計しない場合もある)
  4. ヘッダー(ページタイトルはH1、サブヘッドH2-Hxなど)
  5. ナビゲーションシステム(グローバルナビゲーションとローカルナビゲーションを含む)
  6. コンテンツ
  7. フッター

ワイヤーフレーム基本構成要素

ワイヤーフレームの例

前述のワイヤーフレームのことをしっかりわかるように、以下のシェアサイトのワイヤーフレーム例をご覧てください。シェアサイトのワイヤーフレーム

もっとワイヤーフレームのテンプレートを見よう。

ワイヤーフレーム作成の4つのステップ

  1. WebページやUIに掲載するものを洗い出して、整理する。
  2. 以上のものをレイアウトする。
  3. 紙に下書きをする。
  4. ツールでワイヤーフレームを作成する。

始めましょう!きっとあなたの愛用ソフトになる!

Edraw Max は多用途の作図ソフトです。フローチャート、組織図、マインドマップだけでなく、ネットワーク図、フロアプラン、ワークフロー図、服装設計、UML 図、電子工学図、科学イラスト、及びチャートとグラフなどのよく使われる図表を作成できます。

Top