はじめてのワイヤーフレーム作り！目的と作成の流れとは？

2023年12月29日

こんにちは！まきすずです。

今回は、Web制作のシーンでよく耳にする「ワイヤーフレーム」について、目的や作り方の流れを解説します！

主婦やママも、Webデザインの勉強中にワイヤーフレームって言葉は聞いたことがあると思いますが、「実際にどのように作っていいのかよくわからない。」「デザインからはじめてしまっている！」という方も多いのではないでしょうか？

まきすず

もちろん、ワイヤーフレームは絶対に作らないといけない！というものではないですが、Webデザインをする上では、あるとその後の制作業務がスムーズになり、何かと便利です！

ただ、ワイヤーフレームって実際に教わる機会ってほとんどないのが現状だと思います。

主婦やママで、Webデザイナーを目指してWebデザインのスクールに通われている方も多いと思いますが、実際にワイヤーフレームの作り方を教わるカリキュラムは少ないのではないでしょうか？

とっしー

ワイヤーフレームがなくてもデザインはできるからね。スクールではデザイン制作を学ぶことに重きをおいていることが多いよね！

ということで、今回は下記のような方に向けて書きました！

この記事はこんな方におすすめ！

デザインを作ってから、あれもこれもとクライアントから要望が発生し結局デザインのやり直しが発生したことがある
ワイヤーフレームは聞いたことあるけど、作ったことがないから流れなどを知りたい！
テキストの情報からデザインを作り始めるのが苦手！

この記事を読んでいただくことで、ワイヤーフレームに関する知識レベルをググッとあげることができます。では、早速記事をみていきましょう！

そもそもワイヤーの目的って？どこがゴール？

ワイヤーフレームの目的は2つあります！最初にこれを押さえておくことで作り方の流れもスッと頭に入りやすくなりますよ。

情報の整理
チームやクライアントとの認識合わせ・共有

まずは1つ目の目的である『情報の整理』からみていきたいと思います！

【1】情報の整理

情報整理とはつまり、Webサイトに掲載する情報（＝中身のコンテンツ）を明確にすることです。情報が決まってない状態では、デザインも機能も作れないため、この工程は非常に重要。

例えば、下記の2つのプロジェクトでは、どちらがデザインや機能を作りやすいでしょうか？

Aパターン

歯医者のWebサイトの制作
地図や診療スケジュールなど基本情報の他に、ブログも作りたい、ユーザーの会員登録あった方がよさそう
予防歯科に力を入れていてアピールしたい

Bパターン

虫歯治療で20年の実績ある院長が有名で、メッセージページが必要
強みは最新の機材で、今年の最新モデル。特徴は鮮明な写真撮影機能！
東京にある歯医者で、7ヶ月後にオープンします。
院長のプロフィールと写真を5枚入れたい
ページは10ページくらいで見積もり

ここではBという人が大半なのではないでしょうか？なぜなら、Bの方が伝えたいメッセージが明確で、それを元にしてデザインやWebの機能を詳細に考えていきやすいからです。

逆にAパターンでは、情報が少なすぎて結局どんなWebデザインにしていいのか曖昧なままになってしまいそうです。Bパターンの情報まであると、スムーズにWebサイトに入れたい必要な情報のイメージがつきませんか？

ただ、クライアントはBパターンの情報量を最初から提示はしてくれることはほとんどありません。なぜならクライアント自身も、どんな情報を入れたいのか、何が必要かが、最初からはっきりわかっていることは少ないためです。

とっしー

目的を持ってWebサイト作りを依頼しても、実際に必要な情報はなかなか思い浮かばないもの！

そこで、ワイヤーフレーム登場です！まずは制作側がクライアントの話をヒアリングし、そしてWebサイトに必要な情報を整理しながらワイヤーフレームをつくることで、クライアントもイメージがしやすくなり、情報が明確になっていきます。

Webサイトのデザイン制作に入る前に必要な情報を集めて整理することで、デザイン着手前に「これも追加したい！」「これも必要かも！」ということがわかってくるわけですね。

まきすず

デザイン前に情報の整理をし、ワイヤーフレームを作ることでデザイン着手時には情報が集まり、スムーズにデザインに入ることが可能なんです！

ポイント！

文章からWebサイトの構成を考え、必要なページの洗い出しを行う
実際のテキスト文字数などや写真のボリュームを考えながら、サイト内のレイアウトやスペースを考えていきます。
サイト内での動きや、要素の順番、優先度（大きさ）などを明確化する
スクロールに応じて写真が変化したり、アイコンが数秒毎に入れ替わったりといったWebならではの「動き」もここでざっくり決めることが多いです。
ヘッダーフッターなどの共通メニューや、リンク構造などを把握する
各ページの要素を並べてみることで、どんなメニューがベストなのか、各ページの繋がり（リンク構造）は問題ないか？などを検討することができます。

ちなみにヒアリングで情報を引き出したり、どんなことを聞くべきなのか？といったヒアリングのポイントは、下記の記事でまとめています！ご参考ください！

【2】チームやクライアントとの認識合わせ

主婦やママもフリーランス場合でも、もしかしたらチームで作るという機会も今後発生するかもしれません。またはディレクターから、デザインの仕事をもらうと言った場合もあると思います！

そういった場合も、お互いの認識のズレをなくすためにワイヤーフレームが活躍します！

もしワイヤーもなく文章だけの情報でWebサイトを作る場合、

制作中に意見が発散してしまい、制作がスムーズにいかなくなる
どのくらいの工数が必要かイメージできない（つまり見積もりがずれやすい）
要素がわからないので、最適なデザインや機能を考えにくい

というようなことも発生してしまう可能性も十分に考えられます！！

例えば、先ほどの歯医者の例を振り返り、2つの要望をピックアップしてみました！

虫歯治療で20年の実績ある院長が有名で、メッセージページが必要
院長のプロフィールと写真を5枚入れたい

このテキストの状態だと、受け取り側もまだまだイメージがつかないと思います。「一緒にしていいページなのか？」「別ページなのか？」ということが、曖昧な状態にです。

こういったことを防いで制作をスムーズに行うためにも、ヒアリング時のなんとなくのイメージをできるだけ具現化し、成果物（Webサイト）にズレがないように進めるというのがワイヤーフレームの目的になります。

それではいよいよ、具体的にワイヤーフレームを作成する際の流れに移りたいと思います！

Webデザイナーも知って欲しい！ワイヤーフレーム作成の4STEP

主婦やママもWebデザイナーとして、デザイン中心に制作している方も多いと思いますが、ワイヤーフレームの作り方を知っておくと、いざという時にもとっても便利ですよ！

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

STEP

要素（情報）を明確に把握すること

STEP

要素の優先順位を明確にしていく

STEP

クライアントとコミュニケーションを取りながら、１と2を繰り返していく

STEP

細かい方向性を明確にして、スムーズにデザイン制作を始める

【STEP1】要素（情報）を明確に把握すること

まずはWebサイトに掲載する要素を洗い出し、明確にしていきます！具体的には下記のような項目。

キャッチコピー
写真
SNSの情報
プロフィール
社員の情報
事業内容
キャンペーンについて
料金表 etc.

なぜなら、Webサイトはコンテンツ（情報）がなければ成り立たないからです。

Amazonは商品、Facebookは投稿された人々の近況、Googleは世界中のネット情報があるから、価値が生まれる。もし検索窓だけのWebサイトなんて誰もきませんよね？

またこの過程で、合計で何ページに設計するのか？というページ数についても決めていきます。

【STEP2】要素の優先順位を明確にしていく

続いてやるべきことは、要素の優先度の明確化です。Webサイトのデザインや機能を考える上で必要なのがこの部分。

数ある要素の中で、どの情報が大切で、どの情報が補足情報なのかが明確でないと、ものすごくわかりづらいサイトになるからです。情報の優先度が曖昧なままだと、結果としてユーザーに伝えいた情報が伝わりません。また、機能面でもなかなか決められないという状況になってしまいます。

優先順位の付け方として、Webサイトを作る目的を振り返ってみてください。

今回の例では、スキンケア商品を販売するコーポレートサイトを例にしてみました。購入には、別のサイトからの購入になりますが、コーポレートサイトからECサイトへ流入するためのリンクボタンが設置されています。

今回は、春の新商品発売もあるため、商品をアピールしつつサイトのリニューアルを目的としています。

スキンケア商品を扱う会社のサイトのリニューアル案件。春に向けて新商品を発売することの訴求をしながら、ECサイトへの流入を増やしたい。

新商品発売のことを前面に押し出しながら、訴求したい
ECサイトへのリンク目立つようにして、購買につなげたい
ECサイトでの販売の他、デパートでも販売していることを伝えたい

もちろんもっと伝えいたい内容等はありますが、上記がもっともクライアントが伝えたいなと思っていること！これをテキスト情報だけではなく、イメージをつかめるように実際のワイヤーフレームに落とし込んでいきます！

実はこの過程、バナーを作る時と似ていてデザインの基本の考え方！バナーを作るときにもぜひ参考にしてみてください！

【STEP3】クライアントとコミュニケーションを取りながら、１と2を繰り返していく

途中から情報が追加されたり、優先度がコロコロ変わるというのは実際によくある話！

それでも納期とのバランスを見ながら、最終的な落とし所を判断して提案していけたら、クライアントや一緒に働くチームとも大きな問題も発生することなく進むことができますよ！

【STEP4】細かい方向性を明確にして、スムーズにデザイン制作を始める

情報の整理をしていきながら、最後はクライアントの細かい要望も取り入れられたらよりスムーズにデザインに落とし込めそうですね！

ここの部分は、もっと写真をいっぱいに使う！
よりコンセプトが引き立つように、背景の要素がこんな動きをするように組み立てる。

もし、コーディングを他の人に依頼する、自分がディレクターとなってWebデザイナーに伝えるという場合は特に、細かい要望もワイヤーフレームの時点でクライアントからヒアリングできていると、より後の制作がスムーズになりますが、主婦やママで一人で制作する場合はここの部分はデザイン実際に作りながら聞くのもOK！

大切なことは、デザインを何往復もしないためにも無駄な作業をなるべく発生させずに、しかしクライアントの要望を取り入れること！