ワイヤーフレーム作成の流れとおすすめツール4選

ウェブサイトを作りたいけど、何からすればいいかわからないと思う方も多いでしょう。

ウェブサイトやウェブページを作成する前にワイヤーフレームの作成は欠かせません。

なぜなら、ワイヤーフレームは、サイトやページの設計図といえるからです。

ワイヤーフレームを作っておくことで、内容がひと目で分かり、操作もしやすいウェブページ作りへとつながります。

この記事では、ワイヤーフレーム作りのコツやおすすめのツールをご紹介しています。

実際のワイヤーフレーム作りに取り組む際には、ぜひ役立てください。

ワイヤーフレームとは?

「ワイヤーフレーム」とは、ウェブページ作成へ取りかかる前に作る「設計図」のことです。

ウェブページのレイアウトを予め決めることで、スムーズにウェブページの作成作業を進められます。

例えば、住宅の間取り図に喩えられるような役割を持っています。

具体的な作業内容としては、文章やコンテンツなどの配置を決めて情報設計をしたり、ウェブページ全体のレイアウトを定めたりしますね。

ライターや、エンジニア、デザイナーも含めてWEBページ制作にかかわるメンバーとイメージを共有する面で必要となってきます。

徹底的に考えて作り込みかつ、誰から観ても見た目はシンプルでわかりやすいワイヤーフレームが完成すれば、プロジェクトを成功に導きやすくなります。

なお、ワイヤーフレームは、総監督とも言えるウェブディレクターが作ることも多いのですが、基礎を学べば簡単なものなら誰にでも作れますよ。

ワイヤーフレーム作成の主な流れ

ワイヤーフレームは、主に3つのステップで作成されます。

  1. 全体像が分かるサイトマップを作る
  2. トップページのレイアウトを決める
  3. ページごとにワイヤーフレームを作る

ワイヤーフレーム作成の主な流れについて、順を追って見ていきましょう。

1、全体像が分かるサイトマップを作る

最初に、ウェブサイトの全体が分かるようにサイトマップを作成します。

まず「全体像をつかんでから情報整理する」必要があるからです。

最初にウェブサイトに必要なページを列挙してから、サイトマップ作成の工程で、階層を設けて一つずつページを配置していきます。

例えば、関連性の高さを基準にして大きなカテゴリーに分けてから、さらに小さなグループに分類していくと、上手にグルーピングして分けられます。

「マインドマップ カテゴリ分け」といったキーワードでGoogleの画像検索すると、参考となる画像が多数出てくるのでおすすめです。

また、複数ページをひとまとめにした特集ページや、いまは必要なくとも今後新しく設ける可能性があるページも検討しながら、サイト全体の構成を練っていきましょう。

サイトの見た目やデザインの美しさを優先させがちですが、美的なことよりもまずはサイトマップを作ることが大切です。

ウェブサイトを利用するユーザーの目線に立ってしっかり考えて作成しないと、独りよがりなサイトになってしまうからですね。

「どこに何があるかすぐ分かるか?」
「重要なページが目に入るか?」
「ユーザーから観てちゃんと読みやすいか?」

といった細かい部分まで考えぬきましょう。

2、トップページのレイアウトを決める

次に、トップページのレイアウトを決めます。

トップページのレイアウトには、主に3つの種類があります。

  1. ワンカラム:左右にサイドメニューがないデザイン。スマホだとほぼこのカタチになる。
  2. 2カラム:メインメニューと各記事へ誘導するサイドメニューの2つから成り立つレイアウト
  3. 3カラム:メインメニューと両サイドにメニューがあるレイアウトデザイン。

必要パーツとしては、以下4つが挙げられます。

  • ヘッダー
  • メインコンテンツ
  • サイドバー(サイドメニュー)
  • フッター

ホームページ レイアウト」のキーワードでGoogle画像検索すると、参考となるデザイン画像が多数表示されるのでおすすめです。

それぞれの一般的な役割を理解した上で、自分たちのサイトやページに盛り込みたい要素を明確にした上で、構成を決めていきます。

例えば、ヘッダーには会社名やサイト名を入れて、フッターには問い合わせ先などの情報が盛り込まれることも多かったりします。

3、ページごとにワイヤーフレームを作る

その後、ページごとにワイヤーフレームを作っていきます。

各ウェブページに入れる要素を整理したうえで、ページ上の配置を決めていくという段階です。

一例としては、以下のカタチです。

  • 導入部分
  • メイン記事構成
  • まとめ

さらに、記事内に使用する文字やパーツごとにひとつずつルール化していきます。

  • 大見出し:h2タグの文字の大きさやデザイン
  • 中見出し:h3タグの文字の大きさやデザイン
  • 小見出し:h4タグの文字の大きさやデザイン
  • 箇条書き:リストタグやボックスタグの使い方
  • 文字装飾:太文字やカラーのついた文字の使い方

なお、一つのウェブサイトの中にレイアウトの異なるページがいくつか作成される場合には、レイアウトごとにそれぞれワイヤーフレームを作る必要が出てきます。

ページのワイヤーフレームを作るうえで、内容がわかりやすく伝わるように整理しておきましょう。

特に大事な情報をユーザーに自然と伝えられることで、結果としてページを訪れたユーザーがアクションを起こしてくれるようになります。

  • How to情報ページで答えを知り、問題解決へとつながる
  • 悩みを解決するための商品購入やサービスの申し込み
  • ツイッターやFacebookといったSNSで拡散してくれる

また、ユーザーのペルソナについても深く理解をしたうえでワイヤーフレーム作成に取り組めば、最終的に効果の高いページが作れるでしょう。

※ペルソナとは
「ペルソナ(persona)」とは、サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念です。

実際にその人物が実在しているかのように、年齢、性別、居住地、職業、役職、年収、趣味、特技、価値観、家族構成、生い立ち、休日の過ごし方、ライフスタイル……などリアリティのある詳細な情報を設定していきます。

※参考⇒ 今さら聞けない「ペルソナ」とは。意味やマーケティングでの活用方法、作り方も解説!

ワイヤーフレームを作成する上で知っておきたい3つのコツ

ワイヤーフレームを作成する上で知っておきたい3つのコツを紹介します。

  • PC版とスマホ対応版を分けてワイヤーフレームを作る
  • デザインだけにとらわれない
  • 同業種の他サイトから学ぶ

パソコンだけではなくスマートフォンからのアクセスも多い現代では、PC版とスマホ対応版に分けてそれぞれのワイヤーフレームを作るのがコツです。

また、デザインだけにこだわって使いにくいワイヤーフレームを作らないことも重要なコツの1つです。

さらに、同業種の他サイトを参考にして、コンテンツの配置や見せ方をよく考えるのも大事といえるでしょう。

ワイヤーフレームを作成する上でおすすめのツール4選

ワイヤーフレームを作成する上でおすすめのツールが4つあります。

  1. パワーポイント
  2. エクセル
  3. Googleスライド
  4. cacoo

それぞれのツールの長所や短所、使うべきケースを確認していきましょう。

簡略なワイヤーフレーム作りはパワーポイントがおすすめ

比較的簡単なワイヤーフレームを作りたいなら、パワーポイントを使うのがおすすめです。

パワーポイントをオフィスワークで普段から使い慣れている人なら、普段の作業の延長で利用しやすいのがおすすめの理由です。

また、色々な図形を使ってワイヤーフレームを作れるのもパワーポイントの便利な点です。

しかし、精密な設計作業には向いていないので、シンプルな構成のワイヤーフレームを作るケースに向いています。

手軽なワイヤーフレームの作成はエクセルがおすすめ

手軽にワイヤーフレームを作成したい場合には、エクセルを使うのがおすすめです。

パワーポイントと同様、オフィスワークで使い慣れている人が多いので親しみやすく、操作もしやすいのと、表の枠を活用して作れるのがおすすめの理由です。

写真などの素材やエクセルの枠を上手に使えば、比較的簡単にワイヤーフレームとして使えるドキュメントを作れます。

例えば、行を追加して余白を加えたり、1段丸ごとの配置変更もエクセルなら容易に行えます。

ワイヤーフレーム作成の初心者の方には、ぴったりのツールだといえるでしょう。

共同編集してワイヤーフレームを作るならGoogleスライドがおすすめ

他のメンバーと共同編集してワイヤーフレームを作るなら、Googleスライドの使用をおすすめします。

なぜなら、オンラインでリアルタイムの共同編集が可能だったり、スマートフォンやタブレットでも作業しやすく手軽に使えます。

しかし、比較的シンプルな構成のワイヤーフレームにしか対応できないデメリットもあります。

情報量が多いならcacooはおすすめ

情報量の多いワイヤーフレームを作成する際には、ワイヤーフレーム作成ツールのcacooがおすすめです。

さまざまな図形を使って直感的に利用できることや、専用のテンプレートがあらかじめ用意されていること、そして6シートまでは無料で作成できることなどがcacooの魅力です。

また、Googleスライドと同様にチームメンバーと共同作業がしやすいのも長所の1つです。

クラウドベースで使えるため、スタッフ同士がリアルタイムで共同編集できるからですね。

例えば、各自で図にコメントをつけていったり、間違えている部分を修正できます。

ただし、無料で使えるのは6シートまでとなっており、7シート以上のワイヤーフレームを作りたい場合、有料のサービスに登録する必要があります。

まとめ

ワイヤーフレームと聞くと、専門的なイメージを持っていた人も多いと思います。

エクセルやパワーポイント、オンラインの無料サービスといった身近なツールでも作成できるのを本記事ではお伝えしました。

ユーザーにとって分かりやすくて魅力的なウェブサイトやウェブページを作成するために、ぜひワイヤーフレームを作成して活用してみてくださいね。

月間新規会員登録1,000人以上(※1)!日本最大級のクラウドソーシング「クラウディア」
国内はもとより世界中から、希望条件にマッチしたワーカーへ仕事を依頼。発注から納品まで全てクラウディアで完結できます。3分でカンタン無料会員登録。
※1) 2022年6月時点、当社調べ

関連記事

会社名を決めるときのポイント4つ!参考となるアイデアやネーミング例も紹介

スプレッドシート作成におすすめの外注先3選とそれぞれへの依頼方法

美容ライターの業務委託におすすめの外注先2選!費用相場や依頼事の注意点も解説

Facebook運用代行のおすすめ外注先3選!費用相場や依頼する際のコツも解説

Instagram運用代行におすすめの外注先3選!依頼する際のコツも解説

Twitter運用代行におすすめの外注先3選|選び方のポイント&費用相場も詳しく解説