スマホアプリ向けワイヤーフレームとは？基本知識や作成手順、おすすめツールも紹介
スマホアプリを開発する際に重要な役割を担うのがワイヤーフレームです。スマホに最適化したワイヤーフレームを作りたくても、「何から始めればよいのかわからない」「簡単に制作したい」など、さまざまな悩みがあるはずです。
そこで今回は、ワイヤーフレームの基礎概要を解説するとともに、作成するメリットやレイアウト設計の基本知識、作成手順などを紹介していきます。ワイヤーフレームを作成する際に活用できるおすすめの無料ツールもお伝えしていくので、スマホアプリのUI設計に関わっている方やどのようなレイアウトがスマホで見やすいのか知りたい方は、ぜひ参考にしてください。
そもそもワイヤーフレームとは？
アプリを開発する上で、ページごとに必要となる「何を」「どこに」「どのように」配置するのか、それぞれの要素を整理したものをワイヤーフレームといいます。基本的にはグレースケールで作られ、実際のデザイン作業に移る前に作成する設計図のような役割を担います。
新しくアプリを作成する場合に活用するだけではなく、すでに作られているアプリを改修する際にも作成され、完成イメージを見える化することで、情報に漏れや抜けている部分がないか、機能の整合性が取れているかなどを確認できます。
スマホアプリ向けにワイヤーフレームが重要な理由
ワイヤーフレームを作る目的としては、「チーム内での情報共有」が挙げられます。ワイヤーフレームがあれば、関係各所で制作するページの大枠となるイメージの擦り合わせが可能です。デザイナーや開発者、クライアントなど、アプリ制作ではさまざまな人たちが関わるため、すべてにおいて情報を共有しなければ求められる成果物とは違うものが出来上がってしまいます。デザインが出来上がった段階で「イメージと異なる」と声が上がればやり直しとなるため、視覚的に見やすいフレームワークを共有すれば、意見の擦り合わせやフィードバックの収集が容易になり、成功へとつながります。
また、「デザイナーやエンジニアに対する指示」にも使われます。制作作業がスタートした後には、デザイナーはワイヤーフレームを参考にしながらアプリデザインを進めることができ、エンジニアはどこにどのような機能を入れるのかを確認しながら作業を進められます。制作後にテストを実施する際にも、ワイヤーフレームの記載事項と実際の画面に違いがないかチェックすることに役立ちます。
ワイヤーフレーム全般の作り方や種類についてさらに詳しく知りたい方は、こちらの記事もおすすめです。
スマホアプリ向けにワイヤーフレームを作成するメリット
スマホアプリの開発において、ワイヤーフレームを作成すると、どのようなメリットを受け取れるのでしょうか。
設計段階でUIの問題を可視化できる
1つ目のメリットとして、UIの問題を設計段階で可視化できる点が挙げられます。スマホアプリにおいてはUIは大事な要素です。UIとは、ユーザーとサービスの接点となる部分となり、具体的にはアプリのデザインやレイアウト、配色といった見た目やボタン、メニューなどの操作性などが当てはまります。いくらデザインが良く、内容が充実したアプリでも、操作性が悪かったり、使いにくかったりすれば満足度は下がってしまいます。使いにくいUIはユーザーの離脱を招き、失敗につながるので注意が必要です。
しかし、ワイヤーフレームを活用すれば、設計段階でUIの問題を可視化できます。どの情報をページのどこに、どのように配置するのかを作り出していくため、UIに問題性があれば早期発見につながります。
UI/UXを改善するための最新の市場動向については、こちらのホワイトペーパーで詳しく解説しています。
チーム間でデザイン意図を共有しやすくなる
ワイヤーフレームを作成する際に重要なことは、ユーザー視点での機能性や操作性です。アプリの目的やゴールがユーザーが求めるものからズレていれば、ユーザーにとって満足のいくアプリを目指せません。アプリ制作の目的を達成できなくなる可能性があるため、注意が必要です。
ワイヤーフレームを活用すれば、チーム内でデザインの意図を共有しやすくなります。ディレクターやライター、デザイナーやエンジニア、コーダーやクライアントなど、あらゆる人たちが制作に関わるため、ワイヤーフレームで情報を共有すれば、後工程での追加修正や認識のズレといったトラブルを防ぐために役立ちます。
アプリ全体の構成や導線を効率良く整理できる
3つ目のメリットとして、アプリ全体の構成や導線を効率良く整理できる点が挙げられます。ワイヤーフレームの目的の1つとして、アプリのレイアウトを決めることが挙げられますが、デザインありきで制作してしまうと、「デザインにはめ込むためにコンテンツを作る」という組み立て方になってしまいます。その結果、良いデザインのアプリはできても、コンテンツが足りない、導線が悪い、使いにくいアプリになりかねません。
盛り込みたいコンテンツをリストアップし、ワイヤーフレームを活用してレイアウトを組み立てれば、全体の構成や導線を効率よく整理できるので、デザインだけではなく使い勝手の良いアプリの作成を目指せるようになります。
スマホアプリ向けワイヤーフレームのレイアウト設計の基本知識
スマホアプリにおける、ワイヤーフレームのレイアウト設計の基本知識となる要素を解説していきます。優れたアプリを提供するためにも、参考にしてください。
スマホ向けレイアウトでよく使われる構成パターン
スマホ向けのワイヤーフレームのレイアウトには、いくつかの種類があります。それぞれの特徴を紹介していきましょう。
・カラム型
カラムは「列」のことです。スマホに掲載する情報が縦1列に並んだレイアウトとなり、スマホでは最も多いレイアウトです。上からストーリーを作ってコンテンツを並べていくことに適しており、インパクトを与えやすい特徴もあります。ただし、コンテンツの量が多すぎてしまうと縦に長すぎてしまい読みにくさを与えるので注意が必要です。画像や動画といった素材を使用しないと、寂しく見えてしまう点にも注意してください。
・タイル型
コンテンツの要素をタイル状に並べるレイアウトがタイル型です。スマホ画面に情報を分割して表示させることで、情報を整理してユーザーに見せることができます。多くの情報を掲載しているアプリだと認識してもらいやすく、多くの情報の中から欲しい情報だけを見つけやすい特徴もあります。ただし、コンテンツに優先順位や強弱をつけにくい点がデメリットです。
・フルスクリーン型
画面の全体に画像やキャッチコピーなどを表示するレイアウトがフルスクリーン型です。写真や動画の魅力を前面に押し出して情報を訴求するために役立ちます。
情報の優先順位と画面設計の考え方
ページに掲載する情報については、表示する際の優先度を決める必要があります。ページ上部に必要性の薄い情報を持ってきても、ユーザーは満足しないため、離脱される要因となります。通常であれば、ページの下の方にいくほど見られる確率が下がるため、重要な情報ほど、ページの上部に配置する必要があります。
アプリを使うユーザーの気持ちになって、どのような情報をどういった順序で出すのが効果的であるかを考えていきましょう。その際には、ユーザー視点だけではなく、クライアントのヒアリングももとにすることが大切です。
ユーザーが操作しやすいUI配置のポイント
操作性の高いUIの特徴としては、「シンプルさ」と「直感的な操作性」が挙げられます。さまざまな情報がまとめてある、デザイン性が高いといった点も大切ですが、ユーザーにとって使いやすいアプリでなければ意味がありません。そのため、ユーザーが視覚的に理解しやすい構造を目指せば直感的な操作も可能になるので、複雑さを取り除くUI配置が必須となります。例えば、商品を購入するにしても、商品の検索や欲しい情報の検索、支払いなど、あらゆる手順を踏んでいきますが、それが複雑であれば途中で離脱される可能性があります。しかし、操作がしやすく自然に使い方を理解できるUIであれば、「使いやすい」と満足してもらえます。
また、視覚的な一貫性も重要です。色やフォント、アイコンなどを統一すると、混乱を招かないため、ユーザーは使い方を学習しやすくなり、サービスへの信頼度向上が期待できます。
スマホアプリ向けワイヤーフレームの作成手順
次に、スマホアプリ開発におけるワイヤーフレームの作成手順を解説していきます。
STEP1｜必要な画面と情報を洗い出す
まずは、アプリ画面に必要な構成要素を洗い出していきます。必要な情報に関しては、サイトマップを作成すると、漏れなく情報を洗い出せます。もし、サイトマップを活用せずに作業を進めてしまえば、必要なページを見落としてしまい、後から追加するといった無駄なやり直しが生まれてしまいます。
余計な手間や時間がかかってしまうため、アプリ全体がどういった構造になり、どのページのワイヤーフレームを作成するのか、プロジェクトに関わっている全員で共有しておくためにも、サイトマップの作成は大切です。
STEP2｜フレームサイズとページ構成を決める
次に、アプリをサポートするデバイスのサイズに合うフレームを選択し、ページ構成を決めていきます。ページによって必要な要素は異なり、サービスを紹介するページもあれば、事例や問い合わせフォームを掲載するページもあります。
また、ページによっては文章や写真、イラストやボタンといった要素が必要になるケースもあります。要素の抜けや漏れを起こさないように、必要な要素をリストアップしてから構成を決めるようにしましょう。
STEP3｜コンテンツを設置しレイアウトを構築する
掲載するコンテンツを決めたら、レイアウトを構築していきます。情報をどのように配置していくのかを決めるためのSTEPです。
それぞれの枠に入れる内容を決めるほか、必要な文言や文字の大きさ、ボタンなどを決めて追記していきます。それぞれ1つずつ説明していきましょう。
STEP4｜画面遷移や操作導線を設計する
アプリでは、ユーザーがボタンを押すといったアクションによって画面が遷移していきます。STEP4では、この遷移の設計をしていきます。全体的な構成を樹形図を使って描き、ボタンを押した後に表示される流れを示していきます。
例えば、商品を購入できるアプリにおいて購入をキャンセルした場合、どういった処理をしてどういう見せ方をするのか、ユーザーに沿った画面遷移を考えます。複雑な画面遷移があればユーザーがやりたいことに分けて処理を記述していきましょう。
STEP5｜チームと共有してフィードバックを得る
フレームワークを作成したら、チーム内で共有する必要があります。その際にはクライアントにも確認してもらい、不要な情報がないか、漏れや気付かなかったミス、改善点がないかを確認していきましょう。フィードバックを反映してワイヤーフレームをさらにブッシュアップすれば、より良いアプリ開発につながります。
ワイヤーフレーム作成におすすめの無料ツール
ワイヤーフレームは手書きでの作成も可能です。しかし、社内で共有する場合やクライアントに確認してもらうとなれば、わかりにくい部分もあるため、誰が見ても一目でわかるようなワイヤーフレームを作成する必要があります。その際に活用できるツールはたくさん用意されているので、今回は無料で利用できるおすすめのツールを紹介していきます。
ワイヤーフレーム作成には複数の無料ツールがあります。まずは主要ツールを一覧表で比較してみましょう。
| ツール名 | 特徴 | 無料利用範囲 | 向いているケース |
|---|---|---|---|
| Figma | ブラウザ上で使え、複数人で同時編集・コメント可能。UIがシンプルで初心者でも扱いやすい。 | 個人利用なら無料プランで十分。チーム規模によっては有料プラン推奨。 | チームでリアルタイムに共同作業したい場合 |
| Cacoo | クラウド上で図をリアルタイム編集。コメントや履歴管理、ビデオ通話機能も搭載。 | 無料利用は期間限定。テンプレートあり。 | 短期プロジェクトやオンライン会議と組み合わせたい場合 |
| Moqups | 図形・アイコン・フォントが豊富。ドラッグ＆ドロップで直感的に編集可能。 | 無料はプロジェクト1つまで。制限あり。 | 初心者が手軽に試したい場合 |
| Wireframe.cc | シンプルな操作性で登録不要。作成したものはURL共有可能。 | 無料利用可（細かい調整は不得意）。 | アイデアを素早く形にして共有したい場合 |
| Miro | 世界的に利用者多数。豊富なテンプレートと直感的UI。リアルタイム編集・コメント可能。 | 基本機能は無料プランで利用可能。 | ブレストやワークショップ形式で活用したい場合 |
Figma
メールアドレスで登録すれば、誰でも手軽にワイヤーフレームの作成が可能です。オンライン上で作成でき、1つのファイルに複数人がアクセスして同時に編集することも可能です。気になる部分があればコメント機能を活用してフィードバックができるため、Figma上でコミュニケーションが完結します。違うツールを活用しての現状確認や返信が来てから修正といった手間を取ることなく、ワイヤーフレームの作成が可能です。
個人であれば無料プランでも問題ありませんが、複数人で作業を実施する場合は、チームの規模によって有料プランの方が使いやすいケースがあります。予算に応じて変更を検討してみましょう。
参考：Figma
Cacoo
Cacooは、クラウド上での作図が可能な無料ツールとなっており、チーム内でアカウントを共有すれば、同じ図をリアルタイムで共同編集できます。コメントを残すことも可能で、作業履歴を記録できるため、誰がどういった作業をしたのかがわかりやすいです。ビデオ通話でチャットや画面共有ができるのも特徴です。
ワイヤーフレームに関しては、テンプレートが用意されているので、手間なく作成が可能です。白紙テンプレートもあるので、作りたいものに応じて活用を検討してみてください。ただし、無料で利用するには期限が限定されています。永続的に無料で利用できるわけではないので、無料期間で使用感を確認し、問題がなければ有料プランでの契約を検討してみましょう。
参考：Cacoo
Moqups
Moqupsは、無料で使用できるブラウザベースのサービスですが、豊富な図形やアイコン、フォントなどが用意されており、ドラッグやドロップで簡単にワイヤーフレームが作れる特徴があります。直感的に編集ができるUIとなっているため、知識を持っていなくても問題なく使える点が魅力となっています。
複数のプランがあり、無料プランはプロジェクト数が1つしか作れないほか、複数ユーザーでの同期やプライバシー設定ができないなど、さまざまな制限があります。制限なく利用しない場合には有料プランがおすすめなので、まずは無料プランでMoqupsの使用感を試し、満足のいく結果が得られれば有料プランでの利用を考えてみてください。
参考：Moqups
Wireframe.cc
Wireframe.ccも無料での利用が可能なツールです。Web上で使うことができ、登録も不要です。ドラッグで範囲を作成してツールを配置でき、作成したツールもドラッグでの移動が可能です。シンプルなインターフェースとなっているため、スムーズな操作性が特徴です。URLを共有すれば、ワイヤーフレームをシェアすることもできます。
ただし、細かい図形制作が難しく、無料期間が終了した後には料金が発生する点に注意してください。
参考：Wireframe.cc
Miro
ミロ・ジャパン合同会社が運営しているワイヤーフレームツールです。日本だけではなく全世界に多くのユーザーが存在しています。オンラインで作成でき、テンプレートも豊富に用意されているので、アプリのニーズに合わせたテンプレートを使って自由度の高いワイヤーフレームを制作できます。
直感的に操作できる点も魅力で、リアルタイムでの編集機能やコメント機能も搭載されています。意見を出し合いながら作成が可能です。
参考：Miro
スマホアプリ向けワイヤーフレーム作成時の注意点
最後に、ワイヤーフレーム作成時に注意すべき点を3つ紹介していきます。
PC設計を流用せずスマホ特有の視点で設計する
同じサイトでも、パソコンとスマホで表示する場合、画面のサイズや横幅に違いがあるため、レイアウトを変える必要性があります。そのため、スマホのアプリ開発においては、PC設計を流用せずに、スマホ特有の視点で設計しなければいけません。ユーザーにとって見やすいレイアウトを心がけてください。
2種類のワイヤーフレームを作るにあたっては、レスポンシブデザインを意識する必要があり、あまりにも異なるレイアウトにしてしまうと、制作に時間やコストがかかってしまうため注意してください。
操作ストレスを避けるために要素の数を絞る
ユーザーの操作ストレスを避けることもワイヤーフレームの段階で考えましょう。例えば、会員登録をする際に活用される入力フォームで、入力する項目や設問数が多くあればユーザーは面倒に感じてしまいます。早期離脱を招くポイントとなるため、ユーザーが負担に感じる要素は極力減らすようにしてください。
ワイヤーフレームの段階から遷移フローを想定する
ワイヤーフレームを作成する際には、遷移フローを想定して作ることが重要です。ユーザーがアプリ内で迷わずに目的の操作を進められるよう導くためにも不可欠な要素となるため、ワイヤーフレームを作成する段階から、遷移フローを想定すれば見た目と操作性両方を備えた最適なレイアウトの設計が可能になります。
ワイヤーフレームで設計の基盤を固めた後は、実際のデザイン工程へ進みましょう。アプリデザインの流れや活用ツールについては、以下の記事で紹介しています。
まとめ：スマホアプリ向けワイヤーフレームで伝わるデザインを実現しよう
今回は、スマホアプリの開発時に必要なワイヤーフレームについて解説してきました。チーム内での情報共有に役立ち、UIの問題の可視化やアプリ全体の構成や導線を整理するためにもワイヤーフレームの作成は不可欠です。紹介したレイアウト設計の基本知識や作成手順を、ワイヤーフレーム作成に役立ててみてください。
しかし、アプリ開発においては設計図とも言える要素となり、その後の政策方針を決めるためにも重要な工程です。自社に経験者がいない場合や知識不足に不安を抱いているなら、外部への依頼を検討してみましょう。
アイリッジの「アプリ企画/RFP作成支援」では、アプリ開発における現状分析や企画策定、ユーザー体験デザインなど、あらゆる支援を行っています。企画段階から支援を行い、導入後の活用支援やプロモーションまでトータルでサポートしてまいります。ワイヤーフレームやアプリ開発でお悩みであれば、ぜひ一度アイリッジにご相談ください。
