誰でも作れるワイヤーフレームの作り方ガイド！おすすめツールも紹介

ブログなどのwebサイトやサービス設計には欠かせないワイヤーフレームの作り方をご紹介します。
初心者の方でも作れるように丁寧に解説していきます！おすすめツールについても後半で解説していくので是非最後までご覧ください！

ワイヤーフレームとは？

ワイヤーフレーム（wireframe）とは、間取り図のように「何を・どこに・どのように配置するのか」をワイヤー（線形）で表したものです。

フォントや配色、空白などの細かいUI要素は含まず、情報設計を目的として画面全体のレイアウト・メニューなど基本設計を行います。ワイヤーフレームは情報設計のために作る物なので、細かい見た目を気にすることなく、あまり時間をかけずに作成していきましょう。

ワイヤーフレームを作っておくことでその後のUIデザインやコーディングの際に情報設計段階まで遡って迷うことがなくなり、結果として効率的に制作を進めることができます。

ワイヤーフレームを作る際には、サイトストラクチャのことをよく知っておくと効率良く進められます。

サイトストラクチャとは？知っておきたい5つのパターンを解説

続きを見る

ワイヤーフレームを作る目的

ある程度の規模のwebサイトやサービス作りにおいて必ず登場するワイヤーフレームですが、どんな目的があるのでしょうか？この章では皆さんがワイヤーフレームを作る前に知っていて欲しい「目的」をご紹介します。

 コンテンツ（情報）の優先順位を明確にするため

まずワイヤーフレームの1番の目的は、ページに入れるコンテンツの優先順位を明確にすることです。

使いやすいwebサイトやサービスは必ず情報に優先度をつけていて、より見やすいように表示を工夫しています。

よく伝えたいことがありすぎて非常に読みにくい企業サイトなどを見かけますが、原因は伝えたいこと（コンテンツ）の優先度付けができていないことにあります。

そうならないよう、情報設計をしっかりと行いワイヤーフレームで検討しましょう。詳しくは後述しますが、優先度を決めてページのどこに配置するか決める、もしくは別ページに入れるなどの検討が必要です。

Webサイトのレイアウトを決めるため

もちろんwebサイトのレイアウトを決めるためでもあります。情報設計から優先度を割り出し、そこからレイアウトに落とし込むと、ユーザーにとって見やすいレイアウトになります。

ただデザインに情報を当てはめるだけだととても見にくいページになってしまうため、ワイヤーフレームはレイアウトの面でもとても重要な役割を果たします。

 チーム内で認識を合わせるため

ワイヤーフレームはチームでの認識合わせにも頻繁に使われます。

Webサイトやサービスに関わるデザイナー、エンジニア、プランナーなど様々なチームメンバーと認識合わせをするための資料として絶大な効果があります。

ワイヤーフレームツールを用いてデザインを共有し、コメントし合って修正してといった流れが今やスタンダードになりつつあります。

デザインアイデアの「たたき台」になるため

認識合わせでも少し触れましたが、ワイヤーフレームは誰が見てもページのレイアウトがとてもわかりやすくなります。

なので、デザイナーではないエンジニアやプランナーの方でも積極的に意見が言える場になりやすいです。

「この情報はもう少し見えやすい位置に移動した方がいいんじゃない？」「ここにお問合せの導線つけた方がいいかも」

などラフに議論が発展しやすいです。デザインが早い段階で共有できることで無駄な作業が発生しないのもワイヤーフレームの魅力ですね。

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

それでは具体的なワイヤーフレームの作り方をご紹介します。もしwebサイトやサービス、LPなどを作る際はぜひ参考にして作ってみてください。

今回は比較的動線がシンプルになる「美容院店舗サイト」を例にしてワイヤーフレームを作っていきます。

Step1:コンテンツを整理

ワイヤーフレームを作り始める前に、まずはコンテンツを整理しましょう。初めから完璧に導線設計をすることは難しく、まずはざっくりと各要件から導線を把握しましょう。

ユーザーの導線を整理するポイントは、ユーザーのスタートとゴールを明確にすることです。「美容院店舗サイト」の場合ユーザーは、

• どんな雰囲気なの？
• 値段は？
• 何時までやってるの？
• 美容院までの場所は？行き方は？
• どんな美容師さんがいるのかな？

などを考えている場合が多いと思います。

この場合、ユーザーは髪を切りたくて近くの美容院を検索し、webサイトに訪れることをスタート来院することをゴールとします。

ここに至るまでのメイン導線を考えます。ここでは手書きでラフスケッチをしながら考えるのがいいと思います。

例えば、

• TOPページで美容室の雰囲気や自分に合っているのかの確認、営業時間やざっくりとした場所を確認する
• 美容師紹介ページで美容師の紹介をみる→さらに興味が湧く
• アクセスページで具体的な場所を確認する
• 最寄りの駅に到着したら、アクセスページからgoogleマップで道順に沿って美容院に到着する

といった感じです。

メインの導線を作る中で、それ以外の必要な情報もページとして盛り込んでいきます。

• 美容師紹介
• この美容室について（想いなど）
• 料金

などですね。

Step2: サイトマップを作って全体構成を整理する

導線がある程度把握できたら、「サイトマップ」を作ってwebサイト全体の構成を考えましょう。

サイトマップとは作りたいサイトやサービスの全体像のことです。どのようなページ構成なのか一目でわかるものにしましょう。整理したコンテンツから、今回は以下のようなサイトマップができました。

TOPページを窓口として「当店について」ページで美容室のことを深く知ったり、気になる料金にも素早くアクセスできる設計です。今回はTOPページから直接アクセスできる一層までしか描いていませんが、「当店について」ページの中にさらに「美容師紹介」ページや「当店の歴史」ページなど層を深くしてもOKです。

サイトマップを作る際には、サイトストラクチャのことをよく知っておくと効率良く進められます。

サイトストラクチャとは？知っておきたい5つのパターンを解説

続きを見る

基本的にはこれら全てのページでワイヤーフレームが必要になるイメージです。ただ、例えば今回の場合は「当店についてページ」と「料金について」ページは同じようなデザインになることが考えられるため、必ずしも全て一から考えていく必要はありません。

step3: ページ内に必要なコンテンツを整理し、優先度をつける

TOPページを例としてワイヤーフレームを考えていきます。

先程の導線をもとに、TOPページに必要そうな情報をまとめていきます。

• 雰囲気を伝える→写真or動画、コンセプトなど
• 自分に合っているのか？→スタイリング写真やヘアカタログ
• 料金
• 営業時間
• 場所→googleマップ

入れるコンテンツがある程度わかってきたので、さらに優先度をつけていきます。

• 写真
• コンセプト
• ヘアカタログ
• 料金
• 営業時間・場所

これらの情報をもとにワイヤーを組んでいきます。

step4: レイアウトを決める

ページ入れるコンテンツとその優先度が決まったら、大枠のレイアウトを決めます。レイアウトにはある程度代表的な型があり、最初に決めておくと効率的にワイヤーフレームを組むことができます。目的に沿って、どのレイアウトを採用するかを決めるのが良いでしょう。

シングルカラムレイアウト

シングルカラムレイアウトは、縦長に1つのカラム（列）を並べた、シンプルなレイアウトです。
単純であるがゆえに、ユーザーにとって大きくインパクトを与えることができるのが特徴です。

ただコンテンツが多いと縦に伸びていくので、コンテンツが多いサイトには向きません。LPや店舗サイトなどのサイトに多いレイアウトです。

タイル型レイアウト

タイル型レイアウトは、格子状にカードを並べたように配置されたレイアウトです。

一つのページでたくさんのコンテンツを出すことができ、非常に統一感があるのがこのレイアウトの特徴です。

ブログサイトのTOPページでよく使われています。

スマホでの表示では表示領域が狭くなりがちなので、シングルレイアウトにするなどの考慮が必要です。

マルチカラムレイアウト

マルチカラムレイアウトは、シングルカラムレイアウトとタイル型レイアウトを組み合わせたようなレイアウトです。
インパクトも与えることができるし、シングルカラムよりもたくさんのコンテンツを綺麗に入れることができます。

こちらも最近のブログやECサイトでは非常によく見かけるレイアウトです。サイト内の回遊性も他のレイアウトよりいい傾向があり、滞在時間の延長も期待できます。

こちらのレイアウトもスマホ時の表示には注意しましょう。

インパクトも情報量もある程度欲しいので、今回はマルチカラムレイアウトを採用して進めることにします。

Step5:実際にワイヤーフレームを作る

TOPページに入れるコンテンツとその優先度付け、そしてレイアウトが決まったので、再度ラフスケッチでワイヤーフレームを組んでいきます。

入れるコンテンツとレイアウトが決まっているため、割とスムーズに組めると思います。

ここでアナログ（手書き）派とデジタル（デザインツール）派が分かれますが、個人的には考案段階では手書きで進め、ある程度決まってきたらデザインツールに移行する手順をとっています。

やはり手書きは直感的に書けるので初心者の方には特におすすめです。

今回完成したワイヤーフレームはこんな感じになりました！シンプルですがこの程度で十分OKです。

え？雑じゃない？と思われるかもしれませんが、ここまでくればチーム内で共有できるレベルです。笑

重要なのはワイヤーフレームに時間をかけないこと。

ここで完成させるのではなく、あくまでワイヤーであることを忘れないようにしてください。個人でwebサイトなどを作っている方も、友達やsnsを使ってワイヤーフレームを見てもらうと自分が考えもしなかった指摘をもらえると思います！僕のTwitter DMでもOKです！笑

参考までに一部ですが手書きワイヤーフレームからデジタルでデザインに落とし込んだ例を載せておきます。※このサイトは完全にデザイン重視サイトなのであまり参考にならないかもしれませんが...

ワイヤーフレーム作りのおすすめツール

デジタルでワイヤーフレームを作る方のために、おすすめのツールについてを書いていきます。基本的にどれを使っても全く問題ありません。自分が使いやすいもの、もしくはチームで使っているものを使いましょう。

 Figma

UIUXデザイナー御用達のFigma。正直迷ったらこれでOKです。理由としてはワイヤーフレーム作成も含めたデザイン全般に使えるツールだから。

正直最近のUI制作では何か理由がない限りFigmaと言ってもいいくらいスタンダードになりつつあります。

ワイヤーフレームを組む→プロトタイプの作成→UIデザイン→モックアップの作成という工程を一貫してできてしまいます。

直感的に操作できますし、プラグインも非常に豊富なので是非一度試してみてください。図形を書くことはもちろん、軽い画像加工なんかもできちゃいます。

Adobe XD

こちらも言わずと知れたUIデザインツール。Adobe系デザインソフトをよく使われる方は候補に間違いなく入ってきます。Figmaと操作感は似ており、直感的に操作することができます。

プロトタイプにも非常に強く、心強いツールです。イラレやフォトショなどと連携して使えるのも大きなメリットの一つですね。Figmaとは好みで決めていいと思います。できることは基本的に同じと思って大丈夫です。

PowerPoint

ワイヤーフレームは別にデザインツールで作らなければいけない必要はありません。PowerPointでも難なく作れます。PowerPointを使うメリットはやはりその普及率ですよね。

操作を一から学ぶ必要もないですね。

共有する際も相手がPowerPointを入れていないケースはほぼないと思うのでスムーズに意見をもらえるかもしれません。

ワイヤーフレームを作る上での注意点

ワイヤーフレームは時間をかけずに作成することが非常に重要です。作り始める前に注意点を確認しておきましょう。

作業を始める前に調査する

今回は作業を具体的に書いていきましたが調査の段階を忘れないようにしてください。類似サイトやサービスの調査をしっかりとした上でワイヤーフレーム作りに挑みましょう。

真似できるところはどんどん真似していって、よりいいものを作ってください。（文言などを完コピはもちろんNG）

ワイヤーフレームを情報設計の前に作るのはNG

たまにワイヤーフレーム作りを情報設計（コンテンツ整理など）の前段階からやっているパターンをみますが、それはNGです。デザインにコンテンツをはめ込む形になってしまいます。情報（コンテンツ）を見せる手段がデザインだということを忘れないようにしてください。

家に例えると施主さん（ユーザー）の要望を聞く前に設計図を描いているようなものです。

Webサイトでも順序を守って設計していきましょう。

ダミーテキストはなるべく使わない

これも順序の話で、コンテンツありきのデザインだという話です。ダミーテキストは内容を考えることなく見た目だけを整える手段として非常に便利ですが、内容まで考えるワイヤーフレームの目的には沿いません。

ワイヤーフレームは情報の優先度を決めるためのものなので、ダミーテキストではそのコンテンツが優先すべき情報なのかがわからなくなってしまうということです。コンテンツの内容までしっかりと盛り込んだワイヤーフレームを作りましょう。ちなみにデザインイメージだけを作りたい時はもちろん使ってOKです。

まとめ

いかがだったでしょうか？ワイヤーフレームの作り方からおすすめツールまでご紹介してきました。

Webサイトを作る方にとって「ワイヤーフレーム作り」は外せない重要なフェーズになります。

まとめると特に重要なのは4点

• ・ワイヤーフレームの一番の目的は情報（コンテンツ）の優先度を決めること
• ・ワイヤーフレームは情報設計がとても重要で、順序が大切
• ・ワイヤーフレーム作りは時間をかけない（手書きでOK）
• ・チームでの共有にとても便利

是非ご自身がwebサイトやサービスを作る際参考にしてみてください！Twitterにてご質問やご意見など募集しております。是非フォローください。

webサイトを作成する際はこちらもご覧ください！

サイトストラクチャとは？知っておきたい5つのパターンを解説

続きを見る