MENU

ワイヤーフレームとは

目次

ワイヤーフレームとは

画面設計図とも呼ばれ、ホームページ内の構成要素をレイアウト・定義するものです。

文字通り、ワイヤーは「線」、フレームは「枠」という意味です。各ページにどのようなコンテンツを設置するか、サイトの完成イメージをシンプルな線と枠で表現する設計図のことになります。クライアントの目的やサイトコンセプトなどに基づいて作成します。

ワイヤーフレームとはそもそも画面レイアウトおよび構成する要素を定義する工程ですが、レイアウトや文字の装飾など一部デザイン工程を含む場合もあります。
そのため要素のみ確認すればよいのか、レイアウトを確認すればよいのか、使用されている写真、テキストなどの素材まで確認すべきなのかといった、ワイヤーフレーム時点で定義しておくレベルのすり合わせが必要です。

類似して使われる言葉

「デザインカンプ」

デザインカンプはWebサイトの細かい部分まで確認するためのデザイン案、完成イメージのことです。最終的な外観を正確に示し、ビジュアルデザインの確認に使われます。
また、ワイヤーフレームではわからないデザイン上の問題点を見つけることができる場合があります。

「モックアップ」

モックアップはwebサイト制作の用語として、「デザインカンプ」とたいてい共通の意味で使われます。
もともとはプロダクトデザインで使われていた用語で、実物大の模型や試作品を意味しています。模型という言葉から派生して、webサイト制作の現場では、完成イメージを表す言葉として使われています。

ワイヤーフレーム作成の注意点

詳細な画面表示を決める前に作成するので、ワイヤーフレームの作成段階では大きな仕様変更も可能です。
シンプルなページの中にテキストや画像などの要素を効果的に配置し、目的を達成するための構成を視覚的に表現しています。

本来、ワイヤーフレームにはビジュアル的な要素は含まず、骨組みの状態です。サイトのタイプや役割によって、必要なパーツの配置や機能、コンセプトについて確認し、全体的なイメージと方向性を可視化します。

ユーザーの視点を意識した設計図作りを

人の目線の動きには決まった法則があります。紙媒体とWebの画面では視線誘導の法則が異なり、紙媒体では「Zの法則」と呼び、Webでは「Fの法則」と呼ばれます。

「Fの法則」は、Webサイトで画面を「F」字に見ていくという法則です。

ユーザーの目線は、まずは左上のロゴ部分からヘッダーが目に入り、グローバルナビゲーション(メニュー)、コンテンツ、記事と読み進めていくような移動です。
事実ほとんどのWebサイトでは、左上に企業ロゴを配置するレイアウトをしています。

最もユーザーに伝えたい内容を左側や中央に配置することで、効果的な訴求が期待できます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次