FinTech(フィンテック)のレガシーシステムの対処方法とは?

fintech legacy systems

多くの企業が、レガシーシステム(旧式システム)とそれに伴う頭痛の種からの解放に四苦八苦しています。時代遅れのエコシステムには、UX(ユーザーエクスペリエンス)やデジタルイノベーションなど、多くの課題があるのです。  

チャレンジャーバンク(銀行免許をとって銀行サービスをはじめる事業者)が従来の銀行と競争し、洗練されたテクノロジーを採用し、顧客により速く商品を提供できる理由は、レガシーテクノロジーの負担にあります。  

本記事では、レガシーシステムが抱える課題と、それがビジネスやCX(顧客体験)に及ぼす悪影響について探ります。また、こうしたレガシーの負担がないFinTech企業が従来の金融サービス事業者をどのように凌いでいるか、そして従来の金融サービス事業者が現代化のために何ができるかを見ていきます。  

UXPin Merge で UXのワークフローを現代化してデザインと開発の間に「信頼できる唯一の情報源(Single souce of truth)」を作成することにより、製品がより速やかに提供され、市場投入までの時間が短縮されます。詳細およびアクセス権のリクエスト方法については、Merge ページをぜひご覧ください  

レガシーシステムとは

  レガシーシステムとは、組織がまだ使っているハードウェアやソフトウェア、その他の時代遅れのテクノロジーのことであり、レガシーシステムを構築した企業は、大抵もはやビジネスを行っていないか、製品のアップデートやサポートの提供を停止しています。  

アップデートやサポートがない場合、組織はレガシーシステムの維持と運用のためにIT専門家を雇わなければなりません。そのようなシステムのための人材プールは小さいので、労働力は高価であり、さらに部品は手に入りにくいので、大抵は高いコストでハードウェアの代替品を製造しなければいけません。

designops picking tools options

レガシーシステムは、かなりのスペースも必要です。多くの組織では、30~50年前のシステムで運用されており、そのようなレガシーシステムのハードウェアはかさばるため、効率的な運用と維持には大きなスペースが必要となります。またデータの整合性や、システムクラッシュ時にすべてを失わないようにすることにも気を配らなければなりません。なんせレガシーシステムはクラッシュしますからね!  

銀行部門や政府機関では、いまだにレガシーシステムが広く使われています。レガシーシステムは維持費が高いだけでなく、セキュリティ上のリスクもすごいです。

Forbesの記事によると、米国連邦政府のシステムのほとんどが時代遅れになっており、例えば米国財務省のシステムは「51年もの」と最も古いシステムの一つで、次いで保健福祉省の「50年もの」となっています。  

レガシーシステムとUX

  このような技術的な問題は、粘着テープとガムで固定されたバックエンドのために優れたUX(ユーザーエクスペリエンス)をデザインしようとするUXデザイナーの課題となっており、そしてレガシーシステムには、製品チームにとって以下のような重要な課題がいくつかあります:  

  • 劣悪なパフォーマンス:フロントエンドのアプリケーションは、レガシーシステムへのAPI(アプリケーション・プログラミング・インターフェース)の呼び出しを待たなければいけない。
  • スケーラビリティの限界:レガシーシステムがイノベーションを阻害している。
  • お粗末なクロスプラットフォーム体験:モバイルバンキングアプリとデスクトップアプリケーションでできることが制限されている。
  • 予算の制約:レガシーバンキングシステムは高価である、つまり、UXやデジタル製品のイノベーションに回すことができる貴重なリソースを消費していることになる。
  • サイロと官僚主義:動きの速いFinTechスタートアップやテクノロジーを取り入れた金融機関との競争が難しくなる。
  • セキュリティ上の制約:レガシーシステムは攻撃に対して脆弱であり、それでさらに複雑さと制約が増す。

 

FinTechを成功に導く要因

  FinTech製品は、レガシーシステムを運用する組織と同じ問題を解決しますが、制約が少ないため、競争することができます。   ここでは、FinTechが数十年の経験と専門知識を持つ多国籍金融機関を凌ぐ方法をいくつかご紹介します。  

1. FinTechの動きは速い

  市場投入までのスピードは、FinTechの最大の強みの1つです。最新のテクノロジーや効率的なワークフローがあり、サイロや官僚主義がないため、FinTech製品チームはイノベーションを起こし、プロジェクトを速やかに提供することができるのです。  

また、FinTech企業はML(機械学習)、ブロックチェーン、AI(人工知能)などの新しい技術を自由に試して採用することができ、商品の品質と顧客満足度を大幅に上げることができます。

designops efficiency person

この効率性により、Robinhoodのようなアプリ優先の投資商品や、Monzo、Chime、Nubankなどのデジタルバンキング提供会社が成功を収めています。彼らは、絶えず革新を続ける洗練されたアプリケーションを通じて、顧客に同等の金融商品を提供しているのです。  

従来の金融機関は、市場投入が遅く、迅速で機敏なFinTech組織から常に2歩は遅れているため、競争に勝てないのです。  

2. ユーザー中心

  FinTech企業は、意思決定とイノベーションにおいて、ユーザー中心の考え方を採用しています。彼らは、最新のデジタルソフトウェア開発、特にUXデザイン思考に通じているため、従来の金融機関よりもユーザーのニーズがよくわかっています。

search observe user centered

このユーザー中心のアプローチにより、FinTech企業は顧客のニーズを優先し、期待に応えるコアとなるバンキング製品に集中することができ、より良い信頼、採択、定着を生み出すことができるのです。  

3. より良いデータ分析

  レガシーシステムの金融機関にとって、データの完全性と品質は重要な問題です。レガシーシステムは、全体的なリアルタイム分析を妨げ、それによって意思決定とイノベーションに遅れが出ます。  

一方、最新のFinTech企業では、高品質のリアルタイムでのエンドツーエンド分析により、問題や機会を特定することができます。

responsive screens

このような貴重なインサイトにより、ステークホルダーは、企業のビジョン、ロードマップ、顧客の期待に沿った賢明な意思決定を行えるのです。  

4. UXリサーチとユーザーテスト

  UXリサーチユーザーテストは、FinTech企業で採用されているユーザー中心のデザインの一面です。このような貴重なUXインサイトと質の高い分析を組み合わせることで、FinTech企業はより詳細で全体的な顧客のペルソナを手に入れることができます。  

このように顧客の行動を深く理解することで、FinTechのデザイナーは、独自のビジネスチャンスを特定しながら、ユーザーのニーズを満たす製品やサービスの優先順位を決めることができるのです。  

5. 機能横断的な製品開発

  うまくいっているFinTech企業の多くは、アジャイル環境機能横断的な製品開発チームを利用しています。このような現代のワークフローで、サイロの最小化やチームの調整、さらにエラー(UX負債技術的負債)の削減や、より速くて正確なプロジェクトデリバリの促進が実現されます。

designops increasing collaboration group

また、FinTech企業はリモートワーク環境に精通しており、グローバルな人材プールを活用し、より迅速に人材を確保することができます。  

従来の金融機関では、サイロ化が進み、規制要件や会社の方針により、人材の採用やチーム作りに時間がかかっていました。

レガシーシステムの現代化にデザイナーができること

1. 測定とレポート

  以下のような測定とレポートは、レガシーシステムの現代化には欠かせない要素です:

  • UX監査:レガシーシステムに関連するユーザビリティの問題を特定し、無策の年間コストを測定する。
  • カスタマージャーニーマッピングFinTech Magazineは、高速カスタマージャーニーの最適化を中心としたレガシーシステムの近代化に対する3つのステッからなるアプローチを推奨している。
  • ユーザーテストとUXリサーチ:テスト、インタビュー、リサーチを通じてユーザーを理解するために、より多くの時間をかける。
  • UX競合分析:競合他社について調べ、顧客がなぜその製品を選んだのかを学ぶ
  • サービスサファリ:チームメンバーに自社製品や競合他社製品を使用してもらい、ユーザー視点でのインサイトを得る。

  こういった方法論の使用は、最初のステップに過ぎません。デザインチームは、このようなインサイトを用いて、ステークホルダーに定量的なデータを提示する必要があります。以下に例を挙げましょう。

 レガシーシステムによるUXの低下がもたらすコストは、そして現代化によって期待できるリターンとは?  

Talabatの製品チームは、デザインシステムへの投資獲得ために戦ったとき、フロントエンドの負債にかかるコストを中心にビジネスケースを構築しました。チームは、デザインシステムを使う場合と使わない場合のUI開発にかかる時間を測定しました。その結果、Talabatのフロントエンドの負債が大幅に削減され、それによってステークホルダーを説得し、製品のデザインシステムへの投資を得ることができたのです。  

問題と解決策には、ビジネスケースをサポートするための数字が含まれていなければなりません。ステークホルダーは、以下のような評価するためのメトリクスやKPI(重要業績評価指標)を見たいのです。  

  • 問題の状態と規模
  • ソリューションが数値を改善する方法

2. デザイン思考を用いた効率的な優先順位付け

  デザイナーは、デザイン思考を使って、プロジェクトの優先順位決めやビジネス価値を最大化する機会の特定を行うことができます。望ましさ、実行可能性、実現可能性のバランスを見つけることは、長期的な成長と成功を持続させる革新的な製品のための効果的な研究手法です。  

  • 望ましさ:顧客にとって「要る」ものか「欲しい」ものか。人は「要る」がないと生きていけないから、そこにより価値がある
  • 実行可能性:会社にその余裕があるか、ビジネスとして成立しているか。
  • 実現可能性:構築のためのリソースがあるか?ビジネスに適しているか?そして、実現までにどれくらいの時間がかかるか?

  この三位一体の芯の部分を見つけることで、顧客ニーズを解決しながらビジネス価値を最大化することができます。成功には、組織全体がデザイン思考とUXの原則を受け入れなければならないのです。  

デザイン提唱デザイン思考のワークショップは、チームメンバーやステークホルダーの賛同を得、現代のユーザー中心的な考え方に舵を切るために非常に重要です。  

レガシーに制約のある機関がこうしたデザイン思考の原則を採用すれば、ユーザーやビジネスを犠牲にしてまで「古いやり方」を正当化するのは難しくなります。

3. 信頼できる唯一の情報源(Single source of truth)の作成

  レガシーシステムを含め、多くの組織がいまだにデザインシステムなしで運営されています。「現代的」なデジタル決済の大手であるPayPalでさえ、社内製品にデザインシステムを採用したのは2019年になってからだそうです!

design system components

デザインシステムは、組織全体で「信頼できる唯一の情報源(Single source of truth)」を確保することができます。製品開発ワークフローを効率化し、結束力と一貫性を最大限に高めることで、ユーザビリティの問題が軽減され、デザイナーはプロジェクトごとにコンポーネントを構築するのではなく、ユーザーの問題解決に集中することができます。  

信頼できる唯一の情報源(Single source of truth)では、企業の従来の課題を解決できませんが、動きの遅い金融機関にとって重大な問題である、ワークフローの最新化や、市場投入までの時間短縮のための一歩となります。  

UXPin MergeによるDX(デジタルトランスフォーメーション)

logo uxpin merge 1

UXPin Mergeは、レガシーシステムを現代化して市場投入までの時間を短縮するための優れたツールです。2019年にUXPin Mergeを採用した後、PayPalのプロダクトデザイナーは、以前より8倍速くUIを構築できるようになりました  

また、Merge は PayPal の開発プロセスに革命をもたらし、UX チームのメンバーを新たに雇うことなくデザイン出力を拡張しました。これは、予算の制約に苦しんでいる組織にとって重要な要素です!  

デザイン・開発の同期化

  PayPalのUXリードEPXであるエリカ・ライダー氏は、MicrosoftのFluent UIデザインシステムを選択しました。DSチームはカスタムコンポーネントとテンプレートを作成し、デザイナーは要素をドラッグ&ドロップするだけでUI(ユーザーインターフェース)を構築できるようにしました。彼女が言うように、”パチパチ留める “タイプのデザインです。

design and development collaboration process product communication 1

PayPalはMergeを使ってFluent UI ReactライブラリをUXPinと同期させたので、デザイナーはすべて同じコンポーネントを使えるようにしました。また、React のプロップを使って、デザイナーがUXPinのプロパティパネルで調整するスタイルとインタラクティビティの制約を設定しました。  

デザインハンドオフの効率化

  Mergeのデザインハンドオフはシームレスで、ほとんど存在しません。多くの組織が新製品や新機能をリリースする際に対処する混乱した状況とは大違いです。

デザイナーとプログラマーが同じコンポーネントライブラリを使うため、ほとんどのフロントエンド開発はコピー&ペーストとデザインに合わせたプロップの調整です。UXPinにはJSXのコードがあるので、デザイナーもそれをコピーできるのです!  

最小限のデザインとゼロからのコーディングにより、エラーや技術的負債、市場投入までの時間が削減され、連携とUXがよくなります。  

時代遅れのビジネスプロセスやレガシーシステムが、UXチームの競争力や顧客の期待に応える能力に影響を及ぼしていませんか?UXPin Merge を使って、製品開発ワークフローを強化し、より優れたUXを顧客に提供するための信頼できる唯一の情報源(Single source of truth)を作りましょう。詳細およびアクセス権のリクエスト方法については、Merge ページをぜひご覧ください  

デザインシステムを文書化する簡単な9ステップ

デザインシステムは、デザイン作業を最初から最後まで強化および管理するための完全な標準セットを提供しますが、機能的なデザインシステムを構築して維持するには、まずはきちんと時間と労力をかけないと、効果的に行きません。  

本記事では、デザインシステムの文書化について紐解いていき、デザインシステムにおける文書化の必要性を探り、効果的なデザインシステムの文書化基盤を構築するためのステップについて見ていきます。  

デザインシステムの文書化とは

  デザインシステムの文書化は、デザインチームが使用ガイドラインを組み合わせて提示するのをサポートするのに使える貴重なリソースであり、このようなルールを共有、利用、実行することもできます。これにより、デザイナーとデベロッパーは、より予測可能なUIを提供するための作業をモデル化することができるのです。  

本題に入る前に、デザインシステムの文書化とはどのようなものかを簡単にご説明します。  

一般的なデザインシステムは、UIデザイン要素やその他のコンポーネント、ワークフローを含むコンポーネントライブラリで構成されています。このように、デザインシステムは、パターンライブラリやスタイルガイドを統一し、一つのまとまったエクスペリエンスを提供するものです。  

Blink UX社のプリンシパルUXデザイナー兼パートナーであるハイディ・アドキソン氏によると、デザイン文書のバリエーションはさまざまですが、よりタスクに特化したタイプとしては、以下のようなものがあります:  

  • ユーザーストーリー:デザイナーのユーザーニーズの視点に基づいたアプローチを可能にする
  • 画面遷移図:ユーザーが画面間をどのように移動するかを示すのに最適
  • ユースケース:より長く、より客観的な物語を提供し、将来的に大きな利益をもたらす
  • ページレベルの文書:ページの機能、目的、およびデモの手順の概要についての説明
  • シナリオナレーション:具体的な作業の進め方を中心とした、説明的なナレーションの概要

  他にも、構造的な観点からの文書に関連するデザイン文書の種類で、以下のようなものがよくあります:

  • オブジェクトモデル:システムの構造的なビューの提供
  • アーキテクチャマップ: アプリやサイトが一般的にどのような構造になっているかを伝える
  • 標準化されたコンポーネント:システム全体で共有される標準化された要素についての説明
  • システム用語集:特定の単語、フレーズ、およびその他の関連するシステム固有の言語がリストアップされている
  • ナビゲーションフレームワーク :メニュー項目、ナビゲーション要素、および制御機構についての説明

デザインの文書化が必要な理由

  デザインの文書化は、今日、あらゆるデザインシステムにおいて不可欠な要素であり、コンテキストの提供からチームの調整作業の説明、システムのコンポーネント ライブラリの明確な記録の維持まで、コンポーネントの文書化はデザインを成功させるための基本になっています。  

デザインシステムの文書化は、かつて「重要でない」とされ、見過ごされがちでした。ステークホルダーは、デザインシステムの文書化の可能性に触れることもなく、文書がもたらす価値についてはさっぱりわかりませんでした。

  Googleのマテリアルデザインの登場後、デザイン文書が重要であることがすぐに明らかになりました。大体のデザイン文書は、無秩序なメモや箇条書きで構成されており、重要な情報のほとんどが抜け落ちていました。そこでマテリアルデザインはその状況を一変させ、必要な構造を追加し、文書化の必要性を保証してくれたのです。  

デザインシステムの文書化には、以下のように多くの利点があります:  

  • チームが同意するビジョンの提供:書面での技術的な指示ではなく、人に焦点を当てたデザイン文書を作成することで、チームが集中力を欠いたときに参照することができる明確なビジョンを設定できる。
  •  デザインシステムに明確で重要な構造を与える:プロセスの把握によって、デザイナーとデベロッパーは、アイデアや一般的な目的として存在するのではなく、目の前に提示された計画に頼ることができる。
  •  リソースの節約: 優れた高品質の文書のデザインインフラストラクチャは、コストのかかる試行錯誤のミスの削減や、チームの時間と労力の最適化、再利用可能なデザインパターン記録の後々の再現を可能にする。
  •  エンゲージメントと満足度の向上:大きなプロジェクトは、チームにとって大きな負担となることがあるが、効果的なデザイン文書を作成することで、困難な状況下でも信頼できる、現実的な目標が与えられる。
  •  効率と生産性の向上:チームが必要とするすべてのものが文書化され、利用可能になることで、全員が同じ見解を持ちながら、物事をより迅速に進めることができる。

  効果的なデザイン文書がなければ、製品のデザインと市場投入の成功はほぼ不可能です。デザインシステムの文書化は、特定デザイン決定の根拠を提供し、ユーザーがモデルを理解し、操作できるようにすることで、必要不可欠なものとなりました。  

