ワイヤーフレームは、Webページやランディングページ、モバイルアプリなどのUI（ユーザーインターフェース）設計において重要な役割を担います。
…と重要なのは何となく分かっていても、突然「ワイヤーフレーム作っておいて！」と言われて困っている方も少なくないでしょう。
ワイヤーフレームは、Webページのコンセプトや構造、ナビゲーションなどを可視化するために使用されます。
ワイヤーフレームを作ることによって、WebページやアプリUIの要件を明確化できたり、関係者とのコミュニケーションを円滑化できたりし、開発時間やコストの削減にもつながります。
この記事では、ワイヤーフレームの作り方について、初心者でもわかりやすく説明します。また、ワイヤーフレームの作成に必要なツールや手順、ワイヤーフレームの有用性についても解説します。
最後までご覧いただければ、ワイヤーフレームの作成手順を理解でき、実際に手を動かす際の心理的ハードルが下がっているはずです！
- ワイヤーフレームとは
- ワイヤーフレームを作成する理由
- 設計・構造を可視化できるため
- 関係者とのコミュニケーションを円滑化するため
- 手戻りを抑制し開発時間やコストを削減するため
- ワイヤーフレームの作り方
- ワイヤーフレーム作りにおすすめのツール3選
- PowerPointやExcel
- Adobe XD
- Figma
- ワイヤーフレームとデザインカンプの違い
- ワイヤーフレームを作る際の注意点
- ワイヤーフレーム作成が終わった後に必要な作業
- まとめ
ワイヤーフレームとは
ワイヤーフレームの定義
ワイヤーフレームとは、Webページに掲載する文字情報、画像等のレイアウトを決めた設計図のことを指します。
そもそもワイヤーフレームは、ワイヤー（wire）とフレーム（frame）を組み合わせた言葉で、ワイヤー（wire）には、「細い線」、フレームには、「枠組み」という意味があります。
その意味のとおり、ワイヤーフレームは「簡易な図形＋文字情報をベースとした、簡易的な配置図」というかたちのアウトプットとなることが多いです。
具体的には下記のようなイメージです。「どの位置にどんな要素が入るのか」がわかればワイヤーフレームとして成立すると考えて問題ありません。
ワイヤーフレーム作成は、Webページ作成のファーストステップであり、この配置に基づいて具体的なデザインを詰めていきます。
したがって、ワイヤーフレームを作成する段階で、掲載されるコンテンツに過不足がないか、ユーザーが求める重要度の高い情報が適切な位置にあるか、という点を関係者のあいだでしっかりとすり合わせておく必要があります。
また、案件によってはワイヤーフレームの作成段階で、デザインの色身や形、見出し文言まで決めてしまうこともあります。
ワイヤーフレーム作成段階でどのレベルまで情報を具体化するのか、という点については念のため確認しておきましょう。
ワイヤーフレームは誰が作るべき？
前提として、ワイヤーフレームを作成するタイミングは、2つあります。
ひとつは新規ページの立ち上げ時、もうひとつは既存ページの改修時です。
どちらのケースにおいても、Webディレクターがワイヤーフレームを作成し、デザイナーや開発チームと連携しながら要件をすり合わせるケースが多いです。また、既存ページの改修時は、SEO担当者や分析担当者がアクセス解析の結果から示唆を出し、ワイヤーフレーム要件を作成することもあります。
いずれの場合も、発注者と実装者であるデザイナーや開発チームと密にコミュニケーションを取りながら要件を具体化していきます。
ワイヤーフレームを作成する理由
ワイヤーフレームを作成する理由は多岐にわたりますが、ここでは特に重要な3点に絞って解説します。
- ポイント1：設計・構造を可視化できるため
- ポイント2：関係者とのコミュニケーションを円滑化するため
- ポイント3：手戻りを抑制し、開発時間やコストを削減するため
設計・構造を可視化できるため
ワイヤーフレームを使用することで、Webページのレイアウトやインターフェイスの設計を直感的に可視化することができ、概念を共有しやすくなります。
具体的な設計が見えることで論点を絞った上で、要件認識にズレがないか事前に確認をすることができます。
関係者とのコミュニケーションを円滑化するため
ワイヤーフレームを使用することで、デザインや開発前に関係者とのコミュニケーションを円滑化することができます。
発注者側の意向に沿った結果、コンテンツ量過多になり、いざリリースしてみたものの、ページ読み込みが遅くユーザー体験が悪い、というケースがあります。
このようなケースを未然に防ぐために、事前のフィードバックが必要です。ワイヤーフレームを作成し、デザインチーム・開発チームから適切なフィードバックを受けておきましょう。
最近ではFigmaのようにブラウザ上で共同編集（コラボレーション）できるツールが利用されることが多く、改善に向けたコミュニケーションをオンライン上で同期的に受け取ることができます。
手戻りを抑制し開発時間やコストを削減するため
ワイヤーフレームを作成することで、Webサイトも構造やアプリのインターフェイスの要件を明確にすることができます。
ワイヤーフレームは、インターフェイスのアイデアを端的に表現するインターフェイスチームや開発チームは「どんなアウトプットにつなげたら良いか」を理解しやすくなります。
これによって、デザインチーム・開発チームからの手戻りが抑えられ、開発時間の短縮や人的コストの削減につながるのです。
ワイヤーフレームの作り方
ここからはワイヤーフレームの具体的な作り方について解説します。
手書き、グラフィックソフト、ワイヤーフレームツールなど、さまざまな方法を用いることがありますが、いずれにおいても下記の6ステップで作成を進行していくと良いでしょう。
1. 設計目的の明確化
作成するWebページやアプリUIの目的やターゲットユーザーを明確にします。レイアウトやコンテンツの中身に関する議論は、ここで決めた目的、ターゲットユーザーに紐づいて判断をしてきます。
目的やターゲットユーザーが複数ある場合は、それぞれの優先度も決めておきましょう。
2.必要な要素を整理する
1.で決めた目的、ターゲットユーザーを参照した上で、必要な要素を整理します。ファーストビューに設置する画像、サイトロゴ、ユーザーの目を引くキャッチコピー、グローバルメニューなどが基本的に必要な要素になります。
その他、ページユニークで必要な要素については、ステークホルダー間でアイデア出しをしてみましょう。
3.ページのレイアウトを設計する
WebページやアプリUIの全体的なレイアウトを設計します。基本的なレイアウトは、ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッターなどのセクションで構成されます。
下記の通り、シングルカラムレイアウトと呼ばれるものや、2カラムレイアウトと呼ばれるものが代表的なレイアウトになります。
4.要素を配置する
ページのレイアウトをもとに、要素を配置します。この配置というのは非常に重要な観点です。
基本的にユーザーは、自分が知りたい情報を取得した後は、離脱するか別ページに遷移するため、全てのコンテンツに目を通す可能性は低いです。したがって、ページ上部には特に訴求したい重要なコンテンツを配置する必要があります。
コンテンツの重要度については、1.で決めた目的やターゲットユーザーに紐づいて判断しましょう。
5.プロトタイプを作成する
ワイヤーフレームをもとに、プロトタイプを作成します。これにより、ユーザーが実際にWebページを操作するときの挙動を確認できます。
ユーザーに適切なタイミングで適切な情報を渡せているか、という視点でチェックをしていきます。
6.フィードバックを受け取る
最後に、発注者や開発者にとって違和感のない挙動をしているかフィードバックを受け取ります。
ただし、あくまでこれは最終的なチェックであるため、1.~5.の進捗とともにフィードバックをもらうようにしておくことが重要です。
ワイヤーフレーム作りにおすすめのツール3選
ワイヤーフレーム作成には様々なツールが使用されます。作成に割くことができるリソースや担当者のリテラシーをもとに、適切なツールを選定しましょう。
PowerPointやExcel
シンプルなワイヤーフレームであれば、図形と文字情報だけで作成することが可能です。したがって、PowerPointやExcelでも十分に実用に耐えられます。
ただし、いずれにおいてもローカルファイルでのやり取りとなり、コミュニケーションのコストが高くなるため、共同編集のできるMicrosoft365やGoogleスライド、Google SpreadSheetで代用するのも良いかもしれません。
Adobe XD
Adobe XDは、UIデザイン向けのワイヤーフレームツールです。ベクターグラフィックスを扱うことができ、スマートなグループ化機能やコンポーネント管理などの代表的な機能があります。
Adobe XDにはスタータープランという無償プランが存在するため、AdobeCCのような高価なソフトを契約しなくても利用できます。
>>Adobe XDを完全無料で利用する（クリックするとダウンロードが始まります）
ただし、スタータープランの場合は他社との共有・コラボレーションのための「共有リンク」発行数に制限がある点に注意が必要です。スタータープランの場合はXDファイルをエクスポートして、ファイル形式でのコラボレーションになってしまうので、できればAdobeCCを契約することをオススメします。
なお、社会人の場合はデジタルハリウッドのAdobeマスター講座で契約するのが最安値です。
＼ AdobeCCが45%OFF ／
デジハリのAdobeマスター講座
学生の場合はAdobe公式サイトが最安！
もし、ご覧いただいている皆さまが学生の場合は、Adobe公式サイトから学割で購入するのがベストです。
23,760 円/年（税込26,136円/年）で契約でき、Adobeマスター講座を利用するよりもさらに安いからです。
Figma
Figmaは、ブラウザ上で動作するワイヤーフレームツールです。リアルタイムでの共同作業に対応しており、Adobe XDと同様、コンポーネント管理やスタイル管理などの機能があります。
Figmaにも無償プランが設けられているため、誰でも試験的に導入することが可能です。
ワイヤーフレームとデザインカンプの違い
ワイヤーフレームと混同される概念として、デザインカンプがあります。
ワイヤーフレームとデザインカンプは、どちらもWebページの設計において使用されるものですが、それぞれ異なる目的や用途があります。
ワイヤーフレームは、視覚的にWebページのレイアウトを整理し、ステークホルダー間で共通認識を得ることを目的にしています。
ワイヤーフレームは、あくまでラフな設計図のため、ユーザー遷移の設計や細部のデザインを行わないことが多いです。
一方で、デザインカンプは、Webページのデザインを詳細に表現するものです。
デザインカンプは、Webページの見た目を細部まで表現し、色、フォント、画像などの視覚的な要素を詳細に指定します。デザインカンプは、Webページのデザインを確認し、実際にコーディングする前に、開発チームやクライアントと確認を行うために使用されます。
つまり、ワイヤーフレームとデザインカンプは、Webページの設計において別の段階で使用されるものです。ワイヤーフレームは、Webページのレイアウトを決定する前の段階で使用され、デザインカンプは、Webページのデザインを確認する段階で使用されます。
ワイヤーフレームを作る際の注意点
ここからは、ワイヤーフレームを作る際の注意点を解説していきます。
SPとPCそれぞれのレイアウトを考慮する
実際、多くのユーザーがスマートフォンやタブレットなどの端末からアクセスします。
そのため、ワイヤーフレームを作成する際には、スマートフォンとデスクトップ双方のデザインを考慮することが重要です。SPとPCで別のデザインを用意するのか、レスポンシブデザインを用意するのか、事前に確認をしておきましょう。
ただし、特段の理由がない限り、モバイル起点でSEO評価が決まること、デバイス間で同一の情報にアクセスできる方が望ましいことを踏まえると、レスポンシブデザインを導入するのが良いでしょう。
いずれにせよ。PCとSPのレイアウトをそれぞれ決めていきましょう。
ワイヤーフレームを作り込みすぎない
ワイヤーフレームを作成する際には、フォント、カラー、余白といったデザイン要素を決めすぎないように注意しましょう。
ワイヤーフレーム作成の目的は、あくまでレイアウトを決定することです。レイアウトが定まっていない段階でデザイン要素を決めたとしても、レイアウトが変わったタイミングで再度修正が生じることも考えられます。あくまでレイアウトベースのシンプルな設計を心がけましょう。
また、ワイヤーフレームが完成した後は、Webデザイン作成が進められます。その段階で、デザイナーが自由度高くデザイン要素を決定していくためにも、上記のような対応が望ましいでしょう。
ワイヤーフレーム作成が終わった後に必要な作業
最後に、ページ作成に必要な作業の全体像について解説します。
ページ作成は、一般的に次のような流れで進められます。
- ワイヤーフレーム作成
- Webデザイン作成
- コーディング
したがって、ワイヤーフレーム作成が完了した後は、Webデザイン作成が進められます。
具体的には、Figma等のツールを用いて、レイアウトに当てはまる具体的なコンテンツ、要素のサイズ、カラー等の詳細のデザインを詰めていきます。
全体のデザインが完成した後は、HTML、CSSやJavascriptを用いてコーディングを行い、テストして問題がなければ公開、という流れになります。
まとめ
ワイヤーフレームの定義や用途、作り方についてここまで解説をしてきました。
ワイヤーフレームを作成することによって、開発の初期段階から関係者との目線合わせができ、デザイン部隊・開発部隊からの手戻りも抑制できます。
ぜひこの記事の内容を参考に、理想のページ作成を進めてみてください。
