ワイヤーフレームとは？初心者でも迷わない描き方と考え方をやさしく解説

ワイヤーフレームって何？

なんとなく聞いたことはあるけれど、
実際にどう使うのか、いつ作るのか、
よく分からない…という方も多いと思います。

デザイン前にやるもの？
なくてもいい？
正直、よく分からないですよね。

結論からお伝えすると、
ワイヤーフレームは 迷わず作るための設計図 です！

今回も、現役Webデザイナーの私のエピソードを交えながら、
初心者さんにも分かるように、
ひとつずつやさしく整理していきますね＾＾

店長 しおん

最初は私も「なくてもいいんじゃ？」と思っていました。でも今は、ほぼ必須だと感じています

1. ワイヤーフレームとは？ひとことで言うと

ワイヤーフレームとは、
Webページの 設計図 や 骨組み のことです。

色や装飾を入れる前に、
「どこに」「何を」「どの順番で」置くのかを決めるためのもの。

つまり、
ワイヤーフレームは「デザイン」ではありません。

考えるのは、こんなことです。

見た目を整える前に、
中身と順番を整理する工程 なんですね。

私がクライアントに説明するときも、
こんなふうにお伝えしています。

店長 しおん

これはデザインではないので、見た目は気にしなくて大丈夫です。配置と内容だけ一緒に確認しましょう

ワイヤーフレームの段階で、
下手に色を入れたり、デザインっぽくしてしまうと、
「もう完成形？」と勘違いされてしまうこともあります。

なので、
ワイヤーフレームでは デザイン性はあえて排除 するのがポイントです。

2. なぜワイヤーフレームを作るの？

「正直、なくても作れるんじゃない？」
そう思ったことがある方もいるかもしれません。

でも、いきなりデザインから入ると、
こんなことが起きやすいです。

結果として、
時間も労力もたくさんかかってしまうんですよね…。

ワイヤーフレームは、
一見すると遠回りに見えますが、
実は いちばんの近道 です！

Web制作の基本的な流れは、

この順番で進めます。

ひとつひとつの段階で、
しっかり決めてから次に進むことがとても大事です。

いい加減に進めてしまうと、
あとから「やっぱりここ変えてください」と言われて、
修正地獄になってしまうことも…笑

店長 しおん

ワイヤーフレームで考え切っておくと、デザインが本当に楽になりますよ

ちなみに、
「デザインの仕事ってどんな流れで進むの？」と気になる方は、
こちらの記事も参考になります。

あわせて読みたい

Webデザイナーってどんな仕事？未経験でもわかる仕事内容と働き方をやさしく解説

3. ワイヤーフレームがないと起きがちな失敗

ワイヤーフレームを作らずに進めると、
初心者さんほど、こんな状況になりやすいです。

特に多いのが、
「作っている途中で、あれ？これ必要？」と迷い始めるパターン。

その結果、
直したり戻したりを繰り返して、
時間ばかりかかってしまいます。

私自身も、
ワイヤーフレームを作らずに進めていた頃は、
あとからの修正が本当に多かったです…笑

ワイヤーフレームがないと、
ゴールが見えないまま走っている状態。

だからこそ、
最初に 全体の地図 を描いておくことが大切なんですね。

店長 しおん

先に考えておくだけで、作業のストレスがかなり減りますよ

4. ワイヤーフレームで決める主な要素

ワイヤーフレームでは、
見た目ではなく「流れ」を決めていきます。

具体的には、こんな要素です。

「どこに何を置くか」
「どこを一番見てほしいか」

これを整理するのが、
ワイヤーフレームの役割です。

私の場合は、
ワイヤーフレームの段階で、
入れる文章の内容もクライアントと一緒に決めてしまいます。

そうすると、
デザインに入ったときに迷いがなくなり、
作業がとてもスムーズになります。

文章がまだ決まっていない場合は、

「ここに説明文が入る」
「ここに見出しが入る」

といった ダミーテキスト を入れておきます。

個人的には、
「決まっていないのに、とりあえず進める」
というやり方はあまりおすすめしていません。

できるだけ、
決められるところは先に決めておく。

それだけで、
後の工程がとても楽になります＾＾

5. ワイヤーフレームとデザインの違い

ここで、
ワイヤーフレームとデザインの違いを整理しておきましょう。

ワイヤーフレームは、
「どう並べるか」「どう伝えるか」を考える工程。

デザインは、
「どう見せるか」を考える工程です。

この違いが分かっていないと、
いきなり色や装飾を入れたくなってしまいます。

でも、それをやってしまうと、
本来考えるべき「中身」が後回しになってしまうんですね。

サイト全体の雰囲気については、
こちらの記事でやさしく解説しています。

あわせて読みたい

サイトの「トーン＆マナー」とは？初心者でもわかる考え方と決め方をやさしく解説

ワイヤーフレームで土台を作り、
トーン＆マナーを意識してデザインする。

この順番を意識できると、
デザインのクオリティが一気に安定してきますよ＾＾

店長 しおん

順番を守るだけで、「それっぽいデザイン」から卒業できます

6. ワイヤーフレームはいつ作る？

ワイヤーフレームって、
毎回必ず作らないとダメなんですか？

これは、初心者さんからよく聞かれる質問です。

結論から言うと、
すべての制作で必須ではありません。

ただし、
あると圧倒的に楽になる場面は多いです。

具体的に見ていきましょう。

バナー制作の場合

バナー制作は、
構成がある程度決まっていることが多いです。

そのため、
私自身はバナー制作では、
ワイヤーフレームを作らないことがほとんどです。

頭の中で構成を整理して、
そのままデザインに入ります。

LP（ランディングページ）制作の場合

