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

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

加速とテストは、グローバル市場に向けたポジティブな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.

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.

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。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.

ボタンは、最も一般的な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.