ワイヤーフレームの作り方とレイアウト構成を解説！オススメの作成ツールも紹介

• 「ワイヤーフレームの作り方がよく分からない」
• 「どのワイヤーフレーム作成ツールがオススメだろう？」

とお悩みではありませんか？

Webサイト作成の際に必ず必要なのが、設計図の役割を果たすワイヤーフレームです。

サイト制作時にクライアント様に見せることもあるワイヤーフレームは作り込み度合いで先方へ与える印象もガラリと異なります。

今回の記事では、初心者の方にもわかりやすくワイヤーフレームの作り方やオススメのツールをご紹介します。

ワイヤーフレーム作成の必要があり、作り方に悩まれている方はぜひご覧ください。

ワイヤーフレームとは

ワイヤーフレームとは、Webページ上のどこに何を配置し、どのように動作させるかを決めた設計図のことです。

家を建てる際、詳細なデザインを決める前に設計図が必要なように、Webページ作成でもデザインを決める前にワイヤーフレームを作成します。

Webページ作成には多くの方が関わります。ワイヤーフレームを作成すればWebページのデザインや機能などを関わる方たちに視覚的に共有可能です。担当者ごとの認識のズレがなくなり、Webページ作成の進行がスムーズになります。

ワイヤーフレーム作成の目的と役割

ワイヤーフレームを作成する目的は以下の3つです。

1：サイトのレイアウトを決定する

ワイヤーフレームを作成する一番の目的は、Webサイトのレイアウトの決定です。レイアウトを先に決めずにWebサイトの作成を始めると、ユーザーにとって操作性が悪く見にくいものができあがる可能性が高くなります。

見やすくユーザーが満足できるWebサイト作成のためには、ワイヤーフレームの作成が必須です。

2：関わるメンバーの認識を合わせる

ワイヤーフレームはWebサイト作成に関わるメンバーの認識を合わせるために必要です。

Webサイト作成のためには、以下のように多くの方が関わります。

1. クライアント
2. プロジェクトマネージャー
3. ディレクター
4. エンジニア
5. コーダー
6. デザイナー
7. ライター

「どのようなWebサイトを作成するか」という共通認識がないと、担当者によって方向性の異なった取り組みをしてしまいます。ワイヤーフレームがあれば視覚的にWebサイト作成の共通認識ができ、担当者間での認識のズレの低減が可能です。

余計な訂正が生じなくなり、効率的なWebサイト作成ができます。

3：サイト完成のための叩き台とする

ワイヤーフレームはWebサイト作成の叩き台として有用です。

Webサイト作成の際には、複数の担当者でアイデアを出し合い議論する必要があります。ワイヤーフレームを叩き台として使い、アイデアなどを追記可能です。

メンバー間の考えのブラッシュアップに役立ち、効率的なWebサイト作成に繋がります。

ワイヤーフレームの構成について

Webサイトのレイアウトを理解しておくことで、ユーザーが見やすく使いやすいワイヤーフレームの構成を作ることができます。そのため、目的に応じたレイアウトを理解しておきましょう。

上記の画像は、オウンドメディアを想定したワイヤーフレームのイメージとなります。

目的に応じたレイアウトを使用して作る

制作するWebサイトによっても使用するレイアウトが異なってきます。それぞれの特徴を理解した上で制作していきましょう。

1カラムレイアウト

横幅を大きく使って表現することができるレイアウトであり、コンテンツを強調したい場合やサービスページなどによく使われるレイアウトとなります。弊社のホームページも1カラムレイアウトの構造となっております。

一方で、1カラムレイアウトの場合、他のコンテンツがグローバルメニュー又は、メニューバーから遷移する必要があるため、他のコンテンツが探しにくいデメリットもあります。

マルチカラムレイアウト

マルチカラムレイアウトは、複数の列で構成したレイアウトのことをいいます。
特に多いのが、2列の2カラムレイアウトと、3列の3カラムレイアウトとなります。

3カラムレイアウトの場合、情報量が多すぎて、ユーザーに伝えたい情報が伝わり切らないことから、ここ数年の傾向は、2カラムレイアウトを採用したサイトが多くなってきました。

多くのコンテンツを配信するオウンドメディア・ポータルサイト記事は、マルチカラムレイアウトを使用していることが多いです。

グリットレイアウト（グリットデザイン）

グリットレイアウトとは、グリット（格子状）に分割して、並べたレイアウトとなります。デザイン性が高い印象を持たせることができ、サイトの統一感が出やすい構造です。

フルスクリーンレイアウト（フルスクリーンナビゲーション）

フルスクリーンレイアウトとは、メインコンテンツである「ビジュアル映像やキャッチコピー」を画面いっぱいに配置するレイアウトです。