LPは情報量が多く、
流れがとても大事なページです。

そのため、
しっかりした案件ほど、
ワイヤーフレームを作ることが多いです。

ファーストビューだけの制作など、
部分的なデザインの場合は、
簡単なメモ程度で済ませることもあります。

Webサイト制作の場合

Webサイト制作では、
ほぼ必ずワイヤーフレームを作ります。

ページ数も多く、
情報の整理がとても重要だからです。

ワイヤーフレームがあるかどうかで、
制作のしんどさがまったく変わります。

店長 しおん

「作らなくてもいいけど、あると圧倒的に楽」
それがワイヤーフレームです

7. 初心者におすすめのワイヤーフレームの作り方

ワイヤーフレームと聞くと、
「きれいに作らなきゃ」と思ってしまいがちですが、

そんな必要はまったくありません＾＾

初心者さんにおすすめなのは、
とにかく シンプルに作る こと。

「ここに見出し」
「ここに画像」
「ここにボタン」

これが分かれば、
ワイヤーフレームとしては十分です。

私自身は、
Adobe Illustratorで作成することが多いですが、

PowerPointやGoogleスライドなど、
使いやすいツールで問題ありません。

オンラインのワイヤーフレーム作成ツールもあります。

店長 しおん

うまく描こうとしなくて大丈夫ですよ

8. ワイヤーフレーム作成の基本ステップ

では、
ワイヤーフレームはどんな流れで作ればいいのでしょうか。

基本は、次の4ステップです。

① 目的・ターゲットを確認する

まずは、
「このページで、誰に、何をしてほしいのか」

ターゲットの年代は？性別は？

最終的なゴールは、

お問い合わせ？
購入？
資料請求？

ここがブレると、
ワイヤーフレームもブレます。

② 入れる情報を書き出す

次に、
必要そうな情報を全部書き出します。

最初は多くてもOKです。

③ 優先順位を決める

書き出した情報を見ながら、
「これは絶対必要」
「これはあればいい」

と整理していきます。

ここで、
情報の取捨選択ができると、
ページがとても見やすくなります。

④ 四角で配置する

最後に、
四角を使って配置していきます。

文字は四角、
画像も四角でOK。

この段階では、
色も装飾も一切いりません。

私の場合は、
文章もこの段階でクライアントと確認しながら、
ワイヤーフレームに入れてしまいます。

未定の部分がある場合は、
「ここにテキストが入る」と書いておきます。

店長 しおん

考えてから並べるだけで、
制作が本当に楽になりますよ＾＾

9. ワイヤーフレームでよくある勘違い

ワイヤーフレームについて、
初心者さんが勘違いしやすいポイントがあります。

ですが、これらはすべて 思い込み です。

ワイヤーフレームは、
自分と相手のためのメモ のようなもの。

見た目の美しさより、
「意図が伝わるかどうか」が一番大事です。

会社によっては、
「ワイヤーフレームはきれいじゃないとダメ」

と言われるケースもあるようですが、
本質はそこではありません。

店長 しおん

分かればそれだけで十分です！

10. 実務・副業ではどう使われている？

実際の仕事では、
ワイヤーフレームはこんな使われ方をしています。

私の場合は、
Illustratorでワイヤーフレームを作成し、

PDFにして、
クライアントにメールで送っています。

ワイヤーフレームが確定してから、
デザインに入る、という流れです。

ここで大切なのが、
きちんと説明すること。

「この段階で確定したレイアウトと文章は、
デザインに入ってからは変更できません」

と、事前に伝えておくことで、
大きなトラブルを防げます。

店長 しおん

考えられるデザイナーは、信頼されやすくなりますよ＾＾

11. しおん店長の体験談｜最初は作っていませんでした

実は私も、
最初からワイヤーフレームを作っていたわけではありません。

新人の頃は、
ワイヤーフレームという言葉自体を知りませんでした。

いきなりデザインを作って、
あとから修正が大量に出て、

「なんでこんなに直しが多いんだろう…」

と悩んだこともあります。

その後、
先輩のワイヤーフレームを見て、

「あ、最初にここまで考えてるんだ」

と気づきました。

そこからは、
必ず構成を考えてから作るように。

すると、
修正も減り、
作業もかなり楽になりました。

店長 しおん

「考えてから作る」
これだけで世界が変わります＾＾

12. ワイヤーフレームはバナー・LP・サイトすべてにつながる

ワイヤーフレームの考え方は、
Webデザイン全体の土台です。

バナー構成を考えるときも、
LPの流れを作るときも、

「何を、どの順番で見せるか」

という考え方は共通しています。

バナー制作については、
こちらの記事も参考になりますよ。

あわせて読みたい

バナーってどう作るの？初心者でも迷わない基本手順をやさしく解説

Webデザイナーの仕事全体を知りたい方は、
こちらもおすすめです。

あわせて読みたい

Webデザイナーってどんな仕事？未経験でもわかる仕事内容と働き方をやさしく解説

まとめ

店長 しおん

まずは紙に、四角で描いてみるところからで大丈夫ですよ＾＾

デザインオンラインカフェ店長 しおん

Web & グラフィックデザイナー

Webデザインやグラフィックデザインをはじめて学ぶ方が、“むずかしい” より “楽しい” を感じられるように、やさしく丁寧に解説しています。これまでデザイナーとしてさまざまな制作に携わりながら、初心者の学習サポートや、デザインの基本を伝える活動を続けてきました。「副業としてデザインを始めたい」「基礎からゆっくり学びたい」そんな方が安心して学べる空間をつくっていきます。ゆっくりお茶を飲むような気持ちで、読んでいただけたら嬉しいです！