アプリ開発のワイヤーフレームとは何か？ポイントと作り方、ツールなど基本を解説
ワイヤーフレームは、アプリの画面の構成要素や遷移などをシンプルな枠組みで記述した設計図です。ワイヤーフレーム作成によって、アプリの要件を精査して企画・設計やデザインの工程がスムーズに進められます。ワイヤーフレームの基礎知識を中心に、作り方のポイント、作成ツールなどを解説します。
ワイヤーフレームとは
あらゆる開発には要件定義が必要ですが、ワイヤーフレームは要件定義を補足する役割を果たします。UI/UXの観点からいえば、ワイヤーフレームのプロトタイプ（試作）段階でユーザビリティを十分に検討しておくことが、アプリの品質向上につながります。
ワイヤーフレームの意味と背景
ワイヤーフレームは英語で「wireframe」。ワイヤーは「線」、フレームは「枠」であり、線と枠のシンプルな状態で記述したアプリのプロトタイプのことです。
グラフィックデザインの歴史からみると、まだインターネットとWebサイトがなく、さらにDTP（デスクトップパブリッシング）が普及していないアナログの時代には、雑誌の広告やパンフレットは写真や原稿とは別に手書きのレイアウト指定紙に割り付けて印刷会社に入稿していました。グラフィックデザイナーは、この段階で読者にいかに魅力的にみせるか構成を検討します。これがワイヤーフレームの原点といえます。呼び方が変わったとしても、古くから使われているデザインの伝統的な手法です。
ちなみに3DCGでは、モデリングやレンダリングでテクスチャ―を省略した線だけで表示する状態もワイヤーフレームと呼びます。また、映画やアニメの制作では、コンテと呼ばれる手書きのラフで場面の構図などを描きます。プロトタイプを作る意味では、ワイヤーフレームと似ています。
いずれにしてもシンプルな枠組みの状態にすることで、ユーザーにとって好ましいかどうか検討が可能になり、後工程における修正の手間が省けます。
ワイヤーフレームで重要な「情報設計」
デザインという言葉には「意匠」や「設計」など多様な意味がありますが、アプリ開発のワイヤーフレームに求められるデザインは情報設計を重視します。
情報設計は「Information Architecture」、略してIAと呼ばれます。大量の情報を整理して、どのように視覚的に構成すれば使いやすくなるか設計する考え方です。Webサイトのデザインでいえば、あらゆるページに共通のグローバルナビゲーションを配置し、アクセシビリティ（ユニバーサルデザイン、インクルーシブデザイン）の観点から、障がいのあるユーザーにも使いやすい設計に留意します。アプリも同様です。
かっこよさ、洗練されたクールな印象など、感性に訴えかけるデザインも大切ですが、ワイヤーフレームの作成では、論理的な思考にもとづいて情報設計を行います。インターフェースの構成要素や機能の流れを整理し、ユーザビリティを高めます。
アプリ開発でワイヤーフレームを作成する目的
アプリ開発は、さまざまなステークホルダー（アプリに関わりを持つ人々）の立場から考えることが必要です。ワイヤーフレームの目的として、ユーザー側から使い勝手の向上、デザインや開発のメンバー側から全体イメージの共有、そして発注側と受託側の立場を踏まえて予算のすり合わせという３つの観点からまとめます。
ユーザーの視点からアプリの品質を向上させる
顧客志向やユーザー志向は、あらゆるプロダクト設計の基本として重視されるようになりました。もちろん作り手側の理想をカタチにしたプロダクトアウトの製品もありますが、画期的なアイデアや技術ではない限り、市場に受け入れられる可能性は低いといえるでしょう。多くのアプリがユーザーの視点からUI/UXを磨き上げています。ワイヤーフレームを作成することで、ユーザーの視点からアプリの品質を向上させます。ユーザーストーリーやレッドルートといったフレームワークも使えます。
完成イメージを共有する
ワイヤーフレームは設計図であるとともに、プロトタイプの役割も担います。自動車や家電ではモックアップというプロトタイプを使ってさまざまな検討を重ね、製品としての完成度を上げていきます。企画段階でワイヤーフレームを作ることにより、プロジェクトに関わる全員が完成イメージを共通し、認識が違っている場合にはフィードバックできるようになります。どのようなゴールに向けてアプリ開発を進めるべきか明確することが可能です。
アプリ開発に必要な概算予算を精査する
ワイヤーフレームを作成すると、開発前に画面数やデザインに関する見通しがつきます。アプリのフロントエンドのデザインにどれだけの予算が必要か概算を算出して、開発の工程やコストを精査するためにもワイヤーフレームは有効です。
アプリの開発中に追加機能や必要な画面が増えることがありますが、大きな仕様の変更は納期や費用にも多大な影響を与えます。ワイヤーフレームの段階で、発注側と受託側の認識を共有して齟齬のないようにすると、予期しない機能やデザインの追加の回避に役立ちます。
ワイヤーフレームはアプリ制作の最も重要な工程の１つです。アプリの制作を検討中の方に向けて、こちらの記事でアプリの種類や開発手法について解説しています。ぜひご覧ください。
ワイヤーフレーム作成による開発のメリット
アプリに関わる人々の視点から目的を考察しましたが、開発に絞り込んでワイヤーフレーム作成のメリットを２つ挙げます。
開発工程の短縮
ワイヤーフレームの段階でボタンなどUIに必要な構成要素を検討して完成度を上げていくと、そのまま画面のデザインに進めやすくなります。ただし、このとき重要になるのは「ワイヤーフレームを誰が作るか？」という役割です。
たとえば、発注側であるプロダクトマネージャーがラフを描いて受託側で具体化するケースがあります。あるいは発注側はノータッチであり、受託側のUIの設計を担当するプランナーが描いたワイヤーフレームをデザイナーが作成、開発者がワイヤーフレームを描いてデザイナーが作成、デザイナーがワイヤーフレームからデザインまでワンストップで作成する場合などが考えられます。
どのやり方が正しいとはいえませんが、UI/UXに強い会社では、経験と実績に裏付けられたメンバーで構成されたチーム全体が連携して設計を行います。デザインを理解している開発者、開発を理解しているデザイナーが関わると、ワイヤーフレームからデザインまで迅速かつスムーズに進行できます。
イテレーションによる問題の早期発見と解決
イテレーション（Iteration）は反復、繰り返しを意味します。特にアジャイル開発で用いられますが、設計・開発・テスト・改善というサイクルを表す単位です。完成した成果物を納品して完了という場合であっても、企画段階で仮説を徹底的に検証するプロセスは重要です。ワイヤーフレームの検討により、プロジェクトに関わるメンバー全員の複数の視点から設計段階における問題の早期発見ができます。フィードバックはなるべく早い時期に頻繁に行うことがコツです。
ワイヤーフレームの作り方のポイント
ワイヤーフレームの作り方を大きく分けると、空間的な配置をレイアウトしてユーザビリティをチェックすることと、ユーザーの行動に合わせた画面の遷移を時間軸で並べて確認することの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などがあります。
手書きによる作成
構想をまとめる段階であれば、紙とペンを使って手書きでワイヤーフレームをスケッチするだけでも意義があります。アプリのコンセプトに合わせてUI/UXの方向性を定める叩き台を作って検討することが重要であり、ホワイトボード上に描いてディスカッションしながらチームで行う方法もあります。
PowerPoint、Excel
さまざまメンバーが参加するプロジェクトでは、PowerPointあるいはExcelを使ってワイヤーフレームを作成します。マスタースライドなどに画面枠を決めて流用し、パターンが似ている画面遷移はコピー&ペーストして修正を加えられるため、手書きのスケッチより効率的にワイヤーフレームを作成できます。
シーケンス図
オブジェクト志向のアプリケーションを設計するときに、プログラム処理の流れを設計する場合は、シーケンス図を作成するとよいでしょう。シーケンス図はUML（統一モデリング言語）のひとつであり、特定の動作に対して処理の流れを整理していきます。
まとめ
ワイヤーフレームを作成すると、アプリの完成イメージが明確になり、開発やデザインの工程をスムーズに進めることができます。ただし、作り方やツールの使い方に慣れていないときには、逆に時間がかかってしまうことが問題です。
スケッチレベルのワイヤーフレームから一歩踏み込んだワイヤーフレーム作成においては、UI/UXデザインと技術の両側面の専門知識の理解が必要になります。したがって、ワイヤーフレーム作成の実績がある制作会社にアウトソーシングすることも解決策のひとつです。