Webディレクター向けワイヤーフレームの作り方【初心者向け】

スポンサーリンク
この記事は約5分で読めます。

新人Webディレクター向けに、ワイヤーフレームの作り方を紹介します。

実は僕自身、2018年に未経験でWebディレクターに転職したときは「ワイヤーフレーム、ナニソレ?」状態でした。

現場で悪戦苦闘しながら覚えたワイヤーフレーム。
今回はワイヤーフレームの基本の考え方から、おさえておくといいポイントまで解説したいと思います。

Webディレクター向けワイヤーフレームの作り方【初心者向け】

スポンサーリンク

ワイヤーフレームとは?

ワイヤーフレーム(ワイヤー・WFともいう)は、Webページの設計図のことです。

トップページ、下層ページ、問い合わせページ、LPなど、構成が異なるページごとに作るのが一般的です。

ワイヤーフレームとは何かについておさえておきましょう。

ワイヤーフレームはWebページ構成を線で表したもの

ワイヤーフレームの特徴はWebページ構成をシンプルな線(ワイヤー)で表したものであることです。

通常、ワイヤーフレームを作る際は、ヘッダー、グローバルメニュー、メインビジュアル、キャッチコピー、テキスト、ボタン、サイドバー、フッターなど、Webページの構成要素とレイアウトを盛り込んで作ります。

なぜワイヤーフレームが必要なのか

なぜワイヤーフレームが必要なのか?

それは、ワイヤーフレームを作ることでクライアント/自社とWebページの完成イメージの認識を合わせることができるためです。

ワイヤーフレームが無い中でWeb制作を進めた場合、デザイン・コーディングと進んだ段階で、「イメージと違う」という理由でレイアウトや全体の構成が大幅に変更になってしまう恐れがあります。

既存のページにはない「新規ページ」を作る場合はとくに注意が必要です。

また、ワイヤーフレームを見ながら会話をすることで、この原稿はライターさんに依頼する部分、デザインはここがポイント、コーディング時はこういう動作を追加して欲しいなど、チーム内の連携がスムーズになります。

認識合わせ、必要要素の漏れがないかの確認、修正回数の削減など、プロジェクトをスムーズに進めるためにも、基本的にはどの案件でもワイヤーフレームを作るのが一般的です。

スポンサーリンク

ワイヤーフレームの作り方

一般的なワイヤーフレームの作り方の手順を紹介します。

1、構成要素をすべて挙げる

まずはWebページを構成する要素をすべて洗い出します。

ロゴ、グローバルナビゲーション、メインビジュアル、キャッチコピー、メインコンテンツエリアの構成、サイドバー、フッター、パンくずリスト、広告バナーなどが構成要素として挙がると思います。

2、要素を配置してレイアウトを決める

続いて、構成要素を適切に配置してレイアウトを決めます。

重要な情報はページ上部に目立つように配置したり、迷いなく問い合わせできる導線にする、商品やサービスを使いたく/買いたくなるような流れにするなど、ワイヤーフレームは奥が深いです。

特にWebページを開いた時にスクロールしないで表示される部分(ファーストビュー)は重要です。
LPではこのファーストビューで70%が離脱するとも言われています。

ベイジさんが効果の上がるワイヤーフレームを配布してくれているので、てっとり早く効果的なワイヤーフレームを作るにはこちらを活用させていただくと良いです。
(僕も何度も活用させていただいています)

成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します│ベイジ

ワイヤーフレームの作り方はツール、手書きなどさまざま

ワイヤーフレームはPower Point、Excel、Adobe XDなどのソフトで一般的に作られています。

(Googleスライド、Googlスプレッドシートなども)

時間がない場合や、打合せの場で意見を出しながら作る場合など、ワイヤーフレームを手書きで作ることもあります。

スポンサーリンク

ワイヤーフレームを作る時のポイント

ワイヤーフレームを作る時のポイントを解説します。

業界にとらわれず優れたUIを取り入れる

ワイヤーフレームを作る時は、視野を広く優れたUIを取り入れることがポイントです。

よくあるのが、競合調査をして他社にあるデザイン・UIを取り入れること。

これでも全然問題はないですが、業界を超えて普段使ってて「良いな!」と思うデザイン/UIがあればぜひ取り入れてみてください。

僕は現在人材業界で自社サイトを作ることが多いですが、Google、Apple、Amazon、Twitter、NewsPicks、note、Qiitaなど優れたデザイン/UIを参考にさせていただくことが多いです。

また、Webデザインのアーカイブサイトを参考にするのも手です。

参考サイトを以下に貼っておきます。

デザインを入れない

ワイヤーフレームの本来の目的は構成要素とレイアウトを決めること。

色やデザイン要素を入れてしまうとクライアント/自社で先入観に囚われてしまう恐れがあります。

Webデザイナーからしても、デザインがしにくいといったことが発生するため、できるだけデザイン表現は避けたほうが無難でしょう。

ワイヤーフレームはあくまで線画中心で構成の確認を行うようにするのがポイントです。

(クライアントによっては、デザイン要素がないワイヤーフレームだと完成イメージが沸かないと言われるケースもあります。その場合はWebデザイナーと相談してどの程度デザイン要素を入れるか決めましょう)

キャッチコピー、テキストまで作り込む

ワイヤーフレームの段階ではダミーテキストとして作る場合も多いですが、できる限り完成時をイメージできるリアルなテキストを入れることができるとベストです。

とくに大事なのは文字数。

キャッチコピー、タイトル、ボタンテキスト、本文テキストなどの文字数はデザイン、レイアウトに影響するため、ワイヤーフレームの段階で可能な限り文字数も想定できると良いです。

Webデザイナー、コーダーにも意見をもらう

ワイヤーフレームは基本的にWebディレクターが作ることが多いですが、独断と偏見が悪い方向に進んでしまいWebデザイン・コーディング上影響が出るケースがあります。

そのため、ワイヤーフレームの段階からWebデザイナー、コーダーにも確認・意見をもらうようにしておくと良いです。

構成の意図を説明できるようにする

作った構成のすべてに意味をもたせましょう。

(すべてのデザインには意味があるという意識を持ち、説明できるようにすると良いです)

なぜこの順番で情報を配置しているのか、メニューの位置、CVボタンの位置、サイドバーの構成など、なぜその位置にあるのか?を説明できる状態(意味のある配置)をすることが大事です。

スポンサーリンク

まとめ

Webサイトを作る際はワイヤーフレームが肝になります。

ワイヤーフレームでUI/UXを意識すること、デザイン時やコーディング時のことまで考えて作ること、これらを意識しておくと後のプロジェクト進行がとてもスムーズに進めることができます。

効果のでるWebサイト作りができる、そして、プロジェクト全体をスムーズに進めることができるワンランク上のWebディレクターを目指して一緒にがんばりましょう!