アプリ開発のワイヤーフレームとは？ポイントと作り方、ツールなど基本を解説
ワイヤーフレームは、アプリの画面の構成要素や遷移などをシンプルな枠組みで記述した設計図です。ワイヤーフレーム作成によって、アプリの要件を精査して企画・設計やデザインの工程がスムーズに進められます。
ワイヤーフレームは以下の３つの目的のために作るものです。
- 目的①ユーザーの視点からアプリの品質を向上させる
- 目的②完成イメージを共有する
- 目的③アプリ開発に必要な概算予算を精査する
ワイヤーフレームを事前に作成することで、アプリの全体像を可視化できるため、ユーザー目線での使いやすさを検証できるだけでなく、関係者間で完成イメージを共有しやすくなります。さらに、必要な画面数や機能が明確になるため、予算や工数の見積もりにも役立ちます。
今回はアプリ開発を発注する担当者の方向けに、ワイヤーフレームの基礎知識を中心に、作り方のポイント、作成ツールなどを解説します。
ワイヤーフレームとは「プロトタイプ（試作品）」のこと
あらゆる開発には要件定義が必要ですが、ワイヤーフレームは要件定義を補足する役割を果たします。UI/UXの観点からいえば、ワイヤーフレームのプロトタイプ（試作）段階でユーザビリティを十分に検討しておくことが、アプリの品質向上につながります。
ワイヤーフレームの意味と背景
ワイヤーフレームは英語で「wireframe」。ワイヤーは「線」、フレームは「枠」であり、線と枠のシンプルな状態で記述したアプリのプロトタイプのことです。
グラフィックデザインの歴史からみると、まだインターネットとWebサイトがなく、さらにDTP（デスクトップパブリッシング）が普及していないアナログの時代には、雑誌の広告やパンフレットは写真や原稿とは別に手書きのレイアウト指定紙に割り付けて印刷会社に入稿していました。グラフィックデザイナーは、この段階で読者にいかに魅力的にみせるか構成を検討します。これがワイヤーフレームの原点といえます。呼び方が変わったとしても、古くから使われているデザインの伝統的な手法です。
ちなみに3DCGでは、モデリングやレンダリングでテクスチャ―を省略した線だけで表示する状態もワイヤーフレームと呼びます。また、映画やアニメの制作では、コンテと呼ばれる手書きのラフで場面の構図などを描きます。プロトタイプを作る意味では、ワイヤーフレームと似ています。
いずれにしてもシンプルな枠組みの状態にすることで、ユーザーにとって好ましいかどうか検討が可能になり、後工程における修正の手間が省けます。
ワイヤーフレームで重要な「情報設計」
デザインという言葉には「意匠」や「設計」など多様な意味がありますが、アプリ開発のワイヤーフレームに求められるデザインは情報設計を重視します。
情報設計は「Information Architecture」、略してIAと呼ばれます。大量の情報を整理して、どのように視覚的に構成すれば使いやすくなるか設計する考え方です。Webサイトのデザインでいえば、あらゆるページに共通のグローバルナビゲーションを配置し、アクセシビリティ（ユニバーサルデザイン、インクルーシブデザイン）の観点から、障がいのあるユーザーにも使いやすい設計に留意します。アプリも同様です。
かっこよさ、洗練されたクールな印象など、感性に訴えかけるデザインも大切ですが、ワイヤーフレームの作成では、論理的な思考にもとづいて情報設計を行います。インターフェースの構成要素や機能の流れを整理し、ユーザビリティを高めます。
ワイヤーフレーム以外のプロトタイピングの手法
デザインを行う前の段階でワイヤーフレームを作成して使い勝手を検討しますが、プロトタイプの観点から次のような手法も考えられます。ワイヤーフレームと混同しがちなので、目的によって使い分けることが必要です。
デザインラフ、カンプ
印刷物のグラフィックデザインでよく使われますが、アプリ開発では、一般的にワイヤーフレームの次の段階として情報設計が終わった後で提出します。
ワイヤーフレームは基本的にモノクロで作成しますが、この段階で、色やテクスチャ－など具体的なデザインに対してフィードバックをもらいながら、完成度を高めていきます。
デモアプリ
ユーザーの操作によって画面が変わるインタラクティブなアプリでは、ワイヤーフレームの資料ではイメージしにくいことがあります。画面遷移が複雑になり、アプリならではの動的な演出を平面上に記載してもイメージがわかないからです。デモを作ったほうが分かりやすい場合があります。要件が似ている場合は、デモをカスタマイズすることにより工程を短縮できます。
アプリ開発でワイヤーフレームを作成する目的
アプリ開発は、さまざまなステークホルダー（アプリに関わりを持つ人々）の立場から考えることが必要です。ワイヤーフレームの目的として、ユーザー側から使い勝手の向上、デザインや開発のメンバー側から全体イメージの共有、そして発注側と受託側の立場を踏まえて予算のすり合わせという３つの観点からまとめます。
目的①ユーザーの視点からアプリの品質を向上させる
顧客志向やユーザー志向は、あらゆるプロダクト設計の基本として重視されるようになりました。もちろん作り手側の理想をカタチにしたプロダクトアウトの製品もありますが、画期的なアイデアや技術ではない限り、市場に受け入れられる可能性は低いといえるでしょう。多くのアプリがユーザーの視点からUI/UXを磨き上げています。ワイヤーフレームを作成することで、ユーザーの視点からアプリの品質を向上させます。ユーザーストーリーやレッドルートといったフレームワークも使えます。
目的②完成イメージを共有する
ワイヤーフレームは設計図であるとともに、プロトタイプの役割も担います。自動車や家電ではモックアップというプロトタイプを使ってさまざまな検討を重ね、製品としての完成度を上げていきます。企画段階でワイヤーフレームを作ることにより、プロジェクトに関わる全員が完成イメージを共通し、認識が違っている場合にはフィードバックできるようになります。どのようなゴールに向けてアプリ開発を進めるべきか明確することが可能です。
目的③アプリ開発に必要な概算予算を精査する
ワイヤーフレームを作成すると、開発前に画面数やデザインに関する見通しがつきます。アプリのフロントエンドのデザインにどれだけの予算が必要か概算を算出して、開発の工程やコストを精査するためにもワイヤーフレームは有効です。
アプリの開発中に追加機能や必要な画面が増えることがありますが、大きな仕様の変更は納期や費用にも多大な影響を与えます。ワイヤーフレームの段階で、発注側と受託側の認識を共有して齟齬のないようにすると、予期しない機能やデザインの追加の回避に役立ちます。
ワイヤーフレームはアプリ制作の最も重要な工程の１つです。アプリの制作を検討中の方に向けて、こちらの記事でアプリの種類や開発手法について解説しています。ぜひご覧ください。
ワイヤーフレーム作成による開発の２つのメリット
アプリに関わる人々の視点から目的を考察しましたが、開発に絞り込んでワイヤーフレーム作成のメリットを２つ挙げます。
メリット①開発工程の短縮
ワイヤーフレームの段階でボタンなどUIに必要な構成要素を検討して完成度を上げていくと、そのまま画面のデザインに進めやすくなります。ただし、このとき重要になるのは「ワイヤーフレームを誰が作るか？」という役割です。
たとえば、発注側であるプロダクトマネージャーがラフを描いて受託側で具体化するケースがあります。あるいは発注側はノータッチであり、受託側のUIの設計を担当するプランナーが描いたワイヤーフレームをデザイナーが作成、開発者がワイヤーフレームを描いてデザイナーが作成、デザイナーがワイヤーフレームからデザインまでワンストップで作成する場合などが考えられます。
どのやり方が正しいとはいえませんが、UI/UXに強い会社では、経験と実績に裏付けられたメンバーで構成されたチーム全体が連携して設計を行います。デザインを理解している開発者、開発を理解しているデザイナーが関わると、ワイヤーフレームからデザインまで迅速かつスムーズに進行できます。
メリット②イテレーションによる問題の早期発見と解決
イテレーション（Iteration）は反復、繰り返しを意味します。特にアジャイル開発で用いられますが、設計・開発・テスト・改善というサイクルを表す単位です。完成した成果物を納品して完了という場合であっても、企画段階で仮説を徹底的に検証するプロセスは重要です。ワイヤーフレームの検討により、プロジェクトに関わるメンバー全員の複数の視点から設計段階における問題の早期発見ができます。フィードバックはなるべく早い時期に頻繁に行うことがコツです。
ワイヤーフレームはいつ誰が作るもの？
ワイヤーフレームの作成タイミングと担当者について理解しておくことで、プロジェクトを効率的に進められます。一般的なアプリ開発の流れに沿って、ワイヤーフレームがどの段階で誰によって作成されるのかを解説します。
作成タイミングは、要件定義後・デザイン前
ワイヤーフレームは、要件定義が完了した後、具体的なデザイン作業に入る前の段階で作成します。この時期に作成することで、機能要件は固まっているものの、見た目の詳細はまだ決まっていない状態で、画面構成や導線を検討できます。
デザイン工程に入ってから大きな変更が必要になると、時間とコストが大幅に増加するため、この段階での検討が重要です。
作成者は、UI/UXデザイナーが基本
ワイヤーフレームを誰が作成するかは、プロジェクトの体制や規模によって異なりますが、UI/UXデザイナーが制作するのが一般的です。UI/UXの専門知識を持つデザイナーが、ユーザビリティを重視してワイヤーフレームを作成します。デザイナーが作成する場合は、情報設計からビジュアルデザインまで一貫した設計が可能になります。
プロダクトマネージャー（PM）が作成する場合も。
ビジネス要件を最も理解しているPMが、ユーザーの課題解決に最適な画面構成を検討してワイヤーフレームを作成します。この場合、PMの作成したワイヤーフレームをもとに、UIデザイナーが具体的なデザインに落とし込みます。小規模なシステムなどでは、ビジネス要件を把握しているPMが作ることでスムーズにプロジェクトを進められることもあります。
ワイヤーフレーム外注時の注意点
アプリ開発を外注する場合、ワイヤーフレームの作成を依頼先に任せるか、発注側で用意するかを事前に決めておく必要があります。発注側でワイヤーフレームを用意する場合は開発費用を抑えられる可能性がありますが、専門知識がないと不完全なワイヤーフレームになってしまう恐れがあります。開発会社に依頼する場合は、費用が発生しますが、専門的な知見に基づいた質の高いワイヤーフレームが期待できます。
ワイヤーフレームの作り方の2つのポイント
ワイヤーフレームの作り方を大きく分けると、空間的な配置をレイアウトしてユーザビリティをチェックすることと、ユーザーの行動に合わせた画面の遷移を時間軸で並べて確認することの2つに分かれます。それぞれのポイントを簡単に説明します。
ポイント①画面に必要な要素を洗い出して配置する
アプリのワイヤーフレームでは、まずアプリの画面に必要な構成要素を洗い出します。タテまたはヨコ画面の画面レイアウト、ナビゲーション、メニュー、ボタンなどを決めます。ボタンをトップに配置するかボトムに配置するかによって操作性が大きく変わります。
モバイルアプリにはスプリングボード（ローンチパッド）のような格子状のものや、リスト状の配置、タブで切り替えるもの、ダッシュボード状のものなど、さまざまなインターフェースがあります。アプリのコンセプトによって、画面に必要な構成要素やレイアウトが変わります。構成要素を決めないままデザインを作り込んでしまうと、修正に時間と手間がかかるので注意が必要です。
ポイント②画面遷移をデザインする
Webサイトにしてもアプリにしても、基本的にインタラクティブな構造を持っています。つまりユーザーがボタンを押すなどのアクションによって、画面が遷移します。この遷移を設計します。
全体的な構成を樹形図のような形で描くとともに、ボタンを押した後に表示される流れを示します。たとえば、ECサイトなどで予約をキャンセルした場合、どのような処理をして、どういう見せ方をするのか、ユーザーに沿った画面遷移を考えることは大切です。複雑な画面遷移がある場合には、ユーザーがやりたいことに分けて処理を記述するとよいでしょう。
ワイヤーフレーム作成の手法とツール
ワイヤーフレームを作るときに注意したいのは、完璧主義に陥り、きれいな設計図を描こうとして時間をかけてしまうことです。ワイヤーフレーム自体は手書きのスケッチでも問題ありません。また、複雑なシステムやアプリの場合は、シーケンス図などを使って整理するとよいでしょう。
Miro（ミロ）
イノベーションワークスペースである Miro では専用のツールやワイヤーフレームライブラリを使ってオンラインでワイヤーフレームを作成することができます。テンプレートも豊富なので、web サイトやアプリのニーズに応じたテンプレートを使って自由度の高いワイヤーフレームの作成ができます。
Figma（フィグマ）
Figmaは、ブラウザベースのコラボレーションが特長のプロトタイプ作成ツールです。オンラインホワイトボードの機能があり、プロダクトマネージャーやデザイナーなど開発に関わる多様な人々と意見交換をしながらワイヤーフレームを検討できます。
Adobe XD（アドビ・エックスディー）
Adobe XD はAdobe社が提供するベクターベースのプロトタイプ作成ツールです。UI/UXのデザインに特化していて、リアルタイムで内容の共有も可能。さまざまなアセットやテンプレートが用意され、アートボードにレイアウトやUIパーツを配置していくことでワイヤーフレームの作成が可能です。
UIキット（テンプレート）としてはWires JP、Googleが推奨するマテリアルデザインというガイドラインに沿ったMaterial Design General Sticker Sheetsなどがあります。
PowerPoint、Excel
さまざまメンバーが参加するプロジェクトでは、PowerPointあるいはExcelを使ってワイヤーフレームを作成します。マスタースライドなどに画面枠を決めて流用し、パターンが似ている画面遷移はコピー&ペーストして修正を加えられるため、手書きのスケッチより効率的にワイヤーフレームを作成できます。
シーケンス図
オブジェクト志向のアプリケーションを設計するときに、プログラム処理の流れを設計する場合は、シーケンス図を作成するとよいでしょう。シーケンス図はUML（統一モデリング言語）のひとつであり、特定の動作に対して処理の流れを整理していきます。
手書きによる作成
構想をまとめる段階であれば、紙とペンを使って手書きでワイヤーフレームをスケッチするだけでも意義があります。アプリのコンセプトに合わせてUI/UXの方向性を定める叩き台を作って検討することが重要であり、ホワイトボード上に描いてディスカッションしながらチームで行う方法もあります。
ワイヤーフレームを作成する際に気をつけたいポイント
発注者側がアプリのイメージを開発会社に伝えるためにワイヤーフレームを作成する際、以下のポイントを押さえることで、開発工程をスムーズに進められ、予期しない追加費用を避けることができます。
ポイント①全画面・データパターンを洗い出し、すべてアウトプットする
画面数やデザイン、データパターンなどによって開発コストは大きく変わるため、この段階ですべての画面とデータパターンを洗い出すことが重要です。ここで全画面・全データパターンを洗い出してワイヤーフレームを作成することで、正確な開発工数の見積もりができます。
一方で、画面やデータパターンに抜け漏れがあると、後々の工程になってデザインをし直したり、追加開発をする必要が出てきます。結果的に開発工程の最後の方で追加費用が必要になることがあるので、この段階で洗い出しておくことが重要です。
具体的には、以下のような要素を網羅的に検討しましょう。
◆ワイヤー制作時に考慮すべきポイント
- ログイン前後の画面
- エラー画面（通信エラー、入力エラーなど）
- データが0件の場合の表示
- ローディング画面
- 設定画面やヘルプ画面
複雑な要件はシーケンス図なども作成し、誰が見てもわかるように整理する
ビジネス要件が複雑なシステムやアプリを開発する場合は、シーケンス図などを使って関係者の認識をすり合わせることが重要です。例えば、外部システムとの連携をする場合、どういう流れで連携をするのか、条件分岐が複雑な場合など、これらをシーケンス図などで整理することによって、関係者間の理解を深めることができます。
特に以下のような場面では、シーケンス図の作成をおすすめします。
- 決済処理などの重要な業務フロー
- 会員登録・認証システムとの連携
- 複数の条件によって画面遷移が変わる場合
- API通信のタイミングや順序が重要な機能
これらのシーケンス図を整理することで、先ほどの全画面・全データパターンの洗い出しにも役立ちます。
画面サイズは375px（iPhoneの中でも小さい端末）に合わせてデザインする
ワイヤーフレームは基本的に画面サイズが小さい画面を想定して作成することがおすすめです。というのも、画面サイズが大きい画面に合わせて制作していた場合、開発後や制作後に画面内に情報が収まりきらないなどの問題が発生します。
小さい画面（375px幅）に合わせておけば、基本的には余白が増える形になるので、様々なデバイスに対応させやすくなります。特に以下の点に注意してワイヤーフレームを作成しましょう：
- ボタンのサイズは指で押しやすい大きさにする（44px以上推奨）
- 文字サイズは読みやすさを考慮する（16px以上推奨）
- 一行に表示する情報量を制限する
- スクロールが必要な場合は明確に示す
まとめ
ワイヤーフレームを作成すると、アプリの完成イメージが明確になり、開発やデザインの工程をスムーズに進めることができます。ただし、作り方やツールの使い方に慣れていないときには、逆に時間がかかってしまうことが問題です。
スケッチレベルのワイヤーフレームから一歩踏み込んだワイヤーフレーム作成においては、UI/UXデザインと技術の両側面の専門知識の理解が必要になります。したがって、ワイヤーフレーム作成の実績がある制作会社にアウトソーシングすることも解決策のひとつです。
