モバイルアプリの競争は熾烈で、何百万ものデジタル製品が世間の限りある注目を集めようと競い合っています。そして多くの製品開発チームにとって、アプリのエンゲージメントを上げるのは最優先事項であり、ユーザーを維持し楽しませる革新的な方法を常に模索しています。

UX デザイナーは、様々なデザインと心理テクニックを駆使して、アプリのユーザーを惹きつけるのに非常に重要な役割を担っています。また、プロトタイプとテストは、デザイナーがユーザビリティの問題や、より高いエンゲージメントにつながるビジネスチャンスを修正するのに不可欠です。

世界最先端のデザインツールで、デザインアイデアをテストしませんか。最終製品のような外観と機能を持つ没入型プロトタイプを作成しましょう。無料トライアルにサインアップして、UXPin の機能をぜひお試しください。

アプリの エンゲージメント が重要な理由

アプリのエンゲージメントは、収益、ブランドロイヤルティ、リテンション（維持）、そして最も重要な企業の評価など、他の多くの要素に影響を与えるため、ビジネス価値の指標として極めて重要です。

アプリのエンゲージメントが非常に重要な理由として、以下の４つが挙げられます：

• 収益：アプリが広告モデルであれ有料モデルであれ、大体はエンゲージメントが高ければ収益も高くなる。
• リテンション（維持）：エンゲージメントが高いということは、その製品がユーザーから日常生活において信頼されていることを示す良い兆候であることから、リテンションとCLV（顧客生涯価値）の向上につながる。
• ブランドとの相性：エンゲージメントの向上はブランドとの相性の向上につながり、NPS（ネットプロモータースコア）や CSAT（顧客満足度）といった主要なビジネス指標に影響を与える。このようなスコアが上がるということは、顧客が製品経験を（口コミのように）共有して、それが無料の宣伝になってくれるということになる。
• データと調査：エンゲージメントを上げることでデータ分析が充実し、それで製品チームはユーザーの行動をよりよく理解し、成長のためにそれを最適化することができる。

アプリのいいエンゲージメント率とは

いいアプリのエンゲージメント率は、製品、業界、ニッチ、市場、ユーザーなどの多くの要因によって決まり、リサーチャーは、UXベンチマークを使って、正しいアプリのエンゲージメント業界標準を計算して、製品のパフォーマンスに対してこれを測定します。

アプリのエンゲージメント率の計算式は単純です：

月間アクティブユーザー数 ➗ 総ユーザー数 ✖ １００

また、MAU（月次アクティブユーザー数）を DAU（日次アクティブユーザー）に置き換えることで、日次エンゲージメントについても同じ式を使うことができます。

アプリのエンゲージメント向上における UX チームの役割

UX デザイナーは、アプリのエンゲージメントとユーザーリテンションにおいて重要な役割を果たします。そして直感的な UI と、ユーザーがタスクを完了して効率的に問題を解決できるように設計された機能だと、楽しい体験が生み出され、エンゲージメントが上がります。

また、プロトタイプとテスト中に、デザイナーは障害物を特定し、ユーザーフローを効率化して、製品をより直感的で使いやすくすることができます。

UXデザイナーのためのアプリエンゲージメント指標

ここでは、UX デザイナーがパフォーマンスを測るのに使える KPI（主要業績評価指標）をいくつか挙げてみましょう：

• 維持率：アプリケーションを使い続けるユーザーの割合
• チャーン率：アプリケーションの使用を停止したユーザー数
• 平均セッション時間：ユーザーが１回のセッションでアプリを使用する平均時間 
• DAU（日次アクティブユーザー）：１暦日にアプリを開いたユーザー数
• MAU（月間アクティブユーザー数）：３０日間にアプリを開いたユーザー数
• スティッキネス：ユーザーがアプリに戻る頻度を示すラジオまたはパーセンテージ
• ユーザーエンゲージメント率：アプリ内で特定のアクションを完了したアクティブユーザーの数
• プッシュ通知の開封率：通知を開いたアプリユーザーの割合（全体および通知タイプ別）
• アプリレビュー：アプリストアや Trustpilot のようなプラットフォームでレビューを残すユーザーの割合

デザインチームは、デザインの決定がどのようにビジネス価値を生み出して ROI（投資対効果）をもたらすかを実証すべく、デザインプロジェクトの前後でこのようなアプリのエンゲージメント指標を測らないといけません。

UX デザイナーはアプリのエンゲージメント向上にどう貢献できるか？

段階的開示

段階的開示とは、１つのタスクやアクションを完了するのに最も重要な機能やオプションのみをユーザーに見せるデザインテクニックです。例えば、多くの ECストアでは、認知的な過負荷を最小限に抑えるために、商品説明やその他の情報がアコーディオンの後ろに隠されていることが多く、それでユーザーはその情報を見るか見ないかを選択することができます。

段階的開示によって、以下のようになることでアプリのエンゲージメントが上がります：

• 製品についての情報取得やナビゲーションがしやすくなる
• 重要度の低い機能がセカンドスクリーンに配置されることで、ユーザーがより早くタスクを完了できるようになる。
• ミスが減り、より楽しいユーザー体験が生み出される。

アプリのオンボーディングプロセスを効率化

ユーザーがオンボーディングプロセスで行き詰まっているようでは、アプリのエンゲージメントを見ても意味がありません。なのでデザイナーは、新しいユーザーができるだけ早く製品を使い始め、その利点を体験できるように、障害物を取り除くことを目指さないといけません。

デザイナーがアプリのオンボーディングを効率化する方法としては、以下が挙げれられます：

• Facebook、Google、LinkedIn などの広く使われている SNS のアカウントを使って、ユーザーがサインアップできるようにする。
• ユーザーが初めてログインする際に、簡単な製品紹介で機能を説明し、ドキュメントの確認作業を減らす。

• ユーザーが問題をサッと解決できるように、フォームフィールドに実用的なヘルパーテキストとエラーメッセージを用意する。

ゲーミフィケーションの導入

ゲーミフィケーションは、顧客エンゲージメントを上げるために実証された方法であり、多くの製品でバッジやポイントが使われていますが、エンゲージメントに対してユーザーが報酬を得られる微妙な方法もあります。

例えば Grammarly では、ユーザーの生産性、習得度、語彙力の他のユーザーとの比較が表示されている「週間ライティングアップデート（Your Weekly Writing Update）」というニュースレターが毎週送られます。

このニュースレターの素晴らしい点は、シンプルで、製品分析が使われているため、低コストで実装も簡単なことです。また、このアップデートはプレミアムユーザー向けのメールにのみ存在するため、Grammarly のUIに不要なデータが追加されることはありません。

個別化されたユーザー体験を作る

アプリのパーソナライゼーションで、ユーザーはデザイナーが自分のために特別に製品を作ってくれたように感じます。パーソナライゼーションは、UI に名前を追加するだけではありません。例えばブラウザのシークレット モードを使って YouTube にアクセスしたことがあれば、さまざまなおすすめが表示されるはずですが、そのほとんどは視聴する気のないものです。

YouTube やその他のSNSプラットフォームでは、パーソナライゼーションを使って、閲覧履歴に基づいたコンテンツがオススメされるので、同じ外観のホームページはありません。それでユーザーが興味を持つコンテンツや機能が提示されると、必要なものがすべて目の前に表示されるため、エンゲージメントが上がります。

パーソナライズされたアプリ体験を生み出すためのヒントを以下に３つ挙げましょう：

1. ユーザーが最近訪れた機能やコンテンツをホーム画面に表示すると、ユーザーは未完了のタスクを続けたり、作業中のプロジェクトを戻したりできる。
2. 閲覧履歴を使って、ユーザーが何をしたいかを予測する。たとえば、予算管理アプリでは、ユーザーが夜にアプリを開いたときに、その日の支出を追加するように促すといいかもしれない。
3. たとえば、ユーザーは新しいプロジェクトやタスクに合わせてプロジェクト管理ダッシュボードを定期的に再編成したいなどがあるかもしれないことから、ユーザーが UI のレイアウトとウィジェットをカスタマイズして、コンテンツの優先順位を付けたり整理したりできるようにする。

マイクロインタラクションを使って没入感のあるユーザー体験を作る

デザイナーはマイクロインタラクションやアニメーションを使って、ユーザーを惹きつけて楽しませます。たとえば、Instagram の投稿をダブルタップすると赤いハートが表示されるのですが、これは本当にやみつきになります!

マイクロインタラクションがアプリのエンゲージメントを上げる例には、以下のようなものが挙げられます：

• プログレスバーで進捗状況を表示し、ユーザーのタスク完了を促す。
• 未完了のタスク、アプリ内のメッセージ、またはユーザーの注意が必要なアイテムをユーザーに思い出させる便利なプッシュ通知。
• コンテンツを閲覧しながらユーザーの興味を維持する無限スクロールやスワイプ アニメーション。
• 短いお祝いアニメーションで、タスクを完了したユーザーに達成感がもたらされ、それでアプリの継続使用や次のタスクへの移行が促される。

希少性とFOMOを利用してユーザーを惹きつける

２０１９年にサービス開始されたソーシャルオーディオアプリ「Clubhouse」は、招待制のアプリでした。その際、各ユーザーが送信できる招待の数には限りがあり、参加希望者に希少性と FOMO（取り残される不安）がもたらされました。

この希少性により、ユーザーは他のソーシャル プラットフォーム上の友人やフォロワーに直接体験を語れるように最も人気のある会話に「参加」したいと思っていたことから、エンゲージメントを維持できました。

また、多くの出会い系アプリは、無料プランでユーザーが完了できる「いいね！」の数を制限しています。この希少性には以下の２つの効果があります：

1. 無料プランに留まりたいユーザーは、スワイプ回数を節約することに気を配るため、より積極的に利用し、それでセッションの長さと広告表示の機会が増える。
2. 「いいね！」アクションを制限することで、ユーザーが有料プランに登録する可能性が上がる。無料の「いいね！」がなくなった後に次のプロフィールで理想の相手を見たことがあるか。これは偶然ではない。

アプリのパフォーマンスを上げる

アプリケーションの読み込み待ちほどイライラするものはありません。ユーザーはすぐに興味をなくして製品を使うのをやめ、もっといいアプリパフォーマンスがある競合他社を探しに行きます。

通常、アプリのパフォーマンスを最適化するのに最もコントロールできるのはエンジニアですが、UX デザイナーが手助けできる方法が４つあります：

1. ファイルサイズと寸法を縮小してアセットファイルを最適化する
2. 読み込み時間を短縮するために、画面ごとのコンテンツを最小限にする。
3. 大きなシステムタスクのために、ユーザーの注意を一時的にそらすローディングインタラクションを作成する。
4. アニメーションは短くし、ユーザーのサポートだけに使用する。

UXPinでアプリのエンゲージメントを上げよう

UXPin は、デザイナーが最終製品のような忠実性と機能性を備えたプロトタイプを作成できるエンドツーエンドのデザインツールです。

このような完全インタラクティブなプロトタイプで、デザインチームは有意義で実用的なインサイトを得られ、アイデアの改善と反復、より多くの問題の解決、アプリのエンゲージメントのような貴重なビジネス機会の特定ができるようになります。また、デザイナーはブラウザでプロトタイプをテストしたり、UXPin Mirror（iOS & Android）を使ってモバイルアプリのエンゲージメントを最適化することができます。

UXPinの以下の４つの機能を使って、アプリのエンゲージメントをテストして改善するためのプロトタイプを作成しましょう：

• ステート：１つのコンポーネントに対して複数のステートを作成し、ドロップダウンメニュー、ステッパー、カルーセル、アコーディオンなどの複雑な UI パターンを構築する。
• インタラクション：トリガー、アクション、アニメーションを使って、没入感のあるプロトタイプ体験をデザインする。また、条件付きインタラクションを使って、ユーザーのアクションに反応する動的なインタラクションを作成することもできる。
• Variables（変数）：ユーザー入力からデータを集め、それをアプリケーションの別の場所で使う。デザイナーはその変数を使って、UI をパーソナライズして、実際のアプリ体験を提供することができる。
• Expression：フォーム検証、計算コンポーネント、動的エラー メッセージなどをデザインする。また、ステート、インタラクション、変数と組み合わせると、デザイナーはコードに匹敵する機能を作成できる。

UXPinでデザインプロセス中に多くの問題を解決してより多くの機会を特定することで、アプリの保持率を上げてより多くのユーザーを引き付けましょう。

無料トライアルにサインアップして、UXPin の高度なプロトタイピング機能をぜひご体験ください。

The post UXデザインでエンゲージメントを向上させる７つの方法 appeared first on Studio by UXPin.

モバイルアプリとWeb アプリのどちらを導入するかを決めるのは、いつも簡単というわけではなく、UX（ユーザーエクスペリエンス）や技術的な制約、費用対効果や拡張性など、決断前に考慮すべき要素は数多くあります。

そこで本記事では、どのアプローチがプロジェクトに最適かを、十分な情報に基づいて判断できるようにするため、『Webデザイン』と『モバイルアプリデザイン』の違いについて見ていきます。このヒントに沿って、UXPin の無料トライアルにサインアップし、これから開発するモバイルアプリやウェブアプリのような見た目や動きのある高度なプロトタイプを構築可能なエンドツーエンドのプロトタイピングツール UXPinをぜひ無料でお試しください。

モバイルアプリ とは

モバイルアプリは、携帯可能なモバイルデバイスのために特別に設計されたツールであり、その形態はさまざまです。単機能の小さなアプリケーションから、より複雑で多機能なモバイルプラットフォームまで、それぞれがユーザーに質の高い体験を提供してくれるはずです。

アプリの目的と範囲は大きく異なり、それによって人々はゲームやレジャーからビジネスや専門的な追求に至るまで、さまざまな活動ができます。

アプリを開発する際、製品開発チームは、アプリを作成するデバイスの画面サイズと OS（オペレーティングシステム）の考慮が必要なことがよくありますが、モバイル技術の急速な進歩に伴い、現在では多くのアプリがクロスプラットフォームの互換性を考慮して作られており、さまざまなデバイスやプラットフォームのユーザーがアプリを楽しむことができます。

現在利用できるモバイルアプリの種類は以下の通りです：

• ネイティブ：通常、単独のプラットフォームや OS（iOsアプリやAndroidアプリ）向けに開発される。
• ハイブリッド：再利用可能なコードを活用し、少ない労力と費用でネイティブに近い UX（ユーザーエクスペリエンス）を提供する。
• PWA：Progressive Web Appsの略で、HTML、CSS、JavaScript、その他のフレームワークで作られたモバイルWebアプリのことである。

モバイルアプリ の利点

• 効率的に動作する（モバイルデバイス向けにネイティブに作成されている）
• インターネットに接続せずにオフラインで作業できる
• より良い分析、つまり、より正確なデータ収集とコンバージョントラッキングが提供される

モバイルアプリの欠点

• 設計にコストがかかり、維持はもっとかかる
• iOSとAndroid で別々のアプリの構築が必要
• プライバシーやセキュリティの維持は自己責任

Webアプリ とは

Webアプリは、ユーザーがインターネットに接続できる端末であれば、Webを通じてアクセスできるので、ユーザーはブラウザ上で動作するのに、PCに別のアプリケーションをインストールして管理する必要がありません。その点においてアクセシビリティが向上するでしょう。

Webアプリケーションを使うメリットは、従来のWebサイトと比べて、AngularJS や ReactJSといった強力なフロントエンドフレームワークのおかげでよりインタラクティブなUXを実現できることです。

このフレームワークによって、アプリ開発者はダイナミックなシングルページアプリケーションをサクッと構築することができ、それによって別々のビュー間のスムーズな遷移が実現され、ユーザーからの入力を受けたときに素早く反応することができるのです。

Webアプリケーションは、セキュリティを犠牲にすることなく、驚異的な性能やスケーラビリティを提供するため、よく使われるソリューションとなっています。

Webアプリの利点

• サーバーにホストされ、ブラウザのインターフェースを通じてインターネット上で配信される。
• 遠隔地のサーバーに保存され、ブラウザーのインターフェースを通じてオンラインで供給されるため、ユーザーは更新プログラムのインストールが不要
• Web開発チームによるメンテナンスが簡単

Webアプリの欠点

• 使用にはインターネットへの接続が必要
• 読み込みに時間がかかる可能性がある – サーバーに負荷がかかると、アプリのコンテンツがすぐに表示されず、UXに深刻な影響を与えることがある。ユーザーの離脱を引き起こしてしまうこともあり得る。
• ターゲットオーディエンスに発見されにくい – Webアプリはアプリストアに載っていないため、アプリストアのプロモーションにはならない。Product Hunt、Capterra、ITreviewなどのレビューサイトは、ウェブアプリを宣伝する適切な方法ではあるが、Apple や Android のアプリストアに比べると今ひとつ。

モバイルアプリ と Webアプリ の違いについて語る

ここで、モバイルアプリとWebアプリの違いをサクッと見てみましょう。

• Webアプリはほぼすべてのブラウザからアクセスできるが、モバイルアプリはアプリストアからのダウンロードが必要。
• 画面サイズの要件の違い。モバイルアプリはデスクトップでアクセスすることができないことから、小さな画面専用に作成されるため、ピクセル数が少なくなるが、Webアプリは、モバイルとデスクトップの両方でのアクセスが可能。
• モバイルアプリはインターネットに接続しなくても使えるが、Webアプリは使えない
• Webアプリはインターネット接続が必要でウェブブラウザに依存するため、モバイルアプリに比べて動作が遅くなりがち。
• デザイナーとして、高いユーザビリティとアクセシビリティの基準を確保するには、「パソコンは大抵座って使う」、「アプリのユーザーは通勤やジョギングで携帯電話を使っているであろう」というようなさまざまなシナリオの考慮が必要。
• モバイルアプリは、Webアプリよりもセキュリティが高度であるため、モバイル アプリの開発では、2 要素認証やその他安全性を上げる手段を作成することで、それに対応すべきである。

モバイルアプリとWebアプリの選択に関する有効な方法

ここでは、モバイルアプリとWebアプリのどちらを選ぶかを決める際に、最も考慮すべき点をご紹介します。

ユーザーのコンテクストと目的の決定

Web は豊富なリソースと情報をユーザーに提供し、Webユーザーは通常、ゆったりと座ってアクセスします。一方モバイルデバイスは、ユーザーが外出先で情報を検索し、サッと入手するためのユニークな機会を提供します。

モバイルUXをデザインする場合、「必要な情報に最小限の時間で最大限アクセスできるようにする」という目的のもとで、ナビゲーションはシンプルで分かりやすく、よく構造化されたコードが簡潔に書かれ、視覚的に優先順位が付けられている必要があります。

UX デザイナーは、次のようなデザイン要素に細心の注意を払ないといけません：

• 小さな画面のユーザーにとって最も直感的な自然なジェスチャー
• メニュー選択のシンプルさ
• クリアな視覚経路
• フォントや色など、一貫した UI 要素
• クリックやアクセスがしやすいボタンやリンク
• その他、ユーザーナビゲーションがしやすくなるインタラクティブな要素

また、ユーザーが誰でもアプリを最大限に活用し、機能的に使えるようにするため、関連するアクセシビリティ基準とペアになっていないといけません。

結論：Webアプリは長時間のユーザーセッションに適しており、モバイルアプリと競合することはないが、習慣や食事の記録アプリ、モバイルECアプリ、SNSアプリなど、製品が短時間で定期的に使用される場合は、おそらくモバイルアプリが適している。

製品やサービスの必要な画面サイズを見極める

B2Bツールの多くはWebベース化され、ユーザーは携帯電話やタブレットなどのモバイルデバイスからアクセスできるようになりましたが、これは、以下のような理由で有益です：

• ユーザーのデバイスに関係なく、都合よくサッと情報にアクセスできるようになる
• より大きな画面で、より鮮明に、より詳細にコンテンツを見ることができる
• PDFのダウンロードやエクスポートを定期的に行う必要がある場合、PDFはモバイル端末のデータ容量を大きく占め、頻繁に保存すると端末が重くなる可能性があることから、ユーザーはモバイルデバイスよりもデスクトップコンピュータで行う方がはるかに簡単で効率的である。そもそも、モバイルはファイルの閲覧に便利な画面サイズではない。
• ユーザーは、複数のデバイスにファイルを分散させるよりも、１つにファイルを保存することを好むであろうことから、企業がB2Bプラットフォームを最大限に活用するには、Webベースのアクセスの提供が不可欠である。
• コンテンツがはっきり見えないこともあるモバイルだけでなく、より大きな画面でアプリにアクセスできるようにすることで、企業はクライアントに常に良いUX を提供できる。

結論：Webアプリは、多数のチャートや分析データがある複雑な（主に仕事に関連する）アプリに適しており、このようなタイプのアプリでは、通常、画面間を何度も行き来する必要がある。

デバイス固有の機能をリストアップする

例えば、美容製品を販売しているのであれば、一日の大半を過ごす場所であるモバイルデバイス向けに美容アプリを開発する方がはるかに有益です。

このプラットフォームで、より多くのオーディエンスを獲得し、コンピュータでは利用できない複数の機能、特に高解像度の携帯電話カメラを活用できます。この種の製品では、市場での成功には画質が不可欠です。

モバイルビューでアクセスできるWebベースのアプリケーションを設計することで、デバイスのカメラを使うことができますが、他の機能の一部は、モバイルのハードウェアと機能によってのみアクセス可能です。例えば、ランナー向けのアプリを作るのに欠かせなかった、携帯電話に内蔵されたジャイロセンサーやGPSのようなものを考えてみてください。

また、モバイルアプリのUX/UIデザインを設計する際には、大きめのインタラクティブボタンやシンプルなナビゲーションなど、デバイス固有の要素を必ず含めるようにしましょう。さらに、必ずソフトウェア開発チームと協力して、サードパーティ製アプリの統合が完璧に機能するようにしましょう。統合の種類は製品によって異なりますが、SNS、オンライン決済方法、プッシュ通知などがあります。

結論：モバイルアプリには、GPSや高解像度カメラなど、端末固有のハードウェアや機能が付加されていいる。

競合他社の選択肢をチェックする

企業は、何を開発すべきかに関して情報に基づいた判断をするために、新製品やアプリを発売する前に、競合状況の分析をすべきです。

もし、市場のトッププレイヤーの多くがWebベースのソリューションであることが判明したなら、その線を行くのがベストでしょう。彼らはユーザーが便利に使えるプラットフォームでソリューションを作って、そのUXによって目標を達成したのですからね（結局、そうでなければ、このようなアプリが市場でこれほどまでに成功することはないでしょう）。

また、「同じカテゴリの製品にユーザーは親しみを感じる」ことを忘れないようにしましょう。そうすることで、競合他社からこちらに乗り換える場合、あなたのアプリを使い始めるのがはるかに簡単になります。競合他社を徹底的に調査することで、投資する前にチャンスと潜在的なリスクを特定することができるのです。

結論：アプリの目的がカテゴリーに革命を起こすことでないのなら、他の人が成功を収めているプラットフォームを採用する価値はある。そこに、ターゲットとなる人がいるかもしれない。

モバイルアプリかデスクトップアプリか？UXPinでデザインしよう

この記事を読んで、モバイルアプリとWebアプリのジレンマでどちらを取るかを選べるようになれば幸いです。ユーザーのコンテクスト、画面サイズ、競合他社の状況などが、アプリの成功にどう貢献するかを理解するのに、ぜひ上記の考察を参考にして下さい。

UXPin があれば、ウェブアプリやモバイルアプリを問わず、高度なプロトタイプを作成し、それをステークホルダーやデベロッパーと速やかに共有することができます。実際に使ってみませんか？無料トライアルでこのツールをぜひお試しください。

無料トライアルは今すぐお試しになれます。準備はいいですか？UXPinをお試しになり、製品のデザインと開発のプロセスを効率化しましょう。トライアル開始はコチラ。

The post モバイルアプリとWebアプリ【違いと各メリット】 appeared first on Studio by UXPin.

デバイス、OS（オペレーティングシステム）、テクノロジーの数が増え続ける中、クロスプラットフォーム・エクスペリエンスのデザインは、製品開発プロセスにおいて不可欠な要素となっています。

多くの企業では、iOS、Android、Windows などの専門チームがあり、製品がプラットフォーム固有の要件とユーザーの期待に確実に応えるようにしています。

世界最先端のUXデザインツールであるUXPinで、クロスプラットフォームのシームレスな CX（カスタマーエクスペリエンス）を実現しましょう。無料トライアルにサインアップして、インタラクティブなプロトタイプをぜひご体験ください。

クロスプラットフォーム ・エクスペリエンスとは

クロスプラットフォーム ・エクスペリエンス（プラットフォーム非依存的デザインとも呼ばれる）とは、iOS、Android、Windows、Macなどの OS に加え、Web、モバイル、タブレット、ウェアラブルなど、複数のデバイス間でのUX（ユーザーエクスペリエンス）の比較を表すものです。

製品開発者は、全ユーザーに製品を確実に提供するために、異なるプラットフォームや OS で同等のシームレスな UX を実現することを目標にしています。

またデザイナーは、例えば、自分の銀行口座から銀行のウェブポータルでもモバイルアプリでも支払いできる機能のように、エンドユーザーがデバイスや OS に関係なく、同じ機能にアクセスし、タスクを完了できるようにしたいとも考えています。

レスポンシブデザインと クロスプラットフォーム デザイン

クロスプラットフォーム・エクスペリエンスをデザインする際に、製品チームが考慮しなければならない要素のひとつに『レスポンシブデザイン』があります。レスポンシブデザインは、ウェブブラウザに特化し、デスクトップ、タブレット、モバイルの各ビューポートで UI がどのように見えるかを示すものです。

クロスプラットフォームデザインとは、ウェブ、タブレット、iOS、Android、Windowsなどのモバイルアプリでの製品の UX に加え、ウェブブラウザ、デバイス、OS を考慮しなければならないという、より広範な概念であり、たとえば、シンプルなアラートコンポーネントは、iOS、Android、Windows、macOS、Safari、Chrome、Edgeでまったく異なる見え方になります。

 クロスプラットフォーム ・エクスペリエンスのデザインが重要な理由

ビジネスとしての価値

ビジネスの観点からも、クロスプラットフォームデザインは非常に重要です。米国では iPhone のシェアが６５％ですが、世界には２０億人の Android ユーザーがおり、シェアは７１.３５％です。iPhone が買えない国では、Androidが９０%以上のシェアを占めており、このどちらにも対応していないということは、多くのチャンスを無駄にしているという事になります。

また、企業はレスポンシブデザインを考慮し、ウェブサイトやウェブアプリケーションがデスクトップ、タブレット、モバイルでどのようにレンダリングされるかも考慮しないといけません。多くの人はインターネットの閲覧のためだけにスマートフォンを使い、このようなモバイル端末で効率的に商品やサービスを購入できなければ、企業は貴重な収益を失うことになるのです。

競争力

誰もが製品が複数のデバイスで同じように動作することを期待しており、もしユーザーがウェブアプリケーションとモバイルアプリケーションで同じタスクを実行できなければ、同じタスクを実行できる競合他社を探すでしょう。

これに関しては、FinTechほど顕著なものはないでしょう。モバイル主導／専用のバンキングや投資アプリケーションは、従来の金融機関が残したギャップを埋めようとするスタートアップ企業によって、過去１０年間で爆発的に普及しました。このような旧式の金融機関の多くはモバイルソリューションの提供に遅れをとっており、それによって Robinhood、Monzo、Chime、RevolutなどのFinTechのスタートアップが大きな市場シェアを獲得できるようになっています。

インクルーシブ

万人受けの製品を作りたいなら、クロスプラットフォームデザインは不可欠です。例えば iPhone や Mac などのアップル製品は、家電製品の中でも高級品ですが、多くの人はこうした贅沢品を買うことができません。

もし、あなたの製品がアップル社のデバイスにしか対応していなかったり、Android、Windows、Web で同等の体験が提供されないのであれば、アップル製品を買う余裕のない疎外されたコミュニティを含む、世界の人口の大部分を排除していることになるのです。

クロスプラットフォーム・エクスペリエンスをデザインするための６大原則

１．一貫性

クロスプラットフォームデザインの最初のルールは、ウェブ、モバイルアプリケーション、OS で一貫した UX の維持です。この一貫性には、UIデザイン、機能性、機能、インタラクションデザイン、ブランディングなど、重要な要素がいくつか含まれます。

複数のプラットフォームやデバイスでの UIの正確な一貫性を得るのは不可能ですが、デザイナーはメッセージング、インタラクション、パフォーマンス、タイミングをコントロールすることができ、これらは常に一貫していなければいけません。

２．シームレスなエクスペリエンス

シームレスなクロスプラットフォームの UX とは、複数のデバイスで同じタスクを完了できるということであり、さらに、あるプラットフォームでタスクを開始し、別のプラットフォームで完了させることも可能です。

例えば、Gmailにおいて、 モバイルアプリでメールを作成し、下書きに保存して、別の時にデスクトップパソコンでそのメールを完了させることができます。このようなシームレスな UX により、ユーザーは、デスクトップでメールを送信するまで待つというようなテクノロジー中心の生活ではなく、自分のスケジュールに合わせて仕事をし、タスクを完了する柔軟性を手に入れることができるのです。

３．クロスプラットフォームでのユーザビリティ（インターユーザビリティ）

クロスプラットフォーム・ユーザビリティ（またはインターユーザビリティ）は、IoT（Internet of Things）のエコシステムにおける複数のデバイス間での UX と一貫性を説明するものです。

例えば Netflix は、携帯電話、タブレット、ノートパソコン、スマートテレビで視聴できる身近な例であり、各カテゴリーには、複数のデバイス、OS、スクリーンサイズがあります。

チャールズ・デニス氏とローラン・カーセンティ氏は、２００３年に発表した「Inter-Usability of Multi-Device Systems – A Conceptual Framework」で「インターユーザビリティ」という言葉を作り、一貫したクロスプラットフォーム体験をデザインするための３つの重要な要素について以下のように説明しています：

• 継続性：製品、ツール、デバイス間でのコンテンツとインタラクションのシームレスなフローの促進
• 構成：製品・デバイス間の機能整理
• 適切な一貫性：デザイナーは、UI デザインの一貫性とネイティブのレイアウトやパターンとのバランスをとる必要がある

４．優先順位付けと視覚的ヒエラルキー

クロスプラットフォームの UX をデザインするには、コンテンツとレイアウトへの優先順位付けが重要であり、デスクトップやスマートテレビでは、ユーザーはより多くのコンテンツや機能を見ることができる一方、モバイルアプリやその他の小さな画面では、デザイナーはコンテンツを優先し、多くの場合個別化を採り入れる必要があります。

例えば、Netflix や YouTube のアカウントは、２つとして同じものはありません。製品開発者は、各ユーザーのニーズや好みに合わせてコンテンツや機能の優先順位を決めるべく、個別化されたアルゴリズムを使っているのです。

優先順位付けには、視覚的な階層も含まれます。大きな画面では、より多くのコンテンツや機能を配置するスペースがあり、モバイル端末では、アコーディオン、ナビゲーションドロワー、ドロップダウンなど、スペースをとらない UI パターンを使って、【常に表示するコンテンツ】と【隠すべきコンテンツ】を決める必要があります。

５．アクセシビリティ

クロスプラットフォームのアクセシビリティは、コンプライアンスや製品が確実にインクルーシブであるようにするのに不可欠であり、デザイナーは、ユーザーが音声コマンド、スクリーンリーダー、フォント調整などの組み込みのサポート的技術を確実に使えるようにする必要があります。

また、視覚にハンディキャップがあるユーザーにも対応できるよう、【ダークモード】と【ライトモード】の用意が必要です。デバイスによって色の表現が異なることから、コントラストや読みやすさに影響が出ますからね。

６．適応性

すべてのデバイスに対応する製品を作ることは不可能です。例えば、企業の倉庫管理システムは、UI やアーキテクチャが複雑すぎるため、スマートウォッチでは動作しません。ただし、重要な通知を受け取るスマートウォッチ用アプリを作成し、ユーザーができるだけ早くモバイルアプリやデスクトップにアクセスできるようにすることは可能です。

適応性のある体験は、必ずしも製品の目標や機能に沿ったものではありませんが、価値を提供し、新しい顧客を獲得することも可能です。

 クロスプラットフォーム な体験をデザインするためのヒント３つ

１．親しみやすさを追求したデザイン

たとえば カスタムセットの代わりにiOSとAndroidのアイコンを使うといったように、多くのアプリは、プラットフォームに親しみを持たせるために、ネイティブのスタイリングやコンポーネントが使われています。このような機能は、ブランドに適合していませんが、製品がユーザーのデバイス専用に構築されているように感じられるため、クロスプラットフォームの UX を上げることができます。

２．デザインシステムの作成

デザインシステムは、凝集性と一貫性を最大化するための制約とソリューションを生み出し、製品チームへの、プラットフォーム固有のルールやガイドラインを満たすためのパターンやコンポーネントの提供もします。

マテリアルデザインのドキュメントでは、AndroidとiOSでコンポーネントがどのように見えるかをデザイナーに伝えています。たとえば、マテリアルデザインのTop App Barでは、各 OS でコンポーネントがどのようにレンダリングされるかの例が示されており、iOSとAndroidでは、アイコン、配置、間隔、アプリバーの高さが異なります。

このようなクロスプラットフォームのコンポーネントを作成することで、デザイナーは、製品がサポートするOS のデザインプロセスにおいて、正確なテストを行うことができるのです。

３．デザインライブラリの使用

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPinの内蔵デザインライブラリには、iOSおよびマテリアルデザインのコンポーネントが含まれているため、プラグインや拡張機能をインストールすることなく、クロスプラットフォーム・エクスペリエンスを構築することができます。プラットフォーム固有の UI 要素をドラッグ＆ドロップすることで、両方の OS で製品のプロトタイプを作成できるのです。

クロスプラットフォームなアプリを複数のデバイスでテストするには、iOSとAndroidで利用可能な UXPin Mirrorを使うことができます。また、ブラウザでプロトタイプをプレビューして、スマートフォン、タブレット、デスクトップ、スマート TV などでテストするのもいいでしょう。

UXPinによるクロスプラットフォームプロトタイプの構築

UXPin には、Webや、iPhone、Apple Watch、Apple TVを含む iOS、Android用のキャンバスが用意されており、各デバイスに合わせたレイアウトを作成することができ、プラットフォームの画面幅に合わせて、カスタムキャンバスサイズを使うこともできます。

UXPin のデザインシステムがあれば、チームの連携とUIの一貫性を保つために、クロスプラットフォームのコンポーネントライブラリを作成したり組織全体で共有したりできます。説明文を使って各プラットフォームのドキュメントを含め、権限を設定して、デザインシステムへの不正な変更を防ぎましょう。

世界最先端のUXデザインツールで、より良いクロスプラットフォームの UX をデザインしませんか。無料トライアルに登録して UXPin の高度な機能をぜひお試しください。

The post クロスプラットフォーム ・ エクスペリエンス【徹底ガイド】 appeared first on Studio by UXPin.

モバイルナビゲーションとは、ユーザーがデジタル製品のコンテンツや機能をナビゲートできるようになる、メニュー、コントロール、インタラクションのデザインおよび実装のことを指します。それにはメニュー、アイコン、タブ、ジェスチャーなどのナビゲーション要素の配置、可視性、機能性が含まれます。

優れたデザインのナビゲーションで、直感的で楽なユーザーインタラクションが促進され、それによってユーザーは、目的のコンテンツや機能を発見およびアクセスしやすくなります。一方、雑なナビゲーションでは、フラストレーションや混乱、高い直帰率を引き起こし、ネガティブなUX（ユーザーエクスペリエンス）や、場合によっては離脱を招いてしまいます。

世界最先端のUXデザインツールで、ナビゲーションのプロトタイプを強化しませんか。無料トライアルにサインアップして、UXPinでインタラクティブなプロトタイプ第１号を作成しましょう。

 モバイルナビゲーション とは

モバイルナビゲーションは、エンドユーザーがアプリやモバイルWebサイト内の移動や、目的ページへのアクセス、情報を見つけやすくするUI要素のセットです。このUI要素には、ボタン、アイコン、メニューが含まれ、モバイルアプリやWebサイトではおなじみのパターンが使われています。以下でそれを詳しく見てみましょう。

モバイルナビゲーションのパターンの種類

デザイナーは、最高のユーザーUXを実現するために最も適切なデザインパターンを決定する必要があります。ここでは、デザイナーがモバイルインターフェースに使用する一般的なナビゲーションパターンをご紹介します。

• ハンバーガーメニュー：ハンバーガーアイコンは、ハンバーガーに似たアイコンが水平に積み重なった、よく使われているナビゲーションパターンです。タップまたはクリックすると拡大し、ナビゲーションオプションなどの隠しメニューが表示されます。デザイナーは、スペースを節約できる利点と、二次的な機能や使用頻度の低い機能へのアクセスを提供できることから、ハンバーガー・パターンを使います。
  
  
• タブバー・ナビゲーション：タブバー・ナビゲーションは、コンテンツの区分および整理に使われるタブの水平バーです。各タブはさまざまなセクションまたはカテゴリを表し、それによってユーザーは、１回のタップでの切り替えができます。タブバーは早くて簡単なナビゲーションを提供するため、明確なセクションやワークフローがあるアプリケーションに最適です。
  
  
• ボトムナビゲーション：ボトムナビゲーションパターンは、画面の下部に固定され、主要な目的地が３～５個表示されます。また、通常は各項目にさまざまなセクションやページを表すアイコンやラベルが含まれます。ボトムナビゲーションバーは、主要な機能に簡単にアクセスでき、親指で操作しやすいため、トップレベルの目的地が少ないアプリに適しています。
  
  
• ナビゲーションドロワー：ナビゲーショナルドロワーは、ナビゲーションオプションのリストを画面の横または上からスライドさせて表示します。デザイナーは、Web サイトや、モバイルアプリの下部ナビゲーションを補完する二次的ナビゲーションとして、ナビゲーショナルドロワーをよく使用します。
  
  
• アプリバー：アプリバー（「トップバー」または「アクションバー」とも呼ばれる）は、画面の上部に位置するナビゲーションパターンで、多くの場合、アプリのタイトル、ロゴ、ナビゲーションアイコンやタブ、追加のアクションや設定が含まれます。アプリバーは、重要な機能やコンテキスト固有のアクションにサッとアクセスでき、アプリ全体で一貫した要素として機能します。
  
  
• ジェスチャーベースのナビゲーション：「スワイプ」するジェスチャーは、画面間の移動や、コンテンツの操作のための水平または垂直方向にスワイプする動作が含まれ、ユーザーは、画像ギャラリーの移動、タブの切り替え、隠しメニューの表示などのタスクにスワイプを使用できます。それで画面間を前後に移動する自然で直感的な方法がもたらされ、全体的な UX が上がります。
  
  
• フルスクリーン・ナビゲーション：フルスクリーン・ナビゲーションは、画面全体を利用してナビゲーション・リンクを表示し、集中的で没入感のある体験を提供します。多くの場合、スワイプやタップなどのジェスチャーでメニューやナビゲーション要素、コンテンツが表示されます。
  
  
• FAB（フローティングアクションボタン）：FAB（フローティングアクションボタン）は、コンテンツの上に浮かぶ目立つ円形のボタンで、アプリで最も重要または頻繁に使用されるアクションへのアクセスを提供します。そしてこれは、新しいコンテンツの作成、チャットの開始、電話の発信などのタスクに使われます。

モバイルナビゲーション・デザインでの主な考慮事項

アプリやデジタル製品のモバイルナビゲーションパターンを選ぶ際に考慮すべきポイントを３つご紹介します。

１．限られたスクリーン面積を考慮する

デザイナーは、限られた画面領域を考慮して適切なパターンの選択、ナビ項目の優先順位付け、最適なユーザビリティのためのデザインの効率化をしないといけません。

例えば、（ハンバーガーメニューのような）折りたたみ可能なメニューや、メニューアイコン１つの下にナビゲーションアイテムを組み合わせることで、アプリや Web サイトの重要なセクションへのアクセスを提供しながら、貴重なスクリーンスペースを節約することができます。

２．タッチスクリーンのインタラクションを計画する

モバイルナビゲーションのデザインは、タップ、スワイプ、ジェスチャーなどのタッチスクリーンのインタラクションを考慮しなければならず、十分なタップターゲットと直感的なスワイプジェスチャーを備えたタッチしやすいナビゲーション要素をデザインすることで、UX が上がります。

例えば、画面間の移動にスワイプジェスチャーを利用したり、親指で操作しやすいナビゲーションボタンを実装することで、インタラクションをサクッと直感的に行うことができます。

３．ユーザーのコンテクストと目標について考える

モバイルナビゲーションをデザインする際には、ユーザーのコンテクストと目標を理解することが非常に重要です。ユーザーの好み、場所、またはジャーニーの段階に基づいてナビゲーションのオプションを整理することで、使い勝手が良くなりますからね。

例えば、フードデリバリーアプリであれば、ユーザーが買い手モードになるランチタイムには、ホーム画面に検索機能を優先的に表示し、ピークでない時間帯には割引や特売を宣伝して、より多くの販売を促進するといいかもしれません。

モバイルナビゲーション・デザインのベストプラクティス

• 明確なラベリングをする：ナビゲーション要素の目的を正確に伝える説明的なラベルを使うことで、ユーザーはアプリの理解やナビゲートがしやすくなる。
• アイコンや視覚的な手がかりを活用する：ユーザーがナビゲーションのオプションや利用可能なアクションを理解できるよう、視覚的な手がかりとともに、認識しやすく直感的なアイコンを活用する。
• 画面全体の一貫性を保つ：親しみやすさや使いやすさを提供すべく、アプリ全体で一貫したナビゲーション構造、配置、スタイルを維持する。
• 重要な行動に優先順位をつける：重要性と関連性に基づいてナビゲーション要素をまとめることで、主要なアクションが強調され、乱雑さが最小限に抑えられてシームレスなUXに繋がる。
• レスポンシブデザインとアダプティブデザイン：ナビゲーションのデザインは、確実にさまざまな画面サイズや向きに適応すべくレスポンシブであるようにし、それによってさまざまなデバイスでの最適なユーザビリティがもたらされる。
• アクセシビリティについて考える： 適切な色のコントラスト、十分なタッチターゲットサイズ、支援技術のサポートなどのアクセシビリティ機能を実装し、全ユーザーがナビゲーションを利用できるようにする。
• ユーザーフィードバックを集める：ユーザーテストを実施し、フィードバックを集めてナビゲーションデザインの有効性を評価し、ユーザビリティテストの結果に基づいて改善を繰り返す。

モバイルナビゲーションにありがちな4つの落とし穴

１．隠れている、または不明瞭なナビゲーション要素

メニューやボタンなどの重要なナビゲーション要素を、よくわからないアイコンやジェスチャーで隠さないようにしましょう。ユーザーは、ナビゲーションの目的を推測することなく、さっとナビゲーションオプションを見つけてアクセスできるべきですからね。

例えば、ラベルのないわかりにくいナビゲーションアイコンを、その機能が明確に示されることなく使ってしまうのは、混乱を招く可能性があります。

２．ナビゲーションのオプションが多すぎる

ナビゲーションの選択肢が多すぎると、インターフェースが乱雑になり、ユーザーを混乱させる可能性があることから、ユーザーを圧倒することは避けましょう。必要なオプションに優先順位をつけ、ナビゲーションをシンプルにすることで、集中的で効率的なエクスペリエンスがもたらされますね。

例えば、２次的ナビゲーションのオプションやサブメニューが多数あるメッセージアプリは、ユーザーを圧倒し、中核となるメッセージ機能を妨げることになりかねません。

３．フィードバックがない、または不明瞭

ナビゲーション要素と相互作用する際に、ユーザーにはっきりとした視覚的またはインタラクティブなフィードバックを提供しましょう。視覚的な合図、アニメーション、または触覚フィードバックで、ユーザーはアクションを確認でき、システムの応答を理解することができます。

例えば、タブバーで選択されたタブをハイライトで強調したり、リンクをタップしたときにマイクロインタラクションを提供することで、ユーザーからのフィードバックが上がります。

４．使い勝手の悪さと見つけにくさ

直感的なモバイルナビゲーションをデザインするには、「見つけやすさ」と「使いやすさ」の影響を理解することが不可欠です。ユーザーは、UI（ユーザーインターフェース）をナビゲートし、製品の主要機能にアクセスする方法を把握していないといけません。

例えば、アプリの最も重要な機能が、ユーザーが見つけにくくて使いにくい多層構造のドロップダウンメニューに埋もれるのはイヤですよね。

高度なモバイルナビゲーションのテクニック

ジェスチャーによるナビゲーションとインタラクション

スワイプ、ピンチ、マルチタッチジェスチャーなど、ナビゲーション用の革新的なジェスチャー・インタラクションを色々見てみましょう。ユーザーのデバイスのインタラクションを活用することで、より直感的な UX が生まれ、自社製品の競争力を上げることができます。例えば、ニュースアプリでは、ユーザーが左右にスワイプして記事を切り替えたり、ピンチして画像を拡大したりするといいでしょう。

音声と AI を活用したナビゲーション

VUI（音声UI） とAIを統合し、ハンズフリーナビゲーションを提供しましょう。例えば、レシピアプリ内の VUI は、ナビゲーションを通じてユーザーをガイドし、ハンズフリー調理のための音声制御コマンドを提供するといいでしょう。

片手で操作できるナビゲーション

ユーザーが片手でモバイル機器を操作するケースは多いです。デザイナーは、ユーザーのニーズに合わせてナビゲーション項目に優先順位をつけたり、左利きの人のためにエクスペリエンスを最適化するオプションを提供するといいでしょう。

UXPin によるインタラクティブなモバイルナビゲーションのプロトタイプ

UXPinで完全にインタラクティブなプロトタイプを作成し、ナビゲーションパターンをテストして最適化しませんか。UXPin の高度なプロトタイピング機能によって、デザイナーは複雑な UI コンポーネントやナビゲーションのインタラクションを作成してプロトタイピング機能を強化し、デザインプロセスでより多くの問題を解決することができます。

例えば、このマルチレベル・ドロップダウンメニューには、直感的なインタラクティブ性があり、最終的な製品体験を正確に再現します。

また、デザイナーは UXPin Mirror（iOSとAndroid 用）を使って、カードとリストナビゲーションを実演したこのモバイルアプリの例のように、スマートフォンでナビゲーションのプロトタイプをテストすることができます。モバイルアプリのユーザーは、カードを左右にスワイプしてジェスチャーを利用することもできます。

さらに、UXPinのインタラクションでのトリガーには、タップ、ダブルタップ、上下左右のスワイプ、プレスホールド、リリースホールドがあり、デザイナーはステートの変化やその他のインタラクティビティに応じて、多くのシステムやアプリでのトリガーをプログラムすることもできます。

UXPinでインタラクティブなプロトタイプを作成し、テスト機能を強化する方法をお試しになりませんか。無料トライアルにサインアップして、UXPinの高忠実度なプロトタイピング体験とその多機能さをぜひお試しください。

The post モバイルナビゲーションとは？UX に与える影響 appeared first on Studio by UXPin.

アプリデザインの モックアップ は、モバイルアプリの UI（ユーザーインターフェイス）を視覚化し、デザイナーが美観を洗練させ、ステークホルダーと連携することで、デザインプロセスにおいて重要な役割を果たします。デザインの改良の実現、フィードバックの促進、ユーザビリティ評価の強化などで、 モックアップ はアプリ全体の成功に大きく貢献し、シームレスな UX の実現を支援します。

そこで本記事では、アプリのデザインモックアップに必要な要素やベストプラクティスから、オープンソースのデザインシステムを活用したモックアップの高速作成まで、さまざまな側面を総合的にお話します。

UXPin Merge を使って、UXデザインプロセスで「コードからデザイン」のパワーを活用した高品質のモックアップとプロトタイプを作成しませんか。詳細とアクセス権のリクエスト方法については、Mergeのページをぜひご覧ください。

アプリの モックアップ とは

アプリのモックアップは、モバイルUIのレイアウト、UI 要素、全体的な美観を視覚的に表現したものです。構造や機能に重点を置くワイヤーフレームとは異なり、モックアップは色、タイポグラフィー、画像など、より詳細な UI を盛り込みます。デザイナーは、このモックアップを使ってアプリの美観を磨き上げ、忠実度の高いプロトタイプやユーザビリティテストに移行していきます。

モバイルアプリの モックアップ を作成する目的とメリット

• ビジュアルコミュニケーション： モックアップで、デザイナーやステークホルダーはアプリのデザインを視覚的に理解することができ、それによってアプリの外観や機能に関して全員が確実に同じ考えを持つことができる。
• デザインの洗練： モックアップを作成することで、デザイナーはさまざまなデザイン要素を試すことができ、プロトタイプやその後のデザインハンドオフの前にアプリの美観を反復・改善することができる。
• フィードバックと連携：チームメンバーやステークホルダー間での議論やフィードバックが モックアップで促され、それによってより良い連携とデザインの決定が実現する。
• ユーザビリティの評価： 一般的にはインタラクティブではなくても、モックアップはアプリのユーザビリティに関するインサイトを提供し、デザインプロセスの初期段階で潜在的な問題を特定することができる。
• 効率的な開発： モックアップやプロトタイプの段階でデザインに関する疑問を解決することで、デザイナーはエンジニアの時間とリソースを節約でき、後々コストのかかる修正をする必要性が減る。

デザインプロセス全体の中で モックアップ を位置付ける方法

モックアップは、モバイルアプリのデザインプロセスにおいて、ワイヤーフレームとインタラクティブデザイン（プロトタイプ）の間のギャップを埋めるのに不可欠であり、デザインチームがアプリの構造と機能をマッピングするワイヤーフレーム作成の段階に続いて作成されるのが一般的です。

ワイヤーフレームが承認されると、デザイナーはモックアップを作成し、アプリの美観と UI デザイン要素を検討しながら、視覚的な詳細を加えます。モックアップが完成したら、プロトタイプの段階に移り、インタラクティブな機能を追加してアプリの使い勝手を検証します。

この構造化されたアプローチにより、デザインプロセスの各段階をスムーズに移行することができ、それによってデザインプロセスを通じた反復的な改善と効果的な連携が実現します。

アプリデザインの モックアップ の必須要素

• インターフェースのレイアウトと構造：コンテンツと UI 要素を効果的に整理する明確で直感的なデザインを確立し、シームレスな UX（ユーザーエクスペリエンス）を確保するのに、ユーザビリティを優先してアプリ全体で一貫した構造を維持しましょう。
  
  
• タイポグラフィとフォントの選択：ブランドのアイデンティティに沿った、読みやすくアクセシブルなフォントを選択し、様々なモバイルデバイスや画面サイズでの読みやすさを考慮してフォントの使い方に一貫性を持たせることで、まとまりのあるビジュアルエクスペリエンスを実現しましょう。
  
  
• カラースキームとブランディング：ブランド・アイデンティティを補完してアプリの美観を上げるカラーパレットを選択し、コントラストを生み出す色を使い、重要な要素に注意を向け、アクセシビリティガイドラインを遵守してユーザビリティを上げましょう。
  
  
• 画像とアイコン： アプリのコンテンツに対応し、視覚的な魅力を高めるために高品質の画像やアイコンを取り入れ、さまざまな画面解像度に対応できるように、一貫したビジュアルスタイルを採用してグラフィック要素を最適化しましょう。
  
  
• インタラクティブな要素やナビゲーション：ユーザーをフローやタスクに誘導するために、ボタン、メニュー、タブなどを明確で直感的なナビゲーション要素にデザインし、スムーズな UX を促すために、インタラクティブなコンポーネントは確実に簡単に識別できて応答性が高く、アプリ全体で一貫しているものであるようにしましょう。

アプリのデザインの モックアップ 作成のベストプラクティス

Lo-Fi（低忠実度）なワイヤーフレームから始める

モックアップの前に、忠実度の低いワイヤーフレームを作成するのは標準的なやり方であり、このワイヤーフレームによって、アプリのレイアウトに速やかに集中できます。そしてこのアプローチによって、デザインプロセスの早い段階でアプリの構造や情報フローに関する問題を特定して対処することができ、モックアップやプロトタイプの段階で強固な基盤を確保することができます。

デザインのガイドラインや原則との整合性を保つ

視覚的に魅力的で機能的な モックアップ を作成するには、一貫性、階層性、整合性を含む確立されたデザインのガイドラインと原則に従いましょう。このベストプラクティスによって、ユーザーの期待に応えた、ポジティブな製品体験を促す、まとまりのあるプロフェッショナルなアプリデザインが実現します。

UX とユーザビリティを優先する

UX（ユーザーエクスペリエンス）とユーザビリティは、モックアップデザインプロセスの指針となります。ロード（読み込み）時間、アクセシビリティ、デバイスの互換性などを考慮し、多様なユーザーに対応できるアプリを目指しましょう。

連携とフィードバックの収集

モックアッププロセスでは、チームメンバーやステークホルダーからのフィードバックや意見を積極的に求めましょう。連携によって多様な視点が生まれ、革新的な解決策やより洗練されたデザインにつながりますからね。プロトタイプの段階に進む前に、モックアップをコミュニケーションツールとして活用し、議論を促して懸念事項を解決しましょう。

UXPinのコメント機能によって、UXPin のアカウントを持っていないメンバーでさえ、連携やフィードバックがしやすくなります。チームメンバーは互いにタグ付けし、コメントを割り当て、完了したら【解決済み】とマークするといいでしょう。

モックアップを繰り返して改良する

フィードバックとテストに基づいて、モックアップを継続的に反復・改良しましょう。プロセスを通じてデザインを改良することで、問題に対処し、洗練された高品質のアプリを提供することができます。デザインの反復的な性質を利用して、ユーザーのニーズを満たし、競争の激しいアプリ市場で際立つ最終製品を作りましょう。

オープンソースのデザインシステムの活用による モックアップ の高速化

オープンソースのデザインシステムとは

オープンソースのデザインシステム（コンポーネントライブラリ）は、デザイナーが一貫したまとまりのあるアプリのモックアップをより効率的に作成できるようにする、再利用可能な UI コンポーネント、パターン、テンプレート、ガイドラインの包括的な集まりです。このようなデザインシステムを活用することで、デザイナーはワークフローの効率化や、一貫したビジュアル言語の維持、およびアプリ固有の機能や UX の改良への集中ができるようになります。

アプリの モックアップ デザインにオープンソースの UI ライブラリを使うメリット

• 時間の節約： あらかじめ組み込まれたコンポーネントをデザインシステムから使うことで、モックアップを一から作成する時間が大幅に短縮される。例えば、ナビゲーションドロワーをゼロからデザインしないで、ドラッグ＆ドロップでキャンバスにドロップすることが可能。
• 一貫性：例えば、アプリ全体で同じ配色やタイポグラフィを適用することによって、まとまりのある UX が実現するように、デザインシステムが、アプリ全体の視覚的・機能的な一貫性を促進する。
• スケーラビリティ：デザインシステムのコンポーネントは、スケーラビリティを考慮して構築されているため、将来の変化に合わせたアプリの適応がしやすくなる。例えば、デザイナーは既存の要素を組み合わせて新しいパターンやコンポーネントを作ることができるので、一貫性を保ちながら素早く拡張することができる。
• 連携：例えば、デザインアセットやガイドラインを共有することで、チームのコミュニケーションやハンドオフが効率化されるように、デザインシステムが「信頼できる唯一の情報源（Single source of truth）」を作成することで、デザイナーとデベロッパーの間のより良い協力が促される。

検討すべき人気のオープンソースデザインシステム

• MUI：Google のマテリアルデザインをモデルにしており、視覚的に魅力的で機能的なクロスプラットフォームのアプリケーションを作成するための、包括的なガイドラインを備えた多用途のデザインシステムを提供する。
• Fluent デザインシステム：Microsoft が開発したオープンソースのクロスプラットフォームデザインシステムで、Web、Windows、Android、iOS 向けのコンポーネントやパターンを備えている。
• Ant Design：企業レベルのアプリケーションデザインに焦点を当て、デスクトップおよびモバイルアプリケーションのための高品質なコンポーネントとパターンの包括的なセットを提供する。

アプリデザインの モックアップ をインタラクティブプロトタイプにする

インタラクティブプロトタイプとは

インタラクティブプロトタイプは、アプリの UI（ユーザーインターフェース）と機能をシミュレーションするアプリのモックアップの動的バージョンで、ユーザーは完全に開発された製品のようにアプリを操作してナビゲートすることができます。

静的なモックアップと違って、インタラクティブプロトタイプにはアニメーション、トランジション、クリック可能な要素などが含まれ、アプリの UX を正確に表現します。デザイナーはこのプロトタイプを使ってユーザビリティテストを行ってユーザーからのフィードバックを集め、アプリのデザインと機能を洗練させてから開発フェーズに移行します。

インタラクティブプロトタイプの利点

• ユーザビリティテスト：インタラクティブプロトタイプで、デザイナーはアプリの使い勝手や機能をテストし、開発に着手する前に潜在的な問題を明らかにすることができる。
• 現実的なユーザー体験：最終的なアプリがインタラクティブプロトタイプで正確に表現され、それによってステークホルダーやユーザーは現実的なフローやインタラクションを体験できる。
• 連携の向上：インタラクティブプロトタイプで、デザイナー、デベロッパー、ステークホルダー間の連絡と連携が促され、それによって全員がアプリの意図する機能を確実に理解できる。
• より速やかなイテレーション（反復）：デザイナーは、インタラクティブプロトタイプをサッと繰り返し、それによってユーザーからのフィードバックやユーザビリティテストに基づいて調整を行い、アプリのデザインと機能を洗練させていくことができる。

モックアップからインタラクティブプロトタイプに移行するためのヒント

• 重要なインタラクションの特定： プロトタイプを作成する前に、テストと検証を行いたい重要なユーザーインタラクションやアプリのフローを決めましょう。
  
  
• 「コードからデザイン」のプロトタイピングツールを使う：モックアップをインタラクティブプロトタイプに効率的に変換するのに、 専用のインタラクティブプロトタイピングツールを活用しましょう。
  
  
• トランジションをアニメーション化する： アプリの UX を上げ、よりリアルな仕上がりを提供するのに、アニメーションやトランジションを取り入れましょう。
  
  
• ユーザーテストを実施する： 実際のユーザーと一緒にプロトタイプをテストしてフィードバックを集め、改善すべき点を特定しましょう。
  
  
• 反復と改良： 開発に着手する前に、アプリのデザインと機能を改良するのにプロトタイプを継続的に反復して、ユーザーからのフィードバックやユーザビリティテストの結果を取り入れましょう。

UXPin Mergeでアプリの モックアップ とインタラクティブなプロトタイプをデザインしよう

UXPin Merge は、デザイナーが技術的なスキルや１行のコードもなく、製品のデザインプロセスで完全にインタラクティブなコードコンポーネントを使えるようにしてくれる、コードベースの技術です。

Merge を使えば、デザイナーはスケッチからワイヤーフレーム、モックアップ、インタラクティブプロトタイプまで簡単に行うことができ、従来の UI キットや画像ベースのデザインツールに比べてわずかな時間でできます。

Merge のもう一つの大きな利点として、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成する点があります。デザイナーはデザイン プロセスのためにビジュアル要素を使い、エンジニアはその背後にあるコードを使いますが、どちらも同じレポジトリから引き出されます。

デザイナーは Mergeのプロトタイプをブラウザやネイティブアプリケーション用の UXPin Mirror アプリでプレビューできるので、クロスプラットフォームテストに最適です。また、UXPinは、iPhone、iPad、ウェアラブル、Android など、一般的なモバイルデバイス用のキャンバスをデザイナーに提供します。

さらに Mergeでは、どんなオープンソースのコンポーネントライブラリや製品のデザインシステムでも、以下のように UXPin にインポートすることができます：

• Git 統合：レポジトリにホストされている React 専用のデザインシステムに直接同期する。
• Storybook 統合：React、Vue、Angular、Emberのライブラリを含む、あらゆる Storybook を UXPin に接続する。

世界最先端のデザインツールでモックアップやインタラクティブプロトタイプのプロセスを強化しませんか。詳細とアクセスリクエスト方法については、Mergeのページをぜひご覧ください。

The post アプリのデザイン モックアップ – 速く作る方法 appeared first on Studio by UXPin.

 国際化は、スタートアップ企業やグローバルな展開を目指す企業にとって非常に重要です。

 国際化と地域化は、翻訳されたテキストや通貨の変更にとどまりません。ユーザー、その文化、環境に適した体験をデザインすることで、グローバル市場での普及と成長に必要な信頼が生まれるのです。

加速とテストは、グローバル市場に向けたポジティブなUX（ユーザー体験）の提供に必須です。

 国際化 とは

 国際化（またはGoogleの言う グローバリゼーション ）とは、言語、地域、文化の適応を可能にするデジタル製品のデザインと開発のことです。この柔軟性によって、企業は製品の統合性とUXを維持しながら、製品を適合させ、新しい市場に参入することができます。

 国際化の簡単な例としては、言語や通貨の選択項目があります ー特定の言語や通貨ではなく、それを可能にするUIデザインやプログラミングのことです。

たとえばCuber Shopify Themeは、ストアの国際化デザインにドロップダウンを使っており、Shopifyのストアオーナーはこのような国際化機能を使って、たとえば、米国ベースのストアがメキシコベースの国境オーディエンスに「メキシコ通貨に」 （ペソ）」と「スペイン語」を提供するというように、さまざまな国のためにECストアを 地域化することができます。

このeコマースの例から、地域化の話に移りましょう。  

地域化 とは

  地域化 とは、翻訳、通貨、文化的な変化など、特定の市場ニーズに合わせて製品を適合させるプロセスのことです。

地域化 は、ただ言語や通貨を変えるだけでなく、適切で親近感のあるUXの提供を目的としています。  

例えば、ニュージーランドで１２月は夏なので、クリスマスに雪が降ることはありません。そうなると、ニュージーランド人にとって「１２月に雪が降って暖をとる」というのは、カナダ人みたいに意味をなさないでしょう。

また、デザイナーは、英語のような「左から右への言語（LTR）」と、アラビア語やヘブライ語のような「右から左への言語（RTL）」など、ネイティブ言語のマークアップや構造に合わせてUI（ユーザーインターフェース）を適合させるのも必要です。

方法要件および相続

  製品チームは、さまざまな地域のトラフィックや、コンテンツやユーザー データに対する法律の影響も考慮しなければいけません。のデータプライバシー法は、製品やウェブサイトがユーザー情報を収集、保存、共有する方法を規定するものです。  

デザイナーは、このような地域の顧客に「Cookie ポリシー」を通知し、Stack Overflowのこの例のようにパラメータをオプトアウトできるようにしなければいけません。

国際化とアクセシビリティ対応

国際化は、アクセシビリティやインクルーシブデザイン、地域化可能な製品作りには不可欠であり、W3Cは、 i18n （「国際化」の業界標準の略語）の概要と、グローバルなオーディエンスのために製品をより含むする方法を提供しています。

一般的なソースのコードベース

製品開発者は、国際化とプログラミングのためにUnicodeを使わないといけません。ちなみにUnicodeは、デジタル製品に、あらゆる言語でコンテンツを翻訳し提供するための基盤を提供するものです。

また、さまざまな言語構造やマークアップに対応するために、エンジニアは適切なメタデータの考慮が必要です。

文字の向き

右から左への言語は、１行のテキストの中で方向が浮かぶことが多いため、デジタル製品のデザインにとっては複雑です。表示しています。

デザイナーはエンジニアと協力して、このような方向性のニュアンスを正しく表現しなければいけません。

名前と住所

  世界のさまざまな地域から来たユーザーにとって、書式はしばしば混乱を引き起こす。 たとえば、ヨーロッパの一部の国では、住所を書くときに「通りの名前」から「番地」とが、アメリカでは、番地になります先です。

また、国によっては郵便番号がないため、この項目を必須項目にしてしまうと、そのようなユーザーにとってイライラが募るものとなってしまいます。

デザイナーは、名前の長さと構造にも考慮が必要です。文化によっては、名字が先で名前が後になる場合もありますからね。また、人の名前にはいくつかの単語がある場合があります、このようなデータはどのように入力しますか？

タイムゾーン、通貨、日付

  日付の書式は、多くの混乱とフラストレーションを引き起こす可能性があります。 例えば、ユーザーは『10/02/2022』を次のように解釈することができます：

• アメリカでは『２０２２年１０月２日』
• ヨーロッパでは『２０２２年２月１０日』

  このような混乱をもたらすには、「2022年10月2日」のように「月」を数字にしないで「日と年」だけを数字にして、誰もが読めるようにするといいでしょう。がフォーム上でこういったフィールドを収集することもできるので、ユーザーは正しい日付を入力し、データベースがそれを正しく読み込んで保存できるようになります。

また、製品に「時間」が使われる場合、タイムゾーンやサマータイムを考慮し、正しい時間形式をユーザーに提示することが重要です。

「通貨」は、デザイン上のもう一つです。記号が来ます。

文化的な規範と期待

  新しい市場に参入する際、UXチームは、下調べが必要であり、おそらく現地のUXデザイナーを雇うことになるでしょう。

例えば、エジプトでは親指を立てることはいい意味で使われますが、中東やバングラデシュでは軽蔑的な表現になります。使うと、このような地域のユーザーからはややこしい評価を受けるかもしれません。

ユーザーと文化の調査は、特にUXチームがその言語を話さない場合、優先事項でないといけませんん。

さらに詳しく読む：W3Cは、アメリカ、ヨーロッパ、アフリカ、中東、極東、東南アジアなど、地域の国際化に関するグループのリストを提供しています。

 国際化 と 地域化 のベストプラクティス

1. 比喩や文化的な引用を引用する

  どの国や文化にも比喩や引用がありますが、世界規模のオーディエンスには通じないと多くの場合、場合によってはバングラデシュの親指立てのように不快感を与えてしまうこともあります。

また、デザイナーは「インテリジェンス」文化的引用ではなく、説明的な名称を使わないといけません。なるでしょう。

2. 国際的に通用するフォームをデザインする

  フォームのフィールドラベル、特にアドレスは、混乱を引き起こす可能性があります。デザイナーには、国際的な利用者に対応したフォームのデザインが必須です。

例、貨物の国では『郵便番号』の代わりに『郵便番号』を使用しています。フォームのラベルやフィールドのサイズに国際的なアプローチをすることで、よりグローバルに対応できるフォームになるのです。

さらに読む  

• Web フォーム設計のベスト プラクティス
• フォームの国際化テクニック
• Web フォームの国際住所フィールド

3.翻訳に対応したUIをデザインする

  デザイナーは、単一言語に対応したUIデザインを避けないといけません。 デザイナーのジョン・サイトウ氏は「例えば『New！』というラベルを思い浮かべてみてください。』と、国際化に関するMediumの記事で指摘しています。

そこで彼は、Googleシートを作成し、Googleの機能を使って多言語を翻訳し、文字数を計算することを勧めています。

標準的なCTA（Call To Action）である「サインアップ」を、１０種類の言語で比較しました。『サインアップ』はスペースを含めて７文字ですが、ほとんどの言語は１０文字以上あるため、デザイナーが十分なスペースを確保しないと、問題が発生する可能性があります。

4.実際のコピーでダウンロードを作成する

製品を新しい言語に対応させる場合、すべてのUI上のコンテンツを最終製品に表示されるように翻訳しましょう。

翻訳で見られたように、英語版よりも長い単語がある場合、UIの幅がそもそもに必要になります。

UI要素に十分なスペースがない場合、テキストは変更されます。そうなるとプロの仕事に見えず、他の要件を押してしまい、ユーザービリティの問題を引き起こす可能性があります。

5. 画像にテキストを添付しない

ジョン・サイトウ氏が推奨するもう一つの方法は、『画像にテキストをアップロードしない』です。

また、画像にテキストを入力してしまうと、視覚障害者やスクリーンリーダーを使うユーザーには使えなくなってしまいます。

テキストの省略は良い方法ですが、CSSとJavascriptが追加されるため、デザイナーはこの方法の控えめな使用が必須です。

6. 親近感のあるコンテンツを使う

特に画像や動画のコンテンツを使う場合は、文化的な親近感を持てるようにしましょう。 ユーザーは、自分の国や地域の誰かが、自分たちのために特別に製品をデザインしてくれたように感じるはずです。

例、GoogleニュースやAppleニュースのアプリには、位置情報を利用して、関連性の高い地域化されたストーリーが表示されており、この地域化は、アメリカ人向けのニューヨークの写真を、ケニアのユーザー向けのナイロビに変更するような場合もあります。

7. タイポグラフィを国際化する

UsabilityGeekに、言語がタイポグラフィに与えられた影響について考察したヨナ・ギダレッツ氏の対応記事があります。北京語、韓国語、日本語などのアジアの言語には複雑な文字があり、太字の書体ではうまく表現できません。

また、このような言語は複数文字の英単語を1文字で表現するため、読みやすさのために大きなフォントが必要となり、最終的にUI要素や画面全体が変わってしまいます。  

8. 数値フォーマットと削除

数字のフォーマットやキーボード文字は、言語や地域によって異なり、マイクロソフトのグローバル化に対応した数値フォーマットでは、「マイナス５２０７」を以下の４種類の方法で表示するようなことが実証されています：

• • -527

• • 527-

• • (527)

• • [527]

また、日付と数字のキーボード文字も人によって使い方が異なります。

• • 2022 年 10 月 2 日

• • 10.02.2022

• • 2022 年 10 月 2 日

アメリカではコンマ（,）で数千を使いますが、ドイツではピリオド（.）を使います。

これらは細かいことには思えないかもしれませんが、ユーザービリティに重大な影響を及ぼす可能性があります。このようなニュアンスを理解することで、製品チームは潜在的な問題を回避することができるのです。

UXPinによる 国際化 された製品デザイン

  デジタル製品のデザインは難しいものです。

UXPinのデザインシステムを使えば、製品チームは言語ごとに複数のデザインシステムを作成し、アプリケーションとテストを効率化することができます。に合うように順序を編集しましょう。

各デザインシステムには、ローカルに特化したコンポーネント、セット、タイポグラフィー、ドキュメントが用意されていており、デザイナーは地域化されたファイルを作成してテストすることができます。

世界最先端のUXデザインツールにより、複数の市場に対する対抗とテストという時間のかかるプロセスを回避することができ、UXPinを使えば、国際的な競争力を持つ対応製品をより迅速に構築するぜひ今すぐ無料トライアルにお申し込みください。

The post 国際化と地域化とは？ アプリデザインにおける主な違い appeared first on Studio by UXPin.

2021年、iOSおよびGoogle Playのアプリストアのダウンロード数は約1400億になり、わずか2年で20％の伸びを記録しました。多くの需要に対応している結果ですね！ただ、市場にはさまざまな選択肢があるため、今日のアプリユーザーが求めているのは、単に「正しく動作するアプリ」だけではありません。彼らは、自分たちの具体的で個別のニーズに沿ったUXを求めているのです。

一部のアプリデザイナーが「これ1つで全て賄える」モデルで失敗している中、ユーザーが切望するレベルの「パーソナライゼーション」とアプリの「カスタマイズ」を確実に実現するにはどうすればいいのでしょうか。  

  UXPinは、最終製品のように見えるプロトタイプを簡単にデザインすることができます。その優れた機能により、ユーザーやステークホルダーが実際に操作できるプロトタイプを構築することができ、ユーザーテストもスムーズに行えます。UXPinを無料でお試しいただき、今日からアプリ第1号をデザインしましょう！  

アプリのパーソナライゼーションとは

  アプリのパーソナライゼーションは、最も基本的なレベルでは「特定のオーディエンスの独自のニーズを満たすアプリを構築するプロセス」であると定義することができます。  

ただし、例えば「色々なオーディエンスがどのようなパーソナライゼーションの要素を求めているかを知る方法は？」や「既存のUXに満足してもらうには？」、「どのアプリのカスタマイズ要素が他の要素よりも重要？」など、それ以上に重要なことがもう少しあります。  

現在、利用可能なツールや分析の数が増え続けているおかげで、最高級のカスタマイズオプションやパーソナライゼーション機能を備えたアプリの開発はしやすくなってきています。

ユーザーが登録後に受け取るフィードバックを充実させたり、予測アルゴリズムを使ってユーザーのモチベーションや興味を引き出したり、アプリのパーソナライゼーションは、創造性と革新的な考え方を必要とするデータ駆動型のアートに進化しているのです。  

アプリのパーソナライゼーションが重要な理由

  モバイルアプリで、圧倒的多数の消費者が求めているものは、ユーザーの履歴や興味、好みに応じて、必要な商品やサービスを提供するアプリ1つです。なのでパーソナライゼーションを誤ると、アプリが台無しになります。  

CX（顧客体験）は、いかに顧客のためにジャーニーをパーソナライズ化できるかによって左右されます。ありきたりで個性のないプロセスは時代遅れで、ユーザーが寄り付かないことが知られている一方で、利便性、簡単さ、効率性を追求したアプリが主役に躍り出ています。

アプリのパーソナライゼーションを促すための興味深いデータが、あらゆる研究や調査事例で指摘されています。５８％の人は、自分のことを覚えてくれている企業に対して、より好感を抱いています。また、３分の２は、ブランドは自分のニーズを伝えなくてもわかっていると期待しており、４分の３近く（７２％）の顧客は、パーソナライズ化されたメッセージを提供するブランドとのみ取引を行いたいと思っています。

企業もそのことに注目しています。マーケティング担当はその先頭に立ち、６０％が自社のコンテンツは広範囲にパーソナライズ化されていると回答しており、2022年現在、８４％の企業が、豊富なUX（ユーザーエクスペリエンス）の実現にはパーソナライゼーションが不可欠であると認識しています。  

ユーザーは、自分が重要な存在であり、ネットワーク上の単なる番号以上の存在であると感じたいと思っています。そうなると、ユーザのーエンゲージメントが鍵になり、サインアップや購入に対して単に名前を挙げて感謝する以上のことを行えるようにすることが、モバイルアプリの個別化戦略を正しく行うための秘訣になるのです。

モバイルのパーソナライゼーション・セグメンテーション・カスタマイズ

  モバイルアプリのパーソナライゼーションを効果的に行うためには、まずさまざまなユーザーアプリのセグメントとその役割を理解し、効果的な戦略を策定しなければいけません。  

「パーソナライゼーション」と「カスタマイズ」は同じ意味で使われていますが、違うものです。どちらも、エンゲージメントを高めるためにユーザー体験をどのようにデザインするかという概念ですが、根本的なレベルでは、以下のようにそれぞれ異なる結果をもたらすものなのです。：  

• パーソナライゼーション：ブランドや企業が、データ分析によってデジタル技術やツールを活用して、既存顧客や見込み顧客に対する商品提供やダイレクトメッセージを個別化することであり、顧客に何かが届く前に行われ、ブランドや企業の責任となる。
• カスタマイズ：顧客が自分の好みや要求を入力して、製品やサービスを自分のニーズに合わせて変更できるようにするプロセスであり、リアルタイムで行われるが、ブランドは消費者がそうできるような環境整備が必要。

  以下は、【パーソナライゼーション】と【カスタマイズ】の具体的な例です：  

”ABC ブランドは、全国の店舗でコーヒーを販売しており、ユーザーはアプリで注文することができます。ユーザーが注文時にクリームや砂糖、豆乳、トッピングなどを追加するオプションがあれば、それは「カスタマイズ」と言えるでしょう。一方、アプリを開いたら、あなたが好きなコーヒー３種類、お気に入りの店舗、いつもカフェインを摂取する時間帯がすでに分かっているとあれば、それは「パーソナライゼーション」になります。”

しかし、アプリをパーソナライズ化するのに必要なデータへのアクセス、ひいてはカスタマイズのレベルを確保するためには、まず、誰をターゲットにしているのかの把握が必要です。つまり、ユーザーとアプリのセグメントについて知る必要があるのです。  

「効果的なパーソナライゼーション」と「包括的なカスタマイズ」の両方を実現するには、エンゲージメントを促すUXの提供が前提になります。ただ、その実現にはターゲットとなるオーディエンスを理解する必要がありますが、セグメンテーションでそれが可能になります。  

• ユーザーセグメンテーション：ターゲット市場を、共通の興味やニーズ、嗜好に基づいて、より小さく、より管理しやすい顧客グループに分割（セグメンテーション）するプロセス。

  セグメンテーションには、多くの考慮事項、基準、要素が含まれ、効果的な実行が難しい場合があります。以下のような最も一般的な要素のどれに従って市場をセグメンテーションする際にも、常にアプリのニーズと目的を念頭に置きましょう。  

• デモグラフィック：顧客の年齢、性別、収入レベル、雇用形態、人種などに関連し、それによってブランドは、識別しやすい主要な要素に基づいて、さまざまなグループの人々が何を求めているかが把握できる。
• 地理的位置：人の物理的な位置情報を指し、アプリはこの情報にアクセスし、人々の居住地や勤務地、普段よく過ごす場所を知ることができる。
• 生涯収益：顧客がどれくらいの期間で顧客だったのかを把握することができ、また、これでどのグループが他のグループより多く消費しているかもわかることから、デベロッパーは各グループに異なる影響を与えるUXをデザインすることができる。
• 心理的属性：顧客がどのような人であるかを定義する、顧客自体を表す一部であり、文化的アイデンティティ、世界観、政治的傾向、そして宗教的要素などが含まれる。人がアプリに関連するブランドから何を期待するかで重要な役割を果たす。
• 行動セグメンテーション：市場の人々がどのように行動しているかについての貴重なインサイトを提供。アプリの場合、画面占有時間、直帰率、アプリの保持率、画面上のホットスポットなどを調べ、そのデータは、ユーザーの行動を把握してアプリのパーソナライゼーションを適切に行うのに不可欠である。

心理的属性と行動セグメンテーションは、アプリに関連する消費者情報を提供することに特化しているため、アプリのパーソナライゼーションのUXを追求するデザイナーにとっては欠かせません。デベロッパーは、こういったメトリクスから主要なユーザーのニーズと目標を特定し、モバイルアプリ体験をより効果的にカスタマイズしてパーソナライズ化するといいでしょう。  

モバイルアプリをパーソナライズ化する方法

  どのユーザーグループに焦点を当てるべきかがわかれば、モバイルアプリのデザインとパーソナライゼーション戦略をどのように進めるべきか、よりハッキリしてくるでしょう。  

1. ユーザーセグメントを活用する

  アプリのセグメントをより深く理解する努力をした後は、各セグメントは相応の注意が払われなければいけません。それが、アプリのカスタマイズとパーソナライゼーションの優れた点であり、それぞれにパーソナライズ化された体験を提供することができるのです。  

アプリのROI（投資利益率）と持続力は、すべてのユーザーに最も包括的でやりがいのあるUXを提供できるかどうかに大きく依存します。でもリソースは限られたものであり、そうなると最も収益性の高い貴重な顧客を優先させたいと思うでしょう。そこで、各グループの「ニーズ」と期待される「リターン」をバランスよく満たすパーソナライゼーション戦略に投資するのです。  

2. オンボーディング体験に磨きをかける

  特にアプリでは第一印象が重要なので、ユーザーのオンボーディングに注意を払いましょう。この見落とされがちなモバイルアプリのパーソナライゼーションの要素は、ユーザーの安定的な定着とアプリのエンゲージメント率を高く保つために重要です。  

まず始めにユーザーの名前を聞き（ただし、個人に関わる不必要な質問をしすぎないようにしましょう）、必要に応じてそれを使います。アップグレード機能の無料体験や、アプリ内課金の早期割引を提供し、使い続けるようにふわっと促すことも忘れないようにしましょう。  

3. パーソナライゼーションがうまく反映されたコンテンツを作る

  ここで、モバイルアプリのパーソナライゼーションが重要な役割を果たします。ユーザーのあらゆるニーズに対応するために、アプリと綿密に調査されたデジタルコンテンツをカスタマイズしましょう。そうすると、これまでのやり取りやユーザーの関心事が反映され、ユーザーの要望を先取りするようになっているはずです。

さまざまなアプローチでイノベーションを起こし、基本的なパーソナライズ化と、ユーザーに感動と喜びを与える特性のバランスをとる方法を探しましょう。関連性が重要なので、リサーチとセグメントのデータを有効活用しましょう。  

4. プッシュ通知を有効にする

  プッシュ通知は、アプリがデバイス上で注目されるための方法です。ただし、アプリの「推し」加減や、関連するコンテンツの宣伝には十分注意しましょう。  

モバイルユーザーは、特典、製品のオススメ、ニュースフィードからのハイライトや位置情報、アプリ自体に関連する重要な情報、自分の興味に関する最新情報など、自分に役立つ適切な通知を高く評価することから、そのためには、ユーザーの好みに合わせた通知の調整が重要です。  

5. アプリの枠を超えたパーソナライゼーション

  アプリの枠を超えて、パーソナライズ化されたアプリ体験を実現することができます。それにより、ブランドへのロイヤリティが高まり、効果的なパーソナライゼーションへの取り組みが実証されます。  

アプリの利用状況を把握していることを示すメールマーケティングは、エンゲージメントを復活させるには貴重なチャンスとなります。また、アプリユーザーがアプリを中断した場所から再開できるような通知や、アプリの新機能や製品の提供を思い出させる通知も、パーソナライゼーションの優れた動機付けとなります。  

例えば、Duolingoでは、進捗に応じてユーザーに報酬が与えられ、高度にパーソナライズ化されたメールやリマインダーによって、ユーザーの継続を促しています。  

モバイルのパーソナライゼーションに取り組む最善の方法

  アプリのパーソナライゼーションに取り掛かる前に出発点が必要ですが、プロトタイプは、開発に着手する前にアプリをテスト、改良、完成させるための最も効果的かつ効率的な方法の1つと考えられています（特にパーソナライゼーションの分野ではそうです）。  

UXPinは、インタラクティブなプロトタイプを作成するためのオールインワンのデザインツールで、プロトタイプを使ったユーザーのインタラクションから詳細なユーザーフィードバックを得ることができます。また、1つのスクリーンから別のスクリーンへ共有されるライブデータとユーザーインプットを使ってデザインするのに便利な多くの機能を備えています。  

UXPinのプロトタイプで、顧客にとって最も重要な要素の特定や、顧客が望まない要素の排除、失敗バージョンに貴重な時間と費用を費やすことのないパーソナライゼーション戦略の完成を実現しましょう。UXPinの無料トライアルをぜひお試しください。

The post アプリのパーソナライゼーション – その意味と重要性を解説！ appeared first on Studio by UXPin.

80%のユーザーが、アプリの使い方がわからなかったら削除していることをご存知ですか？  

カスタマーサポートへの連絡も、説明書を調べることもありません。  

シンプルにそのアプリを削除して「次」に行くのです。  

これは厳しい統計ですが、ユーザーのオンボーディング体験がいかに重要であるかが浮き彫りになっています。もし、製品やサービスを最大限にいかす方法をユーザーにきちんと伝えることができなければ、ユーザーは他に行ってしまということです。  

では、どのように対策すればいいのでしょうか？本記事では、UXオンボーディングとは何か、そしてそれを正しく行うことが重要な理由を見ていきましょう。また、製品の優れたユーザーオンボーディング体験を実現するための6つのヒントについてもご紹介します。  

  オンボーディング・ユーザー・ジャーニーのデザインのアイデアがうまくいくか見てみませんか？UXPinを使って、UXオンボーディングのインタラクティブなプロトタイプを作成し、それに対するユーザーの反応を確認することができます。アイデアを繰り返し、デベロッパーに伝え、より良いオンボーディングフローを堪能しましょう。作業を高速化するプロトタイピングツールをぜひお試しください。  

オンボーディングUXとは

  オンボーディングUXは、新しいユーザーに取説など色々と教えて、彼らが製品に対していい印象を持つような方法で製品を紹介し、最初のインタラクションからうまくいくようにお手伝いするプロセスです。  

技術的には、サインアッププロセスの後の一連の流れで、通常はアプリ内の画面やコンテクスト上のきっかけとして、ユーザーを最も重要な製品機能へと導きます。このような製品に関する案内で、製品の価値が強調され、可能な限り最も魅力的で迅速な方法で行われます。  

新しいアプリをダウンロードしたとしましょう。  

UXに焦点を当てた「いいオンボーディングフロー」は、アプリの各主要機能を案内するものであり、すべてがどのように機能し、その機能をどのように使ったら生活や作業が楽になるかが一通り説明されています。

一方、特に複雑な製品の場合、オンボーディングがうまくいかなければ、深みにはまってしまいます。結局自分で何でもしないといけなくなり、そのようなアプリの体験でイライラして、すぐに投げ出してしまうことになるでしょう。  

このことを頭に入れて、全ては「派手なビデオチュートリアルやポップアップの取扱説明書」よりも「効果的なオンボーディングプロセス」であることを理解することが重要です。つまり、製品に悪いイメージを与える可能性のあるミスを減らし、導入プロセス全体を円滑にしましょうということなのです。  

ユーザーへのオンボーディングフローの構築が重要な理由

  それに答えるには、ユーザーの立場に立って考えてみる必要があります。初めて製品を使う人は、以下のような一部あるいは全部を感じているかもしれません：  

• 不安
• 恐怖
• 圧倒
• 興奮
• 好奇心

  あなたの仕事は、彼らが自信を持って製品を使いこなし、理解し、各ステップでサポートされていると感じられるようなオンボーディング体験をデザインすることです。  

初使用で確実にこれがあるようにしましょう。さらに、このプロセスが不可欠である理由を、いくつか挙げてみましょう。  

第一印象は一度きり

Ipsosの調査によると、我々が「第一印象」と呼ぶものの背景には、「関連性」「差別化」「支払い価格」の3つの要素があることがわかりました。

そのため、オンボーディングフローは、まず「ユーザーのニーズ」、「目標」、「課題」に関連していることの証明に重点を置く必要があります。2つ目は、自社の独自性を示すこと、つまり、競合他社よりも優れている点の説明です。3つ目は、主観的な側面です。自分の目で見てもらった上で、その製品が支払った価格に見合ったものであるかどうかを判断するのは、ユーザーなのです。  

ユーザーがアプリを使いこなすためのナビゲーション

  ユーザーが確実にアプリを使いこなせるようにするのが、プロダクトデザイナーの役割です。情報アーキテクチャが複雑で、機能が多ければ多いほど、効果的なオンボーディングシークエンスの構築が重要になります。  

ここで、ユーザビリティテストを参照してみましょう。ユーザーテストでは、【「ホームページ」から「アカウント設定」に移動し、請求書の詳細を変更する」】や【原材料を「アメリカ式軽量カップ」から「グラム」に変更するオプションを探す】といったタスクがあることに注目してください。デザイナーは、新しいユーザーが簡単にプラットフォームに馴染めるようにしたいので、このような質問は重要です。そこで、ユーザーがA地点からB地点までどのように移動できるかを示すオンボーディングフローを作成することが重要であり、そうすることで、混乱やユーザーのイライラを防ぐことができるのです。  

アプリの価値を明確に伝える

  逆説のように思えるかもしれませんが、アプリやプラットフォームでできることが多ければ多いほど、圧倒されるユーザーが一定数出るリスクは上がります。これは、アプリが「シンプルかつ提供するコア機能は一つしかしてはいけない」ということではなく、オンボーディングプロセスによって、ユーザーが必要なものを簡単に見つけて目的を達成できるようにすることが重要だということです。  

例えば、生産性が上がるツールを10種類以上提供しているとして、新規ユーザーがタイム追跡機能だけを目的にサインアップしたとします。ログインすればそれをすぐに使えるはずなのに、目的の機能以外の、（少なくとも今は）不要なモジュールにばかり気を取られてしまうかもしれません。  

効果的なUXオンボーディングにより、ユーザーを適切なモジュールに素早く誘導すると同時に、提供されているもの全てからより多くの価値を得られるように優しく教えてあげましょう。  

ユーザーのライフサイクルを延ばす

  Salesforceの調査によると、ユーザーのライフサイクルを突然終了させる要因が2つあることがわかりました。回答者の50％が、次のようなビジネスからは離れると認めています：  

• ニーズを先取りしていない
• 使い勝手の悪いアプリが提供されている

  この2つのリスクは、オンボーディング体験によって最小限に抑えることができます。いいオンボーディングフローは、まずアプリがユーザーにもたらす利益が紹介されており、次にアカウント作成後すぐに製品の案内が行われ、素晴らしい製品体験が提供されているのです。  

この2点以外にも、アプリのオンボーディングは、「定着率」と「解約の防止」という、製品チームが気にする2つのメトリクスを改善できます。  

ユーザーのエンゲージメントを全面的に高める

  先述のポイントをすべて考慮すると、いいオンボーディング体験で、ユーザーのエンゲージメントはよくなります。それによってターゲットユーザーへの価値提供やコンバージョン率の向上から、アプリの定着率向上やさらにはカスタマーサポートコストの削減まで、さまざまな利点が生まれます。オンボーディングプロセスに時間を費やすことは、あなたのお金の節約や儲けにつながるのです。  

要するに、これが製品の成功には必要なのです。  

オンボーディングエクスペリエンスのデザイン法

 オンボーディングUXの重要性は記憶に新しいところですが、次はオンボーディングフローそのものについて見ていきましょう。どのような媒体であれ、この6つのヒントは覚えておく必要があります。  

1. オンボーディング対象者の把握

  これはあらゆるビジネス上の意思決定において重要ですが、特にオンボーディングUXに関しては重要です。自身に以下のような質問を投げかけてみてください：

• 誰がターゲットユーザーか
• 彼らのニーズ、欲求、ペインポイントは何か
• 製品について彼らはどれくらい知っているか

その答えが、今後のデザインの判断材料になります。  

どこから答えを得たらいいのかわからない場合は、リサーチしましょう。  

すでに既存の製品がある場合は、売上や既存のユーザー層を調べてみましょう。顧客満足度調査やNPS調査をするといいですね。新製品を発売していて、まだユーザーデータがない場合は、市場調査を行いましょう。類似のビジネスやニッチな分野を調べるといいでしょう。  

このように、ターゲットユーザーをより深く知るための方法がたくさんありますよ！  

結局、一歩一歩進むしかないのです。ユーザーが何を求めているかを想定したオンボーディングフローを構築する前に、まずはどんな人がユーザーなのかを理解することから始めましょう。

オンボーディングのテンプレートは万能ではなく、ターゲット市場に合わせた調整が必要です。これについては、次で説明します。  

2. フローの個別化と最適化

  オンボーディングUXの個別化とは、メールやバーチャル案内にユーザーの名前を追加することではなく（それはそれでいいのですが）、集めたデータを使って、ユーザーにとって最も重要な機能にオンボーディングを集中させるということです。

「この体験は自分のためにデザインされたのだ」とユーザーに感じてもらうことが目標です。

しかも、それほど難しいことではありません。  

例えばSaaSビジネスであれば、新しいユーザーに対して、役割に応じて製品のさまざまな機能を見せることができます。例えば、営業、製品、マーケティングの専門家向けのCRM（顧客関係管理）ソフトウェアを作成したとして、新規ユーザーがマーケティングの専門家だったら、彼らの役割に最も関連する機能を案内しましょう。  

3. 画面の数を増やしすぎない

  最大の間違いの一つとして、多くの画面や情報でユーザーを圧倒してしまう点があります。  

UXオンボーディングの体験は、短く、かっこよくあるべきです。ユーザが使い始めるのに十分な情報を提供し、それ以上にはならないようにしましょう。  

ツールチップやカスタマーサポートの形で、後からいつでも詳しい情報を提供することができます。実際、オンボーディングフローは、ユーザーからのフィードバックに基づき、常に新しいコンテンツのテストや追加が必要です。  

「オンボーディング」という言葉からイメージすることはあるかもしれませんが、ユーザーオンボーディングは必ずしも新規ユーザーだけが対象ではなく、既存のユーザーも、新機能やアップデートについて簡単な説明を必要としています。なので、この2つのユーザーグループを常に念頭に置いて、UXオンボーディングフローをデザインしましょう。  

4. オンボーディングは製品に沿ったものでなければならない

  製品が「洗練された、最小限の、プロフェッショナルな」ものであるならば、オンボーディングもまた、「洗練された、最小限の、プロフェッショナルな」ものでなければならないのです。  

オンボーディングUXは、製品の延長であると考えましょう。使う色から声のトーンまで、すべてが製品の内容を反映したものでなければなりません。

オンボーディングプロセスは、初めて利用するユーザーに製品を使ってもらうことを目的とし、製品の価値を実感してもらい、ブランドを感じてもらい、最終的にはロイヤリティを高めてもらうものです。  

意味のない色や内容で気を散らしていては、実現は難しいでしょう。オンボーディングUXは、クリエイティブになるための時間ではなく、一貫性を保つための時間なのです。

オンボーディングフローは、確実に製品およびそのUXデザインに沿ったものにするようにしましょう。そうすることで、ユーザーはオンボーディングフローの早い段階で、アプリやサービスに慣れることができ、最小限の摩擦で製品の使用へ移行できます。  

このプロセスを正しく行うには、UXPinが理想的です。  

プロダクトデザイナーは、UXPinを使ってオンボーディングのアイデアをサッと実現し、オンボーディングシーケンスのプロトタイプを作り上げることができます。そのプロトタイプをチームで共有し、オンボーディングプロセスのどの段階でもフィードバックを集めることができます。  

複数のデザインイテレーションによって、各ステップや画面を簡単にテスト・評価でき、ユーザーにとって完璧なUXオンボーディング体験をデザインすることができます。

5. オンボーディングフローをとばすオプションをユーザーに与える

  アプリ内のオンボーディング体験を高く評価するユーザーがいる一方で、オンボーディング体験を完全にとばして、製品について自分なりの方法を見つけることを好むユーザーもいます。特に、デスクトップやモバイルのアプリがシンプルな情報アーキテクチャである場合や、一部のユーザーが技術に精通している場合は、このような傾向があります。
  例えば、Trelloのようなシンプルなプロジェクト管理ボードを考えてみましょう。ユーザーは過去に同じようなプラットフォームを使ったことがあり、Kanbanボードがどのように機能するかがわかっている可能性が高いです。また、そうでない場合でも、「ドラッグ＆ドロップ」の機能を使えば、一目瞭然です。  

そこで、オンボーディングシーケンスのどのステップにおいても、新規ユーザーがすぐに製品を使えるように、明確な「スキップ」ボタンを追加しましょう。  

6. 外部のオンボーディングシーケンスを作成する

  UXオンボーディング体験は、製品内だけで完結するものではありません。  

実際、アプリ内のフローと外部のチュートリアルをバランスよく組み合わせることで、例えば章ごとのの自動配信メールを何日かに分けて配信するとか、より効果的になることが多いのです。特にB2B業界の方であれば、実生活で使っている製品でこのような経験をされたことがあるのではないでしょうか。  

繰り返しになりますが、ユーザーに過剰な情報を与えるのではなく、正しい方向へ少し誘導することが大切です。

外部のオンボーディングUXシーケンスの素晴らしいところは、コンテンツやデザインにもっと柔軟性を持たせることができる点です。また、製品内では不可能な、ブランドの個性を表現する機会にもなります  

しかし、メールだけに限定されるとは思わないでください。  

また、新しいユーザーが製品についてより深く知ることができるよう、SNSへの投稿や、ブログ記事のシリーズの作成もいいかもしれません。  

ターゲットに最も近づける場所を考え、そこにターゲットを絞りましょう。

7. テキストを少なく、代わりに画像にする

  オンボーディングUXは、可能な限り視覚的であるべきです。言葉は確かに強力なツールですが、画面のスペースは限られていますし、ユーザーの注意力は低下しています。そこで、画像を活用してできるだけ多くの情報を伝えましょう。  

オンボーディングUXでは、画像、動画、アニメーションなどを駆使してユーザーを確実に誘導しましょう。たとえば、文章による説明の代わりに、ユーザーが請求書をダウンロードする方法を紹介する10秒間のビデオを録画するとかいいですね。

動画や画像をうまく使うことで、オンボーディングプロセスをがシンプルになり、結果として、より効果的なものになるのです。  

UXPinでオンボーディングフローをデザインしよう

  効果的なUXオンボーディング体験は、製品の成功に欠かせません。このガイドを読んで、何かひとつでも得るものがあれば、それは以下であってほしいと思います：  

オンボーディングプロセスは、価値を提供するものでなければならない。  

製品が夏の日のビーチだとしたら、オンボーディングはそこへ行くためのGPSの道案内です。シンプルにして最高の結果を得ましょう。  

UXPinがあればそれは簡単ですよ。

UXPinは、プロトタイプを作成し、それをチームの他のメンバーと簡単に共有することができる最先端のプロトタイピングツールです。ユーザーを魅了し、教育するようなオンボーディング体験を本気で作りたいなら、ぜひ今すぐUXPinをチェックしましょう。

The post 効果的なオンボーディングのための7つのヒント appeared first on Studio by UXPin.

1日4.2時間。

最近の研究では、ユーザーが携帯電話のアプリに費やす時間は1日あたりこれくらいです。これは、過去2年間で30％もの大幅な伸びです。技術革新、アプリのデザインUI UXの理解向上、そしてもちろんコロナ禍が推進力となっています。

しかも、4.2時間はあくまで世界平均であり、ある地域では、モバイルユーザーのアプリの平均利用時間は5時間を超えています。

アプリの使用量が増え、デジタル機器を使う時間も増え、iPhoneをはじめとするスマートフォンの販売台数も伸びています。デジタル空間は、日を追うごとに競争が激化しており、多くの企業がオーディエンスの注目を集めようとしている今、最高のモバイルアプリデザインの作成は不可欠です。ユーザーの注目を集め、ニーズを満たし、そして最も重要なのは、ユーザーが何度も足を運ぶような、最高のモバイルアプリのデザインです。それについてこれからお話しましょう。

モバイルアプリのプロトタイプを作成しませんか？ UXPinを使用して、完成品のように見えるアプリのプロトタイプをデザインしてみてはいかがでしょうか。変数、ステート、コンディションを使ってプロトタイプに命を吹き込み、プロトタイプをインタラクティブなデザインに変換しましょう。UXPinの無料トライアルをぜひお試しください。

モバイルアプリのUXデザインとは

モバイルアプリデザインのUX（ユーザーエクスペリエンス）とは、一言で言えば「エンドユーザーを第一に考えること」です。AppleやAndroidの携帯電話、タブレット端末、さらにはスマートウォッチなどの身体に装着するウェアラブルデバイスなど、ターゲットとなるユーザーが求めるものを、どのように実現するか、シームレスでユーザーに優しく、かつ直感的な体験を生み出すことが重要なのです。

最高のモバイルアプリデザインは、見た目、使い心地、ユーザーの生活における必要性など、アプリの機能を考慮したものです。

Twitterのアプリを例に挙げてみましょう。多くの大手ハイテク企業がそうであるように、TwitterにはアプリのUXデザインを正しく理解するためのマスタークラスがあります（もちろん、ユーザーの半分を悩ませるような絶え間ない改ざんやアップデートを無視すればの話ですが……）。世界中のほぼ誰でも、誰であろうと、どんなデバイスを使っていようが、Twitterのアプリを手に取り、効率的に使うことができるのです。

ユーザーをわくわくさせるアプリデザインのUXを実現するために、モバイルアプリデザインのベストプラクティスをご紹介します。

モバイルアプリデザインの5原則

1. ユーザビリティ

モバイル画面のスペースは限られています。なのでそれを無駄にしないでください。画面いっぱいに表示されるアプリや、ポップアップの×印が小さすぎて押せないアプリ（そしてアプリ全体が使えなくなり、アンインストール候補になる）に遭遇したことがあるでしょう。ユーザーが見るべきものと、ユーザーが目的を達成するために見せるべきものとののバランスが大事です。 

2. 馴染み

ユーザーは、自分が知っているものを好みます。そのことは、将来のアップデートでアプリのデザインが変わっても、意識するかしないかにかかわらず、それは変わりません。筋肉の記憶かもしれませんし、無意識のうちにそうなっているのかもしれません。そのいい例が、「検索」アイコンです。ほとんどすべてのアプリやウェブサイトで、このアイコンを画面の右上隅で見つけることができることから、私たちは本能的に、画面の右上隅にあるアイコンを探します。このことから、データを使って、何が有効かを確認するところから構築していくのです。ユーザーが既存のデザインに慣れていることが明らかであれば、わざわざ最初から作る必要はありません（よりスマートなデザインにすればよいのです）。

3. 一貫性

シームレスなUXを実現するには、一貫性は重要です。デザインの一貫性とは、アプリが確実に全体を通して一つの原則に従うようにすることです。たとえば、特定のアクションを表す色は常に同じであるか、同じ単語が使われ、緑色の「✓（チェックマーク）」は「承認」を意味し、赤の「X（バツ）」は「いいえ」を意味します。これによって、ユーザーは何も考えずに、あるいは間違った画面にいることを気にせずに、アプリを操作することができます。

4. アクセシビリティ

最新のアプリは、本当に幅広いユーザーへのアピールが必要です。つまり、特定のユーザーの物理的・身体的制限だけでなく、使われているさまざまなデバイスや使われている場所（誰もが超高速インターネットにアクセスできるわけではないですよね）も考えなければいけません。また、ユーザーのアクセス法も考慮が必要です。例えば、55歳以上のユーザーの51%は、アプリ内のサービスにアクセスする際に音声機能を利用しています。アクセシブルなアプリは、できるだけ多くのユーザーに届くべきなのです。

5. アピール性

ユーザーには、アプリで楽しく過ごしてもらいたいものです。そのため、「アピール性」はモバイルアプリデザインのニーズの上位に位置づけられるべきものです。アプリは、単なる手段ではなく、その目的がユーザーにもっとお金を使わせることであれ、単にあなたともっと長い時間を過ごすことであれ、ユーザーが何度も使いたくなるような体験を提供したいものなのです。

最高のモバイルアプリデザインを実現するには

1. 学びやすい環境をつくる

ユーザーは、自分が必要とすることを、必要な方法で、考えなくてもできる体験を好みます。簡単に学べる体験の構築は、ユーザーのサイト利用を「訓練」する方法なのです。

 テレビゲームに例えて考えてみましょう。『スーパーマリオブラザーズ』では、プレーヤーは目標を達成するために「訓練」されます。Aボタンでジャンプ、敵に飛び乗ってしまえば怖くない、敵を倒すとコインがもらえる（やった！）など、プレーヤーはラスボス戦までに、ゲームに勝つために必要な仕組みをすべて身に付けているのです。

アプリの優れたUXも同じことが言えます。

学習曲線が急だと、わからなさからどうしてもイライラしてしまい、アプリを使う気が失せてしまいます。そのため、物事を本当に明確かつ効率的にするような必要最小限のアプリデザイン原則を適用するといいでしょう。例えば、検索バーやホームページへのリンクなど、主要な機能に簡単にアクセスでき、視認性が高いようにするといいですね。

このような、よく使われる操作に行き着くのに、ユーザーに複数のメニューオプションを探し回らせたくはないでしょう。同時に、必要だがあまり知られていない機能を折りたたみ式メニューに追加することで、画面の散らかりを減らすことができます。

2. プッシュ通知を賢く使う

プッシュ通知は、モバイルアプリのコアな部分ではないかもしれませんが、それでユーザーエンゲージメントが高まるため、アプリ全体のデザインUXにおいて重要な役割を果たします。

ただし、アプリのユーザーに常にプッシュ通知で迷惑をかけないようにすることは、本当に重要なことです。なのでプッシュ通知は、関連性があり、ユーザーが価値を見いだせる場合にのみ導入するようにしましょう。例えば、Uberでは、特定の日に特定のキャンペーンを実施する際に、ユーザーの携帯電話にプッシュ通知を送信しています。また、Duolingoでは、ユーザーが特定の日数を過ぎてもログオンしないと、練習のリマインダーが送信されます。

もし、相応なデータにアクセスできるのであれば、注文しやすい日にプッシュ通知を送ったり、以前購入したことのある商品のセールを行うなど、同じことを試してみてはいかがでしょうか。

できれば、アプリのユーザーがプッシュ通知を受け取るタイミングや理由をコントロールできるようにしましょう。

3. 「馴染み」を中心に置く

美しいアプリのデザインは、うまくいっているものやユーザーが快適に使っているものをベースにしましょう。新しい方法で、まったく新しい体験を作りたいと思うのは簡単ですが、実は、最高のモバイルアプリデザインのコンセプトとなると、これまでのものをベースにするのがベストであることが多いのです。

使い慣れたものだと、ユーザーはあなたのアプリの使い方を考える必要さえないですもんね。だってユーザーは、すでに何千ものアプリやウェブサイトで、そのような使い方をしたことがありますから。そのようにデザインするコツは、ユーザージャーニーを邪魔することなく、新しく、魅力的で、ブランドらしいものに”思える”ようにすることです。

例えば、どんなeコマースアプリに行っても、画面右上にあるバスケットのアイコンや商品画像、説明文、そして「今すぐ購入する」というオプションなど、Amazonが提供するものと非常によく似たエクスペリエンスが見つかります。アプリユーザーは、Amazonの商品の購入方法を「訓練」されていますから、eコマースアプリはAmazonに倣うことで、コンバージョンを増やし、世界中のユーザーに親しまれる体験を構築できるのです。

4. ユーザーが移動中であることを意識する

モバイルアプリのデザインとは、単に小さな画面のための体験を作るということではありません。ユーザーの環境に合わせたエクスペリエンスを構築するのです。ユーザーが外出先でモバイル機器を使うことを責めたり止めることはできませんが、持ち運び可能な風景に「フィット」する最小のアプリデザインの体験を作ることはできます。

確かに、あなたのアプリを使っているかもしれませんが、ショップのウィンドウでシャープなドレスが目に留まったり。友人に呼び出されたりすると、ユーザーの集中力は途切れがちです。そんなとき、元の場所に簡単に戻れるようにすれば、ユーザーフローを崩すことはありません。また、ユーザーは何時間も楽しみたいのか、それとも現実の仕事の合間に2分程度の気晴らしをしたいのか、ユーザーがモバイルアプリをどのように使っているかも見てください。

デザイン面では、移動中のユーザーは精密なコントロールができにくいため、ボタンやアクションが煩雑にならないような配慮が必要です。そのため、ボタンや操作に手間がかからないよう、タッチ操作やジャイロを意識しましょう。そして、ユーザーの視線も意識しましょう。ウェブサイトであれアプリであれ、デザインは常に、一目で理解できるシンプルなものであるべきであり、歩きながら頭を振って、周りの世界に気を取られるような、外出中のユーザーにとってはさらに重要なことです。

5. デザインをごちゃごちゃさせない

モバイルUXデザインは、シンプルさを最優先しましょう。ユーザーがモバイルアプリケーションに本当に求めているのは、これだけです。どのアプリストアでも、ダウンロード数の上位を見ればわかるでしょう。

これを美しいアプリのデザインに生かすには、ごちゃごちゃしたデザインは絶対に避けましょう。ユーザーを混乱させ、イライラさせる恐れがあります。

例えば、スマートな翻訳アプリを開発したとします。ページには、辞書、今日の単語、音声とテキストの翻訳オプション、テストなど、さまざまな要素が盛り込まれています。ただ、どの画面でもメインにしたいアクションは何かを決めましょう。

明確な焦点を持つことで、画面は散らからなくなります。この必要最小限のアプリデザインは、片手で操作できることを基本にしており、テキストフィールドであれ、CTAボタンであれ、親指一本で見やすく、読みやすく、手が届きやすいものでなければなりません。

視覚的な階層を常に意識してしましょう。ユーザーを的確な場所に誘導すべく、画像、色、さまざまなフォント、サイズを使いましょう。Googleカレンダーのスケジュール表示などは、そのいい例です。グラフィックデザインは、UIデザインにおいても重要なのです。

6. できるだけオートコンプリートやワンクリックアクションを使う

シンプルなデザインは、摩擦を減らすことができます。

フォームのオートコンプリート、自動サインインの提供、ワンクリック操作などは、特にeコマースアプリを展開する場合、いい例と言えるでしょう。

例えば、携帯電話の画面上で住所を正しく入力することがいかに難しいか、誰でもわかります。また、そうでない場合でも、正しく入力するために連絡先アプリ、財布、小さな黒い電話帳など、他の場所を探さないといけないかもしれません。オートコンプリートは、このような問題を解決します。また、「もう一度注文しますか？」のようなクイックアクションも同様に、ワンタップで、ユーザーはユーザージャーニーを完了することができます。

7. VUI（音声UI）について覚えておく

美しいアプリのデザインを重視する場合、タッチを中心に構築するのは簡単です。美しさは見る人の目の中にあるので、まずはデザインの視覚的要素を考えます。「見た目はいいか」「必要最小限なアプリデザインか」と問いかけ、ユーザーが目的を達成するためにどのボタンを押せばいいかを考えます。ただし、音声ユーザーインターフェースをおろそかにしてはいけません。

VUI（音声UI）は、あらゆるスマートスピーカーや最新のスマートフォンに搭載されており、ユーザーが口頭で対話することを可能にします。VUIは、今後、ビジュアルデザインと同じくらい重要になるかもしれません。

タッチはもちろん、画面を見る必要すらありません。それによりアプリのアクセシビリティが上がり、運動機能障がい者や運転しながらアプリを使いたい人の利用者が増加します。

VUIを企画するデザインプロセスは、アプリの開発プロセスになると、企画と実行に長い時間がかかることがあります。このようなユーザーインターフェースのデザインには、多くのUX調査、テスト、そして大規模なプロトタイピングの段階が必要です。それでも、特にユーザーインターフェースデザインをアクセシブルにしたいのであれば、やる価値はあります。

次回のアプリデザインUXに活かそう

ユーザーほど大切なものはありません。あなたのアプリをダウンロードし、毎日戻ってきてくれるのはユーザーなのですから。競争の激しいデジタル空間では、デザイナーやデベロッパーは、満足のいかないUXを作るわけにはいかないのです。それはユーザーを圧倒し、迷わせ、秒で「アンインストール」させるようなものですからね。

優れたモバイルアプリのデザインUXは、私たちみんなに、アプリが私たちのニーズに応えてくれることを期待するよう教育してきました。ユーザー中心のデザインは、直感的に操作でき、シンプルに使えることが必要です。メールを開いたり、ドアを閉めたりするのと同じように自然なことですが、ユーザーにとっては、その100万倍も楽しいことなのです。

UXPinをモバイルアプリのデザインに活用しよう

モバイルアプリデザインのヒントをお試しになりませんか？UXPinのトライアルにサインアップして、モバイルアプリのプロトタイピングを始めましょう。UXPinは、インタラクティブなプロトタイピングを迅速かつ簡単に行うことができる強力なデザインツールです。変数、ステート、コンディションを使ってデザインに生命を吹き込み、ステークホルダーと共有し、アプリの外観に感心するだけでなく、アプリの周りをどのように移動するかを確認しましょう。

The post アプリデザイン – UXを向上させるには appeared first on Studio by UXPin.

モバイルアプリ市場は、2023年には売上が9,350億ドルに達すると予測されています。かなりすごいでしょう？でもそうなるには、アプリのデザインが見た目に美しいだけでなく、使いやすいものでなければいけません。そうすることで、ユーザーはもっと惹きつけられるのです。

ここでは、チーム全体、特にモバイルアプリデザイナーが最高のアプリを作るために留意すべき点をいくつかお話します。

アプリのプロトタイプを作成する準備はいいですか？UXPinで、Hi-Fi プロトタイピングを簡素化しましょう。ソフトウェア エンジニアがまだ開発していなくても、実際のアプリのように見えて動作するインターフェースを構築できます。テストからより良いフィードバックを得て、ステークホルダーにアプリがどのようなものになるかを示し、何を作って欲しいかがデベロッパーにわかりやすいようにしましょう。UXPin を無料でぜひお試しください。

効果的なデザインプロセスの3ステップ

アプリを成功させるためには、計画してそれに従わなければいけないアプリデザインのステップが以下のように３つあります。それが、自身とそのチームが目標達成のために目指すデザインプロセスです：

• 企画・調査
• デザイン・開発
• 立ち上げ・テスト

以下を見ていきましょう。

ステップ1 企画・調査

初期段階では、製品が「何であるか」、「どのように役立つか」、「誰に役立つか」、「競合他社にないアプリは何か」をきちんと確定します。そしてこれは、明確なユーザーベースを持つ人気アプリを構築するための基礎となります。

まず、何を達成したいのか、大まかな概要を明確にすることから始めて、ユーザーが直面する問題や、それをどのように解決したかを詳細に説明していきましょう。これこそ、モバイルデザインの最も革新的かつ創造的な姿です。

ユーザーに焦点を当てましょう。最も成功するアプリのデザインは、ユーザーが誰であるか、何を求めているかということを中心に据えています。フォーカスグループやアンケート、電話や対面でのインタビューを行い、ユーザーがあなたのアプリデザインに本当に求めているものを明らかにしましょう。ユーザーはあなたの思い込みを覆すでしょうが、それはいいことですよ。

同時に、競合他社を分析しましょう。どんなに小さな競技場でも、強いプレーヤーはいます。彼らは何が得意または不得意なのか？どうすれば（彼らをおいて）一番になれるのか？

このようなデータをもとに、目標を評価、削減、改良し、共有できる一つのビジョンに磨き上げるといいでしょう。

ステップ2 デザイン・開発

次のステップでは、アプリのデザインを視覚化します。ワイヤーフレームは、ユーザー、ステークホルダー、チームから反射的なフィードバックを収集するのに十分な、基本的なモックアップから始めます。

作業が進むにつれ、色、タイポグラフィー、サイズ、その他のビジュアル要素について、一貫したデザインシステムの構築ができ、そのようなUI・UXデザインは、忠実度の高いプロトタイプに引き継がれます。このような機能的なモバイルデザインのモックアップにより、デザインプロセスを通じて、アプリのテストと最適化を継続することができます。

その後、アプリを構築する開発チームにデザインを回しますが、この段階でボトルネックにならないようにすることが重要です。デザインチームと開発チームの間でデザインが行ったり来たりし、一方がXを求め、もう一方がYを提供することで、プロジェクト全体が脱線してしまう恐れがあるからです。

アプリの開発では、UXPinなどのソフトウェアを使用することで、インタラクティブなプロトタイピングを高速化し、デザインと開発のハンドオフを調和させることができます。UXPinは、最終製品のような外観、感触、動作を持つプロトタイプを作成するためのデザインツールです。ぜひ無料でお試しください。

ステップ3．立ち上げとテスト

はい、最後のテストをしたら、すべてのシステムが完成します。これでようやく、アプリのデザイン経験が製品発表のために集約されます。これでデザインプロセスは一段落ですが、旅はまだ始まったばかりです。

デザインプロセスを追っていくと、さまざまな段階で製品を評価することになり、それはずっと続きます。アプリが適切で、人気があり、使い勝手がよく、利用され続けるようにするためには、改良のための新しい方向性を示すユーザーフィードバックを引き続き集めましょう。

詳しくは、「How to create an effective app design process.」をご覧ください。

最適なアプリデザイン戦略を立てるには

1. アイデアの確定

モバイルアプリのデザイナーは、同じ目的に対してすべてを一致させる必要があります。チームメンバーが集中力を欠いたり、自分の役割を理解できなかったり、ミッションやプロジェクトの進行に振り回されたりすることは、よくあることであり、コミュニケーションが鍵になります。

ハッキリとしたコンセプトを出しましょう。アプリのデザイン作業を始める前に、以下を明確にできるようにしておく必要があります：

• 目的：何のためのアプリなのか
• オーディエンス：誰のためのアプリなのか
• ユースケース ：どのように使われるのか
• 利点：なぜ競合他社ではなく自社を選ぶのか
• 必要なリソース ：アプリの開発に何が必要か
• 成功の指標：成功度をどのように測定するのか

2. 予算の算出

戦略の一環として、現実的な予算を出しましょう。この予算は、デザイン・開発チームが余分な機能を追加することでコストが急騰し、無駄な時間を費やすことになるような「ミッションクリープ（終わりの見えない展開）」を防ぎ、プロジェクトを軌道に乗せるために非常に重要です。

つまり、製品デザインや開発に積極的に害を及ぼし、しかも、こうしたテストされてない機能からユーザーが離れていけば、さらにコストがかかるということです。

予算の計算で、リソースを最も効果的に割り当てることもできます。UIデザインやUXデザインなど、何がデザインされているのか、どのように開発されているのかを予算で詳細に説明できるはずなのです。

3. KPIの設定

成功とはどのようなものでしょうか。アプリの詳細なデザイン戦略を構築する際は、あなたにとって本当に重要なメトリクスに集中しましょう。成功を測る基準は1つではありません。あなたのアプリと目的に最も関連するメトリクスの決定は、モバイルアプリのデザインチーム次第です。

製品やデザインのKPIは、以下のようなものが一般的です：

• ダウンロード数：ダウンロード数は、ユーザーが製品をインストールするほど気に入っているかどうかを示しており、数値が低すぎる場合、インストールを増やす方法をテストする必要があることがわかります。
• チャーン率：チャーン率は、アプリをアンインストールしたり、開かなかったりしているユーザーの数を示しています。このデータを使って、ユーザーを遠ざけている原因を探りましょう。
• セッション数：セッション数と時間は、アプリを開いたユーザーの数と、アプリ内でアクティブな状態を維持した時間を示しています。これは、人々がなぜ留まる（または去る）のかを解明したい場合に、開始するのに良いベースとなります。

この3つの段階は、7つのステップからなるアプリデザイン戦略を成功させるための基礎となるものです。他の4つの段階については、アプリデザイン戦略に取り入れるべき – ベストプラクティス７選 –という当社の記事をご参照ください。

優れたUX（ユーザーエクスペリエンス）の実現

優れたUX実現のための5つの原則をご紹介します：

1. 使いやすさ

モバイル端末の画面は小さく、スペースが限られているため、それに応じてデザインの調整が必要であり、タップ、スワイプ、スクロール、片手での保持といったアクションが簡単にできるべきです。押しにくい極小の×ボタンが付いた迷惑なポップアップのような、ユーザーに面倒な操作を強いることは避けましょう。且つ、何をどうすればいいのか、ユーザーにとって明白であるべきです。

2. 馴染みやすさ

使い慣れたユーザーインターフェースは、より魅力的で直感的なUXを生み出します。一からの作成やアプリの再デザインは必要ありません。検索バーは一番上に、オプションはハンバーガーメニューの後ろに、設定は歯車のアイコンの下にあります。

モバイルアプリのUIに使い慣れたモバイルデザインパターンを使用すれば、新規ユーザーのオンボーディングプロセスは難しくありません。

3. 一貫性

ユーザーに自分の行動を意識することなく、「ただ動いて」もらうには、一貫したデザイン原則が本当に重要です。例えば、eコマースアプリでショッピングカートに商品を追加する際に、常に同じボタンを使用することで、ユーザーが直感的に行動できるようにすることなどがありますね。

また、1つか2つのフォントにこだわることで、読みやすさを向上させ、デザインに一貫性を持たせることも重要です。さらに言えば、アプリ内のすべての画面を統一することで、あなた自身のブランディングとユーザーの没頭感を上げることができます 。

UIキットやマテリアルデザインのような、インタラクティブなUI要素があらかじめ用意されたコンポーネントライブラリを使って、一貫性を保ちましょう。

4. アクセシビリティ

アクセシビリティを考慮したアプリのデザインとは、市場に存在するさまざまなモバイルデバイスと、さらに幅広いユーザー層を考慮するということです。そのアプリには高速インターネット接続が必要ですか？身体的な制約があるユーザーでもアプリを使えますか？

5. アピール性

モバイルアプリのデザイナーは、最終的に自分の製品をユーザーに気に入ってもらいたいと考えています。自身のアプリを作るときは、ユーザーへのアピールも考慮に入れ、どうすれば、ユーザーにとって魅力的な体験ができるかを考えてみましょう。

もっと知りたいですか？では、印象に残るアプリデザインUXの秘密を全部見ていきましょう。

いいアプリデザインのためのプラクティス３選

1. シンプルなナビゲーション

シンプルさとは、画面上で主要なアクションを見つけやすくすることです。そのためには、各画面を1つか2つの主要な操作に限定するのがベストです。そして、興味を引くようなデザイン階層によって、ユーザーの注意を適切な場所に集中させることができます。

例えば、Amazonのアプリを見てください。このアプリには、シンプルなアプリのナビゲーションにおけるマスタークラスがあり、それにより、ユーザーは選択肢に圧倒されることはありません。インターフェースはクリーンでクリア、一貫性があり、ユーザーは商品を検索するにも、購入ボタンを押すにも、どのようなステップを踏めばよいのか迷うことはありません。

2. モバイル向けに構築

モバイル機器向けのアプリをデザインしましょう。当たり前のように聞こえるかもしれませんが、モバイルアプリは、モバイルアプリデザイナーがウェブサイトを手際よく「移植」していることがあまりにも多いのです。HTMLベースのアプリは、プラットフォーム間での更新の自由度がやや高いものの、その使い勝手はあまりよくありません。一般に、WebベースのAndroidやiOSのアプリは、遅延があり、パワー不足で、モバイルデバイスに十分に最適化されていません。

いいアプリデザインとは、ユーザー及びユーザーの製品との関わり方を尊重するものです。そうなると結局のところ、競争が激しく、ユーザー重視の市場において、先述ような方法でアプリをデザインすることは、大きなリスクとなるのです。

3. 真のデザインツール

すべてのユーザーに対して本当の意味でシームレスなエクスペリエンスをもたらすには、その作業に適したツールが必要です。そうすると、専用のツールを使って、効率的なワークフローでアプリのデザインを構築する柔軟性が得られます。

UXPinなどのデザインおよびプロトタイピングツールで、アイデアを思い描いたとおりに正確に実現できるようになります。モバイルアプリのデザインソフトウェアにより、デザイナーとデベロッパーは、ワイヤーフレームから発売直前のアプリまで、クリエイティブで一貫した製品を構築できます。また、デベロッパーが実際に使用するコードコンポーネントと同じものにデザイナーがアクセスできるようにすることで、コーディングスキルがなくても、期待と現実を確実に一致させることができます。ソフトウェアに必要な機能を調べるには、「適切なアプリデザインツールの選択」のセクションをご覧ください。

いいアプリデザインを作るためのヒントは、こちらの専用記事でさらに詳しくご紹介しています：How to choose app design software.  

アプリのデザイン例３選

理屈はこれくらいにして、次は優れたアプリデザインの例をいくつか見ていきましょう。

例1：Googleマップ

Googleマップは、「形は機能に従う」というアプリデザイン文句の典型的な例です。ユーザーがデスクトップやモバイルデバイスから全世界をナビゲートするという目的を果たすために、完璧に作られています。

この地図アプリは、特定の場所の検索や、カテゴリー別検索、あらゆる目的地への案内が簡単にでき、さらには画像、レビュー、ストリートビュー、ビジネス情報、ナビ機能を通じて、ユーザーに素晴らしい価値をもたらします。

全世界を詰め込んで「機能満載」にもかかわらず、Googleマップのインターフェースは楽しく繊細で、ユーザーが圧倒されるようなことはありません。アプリを使ったことがない人でも、Googleマップの使い方や、Googleマップを使った移動の仕方がわかるはずです。

例2：Pocket

Pocketは、記事やメディアを保存して、後で読んだり見たりすることができる賢いアプリです。

アプリのインターフェースは新鮮で今風であり、ナビゲーションはスマートで直感的です。使いやすいアクションから、集中して読むための気晴らしのオプションまで、ユーザーの立場に立った体験ができます。インターネットに接続していなくても使えるので、外出先でも読めます。

成功したアプリの例に漏れず、今日のPocketの改良にはユーザーテストが欠かせませんでした。Google Venturesのおかげで、デベロッパーはこのアプリをよく知らない5人のユーザーからフィードバックを集めることができ、そのフィードバックが、典型的にシンプルなインターフェースの実現に活かされたのです。

Pocketが最近、そのUXデザインで「ウェビー賞」を受賞したのも不思議ではありませんが、Firefoxブラウザの開発元であるMozillaに、これ以上何を期待するというのでしょうか？

例3：Etsy

Etsyは、クリエイターと買い物客が出会う、eコマースアプリの代表的な「アート」です。Etsyのアプリは、シンプルで効果的なウェブおよびモバイルアプリデザインの顕著な例ですが、おそらくそれは、美術工芸の最高峰といえるでしょう。

Etsy を起動すると、多くの eコマースアプリとは違い、販売メッセージやお得な情報、スター製品などの、ユーザーインターフェースをかき乱すようなものがすぐに表示されません。つまりユーザーは、欲しいものの検索か、Etsyの提案を試すだけでいいのです。

それは、画像を主役とし、シンプルな商品見出しを配置した、強力なビジュアル体験であり、価格や商品名に気を取られることなく見ることができます。それにより、Apple上でもAndroid上でも、Etsyのユーザーエクスペリエンスは、より優しく、落ち着いたものになりました。

ちなみに、Airbnb、TripAdvisor、Uberなどの実例は、「great app designs」という当社の専門記事でご紹介しています。

アプリデザインでよくある失敗を避けるには 

一度に多くの機能を加えない

機能が豊富なモバイルアプリは悪いものではありませんが、最もよくある間違いの1つとして、モバイルアプリデザイナーがアプリにすべての機能を一度に入れてしまうということがあります。最高機能のアプリでさえ、時間をかけて機能を追加していきます。そうすることで、何がうまくいって何がいかないか、ユーザーが何を求めて何を求めていないかをみることができるのです。つまり、そのアプリは、まずその目的を達成するためのものということです。

アプリのデザインプロセスを始めるには、まずモバイルアプリの核となる目的から行きましょう。それをモバイルアプリの開発プロセスの指針にします。その後、アプリの人気が高まれば、機能を追加していけばいいのです。その際、その機能は、必ず個別にテストしましょう。そうしないと、ユーザーが圧倒されたり、アプリがしっちゃかめっちゃかになったり、実用性のないものに貴重なリソースが浪費されたりするリスクがあります。

定期的なアップデートスケジュール

開発プロセスは、製品が発売されたときから始まり、ずっと続きます。発売後はアプリを停滞させないようにすべく、定期的にアップデートを行いましょう。それがユーザーを魅了して離さず、アプリを新鮮で革新的なものにするための素晴らしい方法なのです。

今後の改善点を把握すべく、アップデートごとにレビューをチェックしましょう。綿密なテストを行うと尚よしです。

多様なユーザーペルソナでのテスト

ユーザーテストで、アプリのパフォーマンスに関するインサイトを得られますが、最も価値のあるフィードバックを得るには、可能な限り幅広い層のユーザーを対象にするのが一番です。テストグループを作成するときは、年齢、性別、経歴など、さまざまなタイプのユーザーを選びましょう。彼らは皆、さまざまな理由であなたのアプリに魅了され、そこにあなたが驚くような理由もあるかもしれません。

幅広いユーザーペルソナに呼びかけることで、製品の改善に役立つ具体的な行動と一般的な行動を特定しやすくなります。多様なユーザーグループから集めないと、フィードバックループに陥り、一部のユーザーにしかアピールできない危険性があり、そうなると、お粗末なアプリデザインや、発売後の修正のコスト発生につながる可能性があります。デザイン・開発段階で正しく理解することが重要であり、さまざまなタイプのユーザーを集めることで、それがしやすくなるのです。

新しいアプリのデザインで避けるべき間違いについては、お粗末なアプリデザインについての記事で詳しく説明しています。

適切なアプリデザインツールの選択

最適なデザインツールを選ぶには、どのような点に気をつければよいのでしょうか。ここでは、注目すべき特徴をいくつかご紹介します。

1. デザイン-開発間のシンプルなハンドオフ

デザインチームから開発チームへのコンセプトの引き継ぎは期待に満ちた瞬間ですが、この段階でボトルネックが発生することはよくあることで、チームメンバーによっては、アプリに何が必要か、何が可能かを議論し、プロジェクトが完全に停止してしまうこともあります。

そのため、デザインから開発への移行をシンプルにするモバイルアプリデザインツールを選択したいところです。UXPinで、デザイナーは非常にリアルなプロトタイプをデザインすることができ、デベロッパーはプロトタイプを見るときにUXPinを使ってCSSを自動生成することができます。

UX（ユーザーエクスペリエンス）やインターフェースデザイン、アプリの開発プロセスがつながっているため、デザインのハンドオフがしやすくなります。1つのツールですべてを満たすことができるのです。ぜひ無料でお試しください。

2. 実測データ

プロトタイプの最大の問題のひとつは、それが本物に感じない点です。これらすべてのリプサムと即席のデザイン要素は、テストグループでの没入感が損なわれ、コンセプトの真価を発揮できないことがあります。信憑性がない、というか、まったくそのように見えないのです。

最高のデザインツールは、プロトタイプに実測データを入力することができます。名前、場所、テキスト、画像をデザインに挿入することで、製品が発売されたときにユーザーが実際に目にするものをよりよく反映させることができます。また、このような実データは、デザインや開発にリソースを投入する前に、チームやその他の主要なステークホルダーに、構築されるものの印象をより良く伝えることができます。

3. 連携・共有機能

デザインプロセスにおいて連携は欠かせません。製品コンセプトの検討や次のステップの戦略立案から、主要機能の他チームへの伝達まで、多くのアイデアが飛び交う中ですべてを記録し、全員に十分な情報を提供するのは難しい場合があります。そうなると、アプリの完成度は下がってしまいます。

そこで、アイデアの共有やフィードバックの収集・照合がシンプルかつ簡単に行えるアプリデザインツールを選びましょう。UXPinは、PDF、PNG、HTMLのエクスポートをサポートしているので、チームの誰もが最新のデザインチェックをすることができます。

チーム間の連携と共有をさらに強化すべく、UXPin Mirrorアプリには、承認されたユーザーがモバイルデバイス上でモックアップをライブプレビューできる機能があります。AndroidやiOSなど、他のデバイスでアプリのデザインがどのように見え、感じ、動作するかを理解するための理想的な方法です。また、編集内容がリアルタイムで表示されるので、ビフォー＆アフターショットの比較ができます。

優秀なアプリデザインソフトウェアの特徴については、アプリデザインの最適なツールの選び方についての当社の専門記事でご紹介しています。

2022年以降に注目すべきアプリデザイントレンド

1. 多方向のナビゲーション

今日、ユーザーがアプリを体験する主な方法はスクロールであることに変わりはありません。上下スクロールや、時折タップや入力をしますよね。スクロールは機能的なナビゲーション手段ですが、画面上の他のすべてが充実していたとしても、満足できるものではありません。

多方向のナビゲーションでは、従来の制限されたスクロールよりも魅力的なエクスペリエンスを導入され、最近のアプリでは、ユーザーがスワイプやスクロールで移動できる水平・垂直スライダーを展開し、より直感的で自然なインタラクションを呼び起こしています。

このようなデザインは、マルチメディアや出会い系アプリに多く見られ、右に左にスワイプして、美しい写真やラジオ局、人生の伴侶となりうる人を探すことができます。

2. インクルーシブデザイン

モバイルデバイスは誰でも使えるものであり、あなたのアプリケーションもそうであるべきです。モバイルデバイスは、若者から年金生活者まで、あらゆる人のポケットや手に握られています。非常にニッチな市場をターゲットにしているのでなければ、最新のアプリは、インクルーシブなデザインが備わってなければいけません。

幅広いユーザー層にアピールするだけではなく、そのユーザーがアクセスしやすく、使いやすいアプリをデザインするのです。携帯電話やタブレット端末を使っているか、身体障害やその他のアクセシビリティの問題があるか。

字幕は、インクルーシブデザインの最も一般的なトレンドの一つです。その他の例としては、小さな子どもや視覚障害のある人に届くように、ボタンを大きく太くすることなどがあります。スクリーン・リーダーを使用するユーザーのための画像のサイズの変更や、altテキストの追加も同様です。

「カラーブラインドモード」も、それを必要とする人のために含める有益なアクセシビリティ機能です。UXPinは、完全にインクルーシブなアプリデザインを作成するために、色覚異常シミュレータやコントラストチェッカーなど、多くのアクセシビリティ機能を備えており、どんな人のための体験でも構築しやすくしています。

3. ダークモード

ダークモードは、アプリのデザインにおける新しいトレンドではありませんが、現在進行形のトレンドです。今日のユーザーは、たとえ、朝の3時にベッドから手を伸ばしてメールをチェックするときでも、むしろ特にそういう時こそでしょうか、アプリが目に優しいことを望んでいます。一般的に、いいUXとは、ダークモードが利用できる場合、真っ白な画面でユーザーの目を眩ますことではありません。

ダークモードは、アクセシビリティの機能として、またユーザー重視の機能強化として、モバイルアプリのデザインにしっくりと馴染みます。まさに「あると助かる」の典型的な例です。ダークカラーに切り替えることで、ユーザーは目の疲れを感じにくくなり、いつでも快適にアプリを使用できるようになります。

さらに、ダークモードのスケジュールを設定し、特定の時間帯に点灯させることも可能です。

筆者たちが集めたアプリデザインのトップトレンドを見て、先を行きましょう。

UXPinでアプリデザインを構築しよう

ユーザーに優しいモバイルアプリを成功させるための道のりは、長く険しいかもしれませんが、そのような茨の道を行く必要はありません。

よく練られた戦略に従えば、市場での成功の可能性がぐっと上がります。まず、アプリのデザインプロセスを【企画・調査】、【デザイン・開発】、【立ち上げ・継続的テスト】の3つのフェーズに分けることが重要です。また、予算とKPIも確実にきちんと理解しておきましょう。さらに、適切なモバイルアプリデザインツールの使用も同様に重要です。

これからモバイルアプリデザインに着手する方には、UXPinの利用がオススメです。チームの連携に最適なソリューションを使用し、プロトタイプに実際のデータを活用し、できるだけ簡単にデザインのハンドオフができますよ。  

The post 人を惹きつけるモバイルアプリデザイン appeared first on Studio by UXPin.

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。Android端末をお持ちの方は、毎日Material Designを使用していることでしょう。多くの企業が、モバイルおよびウェブアプリケーションを構築するための基盤として、マテリアルデザインシステムを使用しています。

このシステムの包括的なコンポーネントライブラリと、マテリアルアイコン（現在はマテリアルシンボル）を含むリソースには、組織やスタートアップ企業がゼロからデザインすることなく製品を無限に拡張するための構成要素があります。

本記事では、次の製品開発プロジェクトで使用できるマテリアルシンボルやその他のマテリアルリソースについて見ていきます。

UXPinの各プランには、マテリアルデザインのUIとアイコンが標準装備されています。無料トライアルにサインアップして、今日からUXPinとマテリアルデザインで美しいアプリを構築しましょう。

マテリアルデザインとは

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。すべてのマテリアルコンポーネントには、実装、使用方法、構造、動作などのガイドラインが含まれており、デザイナーやエンジニアが高品質なユーザー体験を提供しながら最高の成果をあげられるようサポートします。

Googleは、2014年のGoogle I/O会議でマテリアルデザインの最初のバージョンを発表しました。2021年5月、GoogleはDynamic Color、折りたたみ可能なデバイスコンポーネント、デザイントークンなどの注目すべき機能を含むMateri Design 3（M3）を発表しました。

マテリアルシンボルの発表

マテリアルデザインの最もワクワクするアップデートの1つは、5つのスタイルで2,000以上のオープンソースのアイコンを含む、カスタマイズ可能なアイコンセットである「マテリアルシンボル」の発表でした。お気に入りのマテリアルアイコンをすべて見つけることができますが、製品やブランドの要件に合わせて、より柔軟にカスタマイズできるようになりました。

マテリアルアイコンはまだ利用可能ですが、シンボルのようなカスタマイズはできません。そしてシンボルでは4つの可変オプションがありますが、サイズと密度しか調整できません。

マテリアルアイコンセット

Googleは、シンボルのカタログより少ないとはいえ、旧マテリアルアイコンを残しており、アイコンは、【Outlined】、【Filled】、【Founded】、【Sharp】、【Two-tone】の5つのスタイルで利用できます。

マテリアルシンボル：最新情報

マテリアルアイコンは、Google Fontsの下に移され、【Outlined】、【Rounded】、【Sharp】の3つのスタイルで可変のアイコンセットがあります。また、デザイナーは、以下の4つの変数または軸でアイコンセットをカスタマイズすることができます：

• 塗り：塗りつぶしまたは塗りつぶしなしの外観
• 太さ：シンボルの線を100から700のウェイトで確定
• グレード：強調を伝えるのにシンボルの太さを細かく調整
• 光学サイズ：アイコンのサイズを20、24、40、48ピクセルに設定可能

可変方式では、エンジニアは複数のバリエーションを複数のファイルではなく、1つのフォント（またはアイコン）に保存することができます。ファイルサイズとファイル数を減らすことで、エンジニアにパフォーマンスの向上と管理すべきアセットの削減がもたらされるのです。

3種のスタイル

Googleは、ブランドのアイデンティティやUIデザインに合わせた3つの新しいスタイルの導入もしました。

• 輪郭：クリーンで軽やか。デザイナーは、製品のフォントを補完するのにアイコンの重さを調整することができる。
• 丸み： 曲線の美しさは、丸みを帯びたロゴと重厚なフォントと相性がいい。
• 鋭さ：直線的なエッジと90度のコーナーのスタイリングを持つUIにマッチするようにデザインされている。

マテリアルアイコンを作成する

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、Googleは下記のようなカスタムアイコンをデザインするためのガイドラインを用意しています：

• デザイン原則：ユーザーにとって意味があり、役に立つ明確な図像を作成するためのベストプラクティス
• アイコンのサイズとレイアウト：デザインツールを使ってアイコンをデザインする際のグリッドサイズとレイアウトの設定方法
• グリッドとキーライン図：一貫したアイコンセットを作成するためのテクニック
• アイコンメトリクス：コーナー、ウェイト、ストローク、複雑さなど、アイコンのデザイン構造

このようなガイドラインに従うことで、マテリアルの包括的なアイコンセットを活かしながら、自身のブランドに関連するアイコンをいくつか追加することができます。

Googleのマテリアルアイコン＆シンボルの使用方法

デザイナーやエンジニアがマテリアルアイコンやシンボルを使用する方法はいくつかあります。

SVGまたはPNGをダウンロードする

アイコンとシンボルは、SVGまたはPNG形式でダウンロードすることができますが、パフォーマンスとカスタマイズの利点を考慮し、SVGを使用することをお勧めします。PNGファイルはサイズが大きく、デザイナーやエンジニアが編集したりサイズを変更するのがより複雑になります。

Googleでは、ダウンロード前にアイコンやシンボルをカスタマイズできるため、プロジェクトで使用する最終的なアセットが得られます。

CSS/CDN

マテリアルシンボルには、Google Fontsに使用するものと同様のウェブサイト設置用のCSSファイルがありますが、この方法は、ウェブサイトに追加のリクエストを行う必要があり、パフォーマンスに深刻な影響を与える可能性があるという問題があります。

なので、複数のマテリアルシンボルを使用する場合は、別の方法で設置した方がよいでしょう。

運営システムとフレームワーク

マテリアルアイコンとシンボルには、プロジェクトのアセットとしてインストールするためのAndroidとiOS用のダウンロードがあり、実装のためのコードスニペットも用意されています。マテリアルデザインには、Flutter（Googleが開発したプログラミング言語）とAngularの説明書があり、Reactの説明は、MUIのドキュメントに掲載されています。

デザイナーの使用方法

大抵のデザインツールには、マテリアルアイコン用のプラグインやエクステンションがありますが、UXPinをご利用の場合、すべてのプランにマテリアル アイコン セットが標準装備されています。

また、自分で作成したSVGアイコンをインポートしてUXPinで編集し、デザインシステムに保存して他のチームメンバーと共有することも可能です。

マテリアルアイコンやシンボルをタイポグラフィと一緒に使う

GoogleのMaterial 3（M3）ドキュメントには、アイコンとタイポグラフィの組み合わせに関するヒントとベストプラクティスが紹介されています。

ウェイト

アイコンとテキストに別々のウェイトを絶対に使わないでください。 Googleは、こういったアセットをマテリアルシンボルのウェイトカスタマイズ変数と簡単に組み合わせられるようにしています。クリーンで一貫した美しさを実現させるべく、確実にフォントのウェイトとアイコンのウェイトを常に一致させましょう。

（正）フォントのウェイト

（誤）フォントのウェイト

サイズと配置

アイコンのサイズと配置は、常にテキストと一致させましょう。ユーザーは両方を読んで、それらが関連していると認識できなければいけません。Googleは、デザイナーに「シンボルのベースラインを、文字サイズの約11.5%にシフトダウンする」ことを推奨しており、このやり方でアイコンやテキストが統一され、整列した状態に保たれます。

マテリアルアイコンのアクセシビリティ

Googleは、アイコンのアクセシビリティについて、デザイナーに簡潔ながら有益なアドバイスを提供しています。デザイナーは、特にナビゲーションのために、常にアイコンに有意義でよく説明されたラベルを使わなければいけません。テキストラベルのないアイコンは、ユーザーにとってあいまいで混乱を招く可能性がありますからね。また、スクリーンリーダーやその他の補助的な技術のための「代替（Alt）テキスト」も含めなければいけません。

アイコンは、対象サイズも重要な要素です。指の大きな人や手の不自由な人は、間違ってアイコンのボタンを押してしまい、混乱やフラストレーションの原因になりかねません。

Googleは、デザイナーに最小ターゲットサイズ48ピクセルの使用を推奨しています。20ピクセルのアイコンを使用する場合は、ターゲット領域の合計が48ピクセルになるよう、十分なパディングを設けましょう。

UXPinでマテリアルデザインのアイコンを使ってデザインする

マテリアルアイコンを含め、UXPinで予めインストールされた複数のアイコンセットがあれば、デザイナーはプラグインのインストールや、外部ファイルのアップロードが必要ありません。以下のように、プロジェクトへのアイコン追加は簡単です。

ステップ1：アイコン要素をクリック

キャンバスの左側にあるクイックツールパネルで、アイコン要素をクリックします。または、キーボードショートカットの【OPTION】+【I】（Macの場合）や【ALT】+【I】（PCの場合）でもできます。

ステップ2：キャンバスにアイコンを描く

アイコンを表示させたい場所をクリックして、四角くドラッグします。【SHIFT】キーを押しながらドラッグすると、幅と高さが等しくなります。

ステップ3：アイコンのプロパティパネル

アイコンを描画すると、右側のプロパティパネルにアイコンプロパティパネルが表示され、マテリアルアイコンや、Fonts Awesome、Retina Icons、UXPinセットなど、他のセットのいずれかを選択することができます。

ステップ4：アイコンの選択

利用可能なマテリアルアイコンをスクロールして、必要なものを探します。プロパティパネルで（キャンバス上でアイコンを選択した状態で）任意のアイコンをクリックし、選択状態にします。

ステップ5：アイコンのプロパティを調整

アイコンを選択したら、【アイコン】セクションの上にあるプロパティパネルを使用してスタイルを設定することができます。カラーピッカーの下には、マテリアルデザインを含む利用可能なデザインシステムのドロップダウンがあるので、デザイナーが他の場所からHEXコードをコピー＆ペーストする必要はありません。

ステップ6：インタラクションの追加

プロパティパネルの上部には、「インタラクション」があり、【インタラクション】、【アニメーション】、【トランジション】などを追加して、アイコンをインタラクティブにすることができます。例えば、このユーザーアイコンを使って、パーソナライズされたプロフィールページを開くとします。

UXPinのインタラクティブなUIパターンとアプリの例で、UXPinの機能の仕組みやコードベースのデザインでできることをご覧ください。

UXPinでプロトタイピングとテストを改善しよう

マテリアルアイコンは、UXPinで作業する際の1つの利便性に過ぎませんが、デザイナーが画像ベースのデザインツールとして、より機能的で忠実なプロトタイプをより早く構築できるようにすることが我々の目標です。

UXPinの内蔵デザインライブラリのいずれかを使えば、デザイナーは要素をドラッグ＆ドロップして、インタラクティブなプロトタイプを数分で構築できます。ウェブサイトから企業やB2C製品のウェブおよびモバイルアプリケーションまで、あらゆるタイプのプロジェクトに対応できるよう、人気の高い5つのデザインライブラリを収録しました

UXPinのすべてのプランには、マテリアルデザイン、iOS、Bootstrap、Foundation、ユーザーフローが含まれており、それぞれのライブラリのインタラクティブな要素、カラー、テキストスタイル、アイコンが用意されています。

UXPinのデザインシステム機能では、デザイナーがゼロからデザインシステムを構築し、ライブラリをカラー、アセット、タイポグラフィ、コンポーネントに自動的に分類することができます。また、権限の設定や、デザイナーやエンジニアが従うべきドキュメントを含めることができます。

UXPinのコードベースのデザインツールを使用して、最終的な製品エクスペリエンスを正確に再現する、より優れたプロトタイプを構築しませんか？無料トライアルにサインアップして、UXPinを使用したデザインの可能性を是非ご覧ください。

The post マテリアルデザインのアイコン： Webとアプリデザインの構成要素 appeared first on Studio by UXPin.

UXデザインは、ブランドの一貫性に大きな影響を与えます。製品の視覚的な美しさと使いやすさは、多くの場合、最初に気付かれるものであるため、ブランドに関連し、且つ強い第一印象を与えるものでなければなりません。

UXデザインにおけるブランドの一貫性は、ブランドロゴ、正しい色、フォントの使用にとどまらず、デザイナーは、企業イメージを反映し、製品に意味を持たせ、ターゲットにアピールするような体験を作り出すことを求められます。本記事では、UXデザインにおけるブランドの一貫性の重要性と、デザイナーがブランド価値の高い製品体験をどのように生み出すことができるかを探ります。

 UXPin の革新的な Mergeの技術で、一貫したUXをデザインしませんか？信頼できる唯一の情報源（Single source of truth）によって、どのようにリリースごとに一貫性のある、ブランド価値の高い製品体験が確実に提供されるかを、アクセス権をリクエストしてぜひご覧ください。

ブランドの一貫性とは

ブランドの一貫性とは、企業があらゆるタッチポイントにおいて、いかに一貫したメッセージを発信し、そのブランドの核となる価値に忠実であり続けるかということであり、その一貫性は、ビジュアルデザインやコピーライティングから、従業員の顧客対応や問題解決の方法まで、あらゆることに関連しています。

UXデザインにおけるブランドの一貫性

デザインやUXは、顧客が製品やサービスを利用する際に目にし、体験する要素であるため、ブランドの一貫性に不可欠です。優れたネーミング、スローガン、ロゴ、ブランドメッセージなどを持つ企業でも、ユーザー体験が悪ければ、そのブランドはダメになってしまいます。

ブランドの一貫性が重要な理由

ブランドで企業に人間のような特徴ができ、それにより顧客はより簡単に関係を築き、関われるようになります。ここでは、デザインの主導者とステークホルダーが、UXにおいてブランドの一貫性を優先させなければならない理由をいくつかご紹介します。

理由１：信頼関係の構築

もしあなたが誰かと出会い、あることを支持すると言われたとしても、彼らの行動がそれに矛盾していれば、あなたは彼らに疑いの目を向けるでしょう。このような矛盾が多くなると、その人を信じられなくなり、信頼を失うことになるのです。

ブランドについても同様、おそらくそれ以上でしょう。誰でも製品のタイポグラフィ、色、マイクロインタラクションに至るまで、一貫したものを見たいと思うものです。

TeamPasswordにおけるパスワードマネージャーの事例で、オペレーションディレクターのトニー・カッチョボ氏は、「この市場ではブランド が不可欠です。顧客は、我々に”ログイン記録”という機密情報を託しています。それが矛盾や時代遅れのデザインだと、我々がその情報を安全に保つのに十分な最新の技術を持っているかどうか、一部の顧客に疑問を抱かせる可能性があります。フロントエンドの開発は、バックエンドの性能に対する信頼と信用を築くのです。」と言っています。

理由2：ブランド認知の強化

ブランドの一貫性により、顧客はアプリストアやSNS、物理的な場所で、ビジネスやその他の製品を目にすることができます。そのいい例が、世界的なメガブランドであるVirginです。

Virginは、サービス、体験、物理的およびデジタル製品など、世界中のさまざまな産業で成功を収めており、Virginの忠実な顧客は、質の高いサービスの提供、遊び心、フレンドリーなカスタマーサービスを連想させるその特徴的な赤と白のブランドにいち早く目が行きます。

理由3：営業・マーケティング活動の活性化

Lucidpress（ルシドプレス）の調査によると、強力なブランドの一貫性は、収益に大きな影響を与える可能性があることがわかりました。最新のブランド一貫性の現状報告によると、一貫したブランディングで収益が33%増加することが分かったのです。これは、Lucidpressの2016年のレポートから10%増加していることが示すように、この傾向は拡大しているようです。

理由4：デザイン・開発の効率化

ブランディングやデザインの不整合は、デザインドリフト、バグ、手直し、技術的負債、プロジェクトの遅延などを引き起こします。このような不整合は、お粗末な顧客体験を招くだけでなく、ワークフローやデリバリーの非効率性を生み出し、組織の貴重なリソースを犠牲にすることになります。

こうしたデザイン・開発の非効率性を解消するため、企業はすべてのタッチポイントで一貫したユーザー体験を確実に提供できるようにすべく、ブランドのガイドラインを含むデザインシステムを構築するのです。

UXデザインでブランドの一貫性を高める方法

ブランドの一貫性の多くは、信頼を築くことにあり、企業の行動がメッセージと矛盾していれば、ブランドに対する信頼は失われます。ここでは、製品に一貫したブランドメッセージを伝えるための6つのヒントをご紹介します。

ブランドのスタイルガイドでデザインシステムを構築する

デザインシステムは、特に製品やワークフローの凝集性と一貫性の、導入する企業にとっての大きな問題をいくつか解決します。

包括的なデザインシステムには、組織のメッセージングとブランドアイデンティティを強化するためのブランドガイドラインが含まれているものです。デザインシステムは、すべてのプロジェクトが同じ原則とコンポーネントライブラリを使って同じデザイン言語を提供し、ユーザーに一貫したブランド体験を確実にもたらします。

ありきたりなデザインパターン

デザインパターンは、親しみやすさを生み出し、製品の学習曲線と人間の認知負荷を軽減します。こういったありきたりで認識可能なパターンは、製品に基礎的な一貫性を与え、ブランドを強化します。

さらに、製品が使いやすいと、顧客がその製品を使用したり、オススメしたりする可能性が高くなり、ブランドの信頼性や親和性が高まります。

デザインでブランドの声とトーンを表現する

製品のメッセージやコピーと同様に、カラーパレットやビジュアル要素も、ブランドの声やトーンを表現するものでなければなりませんが、このようなUI要素を定める一番いい方法は、潜在顧客でデザインをテストすることです。

UXデザインの会社であるDivamiは、UXリサーチに基づいてブランドの個性を開発することで、これを実現しています。「女性による女性のためのヘルスケアプラットフォーム」であるCeles Careをデザインしたとき、彼らはステレオタイプな「全部ピンク」とせずに女性らしいUIを作りたいと考えました。配色をテストすることで、同社は「ソフトでまろやかな」パレットを見つけ、最も重要なこととして、エンドユーザーがブランドのパーソナリティを連想するようにしました。

内外のブランド一貫性

内部的な一貫性とは、製品内のユーザーエクスペリエンスを指し、外部的な一貫性とは、一連の製品群を指します。製品ごとに多少の違いはあっても、デザイナーは製品間の一貫性を高いレベルで満たさなければなりません。

Appleはハードウェアとソフトウェアを幅広く展開していますが、このブランドは、物理的にもデジタル的にも、誰が作ったかわからないようなデザインになっています。Appleの製品間でのデザインの一貫性で、ブランドと顧客ロイヤルティは強化されるのです。

この一貫性は、組織がすべての製品をデザイン、開発、および製造する場合に管理しやすくなりますが、サードパーティの市場ではどうなるでしょうか?

Shopify、Salesforce、Atlassian などの製品は、コア製品を補完するためにサードパーティアプリに依存しています。アプリにはそれぞれ異なる特徴や機能がありますが、製品のデザインシステムにより、それぞれが確実にコア製品に適合しています。

例えば、アプリの開発者は、マーケットプレイス内のすべてのアプリがコンテンツ、デザイン、コンポーネント、パターンに関するShopifyのガイドライン（ブランディングを含む）を確実に満たすようにShopify Polarisに従わないといけません。これにより、たとえ誰かが異なるサプライヤーから複数のアプリを使用したとしても、それはShopifyの一製品のように感じられます。

Virginのデザイン一貫性

間隔、サイズ、レイアウト、色などの細かいUIデザインは、ブランドの一貫性に影響を及ぼすことがありますが、これらのUI要素がすべてのUIで一貫していれば、ユーザーはコンテンツや機能について考えたり検索したりすることなく、タスクの完了に集中することができます。

さらにデザイナーは、ブランドの声やトーンに沿った一貫したマイクロインタラクション、ページ遷移、通知を使用しなければなりません。このような課題の多くも、デザインシステムによって解決できるため、ユーザーインターフェースは常にブランドと一貫性を保つことができるのです。

透明性を確保する

透明性は、信頼とブランドの親和性を構築する上で重要な要素です。デザイナーは、ユーザーがどんなタスクでも完了できるように、たとえそれが配信停止や有料プランの解約などのビジネスに悪影響を与えるものであっても、機能をシンプルで透明性の高いものにしなければなりません。

製品は、アフィリエイトの紹介やスポンサー、第三者によるデータ共有など、金銭的なインセンティブがあることを必ずユーザーに知らせなければならず、デザイナーは、最終的に信頼とブランドを損なうクリックベイトや欺瞞的なリンクも避けなければなりません。

UXPin Mergeでブランドの一貫性を高めよう

Mergeを使用すると、コンポーネントライブラリをレポジトリからUXPinのデザインエディタに同期できるため、デザイナーはエンジニアと同じUI要素を使用することができ、レポジトリへの変更は自動的にUXPinに同期され、組織全体で信頼できる唯一の情報源（Single source of truth）を作成できます。

デザインシステムチームは、React props（またはStorybook統合のためのArgs）経由でコンポーネントを変更する自由をデザイナーに与えることができます。また、ブランドアセット、カラー、タイポグラフィー、マイクロインタラクションなど、チームが変更できない特定のプロパティをハードコードして制限することも可能です。

ブランド要素やコアバリューをデザインシステムに組み込むことで、製品チームは、小さいけれど重要なデザイン判断に悩まされることなく、新製品の開発に集中することができます。

また、エンジニアがすでにコンポーネントのコピーをレポジトリで持っているため、Mergeはデザインのハンドオフプロセスの効率化も実現します。さらに、UXPinは各コンポーネントのプロップに対してJSXコードをレンダリングします。それにより、エンジニアはライブラリからコンポーネントをコピー＆ペーストし、UXPinから変更を加えるだけで、フロントエンドの開発を始められるのです。

The post ブランドの一貫性：高める方法をデザインでチェック appeared first on Studio by UXPin.

なぜTwitterはユーザーの心をつかむのでしょうか。Amazonの何が私たちを魅了し続けるのでしょうか。

モバイルアプリの素晴らしいデザインは、突然生まれるものではありません。最初のワクワクするようなひらめきだったら突然パーンと生まれるかもしれませんが、それをユーザーに愛される具体的な製品にするには、強力なモバイルアプリのデザイン戦略が必要なのです。 アプリを流行らせたいのであれば、既存の戦略に加えるべき「ベストプラクティス」があります。

もしそのベストプラクティスをすでにいくつか実践しているのであれば、どこに改善点があるか検討してみるのもいいかもしれません。

本記事でご紹介する7つのベストプラクティスはデザインプロセスの中核であり、後付けでもなければ、あればいいというものでもないので、アプリのデザイン戦略に最初から確実に組み込みましょう。そうすることで、最もうまくいくアプリを構築できるのです。

アプリのデザイン戦略を立てる – ベストプラクティス7選

1. ターゲット層を徹底的に知る

いいモバイルアプリのデザインは、ユーザーを中心に展開されるものです。もし、デザインプロセスのどの要素も、「ユーザーにとって何が良いのか」と答えることができないのであれば、それは手直しや見直しが必要でしょう。 そして、ターゲットとなるユーザーを深く理解することが、ユーザー中心のアプリを作る唯一の方法です。彼らは誰なのか？彼らは何を望んでいるのか？なぜあなたの競合他社が好きなのか？どこが嫌なのか？プロファイリングするかのように全て調べましょう。 潜在的なユーザーについて知るには、以下の方法が使えます：

• 競合の分析：競合するアプリを特定し、調査に基づいた大量のメモと実用的なインサイト作りましょう。競争の激しい市場なので、上位3～5社の競合他社に限定するのが簡単かもしれません。ソフトウェアや製品のレビューサイトを利用して、ユーザーの好みを把握しましょう。 的確なアプリデザインのアイデアが生まれるはずです。
• SNS： SNSのプラットフォームには、競合がどのようにブランドを位置づけているかを知るための良いインサイトがあり、オーディエンスの好みや、彼らにとって何が本当に重要なのかが見えてきます。そして何より、ユーザーがライバルにどのように関わっているかがわかります。このようなインサイトで、自身のアプリデザイン戦略が完全に見直されるのです。
• アンケート、インタビュー、フォーカスグループ：ユーザーの口から直接きましょう。潜在的なユーザーの思考や感情を理解するには、直接話を聞く以外に方法はありません。アンケート、対面・電話インタビュー、フォーカス・グループなどの方法がありますが、例えば座談会では、人によっては回答に困り、自分の本心ではないけど尋ねる側が期待しているであろう回答を出す人もいるかもしれないので、色々な方法組み合わせることで、より多くの情報を得ることができます。

2. アプリのデザインアイデアを明確にする

あなたのアプリは何をするものですか？その回答は当たり障りのないものではなく、ぼやっとしたものでもなく、一言で済ませるようなものでもありません。アプリの目的は具体的でなければいけません。そうでなければ、アプリの開発はリソースを浪費することになるからです。 アプリのデザインアイデアを明確にすることで、関わる人全員が同じ方向に進むことができます。デザインチームと開発チームの各メンバーは、自分たちが何を作っているのか、そしてそのコンセプトの実現のために自分の役割はどうあるべきかがわかるのです。 基本的な要件として、以下を知っておく必要があります：

• このアプリのデザイン案の目的
• 誰に向けて作るのか
• どのように使われるのか
• 他のアプリではなくこのアプリを選ぶべき理由
• 必要なリソース
• 成功度の測定方法

3. 予算の把握

開発プロセスの初期段階で、モバイルアプリの開発予算を設定しましょう。これにより、製品にどんどん機能を追加していくことによる開発コストの急騰で、多くの場合失敗に終わる”技術”となる「ミッションクリープ」を避けることができます。また、予算があれば、追加する機能や、後日削除したり元に戻したりできる機能を決めることができます。

目標に基づいたマイルストーンで、プロジェクトのタイムラインと予算を整合させ、そうすることで予算が計画通りに進むようになります。 予算を立てると、開発する「もの」だけでなく、開発する「方法」も決定します。たとえば、スタートアップ企業であれば、まったく新しいチームをゼロから立ち上げるのがベストかもしれません。でなければ既存のチームを成長させましょう。それか、専門の技術パートナーを利用することもできます。このような企業は、経験豊富な外部の社内チームとして機能し、アプリデザインのアイデアを全面的にアウトソーシングすることで生じるリスクはありません。

4. ユーザーを活性化する（確実に定着させる）方法を学ぶ

ユーザーがアプリをダウンロードするずっと前に、あなたにはユーザーの維持についてのかなり良いアイディアが必要です。ユーザーを「活性化」して、毎日アプリを開き、他のアプリではなく、このアプリで時間を過ごすようにさせるためには、アプリの何が必要でしょうか。 その一端は、ターゲットとなるユーザーの理解と、モバイルアプリのデザインアイデアの確定に戻ります。

例えば、ユーザーが、出先でちょっと10分くらいのセッションで気軽にできるようなアプリを探しているとします。その場合、何時間もかけて商品を閲覧するユーザー向けに作られたアプリとはまったく違うデザイン、コンテンツ、体験になります。そうでなければ、ユーザーはおそらく二度と使わなくなるからです。

Amazonは、ユーザーを活性化するためのマスタークラスを提供しています。Amazonのアプリが常に人気を博しているのは、モバイルでの使用を前提に作られているからです。そして、まさにユーザーが望んでいること、つまり、さまざまな商品の購入が簡単にできるのです。

一方Twitterには、バスを待つような短時間で（あるいは、ドゥームスクロールに夢中になれば数時間でも）気軽にできるような、ちょっとしたコンテンツがあります。最近では、ゲームアプリの分野でWordleが同じようなことをしましたが、ユーザーはこのアプリでは足りなかったのです。

ユーザーを活性化させるその一点に集中しましょう。

5. KPIの合意

販売促進会議では、「成功とはどういうものか」という言葉をよく耳にすることでしょう。まぁいいですけど、この言葉は、現実の世界では誰も使おうと思わないような、ビジネスライクで格好悪い言葉です。しかし、それでも重要な会話であることに変わりはありません。アプリが目的を達成しているかどうかは、目的を設定しなければわかりませんよね。

このため、KPI（重要業績評価指標）の設定が必要です。KPIは、アプリデザインのアイデアを評価するメトリクスです。使用できるメトリクスはたくさんあり、解析すべきデータは山ほどあります。 すべてを見直すのではなく、ビジョンや目標に最も合致したメトリクスを、以下のような中からいくつか選びましょう：

• ダウンロード数：ユーザーは自身の製品をインストールするほど気に入っているか？ダウンロード数を押し上げるには何を変えるべきか。
• 月間アクティブユーザー数：あなたのユーザーベースは、定期的にチェックインしているか？そうでない場合、なぜそうなのか？
• 一日のアクティブユーザー：最も熱心なユーザーが毎日ログインする理由は何か？
• チャーン：何人のユーザーがアプリから離れたりアンインストールしたり放置しているか？何がユーザーを遠ざけているのか？
• セッション数と時間：何人のユーザーが、どれくらいの時間アプリを開き、アクティブにしているか？それはなぜか？

6. 適切なモバイルアプリデザインツールスタックの選択

コンセプトの実現は、大抵「言うは易く行うは難し」であり、多くの人にとって、これはデザインプロセスの中で非常にフラストレーションのたまる部分ですが、頭の中に浮かんでいる絵をを何とかしてチームに伝え、実行に移さなければなりません。 そのビジョンの実現には、適切なツールを適切なチームに配備することが重要です。

したがって、適切なツールスタックの選択が、アプリ設計戦略の鍵の部分となります。 デザイナーやデベロッパーには好みがあり、それは考慮されなければいけません（おそらく彼らはその使い道の達人であり、より良い製品を作るための自信、経験、知識を与えてくれるはずです）。

しかし、そのようなツールが他のソフトウェアとどの程度うまく連携できるかの考慮が必要です。例えば既存のソフトウェアとうまく統合できない場合、またはソフトウェア同士を連携させるのに時間がかかり、不便な回避策が必要な場合は、正しい選択とはいえないかもしれません。

  UXPinは、シームレスなワークフローを実現するツールのひとつで、デザイナーがLo-Fiのワイヤーフレームの作成からHi-Fiでピクセルパーフェクトなモバイルアプリケーションのプロトタイプの作成まで、最初から最後まで一貫してクリエイティブな作業を行えるようにするツールです。 この「コンセプト術」は、デベロッパーが実際に最終製品を構築する際に使用するものと同じ実在のコードコンポーネントを使用しています。

そのため、専門的なコーディングスキルがなくても、意図したとおりに動作するデザインを作成することができ、チーム間で延々と行き来するハンドオフなしで、発売後も作業を続けることができます。また、チームが安心してUXPinを使いこなせるように、Sketch、Slack、Jiraなどの人気の高いデザイン・開発ツールとも統合されています。

7. フィードバック＆改善のデザインプロセスの実施

モバイルアプリのデザインアイデアを開発する上で、「継続的な改善」はまさに流行語です。これは、プロセス全体の一部であると同時に、考え方の一部でもあります。「どうすればユーザーにとってより良いものになるのか」と常に問い続ける考え方です。 実際に重要な改善を継続的に行うには、フィードバックループを導入しましょう。

これは、「ユーザーはアプリをどのように使用し、何をし、何をしないのか？」等を見るための、ユーザーからのコメントやレビューと行動データ分析を組み合わせたものであるべきです。

インタビュー、フォーカスグループ、リサーチなど、原点に立ち返り、アプリのインターフェースと体験に対するユーザーの反応をよりよく理解することです。だからといって、ユーザーのコメントをすべて反映させる必要はありません。そもそもそんな時間はないでしょう？

その代わりに、実用的で貴重なデータを使って、ビジネス目標に沿った機能やアップデートを指示できるようなシステムを構築しましょう。これにより、デザインや開発プロセスが簡素化されるだけでなく、社内の主要なステークホルダーからの支持を得ることができるのです。

フィードバックループがしっかりしていれば、改良すべき点の継続的な確認ができます。 つまり、ユーザーを中心に据え、彼らのニーズを汲み取り、彼らの欲求や愛情を自社のビジネス目標に合致させ、それを現在進行中のアプリ開発の決定に使うのです。

UXPinでのアプリデザイン戦略の実行

成功する戦略は、このようなベストプラクティスをすべて活用し、モバイルアプリデザインのアイデアをすべてユーザーの元に届けます。そして、このコンセプトの素晴らしいところは、それぞれのコンセプトがいかにうまく連動しているかということです（ちょうど、あなたのツールスタックのようなものですね）。

アプリの戦略を具体的に定めるには、オーディエンスを熟知することが必要であり、予算によって、どこに焦点をあてて改良を加えるかが決まります。それによってそれぞれがうまく交わり、直感的で採用しやすいプロセスが作り出されるのです。 デザイナー、デベロッパー、ユーザーのために有意義な体験を生み出すツールであるUXPin をぜひお試しください。

The post アプリデザイン戦略に取り入れるべき – ベストプラクティス７選 – appeared first on Studio by UXPin.

この記事では、ダークモードの利点をすべて挙げ、また、なぜダークモードがあらゆるモバイルアプリケーションの究極の機能であり、デベロッパーがその開発にリソースを保存すべきではないのかについて説明します。

明るさ　- 隠れた脅威

いつものスマホの画面の明るさは、直接の脅威にはならないかもしれません。しかし、夜間にスマホのロックを解除して、この明るい白色光のフラッシュが目に飛び込んできたときの不快感と苦痛を思い出してみてください。さらに、このコントラストは目の状態にも悪影響を及ぼし、時間が経つと著しい視力低下につながることもあるのです。そのため、専門家は夜間に電気を消してパソコンで作業することを推奨していないのです。暗い色調と明るい色調のコントラストが激しいと、目が痛くなるのです。

モバイルアプリケーションのデザイナーやデベロッパーは、この瞬間を重要視していなかったのです。特にGoogleは、メインページの夜間の閲覧で、ユーザーの視界を数秒間完全に奪う可能性があります。目に悪いだけでなく、明るいモードはバッテリーを早く消耗させます。それでも、ユーザーの要望や不満は考慮され、AndroidやライバルのAppleは、安全で完全に機能するダークモードを統合したOSの新バージョンを発表しました。

では、ダークモードとは一体何でしょうか？背景の色を白から黒に変えて、夜間の携帯電話の使用を便利にする普通の機能でしょうか、それともアプリケーションのための究極のソリューションでしょうか？

ダークモードのメリット

健康面

暗い場所で明るい白色光がもたらす不快感は、誰もが知るところです。しかも、これは目を痛めないということだけではありません。科学者たちは、私たちがほとんど24時間スクリーンを見ていると、質の良い睡眠に必要なメラトニンホルモンの分泌が遅くなることを証明したのです。青と白を基調とした画面は、他の色に比べてメラトニンの分泌を半分近くも遅らせるという研究結果もあります。それでドライバーの眠りを浅くするために車のダッシュボードは、青を基調としていることが多いのです。

しかし、ベッドに横たわるユーザーは、起きていようと考えているわけではありません。それどころか、寝ないといけないのにその前に目覚まし時計もセットしたい。そうするとここで、携帯電話の明るい白色フラッシュで（すでに暗闇に慣れた）目の休息を奪う瞬間があるのです。

研究によると、人はモバイル機器だけでも1日に平均5時間近く触っているそうです。パソコンやテレビを加えると、1日11時間もの間、画面を使い続けていることになります。不眠、首や頭の痛みなどが現代人の悩みの種であるのも無理はありません。この問題を解決してくれるのが、ダークモードです。このモードは、夜間の明るいフラッシュから目を守るだけでなく、全般的に少し健康になれます。

バッテリー駆動時間の向上

スマートフォンに搭載されているスクリーンの種類によって、バッテリーへの実際の影響が異なるため、すべてがそんなに単純というわけではありません。Googleは、ダークモードを搭載した有機ELディスプレイが、100％の明るさのときに充電電力の60％近くを節約できることを確認しました。 50％の明るさでは15％しか節約できませんが、それでもないよりはマシです。何が言いたいかというと、有機ELディスプレイは、画面全体を明るくするために暗部の画素を使う必要がないのです。そのため、ダークモードでは画面全体の画素を使わず、電池を節約することができるのです。

よりスタイリッシュに

そうです、これは個人の好みの問題ですが、ユーザーはこのありきたりな、文字通りどこにでもある、何の変わり映えもしない白い背景にうんざりしていることは認めざるを得ません！ダークモードは、ほとんどのコードエディタがデフォルトでダークモードを持っているので、特にデベロッパーには馴染みがあるかもしれません。ダークモードでは、黒色とそのトーンがクラシックでスタイリッシュな配色の例となり、純粋なスタイルが加わります。 背景を暗くすることで、デベロッパーは色や陰影を色々試す機会が増え、グラフィック、プレゼンテーション、そして大抵あらゆるUI要素をよりスタイリッシュにすることができます。

この効果は、黒や暗い色が、ほとんどすべての色と完璧なコントラストを持つために得られるものでもあります。同時に、白地に有機的に映える色は、黒をはじめ、やや明度の低い色調のものなど、ごくわずかしか見当たりません。黒色は、コントラストを色々試せたり、大胆なデザイン決定をする際に、より多くのバリエーションを提供します。

ダークモードに注意

優れた機能を持つダークモードですが、いくつかのデメリットもあります。例えば、暗い背景の文字は、日中や明るい室内では非常に読みにくくなります。そのため、ダークモードは、夜間や暗い場所での使用を想定しています。

そしてまたコントラストです。ダークモードは、必ずしも背景が黒で文字が白だけという意味ではありません。これはもっと複雑です。明暗を正しく扱えることが重要です。例えば、白黒のコントラストが際立って、小さな文字を読むのに非常に違和感を覚えるという理由から、背景に真っ黒（#000000）、文字に真っ白（#ffffff）を使うことは禁止されています。より快適に読むためには、例えばダークブルーとライトグレーなど、柔らかな色調のものを使う必要があります。

このように、バランスが全てです。ダークモードは、今日のあらゆるアプリケーションに不可欠な要素であり、その追加は成功の前提条件です。とはいえ、デザインが不十分なダークモードは、ユーザーがアプリケーションから目を背けてしまう可能性があるので、このようなモードの開発プロセスには、慎重な取り組みが必要です。

The post モバイルアプリデザインの究極の解決策：ダークモード機能 appeared first on Studio by UXPin.

ボタンは、最も一般的なUI要素の一つです。ボタンを介して、ユーザーはシステムと対話し、選択することによって行動を起こすことができます。ボタンは、フォーム、Webサイトのホームページ、ダイアログボックス、ツールバーなどで使用されます。

ボタンとリンクを区別することが重要です。
・ボタンは、ユーザーに行動してもらいたいとき（送信、キャンセル、削除）に使用します。
・リンクは、ユーザーを他のページ（会社概要、もっと読む）へ誘導するために使用します。

優れたボタンデザインは、ユーザーに取って欲しい行動を容易にさせ、コンバージョンを増加させることができます。この記事では、サイト訪問者がクリックしたくなるような魅力的なボタンを作成する方法について、完全なガイドを提供します。

ボタンの骨格（構造）

魅力的なボタンをデザインする方法を説明する前に、完璧なボタンの構造を調べる必要があります。
ボタンには、次のような要素があります。

• テキストラベル
• 背景
• ボーダー
• アイコン
  （テキストラベル以外の要素はすべて任意です。）

ボタンをデザインする際の注意点

ボタンらしくないボタン

ユーザーがボタンをクリックする前に、それがクリック可能なエレメントであることを知らせなければなりません。そのため、ユーザーにボタンであることがわかるようにしましょう。ユーザーは、UIエレメントがインタラクティブかどうかを判断するのに、これまでの経験や視覚的な手がかりを頼りにしています。

クールなボタンデザインを使いたくなるかもしれませんが、ユーザビリティを犠牲にしないようにしましょう。使い慣れたボタンデザインを使用し、ユーザーを混乱させたり、摩擦を生じさせたりしないようにしましょう。一般的なボタンデザインの例としては、以下のようなものがあります。

• 四角ボタン（塗りつぶし）
• 丸ボタン（塗りつぶし）
• 丸ボタン（塗りつぶし・影付き）
• アウトライン/ゴーストボタン

塗りつぶしや影をつけると、ボタンが押せるように見えるので、ユーザーが識別しやすくなります。また、ボタンの周りに十分な余白を設けることで、より目立たせることができます。

曖昧な、あるいは誤解を招くようなボタン

ボタンのラベルが曖昧で分かりにくいと、ユーザーが行動を起こすのを妨げたり、間違った行動を取らせたりする可能性があります。

ボタンが何をするものかを明確に説明し、ユーザーが行おうとしている行動を肯定するラベルを使用しましょう。また、ボタンの文脈を考慮し、それに応じてラベルを適応させることも重要です。
「はい」「いいえ」のラベルは避け、代わりに「削除」「キャンセル」のような説明的なラベルを使用しましょう。

ステートを視覚的に確認することができないボタン 

“システムは、合理的な時間内に適切なフィードバックを行うことで、常にユーザーに状況を知らせるべきである。”— Jakob Nielsen

優れたボタンは、ユーザーが操作するとその状態を変化させる必要があります。ユーザーは、自分のアクションがうまく登録されたかどうかを知るために、フィードバックを必要としています。フィードバックがないと、ユーザーは何度も行動してしまうかもしれません。フィードバックには、視覚的なものと音声によるものがあります。

ステートを持つボタン（以下参照）

• Primary state；インタラクティブですぐに使用できるもの
• Active ；ユーザーがボタンを押した
• Hoover；カーソルがインタラクティブなエレメントの上に置かれている
• Focused；キーボード仕様中にハイライトされる
• In progress；アクションの処理中
• Disabled；インタタクティブではない

統一性の無いボタン

“一貫性 “は最も強力なユーザビリティ原則の一つです。物事が常に同じように動作するとき、ユーザーは何が起こるか心配する必要はありません。”— Jakob Nielsen

サイト全体で同じサイズ、形、色のボタンを作成しましょう。デザインライブラリーとスタイルガイドを用意すると効果的です。一貫性のあるボタンデザインは、ユーザーが素早くアクションを起こし、エラーを回避するのに役立ちます。さらに、サイト全体の見た目と感覚も向上します。一貫性がないと、ユーザーは混乱し、ミスを犯す可能性が高くなります。

多すぎるボタン

“UXの経験則：選択肢が増えれば問題が増える”— Scott Belsky, Chief Product Officer

ボタンが多すぎると、ユーザーは行動しづらくなります。これは「選択のパラドックス」と呼ばれるものです。デザインにボタンを詰め込むのではなく、ユーザーに取って欲しい最も重要なアクションを考え、それに優先順位を付けましょう。

ボタンのヒエラルキーとアクション

ボタンの階層構造は、ユーザーがシステム上で最も重要なタスクを判断するのに有効なシグナルを提供します。ここでは、最も一般的なWebサイトのボタンデザインの階層とそれを使ってユーザーを誘導する方法を紹介します。

CTAs（Call To Actions)

CTAボタンは、ユーザーに取ってもらいたい最も重要なアクションを指示するものです。効果的なCTAボタンは、ユーザーの注意を引き、クリックさせることができます。CTAボタンは、大きく、コントラストが高く、ユーザーの視線に入る位置に配置する必要があります。

一般的なCTAには、UXPinのようなWebサイトのボタンがあり、「無料で参加する」というCTAボタンは、色のコントラストが強く、非常に目立ちます。

CTAボタン上の効果的なフレーズ 

CTAボタンが効果的であるためには、優れたデザインだけでなく、行動を促すようなフレーズ（ワードチョイス）も必要です。CTAボタン上のフレーズが悪いと、混乱を招き、エラーを引き起こし、ユーザーを離反させてしまいます。
ここでは、CTAを強化するため心理学に裏打ちされたフレーズのヒントをいくつか紹介します。

アクションワードを使用する；一般的なフレーズではなく動詞を使い、ユーザーの行動を促します。例えば、「はい、いいえ」ではなく、「保存、または破棄」と表示します。

正確な言葉を使う；解釈や誤解の余地を残してはいけません。例えば、”Delete “のほうがよいのに”Remove “を使うなど。

ユーザーの行動を肯定する言葉を使う；「投稿」ではなく「公開」のように、ユーザーがこれから行おうとしている行動を明示する言葉を使う。こうすることで不確実性を排除し、ユーザーに行動への確信を与えることができます。

命令形を使用する；ボタンの文字数を減らし、読みやすくします。
例えば、「Yes, create your account」ではなく、「Create your account」とするのです。

1次アクション

1次アクションは、「次のページに進む」、「アクションを完了する」、「ユーザージャーニーを開始する」など、ユーザーを次のポジティブなアクションに導くためのものです。このようなウェブボタンは、ユーザーにポジティブなアクションを促すために、より視覚的な重みを持たせ、より優位性を持たせる必要があります。

2次アクション

2次アクションは、1次アクションの代替となるアクションです。「戻る」ボタンや「キャンセル」ボタンなどがこれにあたります。これらのボタンは、エラーのリスクを低減し、積極的な1次アクションを促すために、視覚的に目立つようにする必要があります。

3次アクション

3次アクションは、ユーザーが行う必要のない重要なアクションです。このアクションには、「編集」、「新しい情報の追加」、「削除」が含まれます。一次アクションと三次アクションの違いは、そのアクションが実行される状況によって決まります。

3次アクションには、あまり目立たない小さなボタンを使用するのがよいでしょう。

ボタンのスタイル、色、デザインに関するベストプラクティス

ボタン形状

ウェブボタンの形状は、四角いボタンか、角が丸い四角いボタンを使用するのがベストプラクティスです。これらのボタンの形状は、ユーザーがボタンとして認識しやすいため推奨されています。

他にもボタンの形状はありますが、ユーザーによっては認識できない場合があるので、慎重に使用する必要があります。

• 丸いボタン；ボタンの縁を丸くしたものです。
• アウトライン/ゴーストボタン；塗りつぶしのないボタンです。2次アクションに最適です。
• フローティング・アクション・ボタン(FAB)；主要なアクションに使用されるボタンです。
• アイコンとラベルのボタン；アイコンとラベルの両方を持つボタンです。
• アイコンボタン；ラベルがないため、積み重ねやすいボタンです。ボタンの視認性を高めるために、パディングやサイジングを使用することができます。モバイルユーザーがタップできるように、ボタンが十分な大きさであることを確認しましょう。

カラーパレット

Webサイトのボタンデザインのカラーパレットを選ぶ際に、まず考慮すべきなのは色彩言語です。赤いボタンは停止、Webサイト用の緑のボタンは移動、青いボタンは詳細な情報を意味します。

また、ボタンの色を選ぶ際には、ブランドカラーやスタイルガイドも考慮しましょう。一貫したユーザーエクスペリエンスを実現するために、必ず統一性を保つようにしましょう。ボタンには十分なコントラストを持たせ、ウェブアクセシビリティガイドラインに適合していることを確認します。

ボタンの位置とページレイアウト

ボタンを配置する場所とページのレイアウトを決めるとき、コンテキストはとても重要です。CTAの場合、Webサイトボタンを中央に配置し、ユーザーの注意を引くためにページの高い位置に配置するのがベストです。

Webサイトの1次アクションボタンについては、最適な配置がまだわかっていません。オプションAは、1次アクションボタンが最初に来る場合であり、オプションBでは最後に来る場合です。これらは、ユーザーが何を最初に見ることを期待しているのかによって決まってくるでしょう。

最適なUIツールでボタンをデザイン

クリックされるボタンをデザインするためには、モックアップを美しく仕上げるツールが必要です。UXPinは、デザイン、プロトタイプ作成、チームとのコラボレーションを行うためのオールインワンプラットフォームを提供しています。デザインパターンライブラリで一貫したボタンデザインを維持し、コントラストチェッカーでボタンのアクセシビリティをチェックします。

興味のある方はぜひ14日間無料体験を！（クレジットカードの登録不要）

The post 基礎： ボタン作成ガイド – UIエレメント – appeared first on Studio by UXPin.