【5分でわかる】WF（ワイヤーフレーム）とは？

2022年8月6日 11:49

こんにちは！がっしーです。

Web制作をしていると、当たり前に行っているプロセスを再度考え直すことがあります。
それこそ、講師をやっている身からすると分かりやすく相手に説明する必要があります。

そこで、Web業界2年目の私が今では当たり前になっていることを、改めて文章にしてみようと思いました。

今回は、ワイヤーフレームとはなんなのか？という概要やおすすめ作成ツールなどをわかりやすくご紹介します！

WF（ワイヤーフレーム）って何？

ワイヤーフレームを簡単に言ってしまうと「サイトの設計図」になります。

ワイヤーは「線」、フレームは「枠」という意味です。
その言葉どおり、ワイヤーフレームとは webサイトの完成イメージを簡単な線と枠で表現します。

ビジュアル的な詳細を決める前に作成するので、デザイン制作に入る前にワイヤーフレームの作成段階では大きな仕様変更も可能です。

例えば、ワイヤーフレームが無かったらどうなるのかというと、時間をかけて細かい調整までしてデザインを仕上げたのに、この要素やコンテンツがいらなくなったなどの変更があった場合、今ままで努力が水の泡となる訳です。

目的を達成するための構成を視覚的に表現するために、シンプルなページの中にテキストや画像などの要素を効果的に配置していきます。

ワイヤーフレームは、サイト上の情報の配置を決めるものです。

Where: どこに（画面の上下部、左右部などの位置を決める）
What: なにを置いて（ロゴ、メニュー、コンテンツなどを決める）
How: どのように動作させるか（リンクや出力などの仕様を決める）

機能・動作が目的からズレていないか常に意識しましょう。
一番重要なことは、ユーザー視点での機能性・操作性がきちんと考えられていることです。

「サイトの目的やゴールが、ユーザーの求めるものからズレていないでしょうか。」
「ユーザーは適切に誘導されているでしょうか。」

コンテンツの配置が変わると導線も変わり、サイトの目的を達成できなくなるかもしれません。

ワイヤーフレームを作成しているときは、昨日や動作の目的を常に意識し、どうしてそのレイアウト、配置にするのか理由を明確にしておきましょう。

ワイヤーフレームはwebサイト制作に必要な、最初の設計図になります。
シンプルでありながら、機能や操作性を考え、ユーザーの目的や目標達成に最適な配置を決定しなければなりません。

webサイト制作前にしっかりとワイヤーフレームを作りこむことで、デザインやコーディングなどの工程で修正を減らすことができ、スムーズに制作を進めることができます。

この記事が気に入ったらサポートをしてみませんか？