デザインシステムの文書作成の9ステップ

1. エンドユーザーを理解する

  デザインシステムの文書化の第一歩は、このような作業を行う市場、つまりユーザーを見ることから始まります。ユーザーが何を求めているかがわからなければ、デザインの目標や結果を大きく誤る可能性があります。  

文書は「製品」であり、チームはその製品の「消費者」である、と分類して考えてください。誰がこのドキュメントを使うのか、彼らが求めているコンテキストを提供するには何が含まれる必要があるのか、どのように構成すれば消費しやすいのかに焦点を当てましょう。  

2. 各コンポーネントの文書化の必要性を概説する

  次に、各コンポーネントのニーズを網羅するアウトラインの確立が必要であり、以下のようなデザインのガイドラインを含める必要があります。  

  • パターン
  • コード・スニペット
  • 画像
  • フォント 
  • ADAコンプライアンスガイドラインなど

  コンポーネントの文書化は、他のデザイン要素との関連性を考慮した上で概要を検討する前に、何よりもまず組織のニーズを考慮する必要があります。

3. スタイルガイドを作る

スタイルガイドで、文書の視覚的プレゼンテーションの基礎を確立でき、デザインシステムのビジュアルとコンテンツ要素のガイドラインがもたらされます。スタイルガイドは、まず他のデザイン文書の要素を見て、色やロゴの目立ち方、全体の語調などを記述し、最終的には、他の人が使うためのテンプレートとしての役割を果たします。 

4. チームで共有できる再利用可能なテンプレートを作る

そして、チームで共有しながら何度も再利用できるような文書のテンプレートの作成が必要です。再利用可能な文書のテンプレートがあれば、チームの時間が節約され、一貫性を保ち、誰もが自分の見ているものを理解できるようになります。

5. 信頼できる唯一の情報源(Single source of truth)の開発

信頼できる唯一の情報源(Single source of truth)の確立、明確化および文書化は、おそらく製品デザインの最も重要な要素の1つであり、この普遍的に承認された合意は、デザインチームが作業するすべてのものの中心になります。アイコンや配色、文字の大きさやボタンなど、すべての人が「こうあるべき」と理解していれば、物事はよりスムーズに運びます。

UXPinなどのツールで作成したコンポーネントライブラリにある基本的なデザインコンポーネントから始めるか、Reactコンポーネントで起源を確定して開発段階から始めるか、どちらかです。例えば、UXPinでは、UXPin Mergeのデザインシステムのバージョン管理により、会社全体の一貫性を確保することができます。

プロジェクトに取り組む際に、チームがデザインするための信頼できる唯一の情報源(Single source of truth)を作り続けましょう。UXPin Mergeはデザインシステムのバージョン管理を提供し、それによって信頼できる唯一の情報源(Single source of truth)のデザインアプローチが最適化され、コード駆動型プロトタイプの管理ができます。UXPinのようなツールでは、作り込まれたオープンソースライブラリの利用や、Git、Storybook、NPMの統合による独自のデザインシステムのインポートができます。

6. スターターキットを同梱する

デザインキットは、見落とされがちな「優れたデザインシステムの文書化を構成する要素」ですが、こういった必要なリソースは、優れたUX(ユーザーエクスペリエンス)に不可欠な「出発点」の要素を表しています。スターターキットは、オンボーディングツールとして最適で、ステップバイステップのガイドラインから高度なユーザーマニュアルまで柔軟に対応します。 

7. フィードバックを集める

フィードバックで、デザインシステムがうまく機能している時と、そうでないときを知ることができます。例えば、フィードバックを集める仕組みをGitHubの課題に限定している組織がありますが、これは、デザイナーや技術的な専門性の低いロールプレイヤーが意見を述べにくくなってしまいます。

文書化サイトのフィードバックボックスのようなフィードバックの代替収集手段だと、ユーザーが問題を記述して送信することができます。GitHub の問題を開く必要がない効率的なフィードバックチャネルにより、フィードバックが必要な場合は、文書化プラットフォームを通じて、速やかにに行うことができます。

8. 責任を分散させる

文書化は、ボランティアでやってくれる人がいつでもいるとは限らない、手間のかかる作業ですが、その重要性をチームに伝えることで、文書を作成することの価値を理解してもらうことができます。一人に負担をかけるのではなく、チーム内で分担することを検討しましょう。そうすれば、さまざまな気づきが得られるだけでなく、タスクも達成しやすくなります。

9. 定期的に更新する

デザインシステムは、メンテナンスされ、清潔に保たれ、適切である必要があります。潜在的な問題領域の特定や矛盾の削減、有効なシステムの数の効率化に継続的に注意しましょう。

いい例として、文書化サイトやデザインシステムのコンポーネントに対して、Reactストーリーのコード例を「信頼できる唯一の情報源(Single source of truth)」として確立し、定期的に更新して、互いの整合性を確保するというのがあります。

また、UXPinには定期的なアップデート機能備わっており、デザインシステムからマスターコンポーネントを変更した場合、システム内ですぐに更新することができ、すべてが完全に整合された状態を維持することができます。  

デザインシステムでプロトタイプを作ろう

  健全なデザインシステムは、コンポーネントライブラリを充実させ、信頼できる唯一の情報源(Single source of truth)を中心に展開する、明確で曖昧さのないコンポーネント文書によるサポートが必要です。  

一般的ないいプラクティスのルールとして、文書が全てです。文書によって進捗状況、マイルストーン、勝ち負けの追跡、過去に遡っての見直し及び学習ができ、そして何より、人はデザインシステムそのものを理解し、それに従うことができるようになります。  

デザイン システムの実装の確認が必要ですか?Mergeテクノロジーを搭載したUXPinでは、デザインシステムのUIコンポーネントをプロトタイプで使えます。UXPinにインポートし、デザインエディターでドラッグ&ドロップして、完成品のような一貫性のあるプロトタイプを作成しましょう。 UXPin Mergeについてもっと読む。  

効果的なオンボーディングのための7つのヒント

7 Tips to Help You with Effective User Onboarding

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に関しては重要です。自身に以下のような質問を投げかけてみてください:

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

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

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

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

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

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

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

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

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

search observe user centered

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

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

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

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

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

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

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

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

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

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

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

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

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

testing user behavior prototype interaction

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

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

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

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

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

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

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

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

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

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

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

designops picking tools options

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

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

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

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

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

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

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

color id brand design

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

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

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

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

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

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

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

UXデザイナーのための生産性向上7つのヒント

productivity hacks for ux designers

プロジェクトの納期が厳しいUX担当者やプロダクトマネージャーにとって、生産性の最大化は極めて重要です。また、スタートアップ企業や小規模なチームでは、限られたリソースを最大限に活用するために、UXの生産性向上のヒントが求められています。  

先延ばしに悩んでいる人も、UXデザイナーとしての価値を高めたい人も、本記事でUXチームの生産性を最適化するための実践的なアドバイスをご紹介しましょう。  

世界最先端のデザインツールで、UXワークフロの効率化をしませんか。コンポーネント駆動型プロトタイピングをお試しになり、今すぐ生産性を 10 倍にしましょう。Merge があなたとチームに何ができるかをぜひご覧ください。詳細はこちら  

「UXデザイナーとして生産性を高める」とは

  UXデザイナーとして生産的であることは、アウトプットを効率的に最大化するということです。この言葉はどんな職業にも当てはまりますが、UXデザイナーとDesignOps実践者にとっては、デザインの価値を実証しなければならないことが多いので、不可欠な言葉です。

  UXの生産性が意味するものの例として、以下のようなものがあります:  

  • 締切厳守
  • デザイン投資に対するプラスのROIの実現
  • ゼロからのデザインを最小限に抑え、ユーザーの問題解決にかける時間を最大化するための解決策を見出す。
  • UXワークフローとデザインプロセスを最適化するツールの活用
  • 組織内で顧客を代表し、UXを提唱する
  • オンボーディングにかける時間を短縮するためのシステム導入
  • デザインスプリントやブレーンストーミングのセッションを効果的に活用し、大きな問題を速やかに解決する。
  • 部門を超えた連携のためのチャンネルを作り、アウトプットを最大化し、エラー、ドリフト、再作業を最小化する。

忙しさと生産性

  悲しいことに、私たちの生活には多くの雑念がつきまといますが、その「雑念」は、メールや無意味なZoomコール、Slackなど、仕事のように思えてしまい、そのような雑念に没頭しても、一日中何もできていないことになり、忙しいのに生産的ではありません  

生産性とは、目標達成に近づける成果を出すことであり、生産性の高いUXデザイナーは、組織がUX戦略製品ロードマップのビジョンを達成できるようサポートするのです。

UI/UXデザインの生産性向上のヒント7選

この生産性向上のヒントの中には、UI/UXデザイナーに当てはまるものもあれば、より一般的でどんな職業にも適用できるものもあります。  

1. イチから始めるのを避ける

  UXデザイナーの仕事は、きれいなUIを作ることだと誤解されていますが、UXデザインは、「ビジュアルデザイン」というよりも、人間の問題を解決する「UX(ユーザーエクスペリエンス)デザイン」なのです  。

UXデザイナーがコンポーネントやユーザーインターフェースを一から作るのに時間をかけると、デザイン関連の仕事をしているにもかかわらず、生産性が落ちてしまいます。

design system library components

そこで、デザインシステムを使うとデザインを一からする必要がなくなるため、デザイナーはUXとユーザーニーズに集中でき、デザインの効率性とUXの生産性を上げることができます。多くのオープンソースのコンポーネントライブラリがあり、組織でカスタマイズしたり、デザインシステムを一から構築することができます。  

UXPinにはデザインライブラリが内蔵されており、デザイナーはユーザーテスト済みのコンポーネントやデザインパターンを使って画面やレイアウトを構築することができます。これらのコンポーネントを製品/ブランドの要件に合わせてカスタマイズし、UXPinのデザインシステムに保存すると、ライブラリの共有、権限の設定、ドキュメントの作成が可能になります。  

2. コンポーネント駆動型プロトタイプ

  コンポーネント駆動型プロトタイプは、デザインシステムを採用する次のイテレーションです。デザイナーは、レポジトリにある既製のインタラクティブなコンポーネントを使ってUIをデザインしますが、そのUI要素には、デザインシステムで設定された色、タイポグラフィー、スペーシングなどのスタイリングと制約が含まれているため、デザイナーはドラッグ&ドロップするだけで製品や機能を構築することができます。  

このようなインタラクティブなコンポーネントにより、デザインチームは最終製品の正確なレプリカを作成することができ、ユーザビリティ担当者やステークホルダーは、ダイナミックで没入感のあるプロトタイプとのインタラクションが実現します。この高度なプロトタイプは、UXデザイナーがプロジェクトの成果を最大化するために使える有意義なフィードバックと実行可能なインサイトをもたらします。

uxpin merge component responsive

PayPalIressTeamPasswordなどの企業は、UXPin Mergeを使ってレポジトリのコンポーネントをUXPinのデザインエディタに同期させ、組織全体で「信頼できる唯一の情報源(Single source of truth)」を作成しています。   ちなみに、Mergeとコンポーネント駆動型のプロトタイピングにより、PayPalの生産性は大幅に向上し、製品デザイナーはUIを以前より8倍速く構築できるようになりました。  

3. ワークフローのコントロール

  Amazon Alexa Smart HomeのシニアUXデザイナーであるオムカール・チャンドガドカール氏は、チームの計画性と生産性を最大化するために、デザインオファリングのフレームワークを作成しました。

 彼のチームは、次のステップの速やかな特定やリソースの割り当て、および作業の開始のために、このフレームワークをプロジェクトのインテイクとバックログに適用しています。そしてこのフレームワークには以下の3つの製品で構成されています:  

  • 水平線クラスプロジェクト:今後X年間の製品ビジョンの作成と実行(長期プロジェクト)
  • 山クラスプロジェクト:12ヶ月以内に発売するエンド・ツー・エンドのデザインプロジェクト(中期プロジェクト)
  • 平野クラスプロジェクト:UXの最適化、ユーザビリティの問題点の修正(短期プロジェクト)

  デザイン提供のフレームワークをはっきりと定めることで、UXチームは以下のように生産性を最大化することができます:  

  • プロジェクト受入時の電話や会議の削減
  • プロジェクトのロードマップ作成(Trello、Asana、Airtable、Notionなどの製品管理ツールの共有)
  • リソースの事前割り当て
  • 新たな人材や契約社員の雇用など、リソースの問題の早期特定とその準備
  • ユーザビリティに関する問題解決専門の「プレインズプロジェクトチーム」のような専門チームの設置

4. DesginOps思考

DesignOpsを導入することで業務効率が上がり、結果的にUXの生産性が上がります。また、DesignOps思考で、デザイナーが一緒になってインパクトのあることを成し遂げる事ができるようになります。

多くの人はDesignOpsを「企業のUXソリューション」として見ていますが、スタートアップや中小企業でもその考え方や原則を適用することができます。DesignOpsは、デザイン関連のタスクのための標準化されたツール、テンプレート、ワークフロー、およびポリシーに関するものですが、全員が同じプロトコルに従うことで、UXチームは連携、一貫性、生産性、および品質の成果を上げることができるのです。

designops increasing collaboration group

DesignOps戦略に関するこの記事では、DesignOpsの成熟度の4つのステージが紹介されています。最初(第0ステージ)、大体スタートアップや小規模なチームでは責任者がいませんが、UXチームには生産性を最大化するためのツールやプロセスがあります。  

第3ステージまでには、DesignOpsチームとして、DesignOpsリーダーとDPMが業務プロセスを管理・最適化する体制が確立されます。   DesignOpsは、UXチームからオペレーション業務を取り除き、UXと問題解決に集中することで、デザインの有効性と生産性を最大限に高めることを最終的な目標としています。  

5. 技術協力

  DesignOpsの役割のひとつは、デザインチームと部門を跨いだ連携の促進です。デザイナーにこのような運用の仕組みがなくても、連絡と連携のためのチャンネルを作ることは、UXの生産性向上のために必要不可欠です。  

design and development collaboration process product 1

デザイナーとエンジニアのチームは、異なるツールや制約の中でプロジェクトを遂行するために協力しなければならないことから、連携は非常に重要です。この部門間の協力が不十分だと、デザインドリフト、摩擦、UX負債/技術負債、混沌としたデザインのハンドオフ、プロジェクトの遅延など、さまざまな問題が発生します。  

デザイナーとエンジニアの連携を高める努力は、以下のようなポジティブな結果しか生まないのです:

6. 深堀り

  キャル・ニューポート氏は、著書『Deep Work』の中で、雑念のない仕事のセッションの重要性について概説しています。「ディープワーク」とは、外界を遮断して、タスクやプロジェクトの完了に集中するプラクティスのことです。

キャルは、歴史上最も成功した人々がディープワークを使っている例をいくつか挙げています。技術系では、マイクロソフトの創業者であるビル・ゲイツが最も有名な例です。ビルは定期的に7日間の研究休暇(彼の「思考週間」)をとり、本や研究資料を持って小屋にこもり、アイデアについて考え、問題を解決しているのだそうです。  

山小屋での保養は、誰でもできる贅沢ではありませんが、UXデザイナーには、より深く、より良い結果を得るためにできることが以下のようにあります:  

  • シャットアウト:仕事の合間に、チームメンバー、家族、SNSやすべてのデジタルコミュニケーションから完全に切り離す時間を90~180分ほど持ちましょう。
  • 計画:インターネットとその多くの雑念を避けるために、各セッションの前に必要な研究を集めるようにしましょう。このように計画を立てることで、資料を探す無駄な時間が減り、目の前のタスクに最大限に集中することができます。
  • 優先順位付け:各セッションの目標を設定し、「やることリスト」を作りましょう。キャルは、自らのお尻に火を付けて物事を成し遂げようとすべく、高い目標を設定することを勧めています。

  また、彼は、プライベートでも「ヒマ」の重要性を強調しています。例えば、行列に並んでいるときや、ゆっくりした時間を過ごしているとき、とりあえず本能的に、SNSやその他のニュースフィードをチェックするためにスマホに手を伸ばしてしまいますが、この衝動と戦うことで、ディープワークのセッションでより集中できるように脳を鍛えることができるのです。  

7. 職場環境の最適化

  神経科学者であり、スタンフォード大学医学部神経生物学教室の教授でもあるアンドリュー・ヒューベルマン氏は、「科学的根拠に基づいた優れた生産性のヒントとワークスペースの最適化」を提案しています。   ここでは、彼によるお役立ち記事「5 Science-Based Steps to Improve Your Workspace」の要約を紹介します:  

  • 立ち座り:30分ごとに「立つ」と「座る」を切り替えると、”首や肩、背中の痛みが軽減され、さらに運動の良い効果をいくつか増強することができる “と言われています。
  • 正しいタイミングを計る:アンドリューは、1日のうちで身体が通過する3つのフェーズについて概説しています。その時間帯にどのような仕事をするかを計画することで、パフォーマンスと生産性に大きな影響を与えることができます。
  • 画面の配置:画面が真正面か少し高い位置にあるようにすると、覚醒度が上がり、常に下を向いていると、「落ち着きや眠気に関係するニューロンが活性化」されて集中力が下がります。
  • :ホワイトノイズ、ピンクノイズ、ブラウンノイズは、45分のセッションで集中力が高まります。ヘッドホンを使ってのバイノーラル・ビートは、”創造性を含む認知のある側面を高め、不安を軽減する可能性がある “という点でも効果的です。
  • 作業環境:特定の種類の作業には、さまざまなスペースが最適です。「部屋、建物、屋内または屋外など、さまざまな場所を使って、特定の脳の状態と彼らが好む作業の種類にアクセスできるようにすることを検討しましょう

  アンドリューのポッドキャスト「ヒューバーマンラボ」には、脳の働きや、パフォーマンス、集中力、生産性の最適化に関する素晴らしいインサイトが盛りだくさんです。  

UXPin-UXデザイナーのための究極の生産性向上のヒント

UXPinの高度なデザインおよびプロトタイピングツールにより、デザインチームは最終製品のような外観と感触を持つ忠実度の高いプロトタイプを作成することができます。  

より良いプロトタイプは、ユーザビリティテストやステークホルダーからの有意義なフィードバックにつながり、高品質のデザインプロジェクトの成果物や市場投入までの時間の短縮につながります。

UXPinの高度なプロトタイピングで、製品開発のワークフローに革命を起こしませんか。プロトタイピングに再利用可能なコンポーネントを導入し、インタラクティブなHi-Fiデザインをこれまで以上に速く構築しましょう。それこそデザイナーとして実行できる最高の生産性のヒントです。UXPin Mergeについてもっと読む。

ユーザーレビューでより良いUIデザインができるためには

user reviews

製品の進化と成長には、「ユーザーレビュー」と「フィードバック」が欠かせません。このフィードバックを使って、組織は製品の問題修正や、UX(ユーザーエクスペリエンス)の改善ができ、成長および収益のための新たな機会の特定もできるのです。  

というわけで、本記事では、デザインチームが問題解決や製品改良のために顧客からのフィードバックを活用する方法についてお話します。また、とあるビジネスが、ユーザーとの対話だけで、10年足らずで顧客ゼロから10億ドルのユニコーン企業になった例もご紹介します。  

  UXPinの高度なプロトタイピングで、製品のUXを向上させ、有意義なフィードバックを得ませんか?無料トライアルにサインアップして、顧客が共有したくなるような素晴らしいエクスペリエンスのデザインを始めましょう!  

ユーザーレビューが重要な理由

  製品分析は、デザインの問題点や成功例の特定に不可欠ですが、その問題の原因や成功の理由についてまではわかりません。この定量的なデータは、ユーザーを分析する上で非常に重要ですが、ユーザーが何を考え、何を感じているかはわからないのです。

多くの見込み客を獲得し、高いコンバージョン率を誇っていても、顧客がUXに満足していなければ、顧客の維持は難しく、もっといいオファーを出す最初の競合他社に乗り換えてしまうでしょう。  

そこで、ユーザーレビューやフィードバックで、デザインチームが顧客の感情を理解し、分析ではわからない問題や成功を特定するのです。  

ケーススタディ – Coinbaseのユーザーレビューの成功例

  2022年7月に放送されたポッドキャストで、Coinbase創業者兼CEOのブライアン・アームストロング氏は、顧客からのフィードバックを元に、当時のスタートアップのビジネスモデルを変え、アプリを通じてビットコインを購入する機能を追加したことを語っています。  

「Y-Combinatorでは、”顧客と対話し、製品を証明し、製品や市場の適合性を見つけよ “とよく言われます」。サインアップしたものの、一度もCoinbaseを利用しなかったある顧客との電話で、ブライアンは、ビットコインを持っていない人にはこの製品は何の役にも立たないことを知りました。当時、ビットコインを買うのは大変なことで、Coinbaseのウォレットに暗号を追加する方法がわからなかったのです。  

彼が顧客に、「もしそこ(アプリ)にビットコインの購入ボタンが設置されたら、あなたはそれを使ったでしょうか?」と尋ねたところ、顧客は、「そうですね、そうかもしれないですね。 」と答えました。  

そこでウォレットにビットコインの購入ボタンを追加した後、コインベースは驚異的な成長を遂げ、今では世界中で5000人以上の従業員を雇用する数十億ドル規模の企業に成長しました。ブライアンが顧客と対話し、彼らのニーズや製品への思いを理解したことが、この成功のきっかけですね。  

ユーザーとチャットする前は、ブライアンにはお金を払ってくれる顧客がおらず、Coinbaseには何の儲けもなかったことから、彼は自分の製品に疑問を持ち、これを続けるべきか迷いました。もし彼が、”身の製品がうまくいっていない”という事実しかわからない分析にしか頼っていなかったら、Coinbaseは存在しなかったでしょう!

人々が望む製品や機能を提供するには、客と関わり、ユーザーのレビューやフィードバックに対応することが不可欠なのです。

 

 

ユーザーレビューが見つかる場所

製品チームが顧客のフィードバックを集める方法は数多くありますが、ここでは、最も一般的な方法をいくつかご紹介します:

  1. 製品またはウェブサイトのウィジェット
  2. サポートチケットやチャット
  3. 顧客への質問
  4. アンケート
  5. SNS(レビュー、ハッシュタグなど)
  6. アプリストアとレビューサイト
  7. フォーラムとコミュニティ

1. 製品またはウェブサイトのウィジェット

ツールの中には、顧客のフィードバックを集めるために、ウェブサイトやアプリケーションにウィジェットを配置できるのもあります。例えば、HotjarのFeedbackウィジェットでは、ユーザーが自分の体験を評価し、特定のUI要素やコンテンツについてコメントすることができます。

search observe user centered

このようなフィードバックツールには、以下のような複数のUXのメトリクスに対するフィードバックを収めるためのウィジェットがあります:  

  • NPS(ネットプロモータースコア):その製品を薦める可能性を1~10で評価する。
  • CSAT(顧客満足度):顧客が製品や機能に満足しているかどうかを示す2択(「はい」か「いいえ」)の質問。
  • CES(顧客努力指標):タスクを完了するのがどれくらい難しいかを顧客に尋ね、通常は 1 ~ 10 のスケールで表示される。
  • SUS(システムユーザビリティスケール):UXデザイナーがデジタル製品のユーザビリティを総合的に判断するための質問項目10問。

2. サポートチケットとチャット

  サポートチケットやチャットの追跡は、例えば、顧客が特定の機能を見つけられないとか、タスクの完了方法がわからないなどの傾向を特定するのにとてもいいフィードバックソースとなります。  

UXデザイナーは、このフィードバックを元にさらにテストを重ねて問題の特定や修正ができ、UXベンチマークは、再デザインによって問題が解決されたかどうか、つまりサポートチケットを減らすことができたかどうかが分かることから、このような修正において非常に重要です。  

3. 顧客への質問

  Coinbaseの例で見たように、顧客に質問をすることは、ユーザー体験と成長のために不可欠であり、顧客に理由を聞くことで、製品が満たしていないニーズや期待を理解することができます。

team collaboration talk communication ideas messsages

例えば、顧客のアカウント閉鎖やプランのダウングレードの理由を聞くことが、製品の改善につながるかもしれません。このような顧客をメーリングリストに登録し、不足していた機能をリリースする際に、再度獲得するようにするのもいいでしょう。

4. アンケート

  アンケートは、顧客が何を好み何を嫌っているかを知るための優れたリソースであり、UXデザイナーは、UX調査の枠を超えて、セールス、マーケティング、カスタマーサポートなど他の部門からインサイトを集め、あらゆるタッチポイントでの顧客体験の理解が必要です。  

5. SNS

  SNSは、ユーザーレビューの発見やブランド感情の理解、顧客とのエンゲージメントには素晴らしい場所です。SNS担当者は、ユーザーの評価だけでなく、Twitter、Facebook、Instagramを利用して、ブランドに関連するキーワード、ハッシュタグ、投稿を検索し、製品に関する顧客の声を知るのもいいでしょう。  

またSNSは、競合他社に対する顧客の意見を調査し、チャンスを見極め、失敗を回避するための優れたリソースでもあります。  

6. アプリストアとレビューサイト

  製品のアプリストアや、Trustpilot、Yelp、TripAdvisorなどのレビューサイトには、実際のエンドユーザーからのフィードバックが掲載されています。星評価やキーワードでフィルタリングし、特定の問題や顧客感情を掘り下げることができます。  

また、返信の際にカスタマーサポートのメールアドレスを記入することで、ユーザーと関わり、体験談を詳しく聞くことができます。  

7. フォーラムとコミュニティ

  業界や製品のフォーラムやコミュニティは、問題やビジネスチャンスの特定に適しており、ユーザーは、質問やヘルプを求めるためにこういったプラットフォームを訪れることがよくあります。  

ブランドのコミュニティ・フォーラムを作ることで、顧客との関わりや、賛成票による機能リリースの優先順位の決定が実現できます。また、顧客はこのプラットフォームを利用して、バグの報告や、新しい機能のリクエストもすることができます。  

ユーザーレビューでどのように良くなるのか

  ユーザーレビューは、チームがそれを使って行動を起こす場合にのみ有益です。以下に、カスタマーレビューがUXを導くための方法をいくつかご紹介します:  

  • ユーザー中心のデザイン:レビューによって、UXデザイナーはユーザーの視点から製品を見ることができ、より共感できるようになる。
  • パフォーマンスの分析:企業は、たとえば、「機能リリース後に否定的なレビューがなくなれば、それは新しいデザインによって問題が解決されたということになる」というように、レビューをモニタリングしてパフォーマンスを評価することができる。
  • UXの最適化:フィードバックとレビューにより、デザイナーは製品のUX(ユーザーエクスペリエンス)を最適化するための微調整を行い、顧客の維持と新規顧客の獲得につなげることができる。
  • UXベンチマーキング:組織は、製品や競合他社のレビューを利用して、UXのベンチマークと製品目標を設定することができる。
  • チャーンの減少:ユーザーレビューとフィードバックをモニタリングすることで、デザインチームは、ビジネス損失につながる前に問題を特定し、対応することができる。
  • 紹介を増やす:顧客からの紹介は、低コストで優れた見込み客となり、NPSとCSATのスコアを上げることで、顧客が製品をシェアする可能性が高まる。

ネガティブなレビューとポジティブなレビュー:どれを使うか?

  チームは、以下の理由からネガティブレビューとポジティブレビューに等しく注意を払わなければいけません:  

  • ネガティブなレビュー:顧客が不満を持つ理由とその解決策がわかる
  • ポジティブなレビュー:顧客が製品やブランドを好きな理由がわかる

​​ このようなレビューを分析することで、機能や修正の優先順位を決めることもできます。例えば、特定の機能に対して圧倒的に否定的なレビューが多い場合、新しいものをリリースする前にその修正に注力するのがベストでしょう。  

また、競合他社のネガティブレビューやポジティブレビューを分析することで、機能の改善や同じような失敗を避けることができます。  

ユーザーレビューツール8選

  ここでは、よく利用されるユーザーレビューとフィードバックツールをいくつかご紹介します:  

  1. Hotjar:フィードバックとアンケート
  2. Lucky Orange:ライブチャット、フォーム解析、アンケート
  3. Crazy Egg:ウェブサイト/製品の最適化、アンケート、エラー追跡など
  4. FullStory:フラストレーション・シグナルとジャーニー・マッピングによるUX最適化
  5. VWO 高度なユーザー追跡とA/Bテストテンプレート
  6. Survicate:複数の統合機能を持つ顧客調査
  7. CustomerGauge:ユーザーとアカウントレベルのエンタープライズフィードバックツール
  8. SurveySparrow:アンケート、NPSソフトウェア、チャットボット、アセスメントによるエンタープライズオムニチャネルエクスペリエンスの管理

UXPinによるUXの最適化

問題や機会が特定されたら、正しい解決策を見出すのにアイデアや仮説の検証は不可欠ですが、UXPinがあれば、デザインチームは最終的な製品体験を正確に再現する高度なプロトタイプを構築できます。  

このようなプロトタイプを使って、ユーザーテストの改善や、ステークホルダーからの有意義なフィードバックを得ることができます。ユーザーは、コード プロトタイプの場合と同じようにUXPin プロトタイプを使って操作できるため、機能が何をするのかを「想像する」必要がなくなります。

collaboration team prototyping

そうするとデザイナーは、ユーザー サインアップフローやECのお会計、パスワード検証、および従来の画像ベースのデザインツールでは再現できないその他のエクスペリエンスを機能させることによって、動的なエクスペリエンスを作成することができます。

デザイナーは、ユーザーからのフィードバックに基づいたプロトタイプの作成や、UIのテストや問題の特定を行うことができ、競合製品のプロトタイプを作成することで、競合製品との比較を行い、改善の機会を特定することができます。  

UXPinのコードベースのデザインソリューションで、UXワークフローを最適化し、製品のUXをぜひ上げましょう。無料トライアルにサインアップして、世界最先端のデザインツールであるUXPinを使ったプロトタイピングとテストの改善をぜひご体験下さい。

ウェブアクセシビリティ – 8つの重要なベストプラクティス

アクセシビリティ

アクセシビリティのためのデザインは、現代のWebやアプリのデザインにおいて非常に重要な部分であり、デザイナーは、UXとアクセシビリティのベストプラクティスを組み合わせて、インクルーシブなUX(ユーザーエクスペリエンス)を構築しなければいけません。   そこで本記事では、 ウェブアクセシビリティ について、その重要性と、デザイナーがワークフローに適用できる8つの重要なベストプラクティスについてお話します。  

 UXPinのアクセシビリティ機能内蔵とは、色覚異常やコントラストのテストを行うための追加ツールがデザイナーには必要ないということです。A、AA、AAAなどのWC3ガイドラインに準拠しながら、UXPinを離れることなく生産性を上げましょう。ぜひ今すぐ無料トライアルにお申し込みください。  

ウェブアクセシビリティ とは

ウェブアクセシビリティと は、デザイナーやエンジニアが、弱視、色盲、視覚障がい、認知障がい、聴覚障がい、移動障がいなどのハンディキャップを持つユーザーに対応した体験を構築するための、一連のガイドラインのことです。

W3C(ワールドワイド・ウェブ・コンソーシアム)は、世界中の政府機関と協力して、ウェブアクセシビリティ方針をまとめており、これらをガイドラインとして扱う国もあれば、アメリカ、イスラエル、カナダ、イギリスなどのように、法律によって特定のアクセシビリティポリシーを要求する国もあります。  

アクセシビリティ に関する課題の種類

ここでは、ユーザビリティとアクセシビリティを両立させるためにデザイナーが考慮すべきアクセシビリティの課題の一覧を挙げますが、アクセシビリティは、必ずしも身体的または精神的な課題を指すわけではありません。

search observe user centered

W3Cのガイドラインでは、インターネットの速度が遅い、片手しか空いてない親など、特定のユーザーやグループを排除する状況や環境も考慮されています。

  • 視覚
  • 聴覚障がい
  • 環境問題
  • 移動性障がい
  • てんかんのリスク
  • 認知・学習障がい
  • 偶発的または状況的な状況

アクセシビリティ が重要な理由

アクセシビリティについて考えるとき、我々はハンディキャップについて考えがちですが、必ずしもそうとは限りません。現に上記のリストは、デザイナーやエンジニアがアクセシビリティを十分に考慮しないと、世界人口の大部分が取り残されることを概説しています。  

アクセシビリティを考慮したデザインを行うことで、ウェブサイトやデジタル製品を誰もが使いやすいものにすることができます。例えば、ビデオにキャプションを付けると、耳の不自由なユーザーは物語を追いやすくなり、同時に、音声のないビデオコンテンツをユーザーが吸収することもできます。  

アクセシブルなデザインは、誰もが「自分が受け入れられている」と感じる点で最も重要です。そのためにデザイナーは、さまざまなタイプのユーザーに共感し、ウェブサイトや製品がどのように彼らを疎外しているかの理解が必要です。  

例えば、視力障がい者の学生が学校の課題について調べようとしたとき、ウィキペディアを含むほぼすべてのウェブサイトが支援機器に対応しておらず、ウェブページの移動を妨げる複数の「壁」があるとします。  

みんなと同じように情報にアクセスできないもどかしさを想像してください。あなたの人生を変えるかもしれない情報にですよ!  

ユーザビリティと アクセシビリティ – すべてのユーザーに向けた体験を作る

  我々は、ユーザビリティとアクセシビリティがどのように交差し、”すべてのユーザーにとってより優れたユーザー体験 “を生み出すかを示す、システムソフト社のこのベン図をオススメします。

accessibility website

このバランスを実現するために、デザイナーはUXの原則を超えて、以下のようなよりインクルーシブなUXの実現が必要です:

  • W3C標準の適用:アクセシビリティチェックリストを使って、製品やWebサイトに応じて、デザインがレベルA、AA、AAAに関連するガイドラインを満たしていることを確認する。
  • 支援技術のためのデザイン:Webサイトや製品は、キーボード操作や支援技術に対して、同等のUXを提供しているか。
  • コンテンツへのアクセス:支援技術を含め、誰でもコンテンツにアクセスし、消化することがでるか?また、UXは同等か?

  この3つの原則をプロジェクトに適用することで、デザイナーはユーザビリティを超えた発想で、より幅広いユーザー層に対応することができるのです。  

UXを改善する8つのウェブサイトアクセシビリティのベストプラクティス

以下で、109ページに及ぶ無料のeBook『The Essential Elements of Successful UX Design』から、8つのベストプラクティスをご紹介します。  

1. 基本的なことを完璧に実行する

  アクセシビリティの実践の多くは、UXの原則とUIデザインの基本を実行しており、明確で論理的なデザインやナビゲーション、およびアーキテクチャは、誰にとっても有益です。

accessibility

このような基本を無視したデザインは、ユーザビリティやアクセシビリティの問題を引き起こし、ハンディキャップがあるユーザーにとって大きな障害となります。

2. ウェブデザインにおけるキーボードナビゲーションを可能にする

  ハンディキャップある方を含め、多くのユーザーはキーボードによる操作を好むことから、ショートカットや論理的なキーボードナビゲーションが提供されれば、より多くのユーザーがウェブサイトを体験できるようになります。  

キーボードナビゲーションは、ユーザーがウェブページを「タブ」で操作できるようにするだけのものではありません。ウィキペディアの「キーボードショートカットの表」には、ウェブサイトをキーボードで操作できるようにするための包括的なリストが掲載されています。  

3. テキストの明瞭性を優先する

  読みやすさは、ハンディキャップのあるユーザーやスクリーンリーダーにとって最大の課題の1つです。コンテンツを吸収できない人は、他のユーザーに対して、特に重要なコミュニティやサポート、政府関連の情報では不利になります。  

そこでデザイナーは、誰もがテキストコンテンツを読んで理解できるように、読みやすさ(文字の明瞭さ)と可読性(テキストブロックの明瞭さ)を確実に上げなければいけません。以下は、文字を明瞭にするための簡単な4つのデザインテクニックになります:  

  1. W3Cでは、テキストと背景の最小コントラスト比を「4:5:1」としており、大きなフォントや太いフォントの場合は、「3:1」の比率が許容される。
  2. 本文のテキストは最低でも16ピクセルを使う。
  3. 行間はフォントサイズの1.5倍または150%以上とする。
  4. CSSで固定ピクセルではなく、em、rem、%などのアダプティブ/レスポンシブ・フォント・サイジングを使う。

4. 色だけに頼らない

  世界人口の約4.5%(3億5千万人)に色覚異常があり、そのうち男性の方が圧倒的に多く、12人に1人(8%)の割合でいると言われています。  

デザイナーが色を使う場合、色覚異常のユーザーがコンテンツを区別できるように、2つ目のインジケータを含める必要があります。例えば、多くのメッセージの状態では、【エラー】、【警告】、【完了】など、異なるタイプのアイコンと色を使っています。

accessibility contrast wcag

コントラストも、ユーザーに影響を与える色の問題です。特に高齢者や視覚障がい者は、色のコントラストが苦手な人が多く、それで文字を読むのが難しく、例えば青地に黒文字の場合はほとんど読めません。  

デザイナーは、常にアクセシビリティツールを使ってこのような色の問題をチェックする必要があります。UXPinには、色覚異常シミュレーターコントラストチェッカーなどのアクセシビリティ機能を内蔵されているので、デザイナーはキャンバスを離れることなくその場で作品をチェックすることができます。ぜひ無料トライアルにごサインアップしてUXPinに組み込まれたアクセシビリティやその他の高度な機能をお試しください。  

5. HTMLコンテンツは適切に配置する

  大抵のユーザーは、ウェブページを見渡して必要なものを見つけることができますが、スクリーン・リーダーはすべての要素を読み取る必要があります。不適切なHTMLの使用、ラベル付けの欠如などは、スクリーン・リーダーの使用感を悪くすることにつながります。  

デザイナーは、エンジニアと協力してコンテンツを適切に構成し、”障害物 “に対する迂回路を提供する必要があります。たとえば、ヘッダーナビゲーションなどの繰り返されるリンクやコンテンツをスキップする仕組みを提供したり、コンテンツをヘッダータグで区切ったり、目次を含めたりすると、スクリーンリーダーがウェブページをより速く読み、ナビゲートできるようになります。  

6. リンクテキストを明示する

  スクリーンリーダーのユーザーは、ページ上のすべてのリンクをリストアップして、次に移動する場所を決めることができます。しかし、この機能は、テキストに「ここをクリック」や「もっと詳しく」としか書かれていない場合、そのリンクがどこに行くのかを文脈から知ることは不可能であることから、意味がありません。  

また、スクリーン・リーダーが文字列全体を読んだり綴ったりしなければならないため、デザイナーはURL全体をリンクとして使用することを避けなければならず、これは文字や数字を含む長く曖昧なURLの場合に特に問題となる可能性があります。  

たとえば、Mediumの記事では、重複を避けるためにURLの末尾にランダムに生成された文字や数字が使用されていますが、このUXPinの記事のURLを貼り付けると以下のようになり、スクリーンリーダーにとって悪夢となります: https://medium.com/@uxpin/have-you-tried-designing-with-code-introducing-mui-5-kit-in-uxpin-3a6d7f928dd4.   

記事のタイトルを以下のようにハイパーリンクすればもっとよくなりますね:Have You Tried Designing with Code? Introducing MUI 5 kit in UXPin  

PluralSightのこの記事では、ウェブリンクを画面読み上げソフトに対応させる方法について、より多くの例が紹介されています。  

7. タッチ操作の対象領域は40×40ピクセルにする

親指でリンクをタップしようとして、間違えて一番近いリンクに当たってしまったことはありませんか?どうしようもないほど腹立たしく、イライラしますよね。タッチ操作で40×40ピクセルのターゲットエリアを使うのは、すべてのユーザーにとって理にかなっていますが、ハンディキャップのあるユーザーにとっては特に便利です。  

8. メディアコンテンツにアクセスできるようにする

  画像、動画、音声などのメディアは、ユーザーが好みのメディアでコンテンツを消化できるため、Webページに異次元の世界をもたらします。

camera video play

しかし、メディアで多くのユーザーが疎外されかねません。例えば、耳の不自由な人は音声や映像コンテンツを聴くことができませんし、目の不自由なユーザーは、画像や動画を見ることができません。そこで、メディアコンテンツをよりアクセシブルにするために重要なヒントをご紹介します:  

  • 画像、アイコン、その他の静止メディアには、常に説明的で適切な「altテキスト」を使用する。
  • 音声の場合は「トランスクリプト」を、動画の場合は「キャプション」を含める。
  • カルーセル内のすべての画像にキャプションを付ける(キーボードナビゲーションを可能にすることも忘れずに)。
  • 認知障がい、てんかん障がいのあるユーザーに害を及ぼす可能性のある自動再生を無効にする。
  • ストロボや点滅効果のあるメディアは、発作を誘発する可能性があるので使用しない。

ボーナスヒント:アクセシビリティ・チェックリストを使う

  デザイナーやエンジニアがアクセシブルなWebサイトやデジタル製品を構築するのに役立つリソースがたくさんあり、UXPinにはデザイナー向けのウェブアクセシビリティチェックリストがありますが、W3Cの公式文書に従うこともお勧めします。  

UXPinによるアクセシビリティのためのインタラクティブなプロトタイピング

 デザイナーは、アクセシビリティテストのために正確なプロトタイプ・モデルを使わなければならず、プロトタイプは、テスト中に最終製品のように見え、機能し、反応しなければなりません。これにより、デザイナーは、自身のソリューションがW3Cの要件を正しく満たしているかどうかを知ることができるのです。  

UXPinのコードベースデザインがあれば、デザイナーは、コードのような忠実度と機能性を持つ、完全にインタラクティブなWebサイトや製品を構築することができます。  

例えば、このUXPinのサインアップフォームでは、入力フィールドが完全に機能するため、デザイナーは条件付きロジックエラーメッセージコンポーネントのステートなどをテストし、典型的なサインアップフローの再現ができます。  

この登録フォームのようなインタラクティブなプロトタイプは、ユーザビリティの参加者に本物のユーザー体験を提供するため、デザイナーはすべてのユーザーを対象としたテストから有意義で実用的な結果を得ることができます。

無料トライアルにサインアップして、プロトタイプ作成、テスト、イテレーションをより迅速かつ正確に行い、お客様に優れたUXを提供しましょう。

デザインチーム を効果的に管理する方法とは

デザインチーム

誰もが知っている従来の「労働」は、ここ2、3年で劇的に変化しました。世界中のオフィスがバーチャルワークスペースやハイブリッドワークスペースを取り入れた働き方にシフトしていき、そのような変化は新しい考え方や働き方をもたらし、従業員と企業の成功に有益であることが証明されました。  

多くの人にとって、オフィスを離れることでより自律的になり、ワークライフバランスも良くなります。直接的にせよ間接的にせよ、従業員の幸せは企業の成功につながる傾向があります。良い姿勢と前向きなリーダーシップは、そのための直接的な橋渡しとなるのです。では、このような考え方は、デザインリーダーシップにどのように反映されるのでしょうか。  

主なポイント

  • いい雰囲気で統合されたチームは、より多くのイノベーションを生み出し、個人は自らのデザイン能力に自信を持ち、参加者は増えていく。
  • いちいち細かい管理や、何をすべきかを全員に指示することなくチームが機能するところまで到達できれば完璧。
  • 権限を与えられたリーダーは、最終的にデザインの世界にポジティブな革新と変化をもたらす。もし、次のステップに進むべきか迷っていたら、人は本来励まされ、従事していると感じたときに最高の仕事を完成させるということを思い出すといい。
  • まずは自ら切り込み、自身の決断を振り返る:その決断はチームの助けになったか、それとも進行を妨げたか?
  • 行動計画を作成する:目標達成のために何を変えるべきか、どのようなリソースが必要かを決定する。
  • 変更を加えつつ、それが思うようにいくかどうかを観察する。必要なら反復する。

もしあなたが現在デザインリーダーで、チームを効果的に管理し、ビジネスを成功させる方法をお探しでしたら、良いデザインチーム構造を作るためにできる重要なステップをいくつか見ていきましょう。本記事では、デザインリーダーシップとは何か、そしてそれをどのようにあなたの デザインチーム やビジネスに適切に適用できるかを探ります。

チームのワークフローを最適化し、より良いコミュニケーションを実現するプロトタイピングツールをお探しでしたら、UXPin Mergeがピッタリです。UXPin Mergeは、チームがより高いレベルのデザイン成熟度をすぐに達成できる強力なテクノロジーです。インタラクティブなUI要素を含む高忠実度のプロトタイプをデザインし、デザインプロセスの連携がどれだけ上がるかをぜひご確認ください。UXPin Mergeについてもっとみる

 デザインチーム の管理 – 正しく行うために重要なステップ 

デザインリーダーシップとは、すべてのステップをいちいち細かく管理することではなく、優れたデザインリーダーは、むしろチームに対してインパクトのある指示を出すことができます。では、具体的にどのようにすれば、有意義なプロダクトデザインの職場環境が実現されるのでしょうか。

scaling process up 1

まずは、 デザインチーム をうまく管理するための重要なステップと、結束力のあるチームを作るために避けるべきことを見ていきましょう。  

ステップ1:デザイン部門の監査から始める

  UXデザインの監査から始めるように、目標を振り返ってみましょう。ロードマップの作成によって、組織におけるデザイン目標における達成すべきことがより明確に見えてきます。このロードマップで、道のりの凸凹が少なくなり目標に到達しやすくなります。  

次のステップでは、 デザインチーム の構造を全体的に監査します。チーム内にどのような人材がいるのかを把握し、その強みと弱みを確認するのです。こういったことの把握により、会社の目標達成のために必要な、適切なスキルを持ったメンバーが十分にいるかどうかがわかります。  

チーム全体をより深く理解するには、チームミーティングがいい方法です。さらに、デザインチームの監査は、日々の業務全体がどの程度うまくいくかを判断する上で非常に有効です。

デザインチーム 発見

監査によってチーム構造が明確になり、すべてのチームメンバーの役割と、彼らが役割を果たすために期待される能力を特定できます。明確化することで、全員に高い目的意識を持たせることができ、混乱や滞りなく一貫したタスクが設定されます。  

ステップ2:自分の間違いを確認し、認める。

  デザインチームのリーダーとしてチームを管理する際には、誠実な考え方を取り入れる必要があります。リーダーシップを発揮する上で、先天的な思い込みや古い思い込みはつきものですが、緊密なチームの雰囲気の中で働く場合、外部からのアウトプットは非常に貴重なものとなるのです。  

チームメンバーからのフィードバックという形で、外部からの意見をどんどん求めましょう。その際、匿名のアンケートや、毎日一緒に働いている人たちから情報を集めるための全員参加の電話でもかまいません。

process problems error mistake

厳しい意見を聞くのは大変ですが、そのような意見を直接メモすることは、チーム全体の強化につながります。リーダーシップの不足部分はさまざまな形で表れ、例えば、チームの明確な目標設定の度重なる失敗や、従業員に対して細かく管理しがちであるといった指摘がチームから来るかもしれません。  

どんな欠点があるにせよ、デザインリードとして少し工夫が必要なところは積極的に確認し、認めるようにしましょう。あなたやチームのメンバーも含めて、完璧な人間なんていないですからね。

ステップ3:やるべきことの計画を書く

  チームを成功に導くために、リーダーシップスタイルの改善や計画の立案と同様に重要なのが、プロジェクト管理に関わる要素であり、これはデザイン監査と密接に関係しています。把握したい質問としては、「増員は必要ですか?だとしたら、現在のチーム構成の中で、どのスキルのギャップを埋める必要があるか分かりますか?」などがあります。  

関連する項目として、スキルギャップ評価の実施が挙げられます。チームメンバーに得意なスキルを聞いてみましょう。直接聞いてみることで、これまであまり意識されていなかったスキルや、今後のデザインプロジェクトに役立つスキルが見つかるかもしれません。

チームメンバーとの1対1のミーティングやグループミーティングでは、これから伸ばしたいスキルについて質問するのもいいでしょう。そうすることで、彼らが望むキャリアパスとデザインチーム全体のコンピテンシーをどのように統合するかを計画することができます。スキルのギャップを埋めるために、チームメンバーがスキルを磨き、開発する方法を提案しましょう。

task documentation data

企画段階では、募集・採用の段階で、デザインチームづくりがうまくいっているかどうかの確認が重要です。遅れをとっている分野があればメモをしておき、以下を考えてみましょう:

  • 候補生の離職率が高くなっているか
  • オンボーディングプロセスで、新入社員が繰り返し質問をし続けることがあるか

  このような質問と、タスクの配分、仕事量の管理、一貫したパフォーマンスなど、その他の潜在的な改善点を検討しましょう。  

ステップ4:成果の測定法を決める

  このような項目を把握し、具体的な変更が実施されたら、その変更をどのように評価するのか、しっかりとした計画がいると考えるでしょう。実施した変革が成功したかどうかを測るのに必要なのです。  

成果の全体的な成功を評価するとき、以下を自分自身に問いかけてみてください:

  • 問題を解決できたか?:デザインとは、単なるグラフィックやカラーパレットではなく、その核心は、クリエイティブなチャンネルを通じて、相互作用と問題解決を促すことなのです。もしあなたが、例えば従業員の定着率の低さなどの現実の問題を特定し、よりオープンなコミュニケーションとフィードバックなどのより良い解決策を提供したのなら、それは成功と言えるでしょう。 
  • プロセスを改善したか:デザインは、必ずしも補足に関するものである必要はなく、むしろ、調査中に冗長で役に立たなかったステップが特定されるかもしれません。優れたデザイン・リーダーシップとは、うまくいっていないものを切り捨てたり、取り除いたりすることもあるかもしれません。様々な開発ルートを通じてプロセスをより効率的にしたのなら、よかったですね、またひとつうまくいきましたよ!
  • フィードバックに対してオープンだったか: デザインの成功は、まさに従業員と経営陣の個人的な成長であり、効果的なコミュニケーションを通じて示すことができます。フィードバックを受け入れてオープンなコミュニケーションをとることは、なかなか習得しにくいスキルですが、優秀なリーダーなら誰にでもあるはずです。プライドを捨て、率直なフィードバックを受けましょう。あなたもチームも、もっと良くなるはずです。

オススメの測定方法は、改善しようと計画している特定の領域によって異なります。例えば、自身のデザインリーダーとしての資質を測りたいのであれば、職場について従業員がどう感じているかを測るメトリクスである「従業員NPS(ネットプロモータースコア)」などの定量調査を実施するといいでしょう。

team collaboration talk communication ideas messsages

このようなアンケートを実施することで、例えば3ヶ月や6ヶ月間でスコアがどのように変化したかを確認することができます。これは単なる一つの手段ですが、従業員の満足度を見るのによく行われる方法です。  

例えば、チームメンバーの定着率を上げて離職を防ぎたいと考えていたら、従業員の適切な定着のために必要な措置を講じた後、特定の行動項目を実施した後に平均在職期間がどのように変化したかを測るといいでしょう。  

あるいは、2週間という時間枠の中で、チームがどのくらいのタスクをきちんと完了したか測定したい場合は、このようなメトリクスを隔月で比較するといいでしょう。測定は、さまざまな影響要因にアプローチする現実的な方法がある「フィボナッチ数列のポイント」を通してアプローチできます。  

ステップ5:トランスフォーメーションプロセスの開始  

これで、デザインチームの働き方の効率化ができるようになりました。上記のステップを要約して実行すると、次のようになります:  

  • 1対1のミーティング:チームリーダーとチームメンバーの報告者が緊急の問題について個別に連絡を取り合い、強い関係を構築するには、1対1でのミーティングがいい方法です。また、このミーティングによって、従業員は自分が製品チームの重要な貢献者であると感じ、目標に向かってきちんと仕事をこなし、スキルも上がっていることを確認することもできます。1対1は、現状報告としてではなく、定期的にフィードバックを行い、キャリアアップや新しいスキルの習得を促すプラットフォームとして活用すべきです。
  • 毎日のスタンダップ:デイリースタンドアップでもハドル会議と呼ばれるものでも、その考え方は同じです。スタンダップでチーム全体が情報を共有し、つながっていることを実感できるようにすることで、進捗状況の把握、必要な改善点や未解決の問題の明確化、仕事の完了状況についてのチームの状況の把握ができます。
  • チームビルディング活動:士気を高め、チームワークを活発にするためのさまざまな活動があり、コミュニケーションを前面に押し出し、製品チームの連携を自由な流れにし、最高の職場の雰囲気を作り出すのに使えます。チームビルディングで、プロダクトマネージャーと従業員が、従来の職場環境以外で互いのことをより深く知ることができるかもしれません。脱出ゲームやゴルフコースでの1日など、楽しくて魅力的なアクティビティになるといいですね。

チームの成功には、成長と連携が欠かせません。当社のDesignOps eBookの最初の柱で説明したように、デザインチームの幸福度は、経営計画の最重要事項であるべきです。上記のステップは、チームが成長し、大切にされていると感じる事ができるようになるための、提案の一つに過ぎません。

ステップ6:反復の力を見逃さない

  成長は一筋縄ではいきません。なので定期的にチームメンバーとのコミュニケーションを取るようにしましょう。そうすることで、何がうまくいっているのか、どんなやり方がうまくいっていないのかが見えてきます。そうなると、そこからが巻き返しのチャンスです。

lo fi pencil

ここでもまた、チームメンバーに率直なフィードバックを求めましょう。それは、対面式の会議でもアンケートでも構いません。オープンなコミュニケーションは、デザインプロセスや製品開発のワークフローを円滑に進める上で理想的な環境であり、気づきを得た従業員は、最終的に評価されていると感じるのです。一般論ではなく、明確なアクションに焦点を当てることを忘れないでください。具体的に掘り下げることで、誰もがより良い結果を得ることができます。  

アンケートを実施する場合は、頻度を上げ過ぎないように注意しましょう。データを収集した期間が短すぎて適切な結論を導き出せない可能性や、チームメンバーにあなたの決断を頻繁に評価してもらうことは、あなたがデザインリーダーとしての能力に自信がないと思われる可能性があります。デザインリーダーとして進むべき方向性を明確にすることで、チームはそれを評価してくれるはずです。

loading

チームの連携とデザインチームの管理方法を改善するために、繰り返し実験しましょう。適切なデザインチームの管理は長距離走であり、短距離走ではないことを忘れないで下さい。良いチームを育てるには、試行錯誤が必要なのです。  

チームを成功に導こう

DesignOpsの第一の柱は、優れたビジネスの核となる「人」を扱うことです。  

従業員をサポートしたいのであれば、その仕事に適した技術スタックが必要です。UXPin Mergeはそのような技術であり、これを使えば、デベロッパーのインタラクティブなコンポーネントをデザインエディターに持ってきて、ステークホルダー、プロダクトマネージャー、そして何よりもデベロッパーが理解しやすいプロトタイプを構築することがでます。コミュニケーションのギャップを埋め、組織内のワークフローを強化しましょう。UXPin Mergeについてもっと読む

デザインとコンサルティング – 社内コンサルティングのメリットとは

Design Consultancy

デザインコンサルタントは以前から存在しており、企業が外部のサービス会社や代理店にデザインコンサルティングを依頼することは昔からありました。  

しかし、デザイン変更管理が進化し、現代のデザイン思考がデザインチームと他部門との統合方法を変えるにつれ、このようなデザイン業界の役割は、さまざまな刺激的な可能性と利益をもたらしてくれるようになりました。  

本記事では、社内デザインコンサルタントが業界で果たす役割が大きくなっていることにスポットを当て、デザイン品質やデザインチームのパフォーマンスにどのようなプラスの影響を与えているのかお話します。  

ここでは、社内デザインコンサルタントがこれらのチームとどのように融合し、デザイン品質にどのようなメリットをもたらしているかを探るとともに、効果的な社内デザインコンサルティングを立ち上げるためのステップについてみていきましょう。  

デザインコンサルティングの立ち上げと運営に必要な時間を獲得する方法は、現在のワークフローの改善であり、そのうちひとつが、プロトタイピングとデザインのハンドオフプロセスをスピードアップする技術を試してみることです。それにはまさにUXPin Mergeがピッタリです。企業がフロントエンドの負債と戦い、自身のデザインシステムに基づいた製品を開発するのをUXPinがどのようにサポートするか、詳しくはこちらをご覧ください。

社内デザインコンサルタントとは

  まずは、デザインコンサルタントのコンセプトと、コンサルタントがどのように組織内の問題解決者として機能し、実行可能なデジタルデザインソリューションを特定・実行するのかについてみていきましょう。  

社内デザインコンサルタントとは、デザイン会社の中で、アイデアの提案、推奨や監査の実行、既存のデザインシステムへの助言を行う機能であると言えます。  

デジタル製品のデザインの形状や機能性から、美観や市場性まで、社内デザインコンサルタントは、これらの特徴や要素が互いにどのように融合しているかを把握しています。

team collaboration talk communication ideas messsages

このようなコンサルタントは、デザインチームの中での重要な役割をいくつか担い、以下を行うことによってその専門知識を提供し、付加価値を高めています:  

  • デザインチームのメンバーが検討し、最善の決断ができるようサポート
  • 潜在的な解決策や代替案について、常にチームに情報を提供し、最新情報を入手
  • デザインフレームワークを使って業務プロセスやタスクの効率化をサポート

  効果的なデザイン戦略の策定により、チーム全体のパフォーマンスとアウトプットをモニタリングし、改善します。   さらにデザインコンサルタントは以下を日常業務としています:  

  • デザインワークショップの企画・運営
  • 組織的なデザインシステム構築の監修
  • デザインのアイデア出しや実行に必要な経験や意見の追加

社内デザインコンサルタントと社外デザインコンサルタント

  社内デザインコンサルタントは社外デザインコンサルタントとほぼ同じですが、デザイン会社の業務やチームダイナミクスにおいて遥かにいい見解があります。そして社内デザインコンサルタントと社外デザインコンサルタントの違いは、クライアント企業との関係にあります。  

  • 社内デザインコンサルタント:クライアント企業にフルタイムまたは契約ベースで雇用され、クライアント企業に直接報告する。雇用主のために継続的に働き、組織内の製品デザインに特化し、企業の経営陣やデザインチームと長期的な関係を築く。
  • 社外デザインコンサルタント :デザインコンサルティング会社から来て、指定されたデザイン関連のプロジェクトやタスクの完了のために短期間雇われる。大抵は社外のコンサルティングやデザインサービスに雇われ、複数の組織のプロジェクトに同時に取り組み、自身の経験やより広いビジネス視点に基づいたアイデアをもたらす。ちなみに、Ideoがイノベーションのコンサルティング会社として有名なのは聞いたことがあるかもしれないが、この会社はパロアルトに拠点を置き、多くのスタートアップ企業のデザインへの取り組みをサポートした。
lo fi pencil

つまり、社内デザインコンサルタントは自社専属で、通常、長期的なプロジェクトに参加します。一方、社外デザインコンサルタントは、代理店から派遣され、短期間の仕事でサポートします。  

社内デザインコンサルタントの利点

1. 一貫性と明瞭性の確保

  外部のコンサルタントを入れるたびに製品デザインチームのワークフローが混乱するのではなく、製品デザイン活動の中で社内デザインコンサルタントが機能するように投資することは、誰にでも一貫性と明瞭性があるということです。

これには、共感、定義、アイデア出し、プロトタイピング、テストを柱とするデザイン思考プロセスをチームに導入することが含まれ、また、社内デザインコンサルタントは、デザインにおける変更管理を効果的に行うことができます。  

社内デザインコンサルタントは、この非常に重要だけど時間のかかるプロセスを監督・管理するのに適任です。チーム全体の一貫性と明瞭性を確保するために取り組みを整理・効率化することで、デザインにおける変更管理を組織全体に浸透させることができるのです。  

2. 知的資本と問題解決能力の向上

デザイン会社は、製品デザインチーム内に社内コンサルティンググループを設けることで、コスト削減、より良いデザインサービスの人材獲得、製品開発の加速、戦略的デザインソリューションやブランド戦略などを進めることができます。それにより社内コンサルティングを通じてのみ得られる知的資本の成長と維持が促され、社員が会社そのものをよりよく理解できるようになります。

designops increasing collaboration group

社内デザインコンサルタントは、第一線で活躍する社員として、社内のデザインアーキテクチャに関する豊富な経験と知識を積み重ねており、このような深いインサイトで、他の社員が社内デザインコンサルタントと交流する際や、ライン管理のポジションに移行する際に、問題解決能力が上がります。

3. 組織全体でのデザイン推進

  大抵のデザインチームにとって、デザイン思考の組織全体への普及は難点です。社内にデザインコンサルタントを置くということは、チーム内にデザイン支持者を置くということでもあるのです。

社内デザインコンサルタントは、デザイン思考を実践し、 戦略的なデザインに必要な視認性と注目度を常に保証します。また、デザイン大使として、他のビジネスステークホルダーが製品デザインやデジタル製品のユーザビリティの重要性を理解できるようサポートします。  

4. デザイン部門と他部門のコミュニケーションの橋渡し

多くのデザイン関係者は、組織内のサイロ解消がいかに難しいかを指摘しており、デザイン変更管理には、デザインチームメンバー間だけでなく、他部門との間でも明確で曖昧さのないコミュニケーションが必要になります。  

デザイン変更管理とデザイン思考を常に提唱している社内デザインコンサルタントは、そのシステムでいかに仕事が楽になるかを、他の部署や担当者が理解するのに長けています。彼らは、システムの複雑性を説明することに長けており、例えば、ソフトウェアデベロッパーにシステムの機能やブランディング戦略における役割を伝えることで、デベロッパーとデザインチームとの連携をより円滑にすることができるのです。

design system library components 1 1

ただ、このような最新のプロセスには、円滑なコミュニケーションだけでなく、適切なツールも必要です。UXPin Mergeのような技術スタックは、デザインチームがUI、UXデザイナーとデベロッパー間の穴埋めをするのに、彼らを信頼できる唯一の情報源(Single source of truth)に合わせることで、より密接した作業環境や、孤立した邪魔なサイロの軽減に繋がるのです。

このようなツールがどのように役立つかを示す素晴らしい例として、影響力のあるデザイン運営の第一人者、デイブ・マルーフ氏によるものがあります。彼はウェビナーで、社内コンサルタントはこのようなソフトウェアで、信頼できる唯一の情報源(Single source of truth)を活かし、デザインチームと部門間の溝を埋めることによって、組織におけるサイロを解消できると述べています。

社内デザインコンサルタントを配置するには

では、デザイン運営に社内デザインコンサルタントを加えることを検討されているのですね。いいですね!ただし、始める前に計画が必要であり、社内デザインコンサルタントを始める前に、デザイン思考の哲学を採用し、伝えることから始まるのです。

ステップ1:コミュニケーション

デザイン業界では、社内デザインコンサルタントがまだ普及しておらず、外部デザインコンサルタントへのデザインシステムのレビューやアップデートの依頼に慣れているか、コンサルタント業務を自ら行うことをすでに習得している場合が多いようです。

社内デザインコンサルタントを置く目的は、チームのパフォーマンス向上であることを覚えておきましょう。なので事前に必ずコミュニケーションをとり、チームと連携しましょう。なぜ社内コンサルタントを配置するのか、専任のコンサルタントを配置することでどのようにデザインの負担が軽減され、問題解決に役立ち、デザイン思考の一貫性を確保できるのかを確実に理解してもらいましょう。

ステップ2: 目的の明確化

目標がなければ、コンサルタントもチームも、自分たちが目指す成果物がわからず、闇雲に作業することになります。よって次のステップでは、早い段階から社内デザインコンサルタントの目標を明確に定めます 

のようなコンサルタントの目的には、以下のようなものがあります:

  • マーケティングチームが新規ビジネスを呼び込むためのメールフローを見直し、CX(カスタマーエクスペリエンス)を上げるのをサポート
  • カスタマーサクセスチームによるアカウント解約プロセスのUX(ユーザーエクスペリエンス)向上へのアシスト
  • デザインチームとデベロッパーの連携と連絡を促し、信頼できる唯一の情報源(Single source of truth)を中心としたデザインの仕組みの導入
  • 見込み客のコンバージョンプロセスをより効率的にデザインするための営業部門との連携
  • 企業のブランディングチームと連携し、企業の最新情報についてのより魅力的なメディアリリースの予定や、製品の優れたデザインを紹介するためのSNS戦略の見直しをサポート

ステップ3: コンサルティングを始める

次に、作業を始めましょう。デザインチームと連携し、社内デザインコンサルタントの目的を明確に定めて伝え、コンサルタントを見つけたら、その任務の遂行を開始します。

team collaboration talk communication

他部門と関わりを持ちましょう。協議、観察、テストを実行し、チームとのブレインストーミング、プロセスの監査と更新、フィードバックの獲得、目標に到達したかどうかの報告をしましょう。  

ステップ4:測定と学習

作業を実行に移す時間ができたら、結果を測定して分析し、作業の微調整が必要になります。チームからフィードバックを求め、データを分析し、改善すべき点があればそこを指摘します。間違いが見つかったら、それを教訓にして、デザイン戦略を修正しましょう。

完成したら、測定した結果と最初に設定した目標との比較が必要です。目標に到達していれば、引き続きコンサルティングを行い、改良を加えましょう。そうでない場合は、もう一度最初からやり直しましょう。

このヒントで最高のデザインコンサルタントを輩出しよう

デザインチームのニーズが進化し、より複雑になるにつれ、デザイン会社や組織は、社内デザインコンサルタントの雇用、トレーニング及び育成の利点と可能性が、外部コンサルタントの導入の必要性を上回っていることに気づきました。

社内デザインコンサルタントは、スポーツチームのキャプテンとして新しいシーズンに向けてチームを安定させ、新たな高みへと導いてくれる存在だと考えてください。彼らの仕事は、パフォーマンスを上げ、「プレーヤー」の能力を最大限に引き出すことなのです。  

社内デザインコンサルタントは、すでにデザインサービスにおける重要性を示しており、近い将来、あらゆる職場でデザイン思考の重要な推進力となることでしょう。彼らは、製品デザインプロセスにおける一貫性を確保し、デザイナーが目指すものと、デベロッパーがデザインシステムの必要性をどのように理解しているかとの間のギャップを埋めるサポートをします。  

生産性を上げよう

社内デザインコンサルタントはデザイン思考の完璧な支持者であり、UXPinのようなデザインツールで武装することで、デザインチームを最大限に活かし、生産性を上げることができるようになったのです。

UXPinには「Merge」という技術があり、デジタル製品の構成要素である機能的なUIコンポーネントを正確に使ってプロトタイプを構築することができ、事実上、デザインのハンドオフがよりスムーズになります。デベロッパーは、構築する必要があるものを正確に把握することができ、デザイン要素の背後にあるコードをコピーして、そのプロセスで使うことができます。その結果、デザインと開発間の透明性が高まり、会社全体がより明確になるのです。

シングルページとマルチページの最適なウェブデザイン

Single Page vs Multi page web Design

シングルページかマルチページかは、デザイナーが新しいWebサイトのプロジェクトで最初に決めることのひとつですが、例えば、ブログが必要な場合や、複数の商品を扱うECストアが必要な場合など、答えが明らかな場合もあります。  

しかし、多くのプロジェクトでは、その決断はそれほど単純ではなく、デザイナーはビジネスゴールとユーザーのニーズを見極め、シングルページとマルチページのどちらがより効果的かを判断しなければなりません。

世界最先端のコードベースのデザインツールであるUXPinを使って、Webデザインのアイデアをデザイン、プロトタイプ、およびテストしませんか?無料トライアルにサインアップし、UXPin がデザインワークフローをどのように変革し、顧客により良いUX(ユーザーエクスペリエンス)を提供できるかをぜひご確認ください。

シングルページウェブサイト

 

testing user behavior prototype interaction

シングルページウェブサイトとは

シングルページのウェブサイトは、ワンページウェブサイトとも呼ばれ、フォームを含むすべてのコンテンツが1つのページ(トップページ)にあります。ナビゲーションリンクがある場合は、新しいページを読み込むのではなく、別のホームページのセクションにジャンプします。

オーストラリアのフリーランスUXデザイナーであるペタル・チェクリッチ氏によるUXポートフォリオサイトでは、ナビゲーションとフッターのコンタクトフォームを備えた典型的なシングルページのデザインが見られます。彼は、自身のポートフォリオを表示するのに大きな画像カルーセルを使用しており、それにはWebサイトやアプリのプロジェクトも含まれています。

シングルページウェブサイトの一般的な使用例

デザイナーは、ランディングページにシングルページデザインを用いるのが一般的であり、ユーザーを1つのページに留めることで、気が散ることなく、見込み客とセールスを増やすことができます。

シングルページのデザインは、ポートフォリオ、中小企業、単一商品のECサイト、実店舗など、最小限のコンテンツしかないウェブサイトにも最適な選択肢です。

シングルページウェブサイトの利点

  • シングルページのデザインは、ユーザーがスクロールするだけでウェブサイト全体を消化でき、主要なナビゲーションが隠されていることが多いモバイルユーザーにとって有益な機能である。
  • シングルページウェブサイトは、デザイナーが複数ページのサイトの情報アーキテクチャやその他の特性を気にする必要がないため、デザインしやすいことが多い。
  • フロントエンドフレームワークなどの開発ツールを使わずに、シングルページのWebサイトをプログラミングする方が、エンジニアにとって楽であり、基本的なHTML、CSS、Javascriptを使用することができるため、Webサイトのサイズ縮小と、パフォーマンスの向上が実現する。
  • シングルページのウェブサイトは、ビジネスへの問い合わせ、ニュースレターの登録、製品/サービスの購入など、ユーザーに特定のアクションを起こさせるのに最適。
  • デザイナーやマーケティング担当者は、単一の入り口である「ホームページ」を通じて、ユーザー体験をコントロールし、訪問者に一貫した説明を提示できる。

シングルページウェブサイトの欠点

  • シングルページのウェブサイトは簡単ではない:ユーザーとビジネスゴールへの貢献のために、コンテンツに優先順位をつけて構成するのはデザイナーにとって容易なことではない。
  • パフォーマンスが上がる反面、デザイナーが画像や動画などのメディアを多数使用すると、ページの読み込み時間が長くなる可能性がある(エンジニアは、遅延ロードやその他のパフォーマンス向上技術によって、この問題解決が可能)。
  • シングルページウェブサイトでは、SEO(検索エンジン最適化)とキーワード戦略が制限され、よく最適化されたシングルページのサイトは、複数ページの競合サイトと同等かそれ以上の順位を獲得できるが、主要キーワードと関連用語に制限される。
  • シングルページのデザインにより、デザイン変更なしのウェブサイトの拡張や、ブランドを拡大する能力が制限される。

マルチページウェブサイト

screens prototyping

マルチページウェブサイトとは

マルチページウェブサイトには、ユーザーがサイト内を移動できるようにナビゲーション付きのページが複数あり、コンテンツ、製品、トピックなどを分けることができるため、ほとんどの企業でマルチページデザインが使われています。

ページが複数あるということは、ユーザーの検索エンジンやSNS、他のウェブサイトで、自身のウェブサイト知る「入り口」が多数あるということです。例えば、BBCのようなニュース出版社では、ユーザーがサイトに入ることができるページが何万、何十万とあります。

マルチページウェブサイトの使用例

特に、複数の商品を扱うECショップやブログ、ニュースサイトなどでは、カテゴリーやコンテンツを分けるのに別のページを使うなど、大抵のWebサイトで複数ページのレイアウトが採用されています。

ニューヨークタイムズは、マルチページレイアウトのいい例です。ヘッダーのナビゲーションでは、ユーザーが話題のニューストピックにサッとアクセスできるようになっており、トップページではその日の世界最大の話題に特化しています。そしてフッターには、ニュースのカテゴリー、ポリシー、連絡先、その他の役立つ情報への追加リンクがあります。

マルチページウェブサイトの利点

  • マルチページのサイトでは、ユーザーは必要なものを見つけるために1つのページをスクロールするのではなく、自分が最も価値を置くコンテンツに行ける。
  • マルチページウェブサイトには、特にウェブサイトがブログを備えている場合は、マーケティング担当者がさまざまなキーワードやトピックをターゲットにするための多くの SEO の利点と機会がある。
  • デザイナーは、マルチページウェブサイトの拡張に新しいページの追加ができる。

マルチページウェブサイトの欠点

  • 大規模なウェブサイトでは、情報アーキテクチャやコンテンツが見つかりやすくなるための慎重な配慮が必要であり、このプロセスは、コストと市場投入までの時間の増加につながる。
  • マルチページウェブサイトはファイルのサイズが大きく、サーバーへのリクエスト処理も多くなるため、ホスティングのコストが上がる。
  • 特にレスポンシブデザインの場合、マルチページウェブサイトでは、デザインやコンテンツの更新に時間がかかる。
  • 複数のページからウェブサイトに入ることができるため、デザイナーやマーケティング担当者は、ユーザーを製品やサービスに導くために、サイト全体でCTA(Call to Action)の作成が必要。例えば、UXPinでは、UXPinを試すよう訪問者に促すCTAがすべてのブログ記事に付いている。

ここで重要なのは、デザイナーやエンジニアには、こうしたマルチページウェブサイトの課題の克服に使えるツールやテクニックがあるということですが、ユーザビリティの問題を引き起こさないためには、このような問題に対処しなければいけません。

シングルページとマルチページウェブサイトを使い分けるタイミング

direction process path way

プロジェクトにシングルページとマルチページのどちらのウェブサイトが必要かを決める要因はいくつかありますが、多くのプロジェクトに影響を与える主要因を以下に3つ特定しました:  

  • ビジネス目標:何を達成したいのか
  • コンテンツ:どの程度のコンテンツを表示したいのか
  • SEO(検索エンジン最適化):コンテンツデジタルマーケティングの目標

ビジネス目標

人や企業というのは、大抵意図や目的を持ってウェブサイトを作成します。シングルページのウェブデザインは、見込み客の獲得、アプリのダウンロード促進、単一の製品の販売など、ビジネス上の目標が絞られている場合に最適です。  

複数のCTAがある場合や、複数の製品/サービスを宣伝する場合は、別々のページ作成が最適です。このように分けることで、ターゲットとするオーディエンスに対して別々のキャンペーンを行い、1つのCTAに誘導することができますが、これが1つのページで複数のアクションを行うとなると、混乱を招き、コンバージョンに影響を与える可能性があります。  

コンテンツ

  表示するコンテンツの量や種類によって、判断に大きな影響を与えることがあります。例えば、複数の動画を表示すると、ページのファイルサイズが大きくなり、パフォーマンスに悪影響を及ぼします。ちなみにYouTubeの動画ですらページを読み込む際に追加のリクエストが発生するんです。  

画像もまた、特にモバイル端末やインターネット接続が不十分なユーザーにとって、ページのパフォーマンスを低下させることから、デザイナーは、コンテンツがUXとアクセシビリティにどのような影響を与えるかの考慮が必要になります。  

SEO(検索エンジン最適化)

SEO対策も、シングルページとマルチページのウェブデザインを決定する重要な要素のひとつです。1つのキーワードをターゲットにするのであれば、シングルページのデザインで十分ですが、多様なSEO戦略をとるのであれば、マルチページのデザインが適しています。  

シングルページとマルチページのデザインを決める7つのヒント

design prototyping collaboration interaction

 

  1. コンテンツ優先のアプローチを取る:ユーザーが注目するコンテンツは何かを考え、それに合わせてインターフェースをデザインする。必要な数のページ(とコンテンツ)だけを入れる。
  2. 自身のサイトがシングルページでの体験に適していることを確認する:1ページにすべてを収めるのが難しい場合は、代わりにマルチページのデザインを検討する。
  3. マーケティング戦略上、SEOを優先するのであれば、マルチページデザインを取る方がいい場合が多い。
  4. シングルページのサイトやランディングページは、有料広告キャンペーンでよりいいパフォーマンスが発揮される:気が散るようなものを排除し、ナビゲーションを行うことで、ユーザーのページ離脱を防ぎ、コンバージョンの向上につながる。
  5. ナビゲートや消化しやすいウェブサイトにする:各ウェブページで明確な視覚的階層を作成し、マルチページウェブサイトのユーザーニーズを解決する情報アーキテクチャを計画する。
  6. 確実にすべてのユーザーにとって消化しやすく、操作しやすいウェブサイトを実現するために、ウェブアクセシビリティガイドラインに従う。
  7. 混乱をなくし、ユーザーに明確な目標を提供するために、1ページにつき1つのCTAを使う。複数のCTAが必要な場合は、シングルページよりもマルチページウェブサイトを検討する。

UXPinによるWebデザイン

UXPinのコードベースのデザインツールで、デザイナーは、ユーザーテストやステークホルダーからのフィードバック、デザインハンドオフを改善すべく、完全に機能するレスポンシブWebサイトのプロトタイプを作成できます。  

デザイナーは、UXPinのモバイル、タブレット、デスクトップの各フレームを使った、ビューポートごとの複数のレイアウト作成から始めることができます。さらにUXPinには、アプリデザイン用にウェアラブルフレームとTVフレームもあります。

uxpin design color mobile

コンテンツとデータがあれば、デザイナーは、JSON、CSV、または Google Sheets を使用して実際のデータを UI 要素に入力することができます。レイヤー名でコンテンツを一致させると、数回のクリックでフィールドにダミーデータを入力でき、また、UXPinのデザインキャンバスを離れることなく、メディア要素にUnsplashの画像を埋め込むことができます。

その結果、最小限の労力で実データを取り込んだ美しいユーザーインターフェースが実現しました!  

画像ベースのデザインツールとは違い、UXPinではデザイナーは1つのフレームを使ってインタラクティブなプロトタイプを作成でき、また、条件付きインタラクションフォームバリデーションユーザー入力バリデーションコンポーネントステートなどの優れた機能を享受することができます。

design and development collaboration process product 1

UXPinの高度なプロトタイピング機能を使用して作成したウェブサイトのサンプルプロジェクトをご覧になりませんか?このプロジェクトをダウンロードし、UXPinで検査することで、このインタラクティブなプロトタイプをどのように構築したかをぜひご確認ください。

世界最先端のコードベースのデザインツールで、ウェブデザインプロジェクトを強化しませんか?UXPinがどのようにUXワークフローを革新し、顧客により良いユーザー体験を提供するか、無料トライアルにサインアップしてぜひご覧ください。

UXベンチマークガイド – データはどこから取得すべきか?

UX benchmarking

改善すべき領域の特定や、製品目標の達成にはUXのベンチマークが不可欠であり、デザインチームは、デジタル製品のUX(ユーザーエクスペリエンス)の向上のために、業界標準、競合他社、または過去の実績からの基準値をベンチマークによって得られます。  

本記事では、UXベンチマークの概要、関連するベンチマークの見つけ方、ベンチマーク調査を成功させるための3ステップのプロセスについてお話します。

高度なコードベースのプロトタイプを使用した実用的なテスト結果で、UXベンチマークを超えましょう。UXPinのコードベースの製品デザインソリューションでプロトタイピングとテストを改善するには無料トライアルにぜひご登録ください  

UXベンチマークとは

  UXベンチマークとは、競合他社、業界、過去の実績などの基準に照らして、パ性能を比較評価することであり、目標を設定して性能を測定するためのベースラインまたはベンチマークを特定するのが目的です。  

ベンチマークで、「これは良いか悪いか 」というのがわかります。  

UXベンチマークの種類

ベンチマークはUXメトリクスと連動しており、以下の2つのカテゴリーに分類されます:

  • 定性的データ:感情、ロイヤリティ、使いやすさ、ユーザー満足度、UXなどの主観的なデータ
  • 定量的データ:数値や比率などの測定可能なデータ

  UXメトリクスの追跡とデータの表示には、さまざまな方法があります。例えば、以下のようにNPS(ネットプロモータースコア)は0~10の規模で、タスクタイムは秒、分、時間を使用します。  

  • NPSは、ユーザーの感情や満足度を測るため、定性的なメトリクスとなる
  • タスク(にかかる)時間は、時間を使って測定できるため、定量的なメトリクスとなる

  質的なデータを集める典型的な方法は、アンケートや調査を通じての質問ですが、定量的なデータは、追跡ツールや分析ツールを使って測ることができます。

UXベンチマークが便利な場合

UXベンチマークは、デザインチームが成功か失敗かを測りたいときにはいつでも不可欠であり、その測定は、プロジェクト全体であったり、特定のユーザーインターフェースに適したコンポーネントを選択するときであったりします。

designops efficiency speed optimal

以下は、UXベンチマークが最も活用される場面の一部です:  

  • UX監査結果の評価
  • デザインの最初と最後
  • ユーザビリティテストの前後
  • 競合ベンチマーキング:競合他社に対するUX KPIの測定
  • 業界標準を打破するための目標設定
  • 新製品の初期リサーチの一環として
  • コンバージョン率、完成度、ユーザーエンゲージメント、eコマースのメトリクスなど、プロジェクトのビジネス目標の確定時

DesignOpsのためのUXベンチマーク

上記の例は、ユーザーと製品のベンチマークのメトリクスに関するものであり、UXベンチマークをDesignOpsの実装者にとって重要な焦点である、部門の業績に適用することもできます。  

パトリツィア・ベルティーニ 氏は、「DesignOpsのROI」の中で、効率性を測るためのいくつかの重要なメトリクスについて概説しています:  

  • ツールのROI(コスト/エンゲージメント/採用率)
  • テストやプロトタイプのリードタイム(時間)
  • 品質審査の回数種類
  • チームの生産性(リソース活用)
  • エンド・ツー・エンドの納期(時間)

  このようなメトリクスを測るのに、DesignOpsの実装者には性能を追跡するためのベースライン(ベンチマーク)が必要であり、そのような性能のメトリクスは、デザイン提唱と貴重なリソースの獲得に不可欠です。  

UXベンチマークのデータはどこから来るのか

  デザイン/チームのリーダーやステークホルダーは、メトリクスの特定やUXの目標設定にベンチマーク調査(総括評価)をよく利用します。そこで筆者たちは、UXベンチマークの4つの主要な情報源を以下のように特定しました:  

  1. 製品データ
  2. 競合他社分析
  3. ステークホルダー
  4. 業界標準
designops efficiency person

1. 製品データからのUXベンチマーク

製品データは、UXベンチマーク作成のための豊富なインサイトとメトリクスを生成します。製品データを集めるためのツールは数多くありますが、一般的な方法としては以下のようなものがあります:

  • Google Analyticsなどの製品分析は、コンバージョン、売上、見込み客、時間ベースのタスクなど、重要なデータとメトリクスを集める
  • Hotjar、Crazy Eggなどのヒートマップは、ユーザーがコンテンツをどのように消化し、関わっているかをデザインチームに伝える
  • ユーザビリティテストは、タスクの完了率やタスクにかかる時間など、ユーザーのインサイトを集めるのに適しており、デザイナーは、定性的データの収集のために質問をすることもできる
  • ユーザー調査には、NPS(ネットプロモータースコア)、CSAT(顧客満足度)、SUS(システムユーザビリティスケール)などのUXメトリクスを導き出すためのアンケートや調査が含まれる

2. 競合他社分析からのUXベンチマーク

UXチームは、競合のベンチマークの作成に競合分析を利用でき、競合と比較して測定することで、競合が優位に立てる部分や、改善が必要な部分を把握することができます。

例えば、Similarwebのようなツールを使えば、Webサイトやアプリケーションを分析・比較することができます。UXチームは、直帰率、平均サイト滞在時間、訪問あたりのページ数など、上位の競合他社のメトリクスを見て、競合の平均を割り出し、これをベンチマークとして使用し、以下のようなことを問うといいでしょう:

  • 競合他社は何が優れているのか?
  • どのようなデザイン機能がエンゲージメントを生み出しているのか?
  • 競合のトラフィックソースは何か?
  • 競合の人口構成は?我々は同じようなオーディエンスを共有しているか?

UXの専門家は、これをさらに一歩進めて、競合のユーザビリティテストを実施することができます。ベストな方法は、競合のWebサイトのプロトタイプのレプリカを作ってテストを実施することであり、そのテストの結果で、改善のための有益なインサイトが得られ、競合のユーザビリティベンチマークを設定して競合の一歩先を行くことができるようになります。

3. ステークホルダーからのUXベンチマーク

ステークホルダーは、例えばコンバージョン率の基準値を設定したり、ビジネス目標に沿ったUXベンチマークの設定をよく行います。デザインチームは、製品が確実に顧客の役に立てるように、そういったビジネス目標とユーザーニーズのバランスを取らなければいけません。

結局は、ステークホルダーは、UXとそのプロジェクトのROI(投資対効果)を見たいのであり、次のようなメトリクスに関心がありその改善を見たいのです:

  • 売上やコンバージョンの向上
  • テクニカルサポートコールの減少
  • 顧客ロイヤリティ
  • 顧客満足度
  • 顧客維持率
  • 市場投入までの時間の短縮
  • 再加工やエラーの削減
  • 従業員の定着
  • 人件費の削減

4. 業界標準からのベンチマーク

業界標準のベンチマークは、組織が追いかけ追い越したい KPI です! 企業は、このような業界標準を性能の最低ラインとして使う必要があり、それ以下だと、製品の性能が平均以下であり、顧客の期待に応えられていない可能性があるのです。

組織は、調査機関や業界レポートなどさまざまな情報源からそのようなベンチマークを入手したり、ベンチマーク調査を依頼したりすることができます。

Baymard Instituteの「SaaS UX Benchmark:5 Pitfalls to Avoid」は、SaaS業界を対象とした調査機関のベンチマーク調査の優秀な例です。この調査では、B2BとB2CのSaaS企業10社を分析し、企業がKPIベンチマークとして使用できる複数のカテゴリーにおける255のUX性能のメトリクスを以下のように決定しています:

  • UXの全体的な性能
  • デスクトップWeb
    • ホームページとナビゲーション
    • ページの種類とデザイン
    • プランのマトリクス
    • チェックアウト
    • サインアップ&アカウント管理
    • サイト全体の機能 & ナビゲーション
  • モバイルウェブ
    • ホームページ&ナビゲーション
    • ページタイプ&デザイン
    • チェックアウト
    • サインアップ&アカウント管理
    • サイト全体のデザインおよびインタラクション

UXベンチマーク調査の実施方法

今回は、ユーザーリサーチアカデミーの創設者であるニッキー・アンダーソン氏から、「ベンチマーク調査の3ステップのテンプレート」を拝借しました。彼女の3つのステップは、次のとおりです:

  1. 計画の策定
  2. インタビュースクリプトの策定
  3. 被験者の選択
process direction 1

1. 計画の策定

ベンチマーク調査の計画で、UXチームはゴールと目的を理解し、次の3つの重要な事項に答えられるようになります:

  • ベンチマーク調査の頻度:状況は常に変化するため、確実に自身のベンチマークが常に正確であるように、フォローアップ調査が必要である。
  • 何を学びたいのか:明確な目的によって、研究者は正しいUX研究方法を適用し、最終報告書を策定できる。
  • 何を測りたいのか?:例えば、「デスクトップとモバイルアプリのタスク完了率を知りたい 」など、機能やKPIについて具体的になっておく。

2. スクリプトの作成

スクリプトは、ユーザーテストの質問とそれに望ましい結果を一致させます。ユーザビリティの被験者に、たとえば「製品を購入する」、「製品のオンボーディングシーケンスを完了する」、「特定の機能を使用する」など、どのようなタスクまたはアクションを完了してもらいたいですか?

あらゆるユーザビリティテストのように、UXモデレーターは、結果に影響を与えたり偏ったりしないように、「5W1H」式の質問の使用が必要です。以下の例を見てみましょう:

  • ユーザビリティに欠ける質問の例 :「当店の母の日ギフトは検索できますか?」(できる・できない)
  • 客観的で5W1Hを用いたユーザビリティの質問の例:「当店の母の日ギフトをどのように検索しますか?」(検索法)

最初の質問は、ユーザーに検索機能の使用を促すかもしれませんが、2つ目の例では、ユーザーのプロセスや結果はこの質問にあまり影響を受けないと思われます。

3. ユーザビリティの被験者の選択

通常のユーザビリティテストでは、被験者は10人以下ですが、ベンチマーク調査では、より多くのデータが必要です。ニッキーは25人以上を推奨していますが、BaymardMeasuringUは、それぞれ4,750人と600人のユーザーをテストしました。

被験者の人数は、研究者が行う調査や予算によって異なります。例えば、インタビューは時間と費用がかかるので、Baymardの4,750人よりもニッキーの25人の方がはるかに現実的ですが、大量のユーザーをテストするにはアンケートや調査が適しています。

ニッキーは、定期的にベンチマーク調査を行う際の、ユーザビリティの被験者を選ぶコツを2つ教えてくれました:

  • テストするユーザーの種類を統一する
  • 毎回同じ被験者を使用しなくていい;新しい被験者と以前の被験者を混ぜることで、新鮮なインサイトが得られる

UXPinによる正確なユーザビリティテスト

多くの場合、ベンチマーク調査にはプロトタイプとテストが必要です。信頼性が高く、実用的なベンチマークを得るには、デザイナーは、最終製品のUXを正確に再現するHi-Fiのプロトタイプを用意しなければいけません。

team collaboration talk communication ideas messsages

UXPinのコードベースのプロトタイピングにより、デザイナーは最終製品のような外観と感触のプロトタイプを作成することができ、サインアップフロー、eコマースチェックアウト、フォームバリデーション、コンポーネントの状態、アクセシビリティなどをテストするために、完全に機能するダイナミックなユーザー体験を作成できます。  

UXPinでプロトタイピングを次のレベルに引き上げるための4つのコードベース機能をご紹介します:  

  • ステート:1つの要素やコンポーネントに複数のステートを適用し、それぞれに異なるプロパティ、インタラクション、アニメーションを持たせることができる。
  • インタラクション:高度なアニメーション条件付きインタラクションにより、複雑なインタラクションを作成できる。
  • 変数:ユーザーの入力を取得・保存し、その情報を使ってアクションを起こしたり、ユーザー体験を個別化する。
  • エクスプレッション:Javascriptのような機能で、フォームの作成、パスワードの検証、ショッピングカートの更新などを行うことができる。

  UXベンチマークと製品目標を達成するための実行可能な結果を得るのに、質の高いユーザビリティテストを実施しましょう。無料トライアルにサインアップして、 UXPinがどのようにUXデザインプロセスを強化し、より良いUXを顧客に提供できるのか、ぜひご覧ください。  

人を惹きつけるモバイルアプリデザイン

All you need to know about creating engaging mobile app design

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

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

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

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

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

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

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

ステップ1 企画・調査

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

search files 1

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

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

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

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

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

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

code design developer

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

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

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

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

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

user bad good review satisfaction opinion

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

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

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

1. アイデアの確定

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

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

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

2. 予算の算出

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

timer

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

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

3. KPIの設定

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

designops efficiency person

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

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

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

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

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

1. 使いやすさ

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

2. 馴染みやすさ

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

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

3. 一貫性

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

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

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

4. アクセシビリティ

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

accessibility

5. アピール性

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

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

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

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

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

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

2. モバイル向けに構築

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

mobile screens pencils prototyping

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

3. 真のデザインツール

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

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

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

アプリのデザイン例3選

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

例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の提案を試すだけでいいのです。

etsy app design

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

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

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

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

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

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

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

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

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

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

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

testing observing user behavior

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

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

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

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

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

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

uxpin collaboration comment mobile design

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

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

2. 実測データ

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

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

3. 連携・共有機能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. ダークモード

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

image1

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

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

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

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

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

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

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

npm統合 – MUIコンポーネントのUXPinへ導入のご案内

npm統合

  UXPinの npm統合 があれば、デザイナーはnpmコンポーネントライブラリをインポートして、完全に機能するプロトタイプを構築することができ、このような忠実度の高いプロトタイプにより、従来のベクターベースのデザインツールでは実現できなかった特徴やインタラクション、機能をテストすることができます。

UXPinの npm統合 とは

最初に、当社のnpm 統合は革新的なテクノロジーの最新のイテレーションであることから、まずはUXPin Mergeの理解が重要です。

Mergeでは、デザインシステムのコンポーネントライブラリをGitレポジトリまたはStorybookからUXPinのデザインエディタに同期できるので、デザイナーはデザインシステムから来る完全にインタラクティブなコンポーネントを使ってプロトタイプを作成することができます。

このコンポーネント駆動型のプロトタイピングにより、デザイナーとエンジニアが同じデザインシステムで作業する信頼できる唯一の情報源(Single source of truth)ができ、レポジトリへの変更は自動的にUXPinに同期されるため、チームは常に最新バージョンを使うことができます。

npm統合 の入力

npm統合

デザイナーが Merge を接続して同期する際、以前はエンジニアの助けが必要でしたが、UXPinの npm統合 があれば、デザイナー(またはDesignOpsがあれば)はコードを書かずに直観的なユーザー インターフェースを使用して統合を完了できます。

コンポーネント ライブラリが npm パッケージとして存在する場合、Merge でUXPin に接続し、プロトタイプ作成を始めるのに必要な UI 要素をインポートすることができます。MUIのようなオープンソースのデザインライブラリは、命名規則、ファイル構造、ドキュメントが一貫しているため、npm統合と相性抜群です。

MUIを使うメリット

MUIは、GoogleのマテリアルデザインUIをベースにしたReactコンポーネントライブラリです。包括的なデザインシステムで、UIの速やかな構築に必要なものがすべて揃っているため、プロトタイピングに最適です。

MUI チームは、コンポーネントが基本的なユーザビリティとアクセシビリティの問題を確実に解決できるように素晴らしい作業を行い、そのおかげですぐに使用できる製品開発ソリューションを提供できるのです。

MUIはテーマに対応しているので、デザインシステム構築の基盤として利用したり、製品のコンポーネントライブラリに新しいパターンを見つけようとする際に、UI要素のテストに包括的なライブラリを活用することができます。

MUI npmとUXPin Mergeの統合

MUIには、いくつかの画像ベースのデザインツール用のデザインキットがありますが、UXPinでは、エンジニアが開発に使用するのと同じ基本コンポーネントであるコンポーネントライブラリを完全にインポートすることができます。

UXPinのMUIコンポーネントは、他の静的コンポーネントとまったく同じように見えますが、コードと同じ忠実度と機能を備えており、UXPinはベクトルグラフィックではなく、バックエンドでHTML、CSS、Javascriptをレンダリングします。

UXPinにUIエレメントをインポートすると、MUIのコンポーネントステートもそのまま利用することができます。画像ベースのデザインツールでこの設定をしたことがあれば、基本的なステートを追加してプロパティパネルに割り当てるのがいかに時間がかかり、複雑かわかると思います。でもUXPinの npm統合 があれば、数回のクリックでこういったステートをインポートすることができるんです!

Merge Component Manager でのプロパティの割り当て

Merge Component Managerでは、各MUIコンポーネントのプロパティの設定ができます。

各コンポーネントにインポートするReact propsの選択には、MUIのドキュメントが使えます。このようなインポートされたReact propsは、UXPinの右側のプロパティパネルに表示され、個々のUI要素をカスタマイズすることができます。

例えば、MUIボタンには、以下のような色のプロパティがあります:

  • 原色
  • 二次色
  • 成功
  • エラー
  • 情報
  • 警告

このようなプロップをMerge Component Managerでインポートすると、プロパティパネルにドロップダウンが表示され、必要なカラーの選択ができます。同じことが、バリアント(付属、輪郭、テキスト)、サイズ(小、中、大)、およびその他の複数オプションのプロップにも当てはまります。

プロパティの種類は、二択、関数、文字列、配列、列挙など、いくつかあり、プロトタイピングのニーズに応じて、ドキュメントにあるMUI React propsをインポートすることができます。

UXPinとMUI npmパッケージの接続

ステップ1

UXPinのダッシュボードに移動し、【New Project(新規プロジェクト)】をクリックします。

ステップ2

プロジェクトに名前を付けて、【Create New Project(新規プロジェクト作成)】をクリックします。

ステップ3

【New prototype(新しいプロトタイプ)】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ4

左サイドバーの【Design System Libraries(デザインシステムライブラリ】タブの下部にあるドロップダウンをクリックし、【New library (新しいライブラリ)】をクリックします。

npm統合 デザインシステムライブラリ

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ5

【Import React Components (Reactコンポーネントをインポートする)】を選択し、【Next(次へ)】をクリックします。

import npm package

ステップ6

ライブラリに名前を付けます。この名前は純粋にあなたの参照のためであり、インポートに影響を与えません。

そして、MUI Materialのnpmページの【Install】にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、【Library package name(ライブラリパッケージの名前】欄に貼り付けます。

npm統合

記号の前をすべて削除して、@mui/materialのみ残し、他はデフォルトのままにして、【Next(次へ)】をクリックします。

MUIコンポーネント のインポート

npmの統合が完了すると、UXPinは自動的にキャンバスに誘導されます。さて、いよいよインポートしたいMUIコンポーネントの選択です。

ステップ1

左側のサイドバーから、【Open Merge Component Manager(Merge Component Managerを開く)】をクリックします。

npm統合 Mergeコンポーネントマネジャー

Merge Component Manager は新しいタブで表示されます。

ステップ2

【Add new component(新しいコンポーネントを追加)】をクリックします。

ステップ3

インポートするコンポーネントの名前を入れます。

正しい命名規則は、MUIドキュメントのComponent APIに記載されています。MUIのコンポーネントは、スペース無しの「キャメルケース」を使用しています。最初の文字は常に大文字にするので、例えば、ボトムナビゲーションは 「BottomNavigation」 となります。

最初のコンポーネントとしてMUIの【Button(ボタン)】をインポートし、【Inputs(インプット)】という新しいカテゴリに追加してみましょう。デザイナーとエンジニアが同じ参照ポイントを持てるように、MUIのドキュメントと同じカテゴリの使用をお勧めします。

一度のインポートで複数の部品を追加できるので、ステップ2と3を繰り返す手間が省けます。   Import Components(コンポーネントをインポートする)】をクリックします。

npm統合 コンポーネントインポート

ステップ4

右上の【Publish Changes(変更を公開)】をクリックすると、インポート処理が初期化されます。

step 4 publish changes

新しいコンポーネントに対して初めて行う場合、1~2分かかるかもしれません。

ステップ5

インポートが完了したら、【Refresh Library(ライブラリを更新)】をクリックして、プロジェクトライブラリの変更内容を更新します。

この手順を順を追って見ていくと、左サイドバーにカテゴリー(Inputs)と最初のコンポーネント(Button)があることがわかると思います。

ステップ6

【Button(ボタン)】をクリックして、プロパティの追加を開始します。このようなReactプロップは、MUIのドキュメント【Component API(コンポーネントAPI) > Button(ボタン)】で確認できます。

Merge Component Manager でコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、MUIボタンのプロパティをいくつか追加してみましょう。

 

npm統合 Mergeコンポーネントマネジャー

ボタンのラベル:ステップ1

MUIのボタンラベル(またはコンテンツ)は、【children】というReactプロパティを使用します。

  • プロパティ名:”children “と入力(propsは必ず小文字を使用)。
  • 表示名:これは参考までにですが、デザイナーやエンジニアが使うような説明的なものです。ちなみに筆者達は “Label(ラベル) “にしました。
  • 説明文:デザイナー向けの簡単な説明や指示を追加します。筆者たちは「Buttons’ label(ボタンのラベル)またはCTA(Call To Action)」を使います。
  • プロパティの種類:MUIのドキュメントにあるように「node(ノード)
  • プロパティコントロール“textfield”(注:このフィールドは、プロパティの種類を選択すると表示され、選択内容によって異なります。)
  • デフォルトの値:お好みでどうぞ。ここでは 【Button(ボタン)】とします(注:MUIはボタンラベルを大文字で表記します)。

コンポーネントのプロパティが完成したら、コンポーネントのプレビューが表示され、好みに応じて変更されることがわかります。

ボタンのラベル:ステップ2

すべての項目を入力したら、【Add property(プロパティを追加 )】をクリックします。

その後、【Save changes(変更を保存)】します。

最後に、【Publish library changes(ライブラリの変更)】を公開します。

UXPinによるコンポーネント駆動型プロトタイピング

必要なMUIコンポーネントをインポートしたら、UXPinでのプロトタイピングは、ドラッグ&ドロップでレイアウトを構築するのと同じくらい簡単です。ちなみに筆者たちは、3つのMUIコンポーネントを使用して、このシンプルなメールサインアップフォームを1分もかからず作成しました。

MUI コンポーネント を選択すると、Merge Component Manager で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinのコンポーネント駆動型プロトタイピングの可能性を発見する準備はできましたか?MUIの npm 統合 (またはnpmで利用可能なその他のオープンソースコンポーネントライブラリ)をぜひお試しください。

UXのビジネスケース:デザイン投資のための強力なケースを構築する方法

business case ux

限られたリソースと他部門との競争において、UI/UXデザインの取り組みに説得力のあるビジネスケースを作成することは、賛同者確保のために非常に重要です。その際、自身に最高のソリューションがあり、その取り組みを成功させることができることを証明しなければいけません。

本記事では、UXデザインの専門家が説得力のあるUXビジネスケースを作成する方法について、UAEの宅配サービス「Delivery Hero」の事例を交えてお話します。

UXPinを使用して、ビジネスケースをサポートする完全な機能を持つプロトタイプを作成しましょう。それでステークホルダーやユーザビリティ担当者は、最終的なデジタル製品と同じようにプロトタイプに関わることができます。無料トライアルにサインアップして、コードベースデザインによってUXワークフローとユーザビリティ・テストにどのような変革がもたらされ、製品開発が向上するか、ぜひご覧ください。

ビジネスケースとは

ビジネスケースは、プロジェクト、イニシアチブ、または戦略の利点と、会社または部門がそれを必要とする理由を概説しますが、UXのビジネスケースは、例えばデザインシステムの構築デザインツールの購入、大規模なUXリサーチプロジェクトへの投資など、特にデザイン関連のプロジェクトに関連します。

scaling process up 1

UXチームは、ビジネスケースを通じて以下をする必要があります:

  • 費用の必要性(問題)の実証
  • デザイン上の解決策の提示

解決策は、価値提案と組み合わせることで、より効果的になることが多いのです。このプロジェクトは、デザインと組織にどのようにROI(投資対効果)をもたらすでしょうか?

UXのビジネスケースが必要な理由

特にUXプロジェクトでは、ステークホルダーからの賛同は得難いです。非デザイナーの多くは、ユーザー中心デザインの原則やデザイン思考を理解しておらず、デザイン投資に対して消極的なのです。

UXビジネスケースは、製品のCX(カスタマーエクスペリエンス)を上げることがいかに利益につながるかをステークホルダーに示す必要があります。たとえば、デザインシステムは大きな投資ですが、ステークホルダーは、再利用可能なコンポーネントのライブラリがどのようにビジネス価値をもたらすのか理解できないことが多いため、デザイナーはビジネスケースを通じてこの価値を示さないといけません。

Delivery Heroのビジネスケースの価値提案

Delivery Heroは、デザインシステムのビジネスケースに価値提案を使用した良い例です。Delivery Heroのデザインチームは、自社のデザインシステムをステークホルダーに売り込もうと何度か試みた後、実際のケーススタディや価値提案など、より説得力のあるケースの作成が必要であることに気づきました。

そこでDelivery Heroの製品デザインチームは、デザインシステムを【使用した場合】と【使用しない場合】のユーザーインターフェースの構築を1つの画面で比較しましたが、その結果は、驚くべきものでした: 

  • デザインシステムなしでの構築 – 総時間: 7.5時間
  • 再利用可能なコンポーネントとして構築 – 総時間:3.25時間

この実験では、再利用可能なコンポーネントを使用することで、フロントエンドの工数の57%削減と、フロントエンドの負債を0%にすることが実証されました。

フロントエンドの負債はDelivery Heroにとって複合的な問題となっていたので、この問題を解消し、納期を60%近く短縮することで、ステークホルダーに大きなROIを示したのです。

Delivery Hero のステークホルダーはその結果に感銘を受け、会社のデザイン システムである「Marshmallow」にゴーサインを出しました。(Delivery Hero のストーリーの詳細については、こちらをご覧ください。)

UXビジネスケースに含めるべきこと

ビジネスケースの目的と重要性がわかったところで、盛り込むべきポイントを探ってみましょう。

  • エグゼクティブサマリー
  • ミッションステートメント
  • 市場
  • 問題提起
  • 解決策と価値の提案
  • リスク
  • ロードマップ
  • 必要なリソース
  • チーム

ここで重要なのは、必ずしもこのポイントすべてを使うわけではなく、ビジネスケースとプロジェクトに関連するものだけを使うということです。ビジネスケースを徹底的に、しかし簡潔にすることが目標であり、もしステークホルダーが調査結果を見たい場合は、別途提示することができます。

task documentation data

エグゼクティブサマリー

エグゼクティブサマリーは、ビジネスケースとそのセクションを要約したものであり、ビジネスケースのエグゼクティブサマリーに含めるべき必須要素は以下の通りです:

  • 問題点
  • 自身の解決策

ミッションステートメント

ミッションステートメントは、プロジェクトの目的とゴールを要約したものです。通常は数文で構成され、エグゼクティブサマリーと同じスライドに表示することができます。これは、チームメンバーやステークホルダーを共通のアイデアと目的で結びつけながら、デザイン・プロセスの指針となります。

Project Managerの記事であるHow to Write a Mission Statementをチェックしてみてください。

市場(またはユーザー)

UXビジネスケースが社内の取り組みである場合、このセクションを「ユーザー」に置き換え、プロジェクトが誰を対象としているかの特定ができます。たとえば、デザインシステムは、製品、UX、およびエンジニアリングの各チームにのサポートをしますが、エンドユーザーにもプラスの影響を与えます。ステークホルダーが実在の人物に共感できるように、エンドユーザーをペルソナで表現するといいでしょう。

問題提起

問題提起は、【重要な問題】、【人への影響】、そして【ビジネスへの影響】の概説であり、Atlassianのデザインマネージャーである ローラ・ヴァン・ドール氏は、「良い問題提起を行うには 2 つの要素があります」と言います。

問題の選択:

聴衆にアピールできる問題を選び、強調しましょう」 

ステークホルダーに売り込む際には、デザインチームだけに焦点を当てるのではなく、問題がビジネスにどのような影響を与えるかを示しましょう。

Delivery Heroの場合、製品チームは、現在のプロジェクトワークフローで「フロントエンドの負債、不整合、市場投入までの時間の遅れが蓄積され、最終的にビジネスの時間とリソースを犠牲にしていること」を示しました。

ユーザーに直接影響を与える問題を提示する場合、ステークホルダーに問題を明確に理解してもらうために、カスタマージャーニー、ユーザーリサーチ、その他のUXアーティファクトを含めるとよいでしょう。

問題の枠組み:

ローラの次のステップは、ターゲットとなるユーザーに対する問題の枠組みです:

  • 核となる問題の特定
  • その問題が誰にどのように影響するかの概説
  • オーディエンスとビジネスへの悪影響の説明

解決策と価値提案

自身のソリューションがどのように企業の問題を解決するのか、その価値提案を記述しましょう。価値提案は、その価値とROI(投資対効果)を説明するので、ビジネスケースにとって非常に重要です。

ステークホルダーは、ビジネス関連の影響に比べたら、ワークフローの問題解決には関心がありません。自身のソリューションはどのようにROIを実現するのでしょうか?

designops picking tools care

Delivery Heroのデザインシステムチームのアンバー・ジャビーン氏は、解決策にはビジネスメトリクスとKPIを使用して、組織にとってプラスになることの説明が必要だと言います。コスト削減、収益上昇、市場投入までの時間の改善、製品の競争力の向上をどのように行おうとしていますか?

リスク

徹底したビジネスケースは、リスクとその対処法についても検討します。ステークホルダーは、あなたが解決策を多角的に検討し、潜在的な問題に備えていることを知りたがりますからね。

Atlassianのローラ・ヴァン・ドール氏は記事の中で、「夢見る夢太郎ではなく、現実を見ましょう…夢を売りすぎて、成功しかありえないようなシナリオを提示すると、ケースが偏りすぎているように見え、どん底に突き落とされるかもしれないですよ」と述べています。

ロードマップ

ビジネスケースのもう一つの重要な要素は、タイムラインまたはロードマップです。プロジェクトの実現にはどれくらいの時間がかかるのでしょうか、そして、企業は提案された解決策の価値をいつから享受できるのでしょうか?また、ステークホルダーが進捗を確認できるよう、KPI(重要業績評価指標)はどのように設定しますか?

ここでも、関連するビジネスメトリクスの使用が重要です。例えば、人材について議論する場合、デザイン、プロダクト、エンジニアリングなど、部門ごとの総時間を見積もりましょう。このような内訳により、ステークホルダーは、プロジェクトが会社の人的資源や他のプロジェクトにどのような影響を与えるかを見ることができます。

必要なリソース

人材、資金、技術、デザインなど、プロジェクトに必要なリソースは何でしょう。可能であれば、複数のシナリオを用意し、利用可能なリソースに基づいた選択肢をステークホルダーに提供しましょう。

lo fi pencil

プロジェクトの実施前、実施中、実施後にどのようなリソースが必要になるかを考えましょう。たとえば、デザインシステムには、開始前のデザイン監査、デザインシステムの構築と提供のための人材、デザインシステムの管理と拡張のためのチームなどが必要です。デザインシステムが成熟するにつれて、より多くのリソースが必要になります。

チーム

ビジネスケースの背後にあるコアチームと、プロジェクトを実現し、拡大するために必要な人材について、特に詳しく説明しましょう:

  • UXデザイナー
  • エンジニア
  • プロダクトマネージャー
  • アナリスト
  • ステークホルダー

強力なUXビジネスケースのためのベストプラクティス

2022年5月に開催されたDelivery Hero MENA(talabat)のDesignOps Director、アンバー・ジャビーン氏によるウェビナー「Enterprise Design System – How to Build and Scale」から、ベストプラクティスをいくつか拝借しました。

1. 本当のペインポイントから始める

ビジネスケースには、製品、ユーザー、そしてビジネスに悪影響を与えるペインポイントが含まれてないといけません。問題の影響を受けるのがチームメンバーだけだと示されていたら、ステークホルダーが行動を起こす可能性は低くなります。

例えば、その問題が【手直し(余分なコスト)】、【ユーザビリティの問題(ユーザーを失い、費用のかかるサポートチケットを生み出す)】、【技術的負債(余分なコスト)】、【市場投入までの時間の遅れ(競争力の低下と収益の損失)】を生み出していると証明できたとします。そうすると、あなたにはステークホルダーの注目が集まる真のペインポイントがあるということになります。

2. 価値提案の構築

ペインポイントを中心に価値提案を構築しましょう。あなたの解決策は、問題を解決し、ROIをもたらさないといけません。現実的であること、そしてリスクを考慮したことをステークホルダーに示すことを忘れないようにしましょう。

3. 最大の支援者とスポンサーを特定する

UX以外のリーダーやステークホルダーを見つけ、ビジネスケースをサポートすることで、より重みのあるビジネスケースにすることができ、以下のような提唱を彼らから得られるでしょう:

  1. 特定された問題は、現実のものである
  2. 提案されている解決策と価値提案は最良の選択肢である

ビジネスケースには、このような支持者を含め、場合によっては最も影響力のあるステークホルダーの言葉を引用することもできます

4. 語る前に見せる

UX以外の人は、UXとデザイン思考の原則を理解するのが難しいことから、問題を説明するだけでは不十分です。なので、何が問題で、それがビジネスにどう影響するかを見せる必要があります。

prototyping paper pencil lo fi

Delivery Heroで見たように、アンバーのチームは、会社の時間とお金を浪費している非効率性と問題を示す実験を提示しました。そして、自分たちの解決策がその問題を解決し、組織に価値を提供できることを証明したのです。

ステークホルダーに理論を提示すれば、彼らは証明しろと送り返すでしょう。時間をかけてテストや実験を行い、自分のソリューションを実行し、それがうまくいくことを証明しましょう。

5. ビジネスメトリクスを語る

あなたの問題と解決策には、あなたのビジネスケースをサポートするための数字が含まれていなければなりません。ステークホルダーは、査定のためのメトリクスやKPIを見たいのです:

  • 問題の状態と規模
  • あなたの解決策がどのようにその数値を改善するのか

6. 一人でしない:ネットワークの構築

ステークホルダーにビジネスケースを提示する前に、部門を超えたチームメンバー、リーダー、マネージャー、そして問題の影響を受けるすべての人に話を聞いて、解決策への支持と賛同を得るようにしましょう。プロジェクトの背後に組織があれば、意思決定者から承認を得られる可能性が高くなります。

UXPinプロトタイプでビジネスケースをサポートしよう

UXPinのコードベースのデザインツールにより、デザイナーはコードのような忠実性と機能性を備えた完全なプロトタイプを作成することができます。UXデザイナーは、ある機能がどのように機能するかを想像するのではなく、最終的な製品体験を正確に再現し、ステークホルダーに対してより説得力のあるビジネスケースを作成することができます。

ステークホルダーやユーザーテストのために、より質の高いプロトタイプを構築するための無料トライアルにぜひご登録ください。

マテリアルデザインのアイコン: Webとアプリデザインの構成要素

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

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

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

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

マテリアルデザインとは

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

design system atomic library components

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にマッチするようにデザインされている。
material-design-icons-types

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

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、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 autolayout

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

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

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

企業デザインシステムの構築と拡張に関する11の教訓

Powerful Lessons on Building and Scaling an Enterprise Design System

2022年5月、UXPinはDelivery Hero MENA(中東・北アフリカ地域(talabat))のDesignOpsディレクターであるアンバー・ジャビーン氏をお迎えし、「Enterprise Design System – How to Build and Scale.」と題したウェビナーを開催しました。

本記事では、彼女の講演の一部を要約し、デザインシステムの賛同を得る際にチームが直面した課題と、彼女ならどうするかということについてお話します。

アンバーは、UXPinの無料eBook「 DesignOps 101: Guide to Design Operations」の共同執筆者です。この本は6つの章からなり、DesignOpsの紹介とその実践法が説明されています。

UXPinでデザインシステムを構築、拡張、共有、成熟させましょう。

デザインシステムの賛同を勝ち取るために多くのチームが行っていること

2019年、Delivery Heroは、多くのスタートアップが経験する、あまりにも身近な困難に見舞われていました。UIライブラリやデザインシステムもないまま、9つのチームが製品に取り組んでいたことにより、Delivery Heroはサイロを生み出し、重複が多く、拡張しにくく、結果的に「非常に断片的なUX(ユーザーエクスペリエンス )」になっていたのです。

user choose statistics group

アンバーとそのチームは、デザインシステムこそが、自分たちの問題を解決するイチバンの方法だと考え、ステークホルダーの賛同を得るためのケース作りに取りかかりました。

デザイン監査の実施

Delivery Heroの製品チームは、まずデザイン監査から始めました。そして監査報告書では、以下のような多くのユーザーインターフェースの不整合が明らかになったのです:

  • 数種類のCTA(Call To Action)
  • タイポグラフィ・スタイリング基準なし
  • 複数のアイコン形式

アンバーは講演の中で、「…私たちのデザイン言語は、あちこちにあったのです。これは、大きな気づきの瞬間でした。」と言っています

チームは監査報告書をもとにビジネスケースを構築し、Delivery Heroの幹部に提示した結果、アプリ再デザインの賛同を得ることができました。

製品チームはまず、主要な画面とユーザーフローの再デザインを行いました。新しいデザインは、より一貫性があり、クリーンで、ブランドとの整合性が高く、UXを上げるものでした。

UIパターンでUIライブラリーを構築する

製品チームはこの再デザインをもとに、色、タイポグラフィー、立面図、UIパターン、コンポーネントなどのUIキットとスタイルガイドを作成しました。

Delivery Heroの製品部門は規模を拡大し、新しいデザイナーを採用しました。アンバーは、「このような規模の拡大にもかかわらず、Delivery Heroのデザインプロジェクト全体の一貫性が向上し、デザインを拡張することができた」と述べています。

コンポーネント・ライブラリ構築の初挑戦

デザイナー向けの信頼できる唯一の情報源(Single source of truth)のデザインに成功したDelivery Heroの製品チームは、エンジニアリング向けにも同じことをしたいと考えていました。そこでアンバーと彼女のチームは、コンポーネントライブラリのための別のビジネスケースをまとめました。

ビジネスケースのDelivery Heroデザインシステムの主要な利点を以下にまとめました:

  • デザイン – 開発間の信頼できる唯一の情報源(SSOT)
  • より良いUX(ユーザーエクスペリエンス)
  • ブランドとの親和性強化
  • 実験、プロトタイピング、テストの迅速化

Delivery Heroの幹部は、プレゼンテーションを気に入り、製品チームの提案に価値を見いだしました。 なのに、デザインシステムを作るお金もリソースもなかったことから、コード・コンポーネント・ライブラリの構築の答えは「ノー」だったのです!! 

アプローチの練り直し

アンバーのチームは、もう一度振り出しに戻って、スタイルガイドを使った新しいデザインをアプリ全体に展開することにしたのです。このプロジェクトには3ヶ月を要しましたが、製品開発チームにとっては大成功でした。

その後6ヶ月の間に、Delivery Heroはたくさんの新機能と実験結果を出しました。製品チームの新しいデザインは新鮮で一貫性がありましたが、エンジニアにとっての信頼できる情報源がないため、Delivery Heroの最終的なリリースに一貫性がないという問題がありました。

製品チームは、一連の監査を再度行うことにして、そこでデザインハンドオフとプロダクションのスクリーンショットを撮った結果、コンテンツやUI要素の欠落など、多くの矛盾が明らかになりました。この監査で、Delivery Heroがリリースごとに負債を積み重ねていることがわかったのです。

Delivery Heroのデザインシステムに対する説得力のある事例の構築

Delivery Heroのデザインシステムチームにはエンジニアがいなかったので、デベロッパーと組んで、幹部に新しい売り込みをするためのコンポーネントを作り、テストする必要がありました。

designops efficiency person

アンバーのチームは、Delivery Hero の【No results】画面用のコンポーネントを作成し、デザイン システムを「使用する場合」と「使用しない場合」とで比較して実験しました

  • デザインシステムなしで構築 – 合計時間:7.5時間
  • 再利用可能なコンポーネントとして構築 – 合計時間:3.25時間

製品チームは、フロントエンドの開発時間のみを記録しました。この実験では、再利用可能なコンポーネントによって、フロントエンドの労力が57%削減され、負債が0%になることが実証されました。

アンバーのチームが、この新しいデータを使って、コンポーネントライブラリ構築のための別の事例を提示すると、Delivery Heroの幹部はこの結果に感動し、デザインシステムの開発にゴーサインを出したのです。

そして現在、Delivery HeroのデザインシステムであるMarshmallowは、デザインシステム専門チームが管理するUIキットとコードUIライブラリの30以上のコンポーネントを持ち、デザインと開発を一元化しています。

Marshmallowには、以下のものがあります:

ゼロからのデザインシステムの作り方はこちらでご覧になれます:Design Systems: Step-by-Step Guide to Creating Your Own.

企業向けデザインシステム構築のための賛同取得と拡張

mobile screens pencils prototyping

アンバーは、学んだことを振り返りながら、企業向けデザインシステムへの賛同を得るための6つのアドバイスをしています。

本当のペインポイントから始める

製品、ユーザー、ビジネスに悪影響を及ぼしているペインポイントを特定することは、重要な第一歩です。アンバーとそのチームは、監査システムを使って、デザインと開発の間に大きなずれがあることを突き止めました。

価値提案の構築

ビジネスケースのための価値提案の構築に、ペインポイント(複数可)を使いましょう。そして解決策は、問題を解決し、ステークホルダーに投資対効果をもたらすものでなければなりません。

最大の支援者とスポンサーを特定する

アンバーは、デザインシステムの売り込みを裏付けるために、他部署からの支持者を探すことを勧めています。その支持者は、1, “これは会社にとって本当の問題である” 2, “これは最良の解決策である “というあなたの主張を支持してくれるでしょう。

語る前に見せる

アンバーは、最初のプレゼンテーションで犯したミスは、証拠なしにストーリーを語ったことだと言います。そこで、コンポーネントライブラリで何ができるかをステークホルダーに見せると、チームの話はより説得力を増し、ビジネスケースも納得のいくものになりました。

ビジネスメトリクスを語る

“シナリオのビジネスケースを、KPIやビジネスに影響を与えるメトリクスと関連付けなければ、ストーリーは完成しません。” アンバー・ジャビーン氏

さらに、ビジネスケースには、この問題がどのように会社のリソースに負担をかけているのか、そしてその解決策によって何ができるのかを示す、デザインシステムのメトリクス含まれていなければいけないと言います。

一人でしない:ネットワークを築く

技術、デザイン、製品、マーケティング、顧客サービスなど、部門を超えたパートナーのネットワークとしてビジネスケースを売り込み、デザインシステムが、組織のための解決策であり、デザインチームの負担を軽くするためだけのものではないことを証明しましょう。

アンバーの1時間のウェビナー全体はYouTubeでご覧になれます。

UXPinによるコードベースのデザインシステム

UXPin独自のMergeの技術により、デザインシステムのコンポーネントライブラリとUXPinのエディタを同期させ、デザインと開発の間に信頼できる唯一の情報源(SSOT)を作成することができます。