グローバルナビゲーションやフッターは目立たないように右上などに控えめに設置することで、サイトとして伝えたいことを強く伝えることができます。

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

ワイヤーフレームは以下の4ステップで制作します。

1：Webサイトに必要な情報の整理

ワイヤーフレームを作るなら、作成するWebサイトに必要な情報をできる限り洗い出しましょう。

Webサイトの目的やペルソナ、コンセプトなどを把握します。商品紹介ページなら、商品の名前、画像、価格、特徴、ロゴや会社情報なども必要です。

ユーザーに伝えるべき内容をもれなくリストアップしておきましょう。

ワイヤーフレームを作る際に確認すべき項目一覧

作成するWebサイトによっても、入れ込む要素は異なります。
トップページやコーポレートサイトの場合と、サービスを売るためのランディングページでは構成なども異なってきます。

Webサイトへ導入すべき要素や文章が分からない場合は、競合他社のWebサイトが参考になります。

訪れたユーザーに対して情報の漏れがないように思いつく要素は全て書き出すようにしましょう。

2：ワイヤーフレームの構成作り（優先順位決め）

ワイヤーフレームに入れ込む要素がリストアップできたら、それらを表示させる順番（優先順位）を決めていきましょう。

通常のWebサイトは、ページ上部が最も訪れたユーザーに読まれ、下の方に行くほど、読まれる確率が下がっていきます。

そのため、最も伝えたい要素ほど上部に記載する必要があります。

また、読者の心理行動を意識し、一連の流れとして読みやすい構成を考えることも大切となります。

3：レイアウトの下書きと決定

Webサイトに必要な情報の整理が終わったら、レイアウトを決めます。以下のように様々なレイアウトがありますが、ユーザーの目的、導線、使用デバイスに適したものを選びましょう。

レイアウト名	特徴
シングルカラム	縦長にカラムが並んでおりシンプルで見やすく、パソコンで確認しやすい。
マルチカラム	左右にサイドバーが設置され、ユーザーのアクションがスムーズ。パソコンで確認しやすい。
フルスクリーン	スクリーン全体に写真や動画が表示され、インパクトが大きい。
グリッド	格子状に情報が並べられ、一度にたくさんの情報が確認できる。
タイル	多くのコンテンツがタイルのように敷き詰められ、スマートフォンで確認しやすい。

この時点ではワイヤーフレームのレイアウトなどは手書きで構いません。

4：ツールを利用して清書

レイアウトの下書きが完成したら、ワイヤーフレーム作成ツールを使って清書します。手書きよりもクオリティが上がり、見やすくなります。

また、ツールによってワイヤーフレームをデータ化しておくと、メンバー間での共有が容易です。インターネット環境があればいつでもデータが確認でき、クライアントへの確認依頼もしやすくなります。

さらに、ツールを活用することで、自社内にWeb制作の知見を貯めることができ、類似業種からの依頼の際に、土台として活用することできます。

ワイヤーフレームツールをつかうメリット

ワイヤーフレームを作成する際は、専用ツールを利用するのがオススメです。
ワイヤーフレームツールには以下のメリットがあります。

1. 初心者でも感覚的に作りやすい
2. 共有や共同編集がしやすい

初心者でも作りやすい

ワイヤーフレーム作成ツールは、レイアウトが作りやすいよう操作性が簡単なものが多いです。ワイヤーフレーム作成が初めての方や、レイアウトを考えるのが苦手な方でも直感的な操作で作成できます。

Web制作には多くの方が関わるため、どのような方でも操作しやすいものを利用するのがオススメです。

共有や共同編集がしやすい

ワイヤーフレーム作成ツールには、共有・共同編集機能がついているものがあります。クラウド上で同時編集できるツールなら、離れた場所にいながらオンラインでスムーズに作業を同時進行できます。

データとして保存でき、クライアントへ共有し説明資料としても使えます。

オススメのワイヤーフレーム作成専用ツール【有料】

ここからは、オススメのワイヤーフレーム作成専用ツールを紹介していきます。

ツール名	料金	対応言語	共同編集	こんな方にオススメ
Figma	1800円/月〜 （無料プランあり）	日本語あり	可	2人以下で利用したい方（無料で利用可能）
Adobe XD	1180円/月〜	日本語あり	可	Adobe製品に慣れている方
Cacoo	1800円/月〜	日本語あり	可	セキュリティを重視したい方
Sketch	個人$99 チーム利用$9	英語のみ	可	MACでワイヤーフレーム作成を検討している方
Prott	1900円/月〜 （無料プランあり）	日本語あり	可	使い方の説明を日本語で受けたい方
Justinmind Prototyper	$19/月〜	英語のみ	可	動作をプロトタイプで確認しながら作業したい方
moqups	$23/月〜 （無料プランあり）	英語のみ	可	フォントやアイコンにこだわりたい方
MockFlow	$15/月〜 （無料プランあり）	英語のみ	可	Webサイトだけでなくアプリも作成したい方
POP	$12/月〜 （無料プランあり）	英語のみ	可	手書きのワイヤーフレームを簡単に取り込みたい方

ワイヤーフレーム制作によく使われるのはFigma、AdobeXDの２つとなります。
この2つのツールは、Web制作会社でも活用されているため、抑えておくことをお勧めします。

1. Figma

Figmaはリアルなプロトタイプが作成できるワイヤーフレーム作成ツールです。リアルタイムで一緒に作業でき、コミュニケーションがスムーズです。ユーザーが2人までならフリープランで利用できます。

Figma公式サイト

2. Adobe XD

Adobe XDはワイヤーフレーム作成からデザインまで一括で作成できるツールです。

便利な機能が豊富で、直感的に操作してクオリティの高いワイヤーフレームが作れます。インストール型ですが、クラウド上で共有し複数人で同時編集可能なのも魅力です。

スマートフォンアプリもありますが、基本的にはスマホ、タブレットでは制作することは出来ず、プレビューのみ活用できます。

Adobe XD公式サイト

身近な無料ツールでワイヤーフレームを作る場合

ワイヤーフレーム作成専用ツールをつかうと便利ですが、操作に慣れる必要があります。
以下のツールはワイヤーフレーム専用ではありませんが、Officeのソフトでもワイヤーフレームを作ることは可能です。
操作に慣れている方にとっては便利です。

こだわったワイヤーフレームを作る必要がない人
Web会社の営業担当して無料で簡単なワイヤーフレームが作れるようになりたい人
Officeのソフトがあれば制作可能です。

1. Powerpoint
2. Excel
3. Photoshop

1. Powerpoint

Powerpointなら、オフラインでもワイヤーフレーム作りが可能です。多くの方が使い慣れており、新しく操作を覚えなくてもよいのもメリットです。また、有料ですが、PowerMockupというパワーポイントの拡張ワイヤーフレーム作成ツールもあります。

2. Excel

Powerpointと同様、Excelならオフラインでワイヤーフレーム作りができます。罫線で区切られており、画像などの情報が整理しやすいです。使い慣れている方が多く、共有した時の編集もスムーズです。

3. Photoshop

Photoshopを使えば、デザインの自由度が高いワイヤーフレームの作成が可能です。完成したワイヤーフレームをデザインの工程でそのまま使えるのもメリットです。

ワイヤーフレームを作る時のコツ

ワイヤーフレームを作る際のコツは以下の3つです。

スマートフォン版(SP)とパソコン版(PC)は分けて作る

スマートフォンとパソコンは画面のサイズや横幅が異なるため、別々にレイアウトを作成しなければなりません。
パソコン版のサイトをそのままスマートフォンで閲覧すると、横幅があわずレイアウトが崩れてしまいます。

レスポンシブ対応ができるように、２つのワイヤーフレームを制作しましょう。

最近はスマートフォンでのWebサイト閲覧が多いため、スマートフォン版とパソコン版両方の作成が必要です。

デザインを凝りすぎない

ワイヤーフレームを作成する際は、色や画像サイズなど細かいデザインを考える必要はありません。

ワイヤーフレームはあくまでも設計図のため、以下のことが伝わるよう作成するのが大切です。

• 伝える情報の優先順位
• 掲載する情報量
• 操作性

デザインを作り込みすぎるとデザイナーの確認事項が増えたり、デザインについて議論が必要になったりと余計な仕事が増える原因になります。ワイヤーフレームはあくまでも文字と線でできたシンプルなものにしましょう。

競合サイトや参考サイトを見つける

初心者がワイヤーフレームを作る際は、競合サイトや似たようなサービスを提供しているサイトを分析して配置などを参考にするとよいです。ユーザー目線で見やすさや操作性のよさを確認し、見やすいサイトやわかりやすいサイトのレイアウトを確認しましょう。

まとめ

今回の記事ではワイヤーフレームの作り方とオススメツールをご紹介しました。

ワイヤーフレームは作成ツールを使えば初心者でも制作することは可能です。

クオリティの高いワイヤーフレームの作成はWebサイト作成時のデザインやコーディング作業をスムーズにします。

使いやすいワイヤーフレーム作成ツールを見つけ、ユーザーにとってわかりやすく満足度の高いWebサイトを作成しましょう。