ビジュアルデザインの重要性、UXデザインの5段階やアプリ開発におけるノウハウも解説
ビジュアルデザインは多様な視覚的な要素を使ったデザインです。雑誌などのグラフィックデザインを含みます。アプリ開発においても第一印象を決める重要な要素であり、UXの観点から検討が必要です。UXデザインの5段階モデルからビジュアルデザインを位置づけ、どのような工夫をすべきか解説します。
ビジュアルデザインとは
ビジュアルデザイン（visual design）は、テキスト、イラストや写真、コンピュータグラフィックス、映像、音声などを使って情報を伝えるコミュニケーションの表現方法を呼びます。視覚伝達デザインともいわれます。ビジュアルデザインの領域は、新聞、雑誌、テレビやWebサイトなどのメディアをはじめ、映画やゲームなどのエンターテイメント、公共施設の看板や案内など多岐に渡ります。
アプリ開発においてもビジュアルデザインは重要です。人間の第一印象が見た目で決まるように、アプリの成功も見た目に左右されます。どんなに機能やコンテンツが優れていても、ダウンロードして使わなければアプリのよさを理解してもらえないからです。アプリを使いたい気持ちにさせるかどうかは、ビジュアルデザイン次第といっても過言ではありません。
ビジュアルデザインに必要な要素
デザインの基本ともいえますが、ビジュアルデザインの要素には以下があります。
・ライン
・カラー、コントラスト
・タイポグラフィ
・配置（スペース、大きさ、バランス）
・動き（リズム） など
配置にはグリッドと整列（アライメント）があり、グリッドを繰り返したり崩したりすることによってリズムが生まれます。
ビジネスアプリではグリッドに配置すると操作性が高まります。しかし、整然としていることから遊び感覚は減少します。このようなときには、一部のグリッドを崩すことによって動きを表現することで、イメージを変えられます。
動きの表現としてはアニメーションも効果的です。ユーザー操作の最小単位に合わせて細かいアニメーションを付けることを「マイクロインタラクション」といいますが、時間軸で推移するインタラクティブな演出によって、ユーザビリティを向上させることができます。
ビジュアルデザインとグラフィックデザインの違い
ビジュアルデザインと混同しやすい言葉にグラフィックデザインがあります。その違いを簡単に解説しましょう。
もともと商業用のデザイン全般をグラフィックデザインと呼んでいました。現在、グラフィックデザインは新聞や雑誌の広告、ポスターなど平面的なデザインが主体であり、ビジュアルデザインは映像、３DCG、音声や音楽などを含みます。つまり、インターネットのメディアが活用されるにつれて、リッチコンテンツを簡単に扱えるようになり、平面的なグラフィックデザインから多様なビジュアルデザインに商業デザインの領域は拡大しました。
平面的なグラフィックデザインと異なり、ビジュアルデザインは奥行きのある空間とタイムラインの時間軸で推移させる表現が可能です。ユーザーの操作によってインタラクティブな変化させることもできます。モバイルアプリのディスプレイ自体は平面ですが、空間的なビジュアルデザインを工夫することによって多様な表現を実現します。
ビジュアルデザインによるクリエイティブの例
ビジュアルデザインのクリエイティブには、次のようなものがあります。
・ロゴタイプ
・イラスト
・キャラクター
・パッケージ
・Webサイト
・ゲーム など
ロゴタイプ、イラスト、キャラクターなど、アプリはあらゆるビジュアルデザインの要素を含みます。このとき、ブランディングの観点から全体を設計すると効果的です。コーポ―レートカラーが赤であれば、アプリのロゴや全体のキーカラーを暖色系にすることにより統一感が生まれます。
キャラクター開発は、ユーザーに親近感を持ってもらうためのクリエイティブの方法として効果があります。ただし、アプリの世界観を理解した上で具体的に表現できるクリエイターの起用が必要です。クオリティを高めるためには、著名なクリエイターに依頼することを検討してもよいでしょう。ただしコストや制作期間を十分に確保し、全体のプロデュースやディレクションに配慮しなければなりません。プロモーションの方法にも配慮すべきです。
ビジュアルデザインとUXデザイン
ビジュアルデザインは、UXデザインのひとつとして位置づけられます。直感的な操作を行うモバイルアプリでは、ビジュアルデザインが特に重要な役割を果たします。ユーザーの不安や疑問を払拭すること、長期的に使いやすいことなど、UXデザインの観点から検討が必要です。行動心理学、認知心理学、人間工学などをもとにしたアプローチも使われています。
デザインには「設計」という意味もあります。アプリのビジュアルデザインでは、人間中心設計（Human Centered Design、略してHCD）を踏まえて、ユーザーの体験に焦点を当て、インターフェースの細部まで緻密な設計を行うことが重要です。
単に「ビジュアルがきれいだから、目立つから」という観点でななく、UXデザインの観点からビジュアルデザインを考えることが、アプリの品質を高めます。
UXデザインの5段階モデル
※当社では、UIデザインとUXデザインを上記のように分けて考えています。
UXデザインの進め方としては、5段階に分けるモデルがよく知られています。米国のジェシー・ジェームズ・ギャレット氏が著書『Elements of User Experience』で提唱した考え方であり、2002年の著書刊行以後、現在もUXデザインの標準的な進め方として知られています。
ビジュアルデザインは、UXの5段階モデルのうち最終的な５段階目、表層のデザインに位置づけられています。この５段階モデルでは、それぞれの段階のアウトプットが次の段階のインプットとして連携しています。したがって、他の4つの段階を理解した上でビジュアルデザインを考えるとよいでしょう。
UXの５段階モデルを参考にして、以下にアプリの開発においてビジュアルデザインに至るまでのプロセスの概要を以下にまとめます。
こちらの記事も合わせてご覧ください。
» アプリデザインの作り方をUI/UXデザインと合わせて徹底解説！
戦略（Strategy）：めざすゴールやターゲットの設定
UXデザインの基盤となる段階です。戦略分析のフレームワークにはさまざまなものがありますが、市場の細分化（セグメンテーション）、狙う市場（ターゲティング）、自社の位置づけ（ポジショニング）を分析するSTP分析も手法のひとつです。このような戦略策定の分析を踏まえて、アプリで実現したい目標やゴールを明確にします。
この段階のアウトプットには以下があります。
・ペルソナ
・ビジネスモデルキャンバス（BMC）、リーンキャンバス
・KPI など
ビジネスモデルキャンバスとリーンキャンバスはビジネスモデルを可視化するためのフレームワークであり、リーンキャンバスは主にIT系のスタートアップに特化しています。クリエイティブな作業は感性を基準にとらえられがちですが、ビジネスプロセスの一部としてデザインを位置づけることがポイントです。
要件（Scope）：ユーザーとコンテンツの明確化
戦略策定の次に要件を整理します。まずユーザー体験として、タスクや問題解決をする流れ（ストーリー）を時系列で描きます。この流れにしたがって、必要な機能やコンテンツを整理します。重要になるのは技術や機能が先ではなく、あくまでもユーザーの体験（UX）を軸として要件を洗い出す姿勢です。
この段階のアウトプットには以下があります。
・カスタマージャーニー
・スト―リーボード
・要件定義書 など
構造（Structure）：全体の把握
要件の段階でピックアップした機能やコンテンツを構造化します。情報アーキテクチャの考え方から情報を分類や整理する過程です。構造化にあたってはインタラクションデザイン（interaction design、略としてIxD）の考え方も重要です。ユーザーとアプリの相互作用（インタラクション）を考慮した上で、前面と背面に配置する機能、ユーザーが辿る画面の遷移などを設計します。
この段階のアウトプットには以下があります。
・コンテンツのマッピング
骨格（Skeleton）：UIの検討と設計
構造を明らかにした後でアプリのインターフェースを設計します。情報設計の段階であり、ナビゲーションデザインの仕様を固めます。画面の構成要素を決めてプロトタイプを作成し、ユーザビリティテストを行って問題を洗い出します。チェックで発見した問題を改善にフィードバックして完成度を高めていきます。
この段階のアウトプットには以下があります。
・プロトタイプ など
表層（Surface）：ビジュアルデザインの決定
5段階目で、はじめてビジュアルデザインが可能になります。ロゴタイプ、カラー、フォントなどを選定しUIをデザインします。直感的な要素や心地よさなどの感情に訴えかけるデザインを行い、さまざまな要素をコンセプトに沿った表現で統一を行います。
この段階のアウトプットには以下があります。
・デザインカンプ
・ロゴデザイン など
アプリストアにおけるビジュアルデザイン
アプリのビジュアルデザインを開発するまでの5段階のプロセスを解説しましたが、アプリをリリースする際には、ストアにおけるアプリ画面のスクリーンショットの見せ方も工夫すべきです。完成させたビジュアルデザインをよりよく見せることにより、ダウンロード数を伸ばしたり、ブランディングの効果を上げたりすることができます。
株式会社Pentagonの開発ブログでは、UXデザイナーがノウハウを公開しています。その中からアプリストアでダウンロードを伸ばすスクリーンショット掲載の3つのコツを紹介します。詳細は以下でご覧ください。
参考：アプリストアのスクリーンショットを最適化する！気をつけるべきことをまとめてみた
最初の2枚で引き付ける
モバイルマーケティング代理店AppAgentの創業者Peter Fodor氏によると、ほとんどのユーザーはアプリの詳細情報を平均7秒しか見ていないそうです。スクロールせずに最初の2枚しかスクリーンショットを見ない傾向にあります。したがって2枚で関心を持たせることがポイントです。
当然のことながらUIのデザイン自体が優れていることが前提になりますが、キャッチーな画像を厳選すべきです。
テキストで補足する
スクリーンショットはテキストで補足することにより、さらなる効果が見込めます。ビジュアルデザインで引き付けて、簡潔なテキストで補足して理解を促すことがポイントです。1行～2行の短い文章で説明します。
色や動きなどで演出する
複数のスクリーンショットを組み合わせたパノラミックスクリーンショットも効果のある方法です。静止画でありながら動きが生まれ、複数の画像によって幅広いイメージを訴求できます。ムービーも効果的ですが、まず静止画で引き付けて動画を見たいと思わせる工夫をすべきです。
ビジュアルデザインの進め方と成功のポイント
ビジュアルデザインは、いくらでも時間と費用をかけられる工程です。しかし、アプリ開発のプロジェクトをスタートする段階で、ビジュアルデザインの重要性、予算や工程の全体を見渡して、適切な設計や配分をすべきです。スタッフやスケジュールの最適化も重要になります。
たとえば機能重視のアプリであれば、キャラクター開発を行っても無駄になってしまうかもしれません。一方で親しみやすさを訴求する場合は、キャラクターの効果が期待できます。キャラクターそのものを集客目的と考えるのであれば、知名度の高いイラストレーターや声優の起用をして、ビジュアルデザイン自体がアプリの売りになります。
戦略立案のプロセスでターゲットとなるユーザーを明確化し、競合他社と差別化を行い、自社の強みを明確にすることで、VI（ビジュアル・アイデンティティ）やブランド戦略を考慮して、ブレのないデザインに落とし込むことができます。
ビジュアルデザインを外注するときのコツ
最後にビジュアルデザインを外注するときの注意点やコツを紹介します。
感性的に訴えかけるビジュアルデザインは、ちょっとした違和感が致命的になることがあります。ビジュアルデザインを成功させるためには、まず自社内でコンセプトやブランドイメージなどをドキュメントなどにまとめておくことをおすすめします。イメージやゴールの共有に役立ちます。
ビジュアルデザインの外注はクオリティが保証される一方、予算が膨らむ、情報共有が難しいなどのデメリットがあります。外注先の実績を必ずチェックするとともに、発注後は段階的に確認を行い、認識のズレなどを軌道修正していくことが大切です。
アプリ開発においてデザインは内製すべき？外注すべき？疑問を解決
まとめ
ビジュアルデザインはUXに関わる重要な要素です。機能はもちろん、視覚的なインターフェースの設計を行うことにより、ユーザビリティを高めてアプリの活用を促進します。株式会社Pentagonでは、UXに知見のあるデザイナーがアプリ開発に関わるお客さまの課題に取り組んでいます。ビジュアルデザインにお困りのことがあれば、ぜひご相談ください。