モバイルアプリのワイヤーフレーム作成完全ガイド

例3

ステップ2.ステップ3.を実施する。 低忠実度のデジタル ワイヤーフレーム

推定時間： 2 ～ 3 日、MVP の範囲による

MVP ワイヤーフローを把握したら、次のステップは、少し詳細なワイヤーフレームを作成することです。 ペーパー プロトタイプを作成するか、直接デジタル ワイヤーフレームに入ることもできます (スピードが重要な場合、私は通常デジタル ワイヤーフレームに入ります)。

注意: 既存のブランドと仕事をしている場合、既存のデザイン システムからコンポーネントを使用することが可能かもしれませんので、そのまま以下のステップ 3 の高忠実度に入ることができます。 スケッチ、低忠実度のワイヤーフレーム、高忠実度のワイヤーフレームというワイヤーフレーム作成のプロセスを経るにつれて、必要な画面の数は増えていきます。

低忠実度のデジタル ワイヤーフレームでは、好みのデザイン ツールを使用して簡単な図形を作成し、基本的なフォントを使用して、ワイヤーフレームを作成します。 また、このプロセスをスピードアップし、もう少し視覚的に魅力的な低忠実度のデザインを作成できる多くの UI キットもあります。 また、ほとんどの携帯電話の画面サイズに対応できるような、中央値のアートボードサイズを使用することをお勧めします。 ターゲット層のデータがあり、彼らが主に使用している携帯電話のサイズがわかっている場合は、その画面サイズを使用します。

私は、Adobe XD（または、ほとんどのデザイン ツールにはプリセット サイズが組み込まれているため）を使用して、画面サイズ（特に iPhone 用）の「中道」である 875 x 667px サイズのアートボードを使用します。 このサイズはiPhone 8とiPhone Xでうまく機能し、Androidでも同様にうまく機能することがわかります。

低再現性の画面の例を挙げます：

低忠実度の画面を作成し、ユーザーとデザインをテストし、利害関係者からサインオフを得たら、次は高忠実度の画面を作成します。

ステップ 3: 高忠実度のデジタル ワイヤーフレーム

見積もり時間： 1週間強。 これは、デザイン システムがあるのか、それともゼロから作成しながら進めるのかによって異なります。 このステップでは、ローファイド フェーズよりも多くの画面が追加される可能性が高いため、より長い時間がかかります。 プロトタイプを作成し、テストし、反復し、承認を得て、最終的に開発チームに渡します。

考慮事項:

• 取り組んでいる製品がすでに確立したブランドを持っている場合、おそらくブランド ガイドラインから色、アイコン、フォントを引っ張ってくるでしょう。
• 取り組んでいる製品が完全に確立されたブランドのルック アンド フィールを持っていない場合、UI キットを見つけて使用することにより、デザイン プロセスをスピードアップすることができます。
  • メイン ナビゲーションの各セクションのキー スクリーン、または、
  • ユーザーのキー ユーザー フロー、または、
  • 開発スケジュールの順序に基づいて設計する画面の優先順位 (これは通常私が始める場所です。これにより、開発チームが必要とするときに、ハンドオフできる画面を用意することを確認しながら、敏速な方法で作業できます) を決定します。

  この例では、Adobe XD で確立された UI キットを使用するプロセスを紹介するつもりです。 そして、ユーザー ログイン/サインアップおよびプロファイルの作成から始めるつもりです。

  私が選んだ UI キットは、確立されたカラー パレット、文字スタイル、および共通の UI 要素 (コンポーネント) を持っており、ワイヤーフレーム全体にコピー アンド ペーストできます。 この方法では、戻る矢印を矢印「←」からニンジン「<」に変更する必要がある場合、更新が必要なすべての画面に編集をコピー アンド ペーストするのではなく、マスター コンポーネントを介して変更し、すべてのワイヤーフレームにわたって更新することができます。

  色、文字スタイル、およびコンポーネントの例:

  

  まず、オンボーディング、サインイン、およびユーザー プロファイル画面の構築を開始します。

  

  次に、グローバル ナビゲーション要素を構築し始めます。

  

  この後、アプリのすべてのユーザー フローの忠実度の高い配線を作成し、開発への配信に基づいて優先順位が付いたフローから始めます（あるいは、まだユーザー テストが必要なアイテムについて）。

  アジャイル手法で作業する際に、簡単にプロトタイプを作成して開発と共有できるように、主要なユーザー フローごとに個別のデザイン ファイルを作成することをお勧めします (たとえば、ユーザーのサインアップとアカウント作成に 1 つのファイル、メッセージングに 1 つのファイル、検索体験に 1 つのファイル、等々)。 チームで作業する場合、混乱を減らすために、通常、1 人の人がマスター ファイルを担当することをお勧めします。 この方法では、各チーム メンバーは、アプリの新しい機能やフローの作成に取り組む際に、承認されたマスター ファイルから引き出していることを認識できます。 ユーザー フローと開発の優先順位によって画面をグループ化し、順序付けしたことに注意してください。

  

  優れたモバイル アプリを作るための指針

  デジタル体験のワイヤーフレーム作成を始める方法がわかったところで、次は設計アプローチのレベルを上げる番です。 iOS や Android などのオペレーティング システムでモバイル デバイスのエクスペリエンスを作成する場合、念頭に置くべき重要な考慮事項がいくつかあります。 ここでは、モバイルアプリのデザインに関する全体的なヒントと、市場にある各種デバイスのデザインに費やす時間を短縮する方法を紹介します（個人的な意見も少しあります）。 さらにインスピレーションを得たい場合は、Web サイトとモバイル アプリのワイヤーフレームの例もご覧ください。

  私は、デザインはできるだけユビキタスであるべきだという強い信念を持っています。 そのため、可能な限り、オペレーティング システムに依存しないデザインを推奨しています。

  • ユーザーが Android 携帯から iPhone に切り替えた場合、同じニーズを解決するアプリを使用するために、2 つの異なる方法を学ぶ必要はないはずです。 解決策は同じであるべきです。 ジェスチャーの違いやデバイス固有のアフォーダンスがあることは承知していますが、アプリはオペレーティングシステムに関係なく同じUIとユーザーフローを提供するべきだと考えています。
  • まったく異なる 2 つ (またはそれ以上) のエクスペリエンスを設計、開発、および保守するのはコストがかかります (特に、プラットフォームに関係なく同じエクスペリエンスである可能性がある場合)。

  では、どのようにしてユビキタス デザインを作成し、デバイスにとらわれないようにするのでしょうか。

  1. モバイル デザインは、モバイル Web 用にデザインしているのと同じように扱います。 スクリーン サイズとピクセル密度は無限にあるので、私のデザインはレスポンシブです (これらは、企業がエンジニアリングできるのと同じくらい速く変化します)。 デザイナーとして、すべてのピクセル密度に対応するデザインをしている時間はありませんし、いずれにせよ、クライアントがその時間のためにお金を払いたいとは思いません。 そのため、私はアートボードの幅を 375 にしており、ほとんどの最新の iPhone モデルと Android で動作します。
  2. iPhone X と iPhone 11 の奇妙なスクリーン形状には、ヘッダー背景色を上部に拡張するように開発チームに指示することで対処しています。 これは、フォント サイズ、UI タッチ ポイント、およびキーボードを表示したときの画面コンテンツの可視性をテストできるため、役に立ちます。 また、「折りたたみ」線をテストし、CTA や重要なコンテンツなどの重要なコンテンツが表示されたままであり、画面の下部から消えないことを確認できます。
  3. 私は、タップ、スワイプ、長押しなど、普遍性のあるジェスチャのみを使用するようにしています。 OS に関係なく、最高のユーザー エクスペリエンスに焦点を当てることができるはずです。
  4. すべてのアイコンとロゴに SVG を使用し、どの画面解像度でも見栄えが良くなるようにしています。 それでも、携帯電話や OS によって異なる場合があります。

     私のクライアントのほとんどは iOS で開始しています。 デザインをテストして検証し、それが正しい軌道に乗ったら、Android 向けに開発します。 そして、何を知っていますか。 UIやユーザーフローをまったく変えないようにしています。 その代わり、ブランディング、ルック＆フィール、機能、ユーザーフローに重点を置いています。 すべては、最も重要なこと、つまりコアなユーザーエクスペリエンスに戻ってくるのです。