スプラッシュスクリーン でユーザーの心をつかむ

 How To Design A Splash Screen

「Vous n’aurez pas deux fois l’occasion de faire une première bonne impression.(第一印象を与えるチャンスは二度とない)」ということわざがあります。

これは、初対面の人と接するときや、ユーザーがあなたのアプリケーションを初めて体験するときにも当てはまります。

調査によると、ユーザーがアプリにとどまるか離れるかを判断するのに50ミリ秒かかると言われています。

そのため、スプラッシュスクリーンは、ユーザーがアプリケーションをどのように認識し、体験するかを決める重要なものです。

そこで本記事では、スプラッシュスクリーンとは何か、なぜ重要なのか、そして スプラッシュスクリーン をデザインするためのベスト・プラクティスについて説明します。

UXPinの無料相談およびトライアルはこちらから。

スプラッシュスクリーン とは?

スプラッシュ・スクリーンとは、ユーザーがウェブサイト’やアプリを起動すると表示され る導入画面のことです。

ブランドアイデンティティを確立するチャンスであり、アプリがバックグラウンドでロードされる間、ユーザーを退屈させません。

この画面には、画像、グラフィック、ロゴ、アニメーションなどが使用され、プログレスバーと組み合わせて使用されることもあります。

なぜスプラッシュスクリーンが必要なのか?

スプラッシュスクリーンは、デバイスの速度が遅く、インターネットの速度がさらに遅かった時代によく使われていました。しかし、インターネットが普及し、デバイスが高速化した現在においても、以下のような理由で重要な役割を果たしています:

起動時にユーザーを退屈させない

アプリの処理速度が格段に速くなったとはいえ、実際にはユーザーがアプリを操作するまでに数秒のセットアップが必要です。ユーザーがアプリに入る前に、ログイン情報を再度入力する必要があったり、画像を読み込んだり、ホームページのデータを読み込んだりする必要があるかもしれません。これらのバックグラウンドタスクが実行されている間、スプラッシュスクリーンはユーザーを退屈させず、シームレスな体験を提供します。

さらに、プログレスバー付きのスプラッシュスクリーンは、アプリの放棄を減らします。何が起きているのか、どれくらい待たなければならないのかをユーザーに正確に伝えることで、不安を減らし、待ち時間を短く感じてもらうことができます。

ユーザーを歓迎し、アプリ内での体験の舞台を作る

スプラッシュスクリーンは、ユーザーがアプリを使い始めるときに期待すべきことの基準を設定します。ユーザーを歓迎し、期待感を持たせることは非常に重要です。なぜなら、ユーザーがアプリとのインタラクションの初期段階でアプリをポジティブに受け止めれば、ポジティブな体験をしたと受け止められる可能性が高いからです。

スプラッシュスクリーンは、ホテルや複合施設のグランドエントランスと同じ役割を担っています。エントランスは、洗練された上質な施設に入ることを意味します。同じように、ユーザーがアプリのアイコンをタップすると、すぐにそのアプリの世界に入っていきます。スプラッシュスクリーンは、ユーザーを歓迎し、驚異的な体験のためのステージを設定するチャンスです。

スプラッシュスクリーン をデザインするためのベストプラクティス

優れたスプラッシュ画面作成のプロジェクトに取り組むためのベストプラクティスについて説明する前に、すべてのモバイルアプリにスプラッシュスクリーンが必要なわけではないことを知っておくことが重要です。スプラッシュスクリーンは、特にアプリが頻繁に使用される場合、不必要な摩擦を引き起こすことがあります。例えば、WhatsAppのメッセージをチェックするたびに(3分後であっても)3秒間のスプラッシュスクリーンを見なければならないとしたら、それは迷惑なことですよね?

ここでは、訪問者を歓迎し、素晴らしい第一印象を与えるスプラッシュスクリーンを作成するためのベストプラクティスをご紹介します。

なるべく短くする

スプラッシュスクリーンは、「3秒ルール」と呼ばれる、3秒を超えてはならないというルールに従うべきです。スプラッシュスクリーンが3秒以上続くと、通常のアプリユーザーには不満が残り、ユーザーエクスペリエンスを損なうことになります。また、ユーザーがアプリを定期的に使用することを想定している場合(メッセンジャーアプリのように少なくとも1日1回)は、1秒ルールを使用するか、完全に排除します。

アプリケーションの読み込みに3秒以上かかる場合は、スプラッシュ画面の代わりにスケルトン画面を使用します。スケルトン画面では、最終的なユーザーインターフェイスの骨格が表示されるため、ユーザーの不安感を軽減することができます。Slackはスケルトンスクリーンをうまく使っています。

シンプルで印象的なデザイン

忘れられない第一印象を与えるには、3秒しかないので、シンプルかつ大胆なデザインを心がけましょう。100万通りものアニメーションを使ってユーザーを圧倒するのと、冷たくて無味乾燥なスプラッシュスクリーンを作るのとでは、微妙なバランスを取る必要があります。

多くのデザイナーは、スプラッシュスクリーンに大胆な色や画像、アニメーションロゴや背景色を使用しています。Kindleアプリは、シンプルで人目を引くス プラッシュスクリーンの好例です。広告など、ユーザーが関心を持たないような勝手なメッセージのスプラッシュ画面への挿入は避けましょう。

スプラッシュスクリーン Kindle

待ち時間の不安を解消

ユーザーは、アプリがクラッシュしたのか、それともまだロード中なのかがわからないと、高い確率でアプリを放棄してしまいます。そのため、プログレスバーやプログレスアニメーションは、ユーザーの不安感を軽減するのに非常に有効です。ユーザーに待ち時間を知らせることで、アプリを放棄する可能性を減らすことができます。待ち時間が短いアプリの場合はスピナーを使うことができますが、待ち時間が長い場合はプログレスバーの方が適しています。なぜなら、スピナーは永遠に回転しているように見えてイライラするからです。Google Workspaceはプログレスバーをうまく使っています。

スプラッシュスクリーン 
Google Workspace

驚きと喜びの要素を加える

時間と予算に余裕があれば、スプラッシュスクリーン に楽しさと個性を加えることができます。楽しいアニメーションや、UIに溶け込むようなスプラッシュスクリーンは、ユーザーを喜ばせることができる方法のひとつです。ただし、やりすぎには注意が必要です。凝ったスプラッシュスクリーンは、ユーザーが初めてアプリを起動したときにだけ表示されるようにするのが良い方法です。以下の例をご覧ください:

Source
Source
Source

印象に残る スプラッシュスクリーン のデザイン

スプラッシュ画面は、ユーザーにアプリを公開するためのゲートウェイです。優れたスプラッシュスクリーンは、アプリに対するユーザーの認知度を高め、ブランドの認知度を強化します。デザインとエンジニアリングを融合させたUXPinのオールインワンツールで、忘れられないウェルカムスクリーンをデザインしてみませんか。無料相談およびトライアルはこちらから。

ローコード ツール、ノーコードツール

 ローコード ツール、ノーコードツール

ノーコードやローコードのアプリケーションプラットフォーム(LCAP)は、近年さらに注目を集めてきています。ローコードの製品には、特定のニッチな分野をターゲットにしたものもあれば、広範囲のアプリケーション、ソフトウェア、ツールのコーディングを不要にするソリューションを提供するものもあります。

ローコードまたはノーコード開発のいい点は、アプリやツールの構築をより身近なものにしてくれることです。特に大きなアイデアはあるものの、資金があまりない若い起業家にとっては魅力的です。

多くのLCAPでは、ユーザーがAPIやGoogleのFirebaseのようなインフラストラクチャ・アーキテクチャと統合できるようになっており、企業は手頃な価格のアプリや既存のソフトウェアのプラグインを作ることができます。

ローコード開発は、UX調査やテストにおいても有効的です。UXデザイナーは、デザインを開発チームに渡す前に、LCAPを使って完全に機能するプロトタイプを作成し、より効率的にユーザーテストを行うことができます。このようなローコードのワークフローは、新製品や新機能をリリースする際の時間とコストを大幅に削減します。

ローコードとノーコード、その違いは?

多くの人にとって、「ローコード」と「ノーコード」は同じ意味を持つ言葉です。ノーコードと謳っている開発ツールのほとんどは、ユーザーがカスタマイズのために何らかのコード(通常はCSS)を挿入することを可能にしており、これが基本的にはローコードとなります。

最も一般的で広く受け入れられている言葉は、ローコード(Low-Code Application Platforms – LCAP)で、ローコードとノーコードの開発環境を指しています。

それでも、ローコードとノーコードには微妙な違いがいくつかあります。

ノーコードツール

ノーコードビルダーは通常、あらかじめテンプレートが用意されており、ユーザーはロゴや画像、テキストを変更することしかできません。

 ローコード ツール、ノーコードツール - その違いとは

また、これらのノーコードツールでは、Google SheetsやAirtableのようなシンプルなデータベースに接続することもできます。技術的なスキルを持たないユーザーでも機能するアプリを構築できるため、ノーコード開発は非常に身近なものとなっています。

ローコードツール

ローコードビルダーは、テンプレートを提供するだけでなく、ページやコラムのレイアウトを編集したり、CSSやJavascriptを追加したり、APIを接続したりと、よりカスタマイズが可能です。

ローコードツールでは、GoogleのFirebaseやParse、AWS Amplifyのような、より技術的なデータベースへの接続も可能になるかもしれません。

SAPやSalesforceのような多くの企業向けアプリケーションは、企業がソフトウェアと統合するアプリを構築できるように、ローコードツールを提供しています。

ローコード開発の仕組みとは?

ローコードツールでは通常、ドラッグ&ドロップ式のビルダーを使用して、アプリ(モバイル、デスクトップ、ウェアラブル・デバイス)やウェブサイトのページに要素を配置します。これらの要素には、テキスト、画像、ボタン、ナビゲーションなどが含まれます。これらの要素の中で、ユーザーはデータベースからデータを引き出したり、アクションやアニメーションを作成したりすることができます。

各要素は、ローコードツールがアプリやWebサイトをコンパイルする際に使用する、効果的なウィジェットです。また、ローコードツールの中には、ホスティングオプションを提供しているものもあり、ユーザーはコードのエクスポートや適切なホスティング環境の確保を気にする必要がありません。

デザインプロセスにおけるローコード

ローコードは、デザインプロセスにおいても不可欠なツールになりつつあります。まず、デザインツールが画像ベースではなくコードベースであれば、構築されたプロトタイプの挙動は最終製品に近くなり、インタラクションも非常にリアルになるという事実があります。

ローコードデザインツールのもう一つの利点は、製品チーム全体に力を与えることができることです。ローコードデザインソフトウェアを使えば、デザインの経験がほとんどないプロダクトチームでも、UXチームが作成したデザインライブラリを使って製品やインターフェースを簡単に作ることができます。

その典型的な例がUXPin Mergeです。デザイナーはMergeを使用して、準備の整ったUIコードコンポーネントをUXPinにインポートし、すぐにそれらを使ってデザインすることができます。これらの準備の整った要素は、開発者のGitリポジトリやStorybookから得られます。 ローコード ツール、ノーコードツール - UXPin Mergeを使ってみる

製品チームは、これらのコンポーネントを使って新しい製品やユーザーインターフェースを設計することができます。何よりも優れているのは、インタラクションがすでに用意されているため、チームが作るプロトタイプは忠実度が高く、会社のすべての標準に沿ったものになるということです。

チームのメンバーはすぐに使えるコンポーネントを使うので、エンジニアリングチームは最終製品をより早く作ることができます。

PayPal DesignOps 2.0のローコードプロダクトデザイン

ローコードプロダクトデザインの素晴らしい実践例として、PayPalのDesignOps 2.0があります。UXPin Mergeを使用して、PayPalのUXデザイナーと開発者は、製品チームが作業できる60以上のコンポーネントのデザインライブラリを構築しました。

このコードベースのデザインライブラリにより、PayPal の製品チームは UX チームからの最小限のインプットで製品を作ることができます。また、エンジニアリングプロセスも格段に速くなり、開発者は製品開発作業の80%以上をUXチームの支援なしに終えることができるようになりました。

ローコード開発のメリット

ローコード開発の最も大きなメリットは、スピードとアクセシビリティです。誰でもアイデアを実用的なアプリに変えることができ、多くの場合、数時間以内に完成させることができます。

ここでは、ローコード開発のメリットについて詳しくご紹介します。

  • スピード – ローコード開発では、チームや個人が迅速にアプリケーションを構築することができます。シンプルなアプリケーションでも、エンジニアが機能する製品にコード化するには数日かかります。より複雑なアプリケーションは、数週間から数ヶ月かかることもあります。
  • コスト削減 – アプリやウェブサイトを構築する際、エンジニアリングは最もコストのかかるステップの一つです。セキュリティのように、専門的なエンジニアリングスキルを必要とする要素もあり、これにはコストと時間がかかります。
  • 簡単なデプロイメント – ローコードツールは、多くの場合、ワンクリックでデプロイメントとホスティングを行うことができます。アプリやWebサイトのホスティングには、サーバーやホスティング環境について何も知らない場合は特に、多くの課題が伴います。
  • コンセプトテスト – ローコードツールは、スタートアップ企業が新しいコンセプトやアイデアをテストするための安価な製品を作るのに最適です。概念実証に成功すれば、スタートアップ企業が重要なシードステージの資金を確保するのに役立つでしょう。既存の企業は、開発に投資する前にテストするために、新しいサービス、プラグイン、アドオンを構築するためにローコードプラットフォームを使用するかもしれません。

ローコード開発のデメリット

ローコードツールには多くのメリットがありますが、いくつかのデメリットもありますのでご紹介します。

  • スケーラビリティ – ローコードツールはコンセプトの証明には優れていますが、これらのアプリはプラットフォームの限界に縛られているため、スケーラブルではありません。しかし、アプリが収益を上げるようになれば、開発者の雇用に投資し、スケーラブルなソリューションを考えることができます。
  • イノベーションの制限 – ローコードツールは、イノベーションにも大きな制限があります。繰り返しになりますが、プラットフォームの枠内で作業しなければならないため、潜在的に革新的なコードやアルゴリズムを書くことができません。
  • 高価なホスティング – ローコード・アプリケーションを構築するのは安くて速いのですが、ローコードツールで提供されるホスティングは、特に規模が大きくなるにつれて、通常のホスティングサービスよりも指数関数的に高価になります。
  • パフォーマンス – ローコード開発がパフォーマンスに悪影響を与える要因はいくつかあります。第一に、これらのシステムは一律のソリューションを提供するため、最終的なアプリケーションには多くの冗長なコードや未使用のコードが含まれている可能性があります。第二に、ローコードホスティングサービスを利用している場合、共有ホスティング環境である可能性が高く、スピードとパフォーマンスの面で理想的ではありません。
  • セキュリテイ – 機密データや消費者データを処理するアプリは、世界の一部の地域では、プライバシー法を通過するのに十分なセキュリティを備えていない可能性があります。例えば、EUのGDPRやカリフォルニア州のCCPAは、個人データの管理について非常に厳しい基準を設けています。

ローコード/ノーコードツールでは何が作れるのか?

「これがノーコードでできるの?」と驚くことがあるかもしれません。例えば、Bubbleのような有名なLCAPも、シンプルなAPIから複雑なソーシャルメディア、SaaSアプリケーション、Airbnbのような宿泊施設予約サイトなど、あらゆるものを作ることができます。

一部のLCAPプラットフォームでは、Javascriptの機能や洗練されたユーザーフローをドラッグ&ドロップのビルダーで作成する機能を提供しています。

カスタムソフトウェアのアドオンとAPI

ローコード開発は、既存のソフトウェアと統合するためのカスタム・アドオンを必要とするビジネスに最適です。

例えば、従業員が勤務時間を記録するために会計ソフトに接続するローコードアプリを構築することができます。この種のアプリは会社にとって利益を生まないので、カスタムアプリに何万ドルも費やすことは経済的に意味がありません。

上記のシナリオでは、経理部の誰かがローコードでアプリを作り、1日で正確に動作するようにデプロイすることができます。

Zoho Creatorは、企業が現在のシステムと統合したネイティブのiOS/Androidアプリを構築することができるローコードアプリビルダーである。

SaaS製品

ローコードツールを利用して、シンプルなSaaS製品を開発するスタートアップが増えています。デザイナーやエンジニアに頼る必要がないため、コストを抑えて迅速に拡張することができます。

教育

ローコードは、教育用ツールやアプリの構築に最適なソリューションです。これらのアプリは、新しい学生の申し込みを受け付けるだけの簡単なものから、学生がビデオを見たり、宿題を提出したり、クラスメートと交流したり、コースノートをダウンロードしたり、成績表を受け取ったりできるカスタマイズされたバーチャル教室まで、さまざまなものがあります。

これらはローコードアプリケーションのほんの一例に過ぎませんが、特に必要なサービスのシステムをデジタル化しようとしている資金不足の発展途上国にとっては、その可能性は計り知れないものがあります。

ローコードは開発者を置き換えるか?

開発者の必要性は常にありますが、ローコードアプリのプラットフォームはアプリ開発の未来形とも言えるでしょう。

LCAP業界は急速に変化しており、新興企業に新たな機会をもたらし、多くの企業にレガシーシステムのアップグレードや改良を可能にしています。

デバイスの互換性のための自動アップグレードや、最新のセキュリティ要件を満たしたりするインテリジェントなLCAPを使用して、非常に複雑なエンタープライズアプリケーションが構築されるようになるのはそう遠い未来ではないでしょう。

ローコードツールの将来性

Brandessence Market Research社によると、ローコード市場は、2027年には651.5億ドル、2030年には1,870億ドル の規模になるといいます。

Salesforce、Microsoft、Appian、Oracle、Agileなどのソフトウェア大手は、すでにローコード市場に強力な足場を築いており、これらのシステムを継続的に改良して、顧客にさらなるカスタマイズを提供しています。

これらの企業は、ソフトウェアを構築するのではなく、顧客のビジネスニーズにぴったり合った独自のアプリケーションを開発するためのツールを提供することになるでしょう。

ここで重要なのは、こうしたローコードツールは、イノベーションを推進する開発者やエンジニアがいなければ存在しないということです。AIを搭載したものであっても、ローコードアプリケーションの限界に囚われることになるでしょう。

ローコードは必ずしも開発者に取って代わるものではなく、開発チームが構築するシステムやツールを変えるものです。

プロダクトチームの誰もが使えるローコードツールを使ってデザインと開発の連携を強化したいとお考えでしたら、Storybookを統合したUXPinの無料トライアルをお試しください。デジタル製品をより早く作るためのコードベースデザインツールのパワーをご体験ください。

プロトタイプに命を吹き込む インタラクティブ コンポーネント

プロトタイプに命を吹き込む インタラクティブ コンポーネント

ユーザビリティテスト参加者やステークホルダーに実際のユーザー体験に近いものを提供する上で、インタラクション機能は欠かせない存在です。しかし、インタラクティブなコンポーネントの作成には時間が掛かってしまい、ほとんどのデザインツールでは上手くいかないことから、多くのデザイナーを悩ませているでしょう。

UXPin Mergeを使用したコンポーネント駆動型プロトタイピング技術と、インタラクティブコンポーネントを使うことで、完全に機能するプロトタイプを構築できます。機能横断的なコラボレーションとユーザーテストを強化するための詳細については、こちらのページをご覧ください。

 インタラクティブコンポーネント とは?

 インタラクティブコンポーネント (またはインタラクティブ要素)は、デザインシステムから再利用可能なUI要素と、デフォルトでインタラクティブ機能を含んでいます。普段からUIキットを使い、プロジェクトごとにインタラクションを追加しなければならないデザイナーにとってこれは画期的と言えるのではないでしょうか。

デザインチームは、インタラクション、ステート、その他のアニメーションを設定して、最終製品を正確に表現する没入型のプロトタイプを作成できます。

インタラクティブコンポーネント のメリット

インタラクティブコンポーネント のメリットをいくつかご紹介します。

1. 少ないアートボード

従来、デザインツールを使ってインタラクションを作成するには、基本的な機能を実装するだけでも複数のアートボードが必要でした。デザイナーは、 インタラクティブコンポーネント を使うことで、1つのアートボードで同じ得ることができます。

2. 市場投入までの時間を短縮

インタラクティブなコンポーネントは再利用可能なので、デザイナーはインタラクションを一度設定するだけで、デザインプロセスでの時間を大幅に節約できます。

エンジニアが承認されたコンポーネントに慣れ親しめば、デザインのハンドオフはより簡単になり、プロジェクトの納期をさらに短縮することができます。

これらの時間節約の結果、市場投入までの時間が短縮されます

3. 一貫性の向上

UIキットはデザインの一貫性を高めますが、インタラクションに関してはあいまいさを残します。デザイナーはこれらのインタラクションを自分で設定しなければならず、エラーや一貫性の欠如につながってしまいます。

インタラクティブなコンポーネントには、インタラクティブ性がすでに備わっているので、誰もが同じステート、マイクロインタラクション、アニメーションを持ちます。これによって、一貫性を高めるだけではなく、デザイナーが修正するセットアップタスクやエラーが少なくなるため、効率性を高めます。

4. より良いテストとフィードバック

ユーザーやステークホルダーからのフィードバックは、デザインプロジェクトにとって非常に重要です。また、ビジネスゴールに沿ったユーザー中心の製品を提供するための意思決定の原動力となります。

ほとんどのデザインツールでは、エンジニアが数行のコードで実装する単純なインタラクションを実装するための忠実さと機能性に欠けています。 インタラクティブコンポーネント を使用すると、コードの機能を簡単に再現できるため、ユーザビリティテストやステークホルダーのために実物に近いプロトタイプを作成できます。

5. デザインシステムの普及を促進する

デザインシステムチームの仕事の1つとして、デザインシステムを普及を促進させることです。 これにおいても、インタラクティブコンポーネント は製品開発チームの効率的なワークフローを作成できる強力なツールとなります。

6. デザインの拡張

UXPinでは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントがデザインのスケーリングにどのように役立つかを見てきました。1つの例として、PayPalが新しく人材を雇用せずデザインプロセスを拡張したUXPin Merge活用方法をこちらで紹介しています。

リポジトリにホストされているインタラクティブコンポーネントにMergeを統合することで、PayPalのプロダクトチーム(UX/デザインツールの経験はほぼ無いに等しい)は、経験豊富なUXデザイナーが以前行っていたよりも8倍速くデザインプロジェクトの90%を完了することができました。

 インタラクティブなコンポーネント により、学習曲線が大幅に短縮されたことでデザイナーでない人にとってもデザインプロセスがより身近なものになりました。

PayPalのUXチームは、レイアウトやテンプレートを含むインタラクティブコンポーネントライブラリを構築し、React propsを使用してデザインシステムの制約を設定しました。製品チームは、ユーザビリティテストとデザインハンドオフのためのプロトタイプを、ドラッグ&ドロップで簡単に構築できます。

インタラクティブコンポーネントは、プロダクトチーム(または別のUXPin MergeユーザーであるTeamPasswordの場合はエンジニア)のような非デザイナーに、より多くのUXに関する仕事を与えることができます。

すでに構築済みのコンポーネントにクリック、ホバーなどの条件に応じてインタラクションを作成することも可能です。

UXPinプロトタイプにインタラクティブ・コンポーネントを組み込むには?

インタラクティブコンポーネントを製品のプロトタイプに組み込むには、多くのステップを踏む必要があります。フォームが実際に入力できること、ボックスがチェックできること、リンクがクリックできることを確認します。

このようにすることで、ユーザーが製品を使おうとする経験を持つことができ、製品がどのように機能し、人々がどのように使用する(または使用したい)のかについての洞察を得ることができます。

1. UXPinでの インタラクティブコンポーネント の使用

10年以上前のUXPinの最初のリリース以来、インタラクティブコンポーネントはUXPinのデザインツールの中核であり、最終的な製品体験を正確に再現するプロトタイプを作成するソリューションをデザイナーに提供してきました。

UXPinには、インタラクティブコンポーネントを作成するための4つの強力な機能があります:

  • ステート(状態): 1つのコンポーネントに対して、それぞれ異なるプロパティとインタラクションを持つ複数のステートバリアントを作成できます。
  • バリアブル(変数): ユーザーの入力データをキャプチャし、パーソナライズされた動的なユーザー体験を作成するために使用します。
  • Expression(式): Javascriptのような関数で、複雑なコンポーネントや高度な機能を作成できます!
  • 条件付きインタラクション: ユーザーのインタラクションに基づいてif-thenやif-elseの条件を設定し、複数の結果を持つ動的なプロトタイプを作成して、最終的な製品体験を正確に再現します。

UXPinのプラットフォームで簡単にドラッグ&ドロップできる、ビルド済みのコンポーネントを使用するのも1つの方法です。(ゼロから設計する必要はありません!)

UXPinのサンプルページにあるインタラクティブなコンポーネントの例をいくつかご紹介します。

ここで、ステート、バリアブル、Expression、条件ロジックで何ができるか見てみましょう。

例1. ボタン

例2. インプットとテキストエリア 

input and text area

例3. ラジオボタン

例4. インタラクティブなサインアップフォーム

→ このサンプルをダウンロードして使いたい場合は、こちらから

ドキュメントはこちらをご覧ください

2. UXPin Mergeの インタラクティブコンポーネント 

Mergeは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントをさらに進化させます。デザイナーが UXPin でコンポーネントを作成する代わりに、Merge はリポジトリからデザイン システム ライブラリをインポートします。

これらの MergeのUI要素の背後には React、Vue、Angular などのフロントエンドフレームワークのコードがあるため、真にインタラクティブなコンポーネントとなります。組織のデザインシステムをインポートすることも、オープンソースのライブラリを使用することもできます。

デザイナーは Mergeコンポーネントを使用するためにコードを見たり書いたりする必要はありません。また、UXPinのプロパティパネルからコンポーネントのプロパティにアクセスし、デザインシステムの制約内で変更を加えることができます。

Mergeについての詳細やアクセスはこちらをご覧ください。

Mergeのインタラクティブコンポーネントを使ってデザインする

logo uxpin merge

ステップ 1: デザインシステムからコンポーネントを取り込む

Mergeを使用してインタラクティブ コンポーネントを UXPin にインポートするには、3 つの方法があります:

  • Git統合: React コンポーネント ライブラリを UXPin に直接接続する
  • Storybook統合: Vue、Angular、HTML、Ember、Web Components などのフロントエンドフレームワークを同期します。
  • npm統合Node Package Manager(npm)からオープンソースのライブラリをインポートできます。npm Integration とその動作方法の詳細をご覧ください。

インポートされたMergeコンポーネントは左サイドバーのUXPinのデザインシステムライブラリに表示されます。デザイナーはサイドバーから必要なUI要素をクリックまたはドラッグしてキャンバスに表示することができます。

また、複数のデザインシステムとUXPin要素を使用したり、それらを組み合わせて新しいコンポーネントを作成し、パターンとして保存することもできます。

UXPin Mergeでプロトタイピングを始める方法

Mergeを使用して UXPinのコンポーネント駆動型プロトタイピングを始める準備はできましたか?始めるにあたって2 つの方法があります:

  • オープンソースライブラリ: オープンソースライブラリは、アクティブな開発サポートがないチームや、コンポーネントに取り組む前にどのように作業できるかの基礎的な情報を把握したいチームに最適です。
  • プライベートなデザインシステム: 製品のプライベートデザインシステムをUXPinと同期させたい場合は、Mergeページでアクセスをリクエストしてください。

UXPinの無料トライアルを14日間無料でお試しいただけますので、ぜひご利用ください。

デザイナーにコーディングは必要か?

Should Designers Code

Web開発のワークフローにデザインが どのように組み込まれるのかについては、常に議論に上がります。

例えば、デザイナーは「新しいオンボーディングフローを開発してアプリに組み込めませんか?そうすれば、コンバージョンが大幅に改善されますよ。」といいます。

それに対して、デベロッパーは「そのオンボーディングフローに組み込むのは、思っているよりもずっと複雑で、私たちがコーディングしたことのない要素が使われているのでできません。」というやりとりがあったりします。

これはほんの一例にすぎません。

この状況を、20人のデベロッパーと5人のデザイナーのチームに広げてみましょう。すると、デザインパターンの不統一、オンボーディングフローの崩壊、1週間の無駄な開発時間、遅いモバイルページ、1995年製のような日付ピッカーなどが発生するというような結果になってしまいます。

UXPin では、このような状況を何度も目にしてきました。そこで Mergeテクノロジーが搭載された UXPin だと、デザイナーは MUI や Ant Designなどからコード化されたコンポーネントを使ってインターフェースを構築することができます。そしてこのコンポーネントは、表面的にはフラットなUIコンポーネントのように見えますが、実際にはすぐに制作に使えるものです。UXPin Mergeをぜひ無料でお試しください

デザイナーとデベロッパーの断絶はどこで起こるのか

デザイナーとデベロッパーの間にはすれ違いが見られます。デザイナーはあり得るものを想像するのが仕事であり、デベロッパーはそれを具体化するのが仕事ですからね。

解決策として、デザイナーはコードを学ぶべきだと言う人もいます。もしデザイナーがコードを書けるなら、製品開発時の課題がわかるようになるでしょう。

その一方で、デベロッパーがデザインすべきだと言う人もいます。もしデベロッパーに最初から優れたデザインマインドがあれば、デザイナーは要らなくなるかもしれませんね。

おわかりかと思いますが、この2つの視点は完全に間違っています。

デベロッパーとデザイナー:まったく異なる2つの役割

1 48 1

デベロッパーは特定のスキルを持ち合わせています。Webサイトやアプリをどのように組み立てるかをよくわかっていますが、ユーザーがアプリにどう反応するかに対する理解は直感的に難しいでしょう。UXにはリサーチやイテレーションが必要であり、ユーザーを研究して、実際にアプリ内でどのように行動するのかを特定するのはまた別の仕事です。

対するデザイナーは、ユーザーの母集団を見て、彼らがどのように行動するかを特定する必要があります。また、アプリがユーザーの行動に適切に対応できるようになるには、継続的かつ反復的なデザインの実施が必要です。

UXデザイナーは、ユーザー心理を理解するためのユニークなスキルセットを持ち合わせており、ページでの入念な実験を重点的に行う必要があります。

しかし、デベロッパーはどのようにデザイナーの絶え間ない要求に対処しつつ、顧客のニーズに従って製品を作り上げるのでしょうか。

デザイナーがコーディングせずにコードを使えるようにするツールが必要

たとえデザイナーがコードの書き方を知っていたとしても、デザインの実装を最適化するという課題は残ります。製品全体の既存のコンポーネント、機能性、ブランディングを理解するには、誰がその作業を行うかにかかわらず、膨大な時間がかかります。

2 45

既存のコンポーネントをほとんど再利用するようなデザインを目指すのであれば、現時点でアプリに存在するもの全部のカタログを作成する人が必要になります。また、デザインが正確なパラメーターにきちんと適合するようにするために、他の分析を行う必要もあります。

ただ、デザイナーにもデベロッパーにもすでに決まった役割があるので、この業務を割り当てることはできません。デザイナーの役割はすでにフルタイムの仕事で、UXリサーチ、UXデザイン、コンバージョン率最適化に関する成果物があり、デベロッパーは、機能の構築とコーディングで手一杯です。

つまり、デザインと開発のワークフローを改善する真のソリューションが必要なのです。

特定のレポジトリにある既存のコンポーネントやエレメントのアウトラインを、ドラッグ&ドロップで視覚的に表示するツールが必要であり、これによって、デザイナーは新しいデザインを作りながら、既存のコンポーネントのメニューから選択することができるようになります。

UXPin Merge の紹介

3 39 

Mergeの技術が備わったUXPin は、Git と Storybook の統合によって開発ツールを活用するデザインツールです。以下で、詳しく説明していきます。

まず、Git統合があります。Mergeでは、Gitレポジトリから UXPinデザインエディタに既存のコンポーネントをインポートできます。

2つ目は、オープンソースのUI開発ツールである Storybook との統合です。

UXPin は Storybook との統合を構築しており、既存のデザインコンポーネントを Storybook で直接使うことができます。つまり、次の UI 変更を構築する際に、既存のデザインコンポーネントのライブラリを使うことができるということです。

そして、そのデザインをデベロッパーに渡し、そのデベロッパーがすでに持っているコードを使って新しい製品を作ってもうといいでしょう。

もっと深く掘り下げてみましょう。

パート 1 – UXPin Merge

UXPin Merge は、コード化されたコンポーネントでインターフェースを作成するためのドラッグ&ドロップ のUI ビルダーであり、トライアルと有料プランで利用可能なライブラリが内蔵されています。

また、Git レポジトリや Storybook から UXPin エディタにデザインコンポーネントをインポートすることもできます。この統合は現在のところ React フレームワーク向けであることから、React コンポーネントを取り込んで UXPin で直接作業することができます。

そして、コンポーネントは UXPin デザインライブラリに保存され、新しいコンポーネントやアップデートは自動的にライブラリに同期されます。

コンポーネントの機能とその動作方法も、UXPin エディタで直接確認できます。これにより、マウスオーバー、オートフィル、テキストフィールドのサジェスト、強調アニメーションなどを UXPin エディタで直接確認できます。

UXPin Merge でデザインしたものはすべて、デベロッパーによって仕様どおりにコーディングされます。なぜでしょうか?それは、そのデザインに含まれるコードはすべて、デベロッパーの Git Repo にすでに存在しているからです。なのでデベロッパーが新たに何かを作る必要はありません。

パート2 – UXPin Storybook の統合

UXPin storybook の統合では、Storybook からインポートした既存のデザインコンポーネント(公開または非公開)を使えます。Git との統合と同じように、希望する場合はプロパティの変更や、レディコンポーネントの一部への新たなインタラクションの追加などができます。

達成された一貫性

UXPin Merge は DesignOps の問題をサッと解決してくれます。デザイナーはデザインを行うために、すでに存在するコンポーネントを使い、アイテムの変更が必要な場合は、どのコンポーネントを変更すればよいか、また変更が行われたときに影響を受けるページをすべて正確に把握することができます。

サイト全体に同じコンポーネントの3つのバージョンが存在しないため、サイトの構築、変更、一貫性の維持がしやすくなります。

デザイナーはコーディングを学ぶべきか

ノーコードのインターフェースで仕事ができるのなら、なぜコードを学ぶのでしょうか。

デザイナーにとって、コードを学ぶことで視野が広がり、アプリをデザインする際に、より多くの人生経験を得られると思いますが、適切なツールを使うことでデザインと開発のコミュニケーションが改善されるのであれば、コードを学ぶ必要はありません。

なので、世の中がコードをより身近なものにする方向に進むにつれて、この質問に対する私たちの答えは「ノー」に傾いていきます。デザイナーは、コードを学ぶことによってではなく、デザインをより良くすることによって自身を磨いていくべきなのです。

私たちは、さまざまなスキルを持つ人が集まるようにチームを作ります。例えばアプリがユーザーのニーズを満たすことができるよう、常に UX について100% 考えている人材が必要ですし、UXデザインに関する質問に振り回されることなくコーディングできる人材が必要です。

Web開発チームの2つの側面が実際に手軽に一緒に作業できるように、UXPin Merge で、この2つの側面を統合しましょう。

DesignOps – デザインワークフローとオペレーションの改善方法

 DesignOps - デザインワークフローとオペレーションの改善方法

市場競争が激化する中、優秀なデザイン人材を採用するのは簡単なことではありませんが、経験豊富で熟練した人材を一箇所に集めるというのは、成功の一部に過ぎず、とりわけ、繁栄するプロダクトデザインチームの構築には、DesignOps(デザインオペレーション)にも投資が必要です。

DesignOps の役割を理解し、自身が DesignOps のリーダーにふさわしいかどうかを確認するのに役立つ、DesignOps に関する電子書籍が執筆されました。ぜひご覧ください(英語):DesignOps 101: Guide to Design Operations.(DesignOps入門)

そこで本記事では、DesignOpsとは何か、そして組織内のデジタルデザインシステムを改善するために DesignOpsをどのように活用できるかについてお話します。適切なDesignOpsソフトウェアの使用とともに、チーム間の連携や目標設定、情報交換システムなどの領域について見てきましょう。

UXPinはデザイン業務をサポートする優れたソフトウェアです。UXPin Merge のテクノロジーとともに、デザインを驚異的なレベルまで拡張することができます。アプリの実際の構成要素をドラッグ&ドロップしてプロトタイプを作成し、デザインを効率化しましょう。UXPin Merge をご覧ください。

DesignOps とは

 DesignOps とは?なぜ重要なのか

「DevOps」については聞いたことがあるかもしれませんが、「 DesignOps 」とは何でしょうか。

DesignOps(Design Operationsの略)とは、製品デザインを効率化してビジネス価値を上げるために、デザインプロセス、人材、テクノロジーを最適化することであり、主に以下のようなことが挙げられます:

DesignOps は比較的新しい用語であるため、どのようにして誕生したのかと疑問に思われるかもしれません。

かつてデザイナーは、UXリサーチを行ったり、UXストーリーを書いたり、ワイヤーフレームを作成したり、多くの役割を担っていました。このアプローチは一部のチームでは今でも有効かもしれませんが、規模が大きくなると非生産的になります。そこで DesignOps が登場し、チームワークをオーケストレーションし、明確な構造と役割を構築してくれます

とはいえ、DesignOps はデザイン組織だけに許された、孤立した「デザインチームだけの」エクササイズではなく、他のステークホルダー(特にソフトウェアデベロッパー)との多くの情報共有が必要です。一連のプラクティスに従うことで、デザイナーはこれらのやりとりの質を上げ、効果的な目標の達成に集中し、他のイニシアティブのために時間を解放することができるのです。

デザインオペレーションが台頭してきた理由

まず第一に、ビジネスとユーザーの両方の要件がより複雑になってきています(これは、顧客がより厳しくなってきているということでもあります。)。PwCのレポートによると、顧客の3人に1人は、たった1度でも顧客体験がよくなかっただけでその企業を去ってしまいます。当然のことながら、顧客の期待に追いつくという課題で、製品開発のライフサイクルは加速されます。また、チームがその増大する仕事量に追いつこうとするため、デザイナー間やデザイナーとデベロッパーの間でミスコミュニケーションが発生するリスクも出てきます。

また、チームは一貫性のない要件に基づいて孤立して作業してしまう可能性があり、これは納品スケジュール、ひいては UX に悪影響を及ぼしますが、DesignOps のプラクティスで、企業はこのようなボトルネックを克服し、デザインチームと開発チームの調和を生み出すことができます。

それでは、DesignOps管理の役割を詳しく見ていきましょう。

DesignOps の役割

 DesignOps とは?なぜ重要なのか - その役割

DesignOps 管理の主な役割は、デザインチームが障害や気が散ることなく自分の仕事に集中できるように、デザインチームの時間を守ることです。詳しくはDesignOps 101 の電子書籍をご覧ください。本記事では、DesignOps の役割について見ていきます:

運営管理

この役割には、デザインチームの長期的な目標と、それを達成するための明確なデザインロードマップを作成することが含まれます。また、デザインチームの人数を評価し、スキルギャップを特定するのも仕事です。

プロセスデザイン

DesignOps は、デザインシステムを構築し、チームが必要とするデザインツールをマッピングすることで、デザインプロセスの計画や管理を行います。また、デザインチームがプロダクトチームや組織内の他のチームとどのように連携すべきかのフレームワークを作成します。

プロジェクト管理 

DesignOps はデザインワークフローを担当し、プロジェクトを割り当て、スケジュールを設定し、ボトルネックを取り除きます。そして DesignOps チームは毎日スタンドアップミーティングを組んでデザインプロジェクトの進捗を確認します。また、デザインスプリントを計画して遂行します。

コミュニケーション戦略の策定

DesignOps のマネージャーは、デザインチームと組織の他の部分との連絡役となり、デザインの価値を伝え、チームミーティングのアジェンダを設定します。

デザインリーダーは、プロダクトマネージャーや製品開発チームとの円滑なコミュニケーションを確保し、 DesignOps は、デザインチームに必要なファイルやリソースを全て簡単に検索できるように保管するシステムを構築します。

新入社員の受け入れ

新しいスタッフのオリエンテーションやトレーニングを行い、デザインチームにフィットするようにします。UI デザイナーや UX デザイナーなど、新しいデザインスタッフを雇用することも、彼らの任務の一部です。

デザインチーム文化の構築

DesignOps チームは、デザインチームの専門的な能力開発のためにワークショップやトレーニングを開催しています。また、チーム内のデザイナーに専門的かつ精神的なサポートを提供し、デザインチーム内の共同体意識を醸成するためにチームの関係構築に向けた活動を企画します。

予算配分と管理

DesignOps は、デザインチームの運営にどれだけのコストがかかるかを設定し、そのコストの正当性を確認します。そして予算が承認されると、その予算をデザインチーム内でどのように分配するかを担います。

法務

法務チームと協力して、ユーザーテスト時に使う NDA(秘密保持契約) や参加者同意書を作成します。

調達プロセスの管理

調達部門と連携し、デザインチームが購買決定を下す方法を効率化します。

IT とセキュリティ

デザインチームの技術ロードマップを策定し、IT部門と協力してデザインツールの互換性とセキュリティを確保します。

デザインのワークフローと業務を改善するヒント

以上のことを念頭に置いて、組織で DesignOps の実践を改善するのに役立つヒントを見ていきましょう。

1. デザイナーをデザインに集中させる

当たり前のことのように思えるかもしれませんが、前述のように、デザイナーに複数の役割を期待する企業もまだ存在しており、時には、一人のデザイナーがユーザーリサーチを行い、情報アーキテクチャや UI をデザインし、UXライティングを担当することもあります。

このやり方は、小規模なチームや初期段階のスタートアップであれば効果的かもしれませんが、拡張性のある方法ではないことを覚えておいてください。長期的に見れば、デザイナーに他の仕事を負担させることは、彼らの仕事の質を下げることにもなりかねません。

2. デザインプロセスの効率をチェックする

組織では様々な製品デザイン・開発の手法が用いられ、デザイン思考プロセスに従う組織もあれば、Google のデザインスプリントが中心に据えられた組織もあると思われます。

つまり、最善の方法を適用することが重要だということです

DesignOpsによって、デザインワークフローの非効率性がわかり、それを取り除くことができます。これにより、デザインチームはより少ない時間とリソースでより多くのことを達成できるようになります。そしてその結果、作業とチームのパフォーマンスが最適化されることで、不必要な雇用の回避につながる可能性があります。

3. リモートでの製品デザインの効果的な連携にツールを使う

小規模な組織であれば、デザイナー同士の連携は自然に行われるかもしれませんが、大規模な(特に遠隔地の)チームではそうはいきません。効果的な連携を行うには、デザイナーやその他の製品開発チームメンバーに適切なツールセットを装備させることが重要です。ここで、DesignOps ソフトウェアが非常に大きな価値をもたらします。

UXPin Merge はそのようなツールの一つです。まず、デザイナーはソフトウェアデベロッパーの Git レポジトリや Storybook からインポートした UI コンポーネントを使うことができます。ゼロからプロトタイプを作るのに時間をかけるのではなく、実際のコードで作られた要素を使って直接デザインすることができ、そうすることで、チームは実際のデザイン作業や、コード化された製品との一貫性を保つことに、より多くの時間をかけることができるようになります。

とはいえ、ツールはパズルの一部に過ぎず、残りの要素は、次に述べる正しいコミュニケーション慣行に従うことにあります。

4. 連携のルーティーンを確立する

アジャイルチームで通常行われる毎日のスタンドアップや週次ミーティングなどの連携のルーティーンは、デザイナーの定期的なステータスのアップデートの共有や、(必要であれば)サポートの依頼を促します。

効果的な連携のルーティーンをどのように浸透させることができるかを示す例は、他でもない Google にあります。インターンからスタートし、現在は巨大テック企業でインタラクションデザイナーとして働くSophia Chiuは、ルーティーンでチームの他のメンバーとの共通の土台を見つけることができたと言っています。

毎週、UXスペシャリストは自分のデザインイテレーションをみんなの前で発表し、ブレーンストームとフィードバックセッションを行う機会があります。その後、小規模なグループで作業した後、そのデザインを全体の部門横断的な製品開発チームと共有することもできます。

これは、チームメンバーの間にオープンなコミュニケーションの流れを作ることができる数多くの方法のうちのほんの一例です。

5. 全デザイナーが、昇進のための明確なキャリアパスを持つようにする

適切なスキルセットがある人材を雇用するのは簡単ではありませんが、その人材を維持するのはさらに大変です。幸いなことに、DesignOps のプラクティスで、明確なキャリア開発パスの作成によって、こういった課題に取り組むことができます。デザインプロセスが成熟するにつれて、例えばチームはデザイナーが新しいスキルを習得できるような、より専門的な役割を特徴とすることができる、その一方で、より経験豊富な人材は、より上級の役割に昇進する機会を得ることができます。

6. デザイナーに連携を促す

 DesignOps とは?なぜ重要なのか - 連携の強化

ペアプログラミングは、バグやエラーを減らす方法としてデベロッパーの間で頻繁に使われていますが、DesignOps では、デザイナーはデザイン作業の効率を上げるために似たようなモデルを採用することができます。

そんなペアデザインのモデルを以下に3つ挙げてみましょう。

(1)ジェネレーターとシンセサイザー

このモデルでは、2人のデザイナーがペアを組み、できるだけ多くのデザインを生み出そうとして、それと同時に、その評価や統合をして、最良のものを生み出します。1人のデザイナー、すなわち「ナビゲーター」は、ブレーンストームとアイデア出しに専念し、もう一人のデザイナーは「シンセサイザー」として、そのデザインの検証のために分析して質問を投げかけます。このアプローチで、2人のデザイナーがアイデアを出し合い、それらを効果的に評価することができます。

(2)分野横断的なペアリング

この方法は、さまざまな分野を専門とする製品開発チームのメンバーに適しており、デザイナーでも非デザイナーでも使えます。例えば、極めて専門性の高い分野のデザインを行う場合、デザイナーは、デザインに貴重なインサイトを与えてくれる分野の専門家とペアを組むことができます。

また、デザイナーは、フロントエンドエンジニアとペアを組むこともできます。このようなクロスファンクショナルなチームでの演習で、デザイナーはワイヤーフレームではなく、実際にコード化された UIを試す機会が得られます。

(3)ペアスケッチ

デザイナーは「ペアスケッチ」という手法を使って、一緒にワイヤーフレームを作成することができます。このモデルでは、片方のデザイナーがナビゲーターの役割を担ってコンセプトを説明し、もう片方がそれに従ってスケッチを作成します。次に、2人は役割を交代し、同じプロセスを繰り返します。

7. デザインチームに明確な目標を設定する

会社やプロジェクトの目標を明確に伝えることは、デザインチームにとって大きな動機づけとなります。なんといっても、それで自分たちの貢献の意義を理解することができますからね。

OKR(目標と主要業績)は、より大きな、チーム横断的な目的意識を達成する1つの方法として挙げられます。

個々の(つまり、従業員ごとの)OKR で、デザイナーが、自分の仕事の目標が、より大きなデザインパズルの要素として、どのように当てはまるかを把握することができます。その結果、自分の仕事がプロジェクト全体の成果にどのように貢献しているかがわかります。

とはいえ、目標の達成状況を測ることも重要です。例えばチーム内の進捗状況を表示するメトリクスダッシュボードで、チームメンバーのモチベーションが維持され、どこで遅れをとっているかがわかります。

8. チーム横断的な情報共有システムを構築する

サイロを取り除くことは、おそらく、DesignOps 戦略の一環として情報共有システムを構築する最も重要な理由です。 その重要性を説明するために、もう一度 DevOps(ソフトウェア開発オペレーション)の世界からのアナロジーを参照してみましょう。

Samanage社 の マイケル・マジャール 氏は、「サイロの中では、開発チームは責められることを恐れてソフトウェアのバグをオペレーションに報告しない可能性があり、正直でオープンな情報共有システムがなければ、ワークフローが遅れるだけでなく、誤報の可能性も上がります。」と言っています

同じことがデザインチーム内でも起こる可能性があり、デザインチームは、進行中の状況を他のメンバーに知らせないかもしれません。例えば、ユーザビリティの不具合に遭遇した場合、デベロッパー、デザイナー、運用担当者は全員集まって、例えば以下のようなことについて話し合うべきです:

  • 金銭的な損失の有無
  • 全体的な UX への影響
  • ユーザー離れのリスクの有無
  • 修正にかかる時間と費用

チーム横断的な明確な情報伝達システムで、エンドユーザーへの影響を最小限に抑えながら、積極的に問題を特定して修正することができます。

9. 共有語彙の作成を検討する

一般的なコンテンツマーケティングチームには、編集ガイドラインがあり、それに従って効果的なコミュニケーションを行い、正しいコミュニケーションのスタンダードを保つことができます。同様に、デザインチームもガイドラインと共通のデザイン言語を取り入れて、全プロジェクトで一貫性が保たれるべきです。

一例として、Airbnb では DLS(デザイン・ランゲージ・システム)が採用されており、これは、きちんと確立された原則とパターンに準拠した一連のコンポーネントで構成されています。DLS によって、全従業員が組織内の全部署で理解できる共通の語彙を使用できるようになり、それによって、曖昧さや矛盾が排除されながら、コミュニケーションの質が大幅に上がります。

UXPin Merge で DesignOps を拡張しよう

顧客が求めるものが厳しくなったり、新製品の発売が早まったり、製品ライフサイクルが短くなるなど、今日の企業が直面する課題はどんどん増えています。このような課題に取り組む方法の1つとして、DesignOps の導入が挙げられ、それでデザインワークフローの改善だけでなく、デザイナーが最も得意とするデジタル製品のデザインに集中できるようになります。

これにより、顧客のニーズに完璧に対応し、直感的な使用が可能な製品やサービスを構築することができ、ユーザー体験にプラスの影響がもたらされます。デザイナーとソフトウェアエンジニアの連携がスムーズになり、デザインワークフローが改善されるツールとして、ぜひ UXPin Merge をご検討ください。

初めての React アプリ作成ガイド

初めての Reactアプリ - 作成ガイド

多くの開発者はJavaScriptの使用経験があることから、Reactアプリの構築を初めて行う場合でも、比較的に短時間で行うことができるのではないのでしょうか。そこで、これら2つの関連性、初めて React アプリを作るために必要なもの、そして React を使う練習として使えるヒントをご紹介していきます。

主なポイント:

  • CSS と JS がわかる開発者の方が、初めてでもReactアプリを作りやすい。
  • React は人気であることから、ビギナー向けに React アプリを作るための役立つリソースが多い。
  • UXPin Merge のテクノロジーを使って、React アプリのプロトタイプの作成およびテストができる。

UXPin Mergeテクノロジーで React アプリ第1号を効率よく構築しませんか?

Reactコンポーネントを UXPinのデザインエディタにインポートし、高度なインタラクションを追加してみて、実際のアプリと同じように機能するプロトタイプをつくってみましょう。

UXPin Merge へのアクセスのリクエストはこちら

CSS と JS で React アプリ第1号を作る

CSS と JS がわかると仮定すると、React アプリガイドの理解や、初めてアプリを作るために必要なスキルの多くをすでに身に付けているといえるでしょう。最初は戸惑うかもしれませんが、これを何日か継続してみてください。

また、こちらの「React の流儀」をオススメします。多くの開発者から、紹介されている 5ステップのチュートリアルが非常に役立つと評判があります。

初めてのアプリ構築に React を使う最大の理由

JavaScript を使ってアプリを作るのが好きな初級開発者なら、なぜこんなにも同じ分野の人たちがReact に熱中するのか不思議に思うかもしれませんね。

しかしながら、その理由は、複雑な機能を実行するアプリケーションの構築が必要なキャリアのある段階に達するとわかるでしょう。

そして JavaScript は、今日のアプリ開発者のニーズに対応していないため、ある時点で非常に厄介なものになります。

そこで、以下のような理由から、React アプリを作るべきです:

02 4

  • 再利用可能なコンポーネントを提供することで、長い目で見たら時間の節約になる。
  • DOM の落とし穴を回避。
  • ツールやアドバイスを惜しみなく提供する開発者たちの強固なコミュニティがある。
  • React アプリが急速に業界標準になりつつある。

React を使ったビルドを学ぶと、数多くのデザインパターンにもアクセスできるようになります。

また、最初に学ぶべきおすすめのパターンには、以下のようなものがあります:

  • ステートレスなコンポーネント
  • 条件付きレンダリング
  • レンダープロップ
  • 制御コンポーネント
  • React フック

React のデザインパターンについてのより深い理解に向けて、「知っておきたいReactの デザインパターン【2023年版】」の記事をぜひお読みください。

React と JavaScript の違い

ReactとJavaScriptの違いを知る

React と JS には共通点があるものの、React を使いこなすには超えるべきハードルがいくつか出てきます。

最も顕著な違いには、以下のようなものがあります:

違い1:UIの構築法

JavaScript では、HTMLドキュメントの中にインターフェースを作成し、そのコードはサーバーに送られますが、Reactでは、ブラウザでUIを確定します。

最初は、こんな短いHTMLを追加するのは不自然に思われますが、現実的には、同じ結果が得られます。React はブラウザ内で動作し、JS はサーバーの助けが必要だという点が違いますね。

違い2:アプリ間の機能分割の方法

開発者が JavaScriptを使う方法は非常に複雑になり、JSの コードが耐えられないほど複雑に見えることがよくあります。その結果、同じアプリで作業している間に、多くのファイルを開き続けることになります。

対するReact は、機能をコンポーネントに分割することで、プロジェクトがより管理しやすくなります。

各コンポーネントには、そのコンポーネントが実行しなければいけないコードがすべて格納されており、その結果、ごちゃごちゃしたライブラリではなく、短いリストのようなコードが得られます。

違い3:アプリがユーザーデータを管理する方法

JS の場合、例えば、テキストフィールドに名前を入力すると、その情報はサーバーに転送される前に DOM に移動するといったように、ユーザーから送信されたデータは、ブラウザが扱う DOM(ドキュメントを物として扱うモデル)に格納されます。

一方 React は、ユーザーデータは変数として保存されます。ユーザーの視点からは、何も大きく変わることはありませんが、バックエンドでは、データの管理がはるかに簡単になります。

React アプリ第1号を作るのに他に必要なもの

JavaScript、CSS、HTML の経験があれば、もう React を使えるようなものです。ただし、Reactを使って何かを作る前に以下のインストールが必要です:

  • Node.js:オープンソースの実行環境で、開発者はサーバーサイドで JavaScriptコードを実行できる。
  • PowerShell:スクリプティングと自動化のフレームワークで、ユーザーはWindows 環境におけるさまざまなタスクの管理と自動化が可能。
  • npm:再利用可能なコードモジュールやライブラリの管理および配布プロセスをシンプルにするパッケージマネージャ。
  • React アプリの作成:利用可能なコーディング環境はこれだけではないが、おそらくこれがベストな選択である。

初めての React プロジェクトにツールチェーンは必要ないかもしれませんが、以下のようなオプションはチェックしておいて損はないと思います:

このような開発ツールキットはどれも便利です。使わないといけないということはありませんが、これで作業が楽になるでしょうから使うべきです。

React アプリ第1号を作る前の練習

JavaScript でどれだけ多くのアプリを作ったことがあっても、React でアプリを作るには、まずは React アプリガイド以上のものが必要です。ちなみに W3Schools には、簡単なアプリケーションの作り方を教えてくれる入門書があります。

また、以下でより多くの経験を積むことができます:

UXPin で React アプリのプロトタイプを作成およびテストする

UXPin を使うと、React アプリのプロトタイプの作成およびテストが簡単です。例えば、「JSXプリセットのオーサリングと管理」で、UXPin でのコードのテストがいかに簡単かをご覧ください。UXPin Editorのキャンバスにコンポーネントをドロップするだけで、意図したとおりに機能・動作するかをみることができます。

また、UXPin Merge を使えば、React.jsでコーディングされたコンポーネントを Git レポジトリから UXPin Editor にインポートして同期させることができるので、さらに一歩進んで、React を使ってデザイン全体を構築することができます。

要するに、React でコーディングできるものは何でも、プロトタイプで見せることができます。また、デザイン部門と緊密に連携すれば、ハンドオフのプロセスが短縮され、コミュニケーションのプロセスでの摩擦がなくなるので、非常に有益です。

test react app in UXPin

アプリ開発経験の有無にかかわらず、UXPinがお手伝いします。クラウドベースのツールのコラボレーション機能を使って、周りとアイデアを共有しましょう。

UXPin アカウントがなくても、あなたのプロジェクトを閲覧し、フィードバックを残すことができます。正しいリンクさえあれば、プロトタイプにアクセスできますからね。

また、UXPinを使って、コードに取り掛かる前にアイデアを検討することもできます。ビルトインライブラリを使うことで、簡単に機能をテストでき、気に入った機能があれば製品に合った微調整を加えた独自のバージョンを作成することもできます。

単なるフラットなシンボルではなく、すでに制作可能でインタラクティブなライブコーディングされたコンポーネントでデザインしましょう。UXPin Merge へのアクセスリクエストはこちら

初心者に最適な React のオープンソースプロジェクト

初心者に最適な React のオープンソースプロジェクト

世の中にあるすべてのフレームワークの中で、Reactは初心者にとって最良の選択かもしれません。Reactは、他のフレームワークでできることはできるが、コードを不明瞭にすることはありません。他のフレームワークでは理解するのが難しいこともありますが、Reactは学ぶのが簡単で、同様にマスターするのも簡単です。

ソフトウェア開発は、世界で最も急成長している産業のひとつであり、オープンソースプロジェクトへの貢献は、チュートリアルとは別に、コーディングスキル全般を向上させる優れた方法です。

Reactはウェブアプリケーションの構築を始めるのに最適な方法であり、開発者の巨大なコミュニティと開発を高速化する無料ツールのおかげで、初心者でも簡単に学ぶことができます。無料で利用できる素晴らしいオープンソースプロジェクトがたくさんあるので、Reactを使って遊び始めることができます。

HTMLを使うのが好きで、CSSやJavasScriptを使ったスタイリングに没頭し、視覚的に印象的でインタラクティブなウェブやモバイルアプリのインターフェイスを作りたいと考えているUI/UXの開発者には、Reactがおすすめです。VueやAngularを思い浮かべるかもしれませんが、Reactは最も初心者向けで、現在最も人気のあるJavascriptライブラリなので、最適な選択肢です。

これらは、Reactを使って簡単なWebアプリやEコマースサイトを構築する方法を学んだり、基礎を学んだだけで、ソースコードやReactコンポーネントを実質的にテンプレートとして仕事のプロジェクトに再利用することで、仕事の効率化を図ることができます。

また、個人的なプロジェクトを作成して自分のスキルをアピールしたり、ポートフォリオを充実させたい場合にも、プロジェクトのアイデアを生み出すのに役立ちます。

完全に機能するReactコンポーネントでインタラクティブなプロトタイプをデザインする。デザインとコードの一貫性を保ちます。Mergeテクノロジーの詳細をご覧ください。

Reactのオープンソースプロジェクトの良さとは?

初心者に最適な React のオープンソースプロジェクト - React のオープンソースのメリットは?

あなたのニーズが満たされるプロジェクトを選んでください。変更やデバッグが容易でないオープンソース・プロジェクトを選ぶのは避けましょう。他の人にとって魅力的で役に立つと思われるプロジェクトを見つけてください。

1. 業界のベスト・プラクティス

オープンソースプロジェクトは、フロントエンド開発やUXデザインにおいて、新人やベテランの開発者の指針となることができます。特に、Reactを使った作業は、フロントエンドとバックエンドの両方をオールラウンドにこなすことが求められるクロスプラットフォームのアプリ開発プロジェクトに取り組んでいるスタートアップ環境では大きなメリットとなります。

2. スキルアップ

自分の知識や経験、コードを他の人と共有することは、新しいことを学ぶ上で非常にユニークで効果的な方法となります。

3. ネットワーク作りと自己アピール

活発なオープンソースコミュニティに参加することは、自分のスキルを磨くのに最適な方法でもあります。他のオープンソース開発者と知り合う機会を持つことは、目標とする分野で自分の評判を高め、確立するのに役立ちます。

価値のあるReactオープンソースプロジェクトを選ぶには

適切なプロジェクトを選択することは、どこから探せばよいかわからない場合には困難です。しかし、Reactのエコシステムの中で適切なオープンソースプロジェクトを確実に選ぶためには、以下の点に注意してください:

1. 活発なコミュニティ

解決しなければならない困難な問題が現れた場合、誰かとプロジェクトについて議論することが重要であることがわかります。

2. プロジェクトの人気(GitHubを考える)

オープンソースのReactプロジェクトに取り組んでいるコントリビューターの活発なコミュニティがある場合。そのプロジェクトが人気を博していて、あなたを助けるための徹底したドキュメントがあり、他の貢献者からも多くの助けが得られることは間違いありません。

3. 整理されたドキュメント

初心者に最適な React のオープンソースプロジェクト - 整理されたドキュメント

オープンソースのReactプロジェクトに求める最後のピースは、特定のコードベースやライブラリの問題点を読み取ることができる、明確で簡潔なドキュメントです。

初心者に最適なReactプロジェクト

より複雑なプロジェクトに飛び込む前に、基本を学ぶことは非常に重要です。サイトを構築する方法の基礎を学ぶ前に、使用するツールをよく理解しておくのがベストです。

1. React Bootstrap

初心者に最適な React のオープンソースプロジェクト - React boostrap
情報源

React Bootstrapは無料で利用でき、制作に適したアプリを構築するための強力なツールとなっています。プロジェクトのフロントエンドフレームワークを構築するためのベストプラクティスを探しているのであれば、React Bootstrapをチェックしてみてください。

React Bootstrapは、アプリにインタラクティブ性と応答性を追加したいと考えている人にとって、素晴らしい出発点となります。React Bootstrapでは、アプリをどのように構築するかを自由に選ぶことができます。このフレームワークを単独で使用することも、将来の統合のための出発点として使用することもできます。インスピレーションを求めているときも、新しいツールが必要なときも、React Bootstrapは素晴らしい選択肢です。

2. User Interface React Select

User Interface React Select
情報源

React.jsを開発しているチームが、セレクト入力のUI実験を行いました。これがどのように機能するかを見て、自分のバージョンを開発する方法を学びましょう。アプリケーションを作るときには、良いユーザー・インターフェース(UI)を持つことが重要です。

Re-selectは、リストの中から選択肢を選ぶことができるライブラリです。WebサイトやWebアプリケーションを作っている人には最適なツールです。さまざまな機能を備えているので、開発者は簡単にリッチなユーザーインターフェースを作ることができます。何よりも素晴らしいのは、オープンソースで、Githubで無料で利用できることです。

3. Storybook

React オープンソースのメリット - Storybook
情報源

Storybookは、UIコンポーネントを分離して開発することができるオープンソースのツールです。このツールの多くの利点の一つは、アプリの外の別のページで実行されるため、多くのオーバーヘッドを必要としないことです。これにより、アプリケーション固有の依存関係を気にすることなく、開発プロセスにのみ集中することができます。

Storybookは、様々な状態やバリエーションを記録し、製品開発者が最終目標や遵守すべき仕様に基づいて、毎回ゼロから始めることなく各例の変更を視覚的に実装することで、テスト駆動型のプロジェクトを実現します。

Storybookに興味のある方は、以下のブログ記事もおすすめです。

4. Draft.js

情報源

Draft.jsは、新しいオープンソースのプロジェクトを作成する際に使用できるライブラリです。マークダウンを書いて、それをさまざまなフォーマットに変換するために使われます。書いたものを、ウェブサイト、PDF、ePub、ブログ記事などに書き出すことができます。ウェブやモバイルの開発に使用されており、膨大なプラグインやコンポーネントのライブラリで簡単にカスタマイズできます。少人数の開発者によって管理されており、コミュニティでは新しいプラグインの作成が活発に行われています。

デザインにReactコンポーネントを使う

時間を節約して、デザイン段階でReact UIコンポーネントを再利用するのはどうでしょうか?UXPin Mergeを使えば、UIコードを保存しているGitリポジトリやStorybookに直接、当社のプロトタイピングツールを接続することができます。そして、コンポーネントをデザインツールに持ってくるだけで、UX/UIデザイナーはデザインプロセスでコンポーネントを扱うことができます。

メリットとしては、UXPinのデザインエディタでSpec Modeから用意されたコードをコピー&ペーストするだけで、コンポーネントを一からコーディングする必要がありません。製品開発プロセス全体が容易になり、デザインが標準に沿ったものになります。

まとめ

React.jsを使い始めるのは、最初は圧倒されるかもしれません。もしあなたがコーディングを始めたばかりなら、GitHub.comのオープンソースプロジェクトで、UI開発やUXデザインに触れたり、iOSウェブアプリを使いこなしたり、さらにはフルスタック開発に取り組むことを強くお勧めします。

すでに他の人が開発しているプロジェクトに取り組むことで、多くのことを学ぶことができますし、Web開発のスキルを次のレベルまで引き上げることができます。Reactコンポーネントをデザインプロセスに組み込みたいですか?UXPin Mergeをお試ししてみたい方はこちらのページまで

モバイルアプリの プロトタイプ を作るための5つのヒント

モバイルアプリの プロトタイプ を作るための5つのヒント

さまざまな種類のスマートフォンやスクリーンサイズがある中で、モバイルアプリケーションのプロトタイプを作成してテストすることは、デザインプロセスの重要な部分です。UXチームは、デザインを徹底的にテストし、ユーザビリティの問題を解決してから、最終的なドラフトをエンジニアリングに渡さなければなりません。

アプリの開発は、時間とコストのかかるプロセスです。最終製品をリエンジニアリングするよりも、プロトタイプを再設計する方がずっと早くて簡単です。

UXPinを使えば、UXデザイナーは、最終製品と同様の外観と性能を持つ、完全に機能するモバイルアプリのプロトタイプを作成することができます。14日間の無料トライアルに登録して、UXPinによる優れたモバイルアプリのプロトタイピングをご体験ください。

モバイルアプリの プロトタイプ とは何ですか?

UXチームは、モバイルアプリのプロトタイプを作成することで、デザインコンセプトやユーザーフローが異なるスクリーンサイズでどのように見えるか、どのように動作するか、そしてユーザーがそれぞれのスクリーンサイズでどのようにインタラクトするかを確認することができます。

UXチームは、デザインプロセス全体を通してモバイルアプリのプロトタイプを作成します。初期のペーパーモデルから、完全に機能するハイフィデリティプロトタイプまで。

モバイルアプリの プロトタイプ の作られる目的

UXチームは、モバイルアプリのプロトタイプを主に3つの目的で使用します:

  • アイデアのテストと検証
  • ユーザビリティスタディ
  • 利害関係者や開発者に提示してハンドオフを行う

アイデアのテストと検証

デザインプロセスの初期段階では、UXチームはたくさんのデザインアイデアを試します。これは、UXデザイナーが既成概念にとらわれず、一見不可能に思えるようなワイルドなデザインを想像する、プロジェクトのエキサイティングな部分です。

モバイルアプリの プロトタイプ を作るための5つのヒント - テスト

UXチームは、これらのアイデアをテストし、検証するために、忠実度の低いモバイルアプリのプロトタイプを作成します。多くの場合、ユーザーフローを視覚化するために、手描きの紙の画面を順番に並べていきます。

ユーザビリティスタディ

UXチームは、ユーザビリティスタディによって、ユーザフロー、画面レイアウト、インタラクション、アクセシビリティの問題、および全体的なユーザエクスペリエンスをテストします。このようなユーザー中心のアプローチにより、デザイナーはユーザーのニーズを満たす製品を作ることができます。

ステークホルダーへのプレゼンテーション

モバイルアプリのプロトタイプは、コンセプトやデザインのアイデアを関係者に提示するための優れたツールでもあります。また、プロトタイプは、スタートアップ企業が初期段階で資金を獲得する際にも役立ちます。

エンジニアは、デザインのハンドオフから最終製品の開発まで、モバイルアプリのプロトタイプを参照します。

UXPinのSpec Modeを使用すると、開発者はプロジェクトのカラーパレット、スクリーンサイズ、タイポグラフィ、その他の重要なデータを確認できます。また、各要素の寸法、CSS、コンテンツを確認することができます。

モバイルアプリのプロトタイプの種類

モバイルアプリのプロトタイプには2つのタイプがあります:

  • ローフィデリティ・プロトタイプ
  • ハイフィデリティ・プロトタイプ

ローフィデリティプロトタイプ

UXチームは、デザインの初期段階で、低忠実度モバイルアプリのプロトタイプを使用します。ワイヤーフレームを使用して作成された低忠実度プロトタイプの主な目的は、画面レイアウトの視覚化、情報アーキテクチャの整理、ユーザーフローのシミュレーションです。

これらのローファイ・プロトタイプには、ローファイ・ペーパー・プロトタイプとデジタル・ローファイ・プロトタイプの2つの形態があります。どちらも、シンプルなワイヤーフレーム(通常は白と黒)とプレースホルダのコンテンツを使用します。

ペーパープロトタイピングは、UXチームがペンと紙だけでアイデアを実際のモデルにする、迅速で協力的なプロセスです。場合によっては、デザイナーがダンボール製のモバイルデバイスを作り、スクロールやスワイプなどのナビゲーションをシミュレートすることもあります。

UXデザイナーは、UXPinなどのデザインツールを使って、デジタルローフィデリティプロトタイプを作成します。このハイファイプロトタイプには、クリックできる要素が含まれており、デザイナーはユーザーフローをテストすることができます。

ハイフィデリティ(High-Fidelity)プロトタイプ

ハイフィデリティ・モバイルアプリ・プロトタイプは、最終製品の機能モデルであり、カラー、コンテンツ、アニメーション、インタラクションを備えています。

ハイファイプロトタイプは、UXチームが、ユーザーがどのようにモバイルアプリケーションを操作するかをテストするのに役立ちます。ハイフィデリティ・モバイルアプリ・プロトタイピングは、デザイナーがエンジニアに引き継ぐ前にユーザビリティの問題を解決する上で重要な役割を果たします。

また、デザインチームは、デザインを関係者に提示する際にも、高忠実度のモバイルプロトタイプを使用します。完全に機能するプロトタイプがあれば、関係者は「最終製品の体験」を得ることができ、有意義なフィードバックを提供することができます。

モバイルアプリのプロトタイピングに関する5つのアドバイス

モバイルアプリのプロトタイピングは、デザインプロセスのエキサイティングな部分です。デザイナーは、ユーザビリティテストから貴重な洞察を得ながら、自分のアイデアが実現するのを見ることができます。

以下では、モバイルアプリのプロトタイピングを改善するための5つのヒントをご紹介します。

ヒント1:早期にテストを行い、頻繁にテストを行う

モバイルアプリのプロトタイプを作成するチームにとって、テストは主要な目的です。テストを行わないと、UXチームはデザインのアイデアを検証したり、ユーザビリティの問題を明らかにしたりすることができません。

UXデザイナーは、デザインコンセプトの段階で、ペーパープロトタイプを使用してできる限り多くのアイデアをテストする必要があります。ペンと紙を使ったテストはコストがかからないという事実を、チームは活用しなければなりません。どんなにおかしなアイデアでも試してみることで、クリエイティブな思考に火がつき、革新的なブレイクスルーが生まれる可能性があります。

ハイフィデリティ・プロトタイピングにより、UXチームはモバイルアプリケーションをユーザーのニーズに合わせて最適化することができます。ユーザビリティ・スタディには多くのコスト(参加者、ツール、施設など)がかかるため、研究者は明確な目標と目的を設定するとともに、意味のあるフィードバックを得るために適切な参加者をテストする必要があります。

ヒント2 – モバイルアプリのプロトタイプを複数のデバイスでテストする

UXチームは、モバイルアプリのプロトタイプを十分なデバイスやスクリーンサイズでテストしないという、コストのかかるミスを犯しがちです。その結果、製品のパフォーマンスが低下したり、一部の機能が動作しなかったりすることがあります。

競争の激しい市場で事業を行っている場合、ユーザーはパフォーマンスの低い製品を見捨てて競合他社に移ってしまうかもしれません!

UXPinでは、UXチームがMirrorアプリを使ってiOSやAndroidでモバイルアプリのプロトタイプをテストすることができます。

UXPinのモバイルアプリプロトタイピングを14日間の無料トライアルでご体験いただけます。ゼロから始めることも、お持ちのSketchデザインをインポートして、複数のデバイスでプロトタイプをテストすることもできます。 

ヒント3 – UXPinを使用してより良いモバイルアプリのプロトタイプを作成する

プロトタイピングの最終的な目標は、最終製品にできるだけ近い外観と機能を持つモバイルアプリのプロトタイプを作成することです。残念ながら、ほとんどのベクターベースのデザインツールには、これを実現する機能がありません!

UXPinは、市場で最も先進的なプロトタイピング・デザインツールです。UXPinはコードベースのツールで、UXチームは開発者がUXPin Mergeで作成した完全にインタラクティブなコンポーネントを使ってデザインすることができます。

UXチームは、完全に機能するコンポーネントを使用して、GitとStorybookの統合により、コード化されたアプリケーションのように動作するモバイルアプリのプロトタイプを作成することができます。

モバイルアプリの プロトタイプ を作るための5つのヒント - UXPin Mergeを使った高忠実度なプロトタイプ

ユーザーやステークホルダーは、機能を想像するのではなく、UXPin Mirrorを使ってモバイルアプリケーションを最終製品のように操作することができます。

UXPinでモバイルアプリのプロトタイピングを行うことで、UXチームはより意味のあるフィードバックを得て、他のデザインツールではできないユーザビリティの問題を検出することができます。

また、GitリポジトリからReactコンポーネントを使用することで、エンジニアが書くべきコードが減り、開発プロセスが加速して製品や機能のリリースが早くなります。

ヒント4 – 脇道にそれるな!

忠実度の高いモバイルプロトタイプのデザインは、楽しいプロセスです。デザイナーは、ユーザーエクスペリエンスを向上させるために、インタラクション、トランジション、アニメーションなどを作成します。

しかし、明確な目標がないと、デザイナーは無関係な機能やインタラクションのデザインに没頭してしまいます。

DesignOpsは、プロジェクトの目標とKPIを設定することで、UXデザイナーが、エンドユーザーの役に立たない冗長な「あると便利な」機能を追加するのではなく、ユーザビリティテストの要件を満たすプロトタイプの設計に集中できるようにします。

ヒント5 – 他の部署を巻き込む

UXチームは、テストをエンドユーザーのためだけに行うべきではありません。他の部署のメンバーを参加させることは、組織内で新製品や新機能に対する興奮を高めるための優れた方法です。

UX部門以外のチームメンバーが、デザイナーが考えもしなかったような貴重なフィードバックを提供してくれるかもしれません。例えば、マーケティング部門から、メールフォームには名前とEメールのフィールドが必要だと指摘されるかもしれません。これは、メールをパーソナライズすることでコンバージョン率が高まるからです。

社内のプロトタイプテストでは、UXチームが参加者から得られないような、会社のために製品を改善するための貴重なフィードバックが得られる可能性があります。

モバイルアプリケーションのプロトタイプ作成についての最終的な考え

ネイティブのモバイルアプリケーションを作るのは、とても難しい作業です。デザイナーとエンジニアは、複数のデバイスやスクリーンサイズで製品がどのように動作するかを考慮しなければなりません。

UXチームは、モバイルアプリのプロトタイプを作成することで、コードを作成する前に、様々な参加者と共にこれらのデバイスでデザインをテストし、ユーザビリティの問題を発見することができます。

UXPinによるモバイルアプリのプロトタイプ作成

UXPinでは、他のデザインツールではできない、最終製品のような外観と機能を持つ高度なモバイルアプリのプロトタイプを作成することができます!

ここでは、UXデザイナーがより良いプロトタイプを作成するために使用できる3つの強力なUXPin機能をご紹介します:

  • UXPinのすぐに使えるコンポーネントは、画面レイアウト、インタラクション、トランジション、アニメーションなど、UXチームにインスピレーションを与えます。UXPinのすぐに使えるコンポーネントは、画面レイアウト、インタラクション、トランジション、アニメーションなど、UXチームにインスピレーションを与えます。
  • UXPinにはいくつかのデザインシステムがすでにインストールされています。デザイナーは、iOS、Material Design、Bootstrapなどの一般的なデザインシステムから要素をドラッグ&ドロップすることで、モバイルアプリのプロトタイプを素早く作成することができます。また、あなたのブランドの色、タイポグラフィ、アセット、コンポーネントをフィーチャーした独自のデザインシステムを作成することもできます。
  • 変数(Variables)を使用して、デザイナーはユーザーの入力を保存し、プロトタイプ内で提供されたデータに基づいてアクションを起こすことができます。これにより、最終製品と同様にユーザーエクスペリエンスを調整することができます。
  • UXPin Mergeでは、GitリポジトリやStorybookのコードコンポーネントを使用して設計し、完全に機能するハイフィデリティなモバイルアプリのプロトタイプを作成することができます。Mergeを使用したプロトタイピングでは、最終製品の正確な表現を参加者に提供し、研究者は他のデザインツールでは得られない貴重なフィードバックを得ることができます。

UXPinを無料で試す

UXPinプロトタイピングツールでデザインを始める準備はできましたか?UXPinのパワフルなモバイルアプリプロトタイピング機能を体験するには、14日間の無料トライアルをご利用ください。

使いやすいインターフェイスのためのデザイン思考ツール

9 Design Thinking Tools

デザイン思考とは、人からのフィードバックをもとに、時間をかけてデザインソリューションを提供する、協調的かつ反復的なプロセスです。このコンセプトは、デザインの問題解決の基本とエンドユーザーへの共感を組み合わせたものです。デザイン思考のツールは、この進化のプロセスを促進するために使用されます。

ここでは、市場に出回っている優れたデザイン思考ツールをいくつか紹介し、デザイン思考プロセスのさまざまな段階を見てみましょう。

デザイン思考の5つのフェーズ

共感する

empathize_design

解決しようとしている問題の核心に迫ります。お客様と話し、お客様のソフトウェアとのやり取りを観察します。どこに問題があるのでしょうか?

定義

2 25

観察したり、話を聞いたりして情報を集めたら、問題の核心を簡潔に定義していきます。

アイデア出し

3 22

デザイン思考プロセスのこのフェーズでは、アイデアの生成を行います。定義した問題を解決するにはどうすればよいのでしょうか?その問題を解決するために、創造的で協力的なアプローチはあるのでしょうか?

プロトタイプ

4 13

問題を完全に理解、定義を作成し、どうすればよいかのアイデアをいくつか考案しました。そして、そのアイデアを現実のものにする時が来ました。スケールダウンしたソフトウェアやサービスは、実際の環境でどのように機能するかを評価することができます。  

テスト

5 7

完成した製品は、最初に定義した問題を解決するために、厳しくテストされなければなりません。また、ユーザビリティテストを行うことで、さらに解決すべき問題が見つかることもあります。

共感を得るためのデザイン思考ツール

共感を得るためには、お客様が製品を使用する際に直面する問題について、お客様からのフィードバックを集める必要があります。このコミュニケーションを促進する優れたツールが2つあります。

1. Typeform

Typeformは、フォームやアンケートを使ってフィードバックを集めることができる、使いやすいソフトウェアです。Google Sheetなどのサービスと連携することで、情報収集のスピードアップを図ることができます。また、直感的なカスタマイズが可能なので、ユーザーを飽きさせることなく、デザイン思考プロジェクトに必要な詳細な回答を得ることができます。

2. Join.me

すべての顧客と直接話すことは、おそらく現実的ではないでしょう。ビデオ会議ソフトウェアJoin.meは、ビデオ通話を簡素化し、シームレスな体験を提供します。充実した機能の中には、画面を共有する機能も含まれています。また、招待状を整理したり、通話を記録して今後に役立てることもできます。固有のURLを主張し、招待者全員と共有することができます。Join.meへのアクセスは、モバイル、電話、VoIP、デスクトップで可能です。

デザイン思考ツールで定義

問題があることはわかっていても、それは一体何なのか。また、どのようにして協力者に伝えるのでしょうか?ここでは、その手助けとなる2つのデザイン思考ツールをご紹介します。

3. Smaply

Smaplyは、カスタマー・エクスペリエンスを管理し、マッピングすることができる、ユーザーフレンドリーなプラットフォームです。カスタマージャーニーを作成し、マップやペルソナの形で共有することができます。直感的なジャーミーマッピングツールは、カスタマージャーニー内のいわゆる「ペインポイント」や「真実の瞬間」を特定します。インタラクションはプロジェクトに参加している全員が見ることができるので、顧客が何を考えているかを全員が理解することができます。

4. MakeMyPersona

MakeMyPersonaは、直感的なサービスで、顧客データをシンプルでアクセスしやすい方法で構造化することができます。セットアップ段階で尋ねられた質問に答え、ゼロからペルソナを構築します。回答や作成したペルソナは、Microsoft Word形式でメールで共有することができます。このツールは比較的シンプルですが、初心者が比較的簡単なプロジェクトに取り組む際には有効です。

デザイン思考ツールでアイデアを出す

2つの機能的なツールを使って、問題の核心を特定するために共同でアイデアを出します。

5. Stormboard

Stormboardは、バーチャルな付箋を使ってブレインストーミングをするデジタルな方法だと考えてください。さまざまなアイデアのテンプレートを作成し、共同作業者がそれらを評価したり、独自のアイデアを追加したりすることができます。また、いくつかのレポートオプションが用意されているので、主な発見を評価しやすい方法で凝縮することができます。この直感的なソフトウェアを使えば、さまざまな協力者から寄せられたアイデアを整理し、優先順位をつけることも簡単です。

6. Coggle

Coggleは、マインドマップの作成・共有を支援するオンラインツールで、メモを取ったり、アイデアを計画したり、思考プロセスを共有したり、ブレインストーミングセッションを管理したりすることができます。Coggleでは、画像、テキスト、注釈をドラッグ・アンド・ドロップすることで、画面上で視覚的なコラボレーションを実現することができます。

プロトタイプ作成のためのデザイン思考ツール

作るべきものが決まったら、次はプロトタイプを設計してテストするしかありません。以下の2つのデザイン思考ツールを使って、アイデアを現実のものにしましょう。

7. UXPin

UXPin Booth bg

UXPinは、デザインプロセスを簡素化するデザインオンラインツールです。ワイヤーフレームからプロトタイピングまで、ユーザーはインタラクティブな要素、コードコンポーネント、条件付きインタラクション、変数を構築し、素晴らしいアイデアを実用的なデザインに変えることができます。また、共同作業により、プロトタイプを完成品に仕上げることもできます。洗練された使いやすいインターフェイスは、想像しうるすべてのデザイン要素を統合します。

デザインとエンジニアリングをシームレスにつなぐUXPinは、スケールの大きいデザインを可能にする多くのツールを提供します。

テストのためのデザイン思考ツール

あなたは動くプロトタイプを手に入れました。それが完成品として提供できるかどうかを確認する唯一の方法は、それをテストすることです。

8. UserTesting

UserTestingは、世界で最も人気があり、評価されているテストアプリケーションの一つです。テストする内容や理想のペルソナに基づいてユーザーを選びます。そして、確認した問題点を確実に解決するために、さまざまなメトリクスを設定します。この先進的なソフトウェアは、試作品を操作する際のテスターの行動をすべて追跡します。そしてそのデータをもとに、人々がどのようにソフトウェアを操作し、様々なタスクを実行しているかを確認します。

9. Hotjar

Hotjarは、フィードバックの収集を非常に簡単にする総合的な分析ツールです。このシステムは、選択したメトリクスに基づいてデータを収集します。ユーザーがどこをクリックしたか、どのように移動したか、どのようにタスクを完了したか、選択した機能とどのようにインタラクトしたかを見ることができます。そして、テストプロセスの最後には、即座にフィードバックが得られます。Hotjarを使えば、プロトタイプ・ソフトウェアの潜在的な問題を迅速かつ簡単に特定できます。

UXPinでデザイン思考プロセスを改善

デザイン思考は、さまざまな要素やスキルを必要とする、高度に協調的で視覚的なプロセスです。これらの要素を一つにまとめるのは、複雑で時間のかかる作業です。しかし、UXPinのようなデザイン思考ツールを使えば、アイデアをユーザーフレンドリーなインターフェースに変えることがこれまで以上に簡単になります。UXPinアプリの無料トライアルをご希望の方は、無料アカウントにサインアップしてください。

アフィニティ・ダイアグラム とは?

アフィニティ・ダイアグラム とは?

アフィニティ・ダイアグラムは、データ、ユーザーのニーズ、意見、洞察、その他のデータタイプなどの情報をグループ化するためのフレームワークです。

アフィニティ・ダイアグラムは、それぞれのコンセプト、アイデア、思考を小さなメモ用紙に書き出していきます。そして、2つのアイデアの親和性を確認するために、異なるカテゴリーでアイデアをグループ化します。

1960年代に人類学者の川喜田二郎氏によって考案されたダイアグラムは、アイデア創出のための貴重なツールです。デザイン思考の数多くのフェーズで発見された大量の情報を、チームが自然な連想関係に基づいて整理することができます。

アフィニティ・ダイアグラムは、アプリ内のどこに機能やフィールド、オプションを配置すべきかを考える際によく使われます。

UXPinでは、このアフィニティ・ダイアグラムをとても気に入っています。UXPinでは、アウトライン、ドキュメント、ワイヤーフレーム、UI/UXデザイン、Hi-Fiプロトタイプについて、デザインチームとリアルタイムで簡単にコラボレーションすることができます。

アフィニティ・ダイアグラムの例

1. 新しいアイデアのアフィニティ・ダイアグラム 

下の例では、UXチームがコミュニティ・コラボレーションについてブレインストーミングを行っていました。この図から、コミュニティ・コラボレーションが、彼らが議論していたアイデアの1つであることがわかります。コミュニティ・コラボレーションというカテゴリーは、その後、他のサブカテゴリーに細分化されました。「貢献者」「ユーザー」「評価」。

アフィニティ・ダイアグラム とは? - アイデア出しとブレインストーミング
提供: uxdict.io

2. 組織親和図法(KJ法) 

下の例では、デザイナーが、お客様のニーズを満たすための最善の方法について、情報を整理しています。この図を一目見ると、ブレインストーミングによる解決策が見えてきます。

3. 色分けされた親和図法  

この例では、デザイナーはアイデアを色分けして整理しています。これは、複数の異なる色の付箋を使ってアイデアを整理するというものです。

統計、アイデア、顧客からのフィードバックに異なる色を選ぶことで、図式化を実行することができます。あるいは、それぞれのクラスターに異なる色のラベルを貼る。サブカテゴリーは、メインカテゴリーとは違う色にしてもいいでしょう。そうすれば、付箋紙を新しいグループに再編成しても、元の編成時の色を維持することができます。

提供: Dribble

アフィニティ・ダイアグラムの作成が完了したら、次はデザインとプランニングを始めましょう。UXPinは、チームメイトとリアルタイムでデザインしたり、テスターや関係者とプレビューを共有したりできる優れたデザインツールです。

アプリデザインで親和図法を使う理由は?

アプリのデザインには、情報やアイデアの集まりがあります。これらのアイデアに一貫性のあるフレームワークがなければ、チームはコンセンサスを得ることなく時間を浪費してしまうかもしれません。親和図法/アフィニティーマッピングを使用すると、新しい思考パターンを発見し、情報を関係性のあるものに分類してクラスタリングすることで、古いパターンを簡単に壊すことができます。チームは、情報やアイデアのクラスター内のカテゴリーやメタカテゴリーを発見し、そうすることで、どのアイデアがチーム内で共通しているかを見つけることができます。

親和性ダイアグラムを作成する理由はたくさんあります。まず第一に、ウェブやアプリのデザイナーが、ユーザーのニーズが複雑に絡み合ったウェブの中から意味を見出すのに役立ちます。ユーザビリティテスト、インタビュー、チャットなど、顧客からのフィードバックを収集する方法はさまざまあります。しかし、これらすべてのデータをKPIに照らし合わせて測定することは容易ではありません。それを試みるのは難しいことです。アフィニティ・ダイアグラムを使えば、デザイナーは多様なソースからの定性データを実用的なビジュアル・ダイアグラムに効率的に合成することができます。

アフィニティ・ダイアグラムは、”空間飽和とグループ化 “という手法とも呼ばれています。つまり、最初はみんながアイデアを持ってきて、ボードはリサーチとアイデアで “飽和状態 “になります。すべてのデータから意味を見出すためには、空間が飽和しているので、チームは情報をグループ化する必要があります。グループ化のプロセスでは、ビジネスの視点、個々の情報の間に関連性を引き出し、その結果、より深い洞察を得ることができます。これにより、問題点が明確になり、潜在的な解決策を見出すことができます。このようにして、分析から合成へと移行していきます。

アフィニティ・ダイアグラムが活躍する場面とは?

アフィニティ・ダイアグラムは、アプリを作る前に計画するのに役立ちます。アイデアを生み出すのに最適です。アフィニティマップは、設計前の段階で、定性的なユーザーリサーチや顧客からのフィードバックからつながりや意味を見出し、集めたデータを整理するのに役立ちます。

アプリ開発の初期段階では、チームでワークショップを開催し、コラボレーションやアイデアの共有を行います。このワークショップには、マーケティング、UXスペシャリスト、ビジネスアナリスト、法律家など、さまざまな部署のメンバーが参加します。その後、調査と分析の段階に入ります。アプリ開発者は、ユーザーのペルソナを構築し、次期アプリの欠点と利点を明らかにします。この手順は、実地調査、文脈調査、ユーザーインタビューなど様々なデータをマッピングするための一貫したフレームワークがないと、圧倒されてしまいます。

チームは親和図法を使って、大量のデータからカテゴリーやテーマを作ることができます。このマッピングは、データをグループ化し、グループ間のつながりを見つけることで、パターンを見つけ、学んだことを素早く発見するのに役立ちます。

例えば、親和性マップを使えば、次のようなことができます:

  • 特定の研究課題に対する答えを見つける
  • ブレインストーミングセッションの結果を整理する
  • 革新的なソリューションの作成/開発
  • プロセスの改善
  • 関連するデータやノートのまとめ

アフィニティ・ダイアグラムの背景にある考え方は、全員の声を聞き、対立を避け、似たようなパターンのアイデアが好まれる環境を作ることで、イノベーションのプロセスを簡素化することです。

a) 機能的なアプリとなるように、アプリの運用ワークフローを設計する

アフィニティ・ダイアグラムは優れた手法であり、ステップ・バイ・ステップで進めていくと、調査結果の明確な概要と統合を作成するのに役立ちます。すべてのデータを整理したら、その情報を機能的なアプリに変えることに集中できます。

b) アプリを使いやすくする

UXに関しては、エンドユーザーのニーズを理解することが難しい場合があります。お客様の声を収集するソースが複数あるため、膨大なデータの中から関連性や意味を見出すのは困難です。しかし、アフィニティ・ダイアグラムを使えば、ユーザーから得たデータをマッピングして、ユーザーのニーズ、行動、動機を理解することができます。ユーザーリサーチをマッピングすることで、優れたユーザー体験を提供するために必要なアイデアを処理する方法が得られるのです。

アフィニティ・ダイアグラムのあまり良くない状況とは?

アフィニティ・ダイアグラムでは、チームメンバーがアイデアを付箋やカード、紙に書き留め、壁のチャートやホワイトボード、黒板などに貼り付けます。最終的には、似たようなテーマやパターン、グループに基づいて分類された付箋紙ができあがります。

しかし、この方法は一時的なものであり、メモの一部が落ちてしまったり、誰かに剥がされたりする可能性があるという問題があります(粘着性の高いものを使ったり、オンラインのテンプレートを選んだりしない限り)。また、遠隔地のチームでは使えませんし、その他の多くの状況でも使えません。

物理的にノートを書いてボードに貼るというプロセスは時間がかかります。ほとんどの場合、情報のマッピングを始めるには、研究の最後まで待たなければなりません。

3 26

また、親和性図には時と場所があり、複数の関係者の賛同を得られたときに最も効果的であることを覚えておいてください。

アフィニティ・ダイアグラムを作成するための最適なプロセス

  1. ブレインストーミングのプロセスでは、ブレインストーミングの目的を明確にします。すなわち、どのような問題を解決しようとしているのか?データ、文書化された事実、アイデア、観察のすべての部分をメモ、カード、または紙片にまとめ、誰もが見える平らな面に貼り付けます。
  2. チームの協力関係に基づいて、関連するすべての付箋を関係性に基づいて移動させ、クラスターを作り始めます。時間を節約するために、できるだけチームメンバーを巻き込みましょう。
  3. どのカテゴリーにも属さない付箋は、「一旦保留(parking lot)」というカテゴリーを作ります。すでに表現されていると思われる付箋は、捨てないようにしましょう。アイデアの重複は、同じアイデアを持っているメンバーが何人いるかを明らかにするため、問題ありません。
  4. コンテンツがクラスター化されたら、クラスターを表すカテゴリーをチームに提案してもらい、提案されたカテゴリーを各列の一番上に書き込んでいきます。このとき、カテゴリーの名前を考えるのに時間をかけすぎないようにします。例えば、「ツール」と「ガジェット」の間に意見の相違がある場合は、両方を記載します。もし、メンバーが大きく異なるカテゴリーを作成した場合は、最も賛同を得られたものを選択します。クラスターに名前をつけることは、テーマを発見するのに重要です。
  5. クラスターを重要度の高い順に並べることもできます。例えば、あなたの会社では何を優先していますか?会社の価値観、動機、優先順位を参考にして、ランキングを決めましょう。
  6. クラスターの中に線を引いてつながりを持たせることができます。
  7. そのつながりから意味を持たせます。例えば、ユーザーのペインポイントなのか、ニーズなのか。取り組まれていないギャップを探す。
  8. 似たような情報を特定するのではなく、合成された情報を実践に移すことに集中する。

優れたアフィニティ・ダイアグラムの結果

アフィニティーマッピングは、概念やアイデアの間のつながりを見つけることで、大量のデータセットを統合します。事実、調査、意見などをクラスターに整理することで、複雑な問題の解決策を見つけたり、共通の課題を見つけたりするのに役立ちます。優れたアフィニティーマッピングでは、自然な形で関係性が構築され、実用的な結果に変換することができます。次のようなことに役立ちます:

  1. 問題を特定する
  2. アイデアの創出
  3. 複雑なアイデアをシンプルなソリューションに変換する
  4. グループのコンセンサスを得る

アフィニティ・ダイアグラムは共同作業である。良い結果を出すためには、プロセスを適切にまとめるリーダーを任せる必要があります。また、アイデアがあふれないように、時間制限を設けるとよいでしょう。計画を立て、ブレインストームの目標をチームメイトに伝えましょう。そうすれば、生産性とアウトプットを向上させることができます。

アフィニティ・ダイアグラムの目的は、膨大な量のデータをより一貫性のある形式に整理することであることを忘れないでください。最良の結果を得るためには、正確さを優先し、生成されたアイデアの数に制限をかけないようにしましょう。

まとめ

UXPinでは、アフィニティ・ダイアグラムを使って情報共有や合意形成を行っています。UXPinでは、親和性図を使って情報共有や合意形成を行っています。また、親和性図は設計段階やプロジェクト管理の際に記録として残しています。

UXPinに参加すれば、リアルタイムでのコラボレーション、アイデアの共有、実際のデータやインタラクションを使った生き生きとしたプロトタイプの生成が可能になります。

UXライティング とは何でしょう

UXライティング とは何でしょう

今や、コンテンツライティングとは何かを知っている人は多いかもしれませんが「UXライティング 」についてはどうでしょう?プロダクトデザインチームにおけるこの新しい役割は、非常に重要なものとなっています。

今回は、UXライティング の基礎、デザインチームやプロダクトチームの中での役割、そして優れた UXライティングの原則をご紹介します。

UXライティング とは

UXライティング(ユーザーエクスペリエンスライティング)とは、ユーザーインターフェースを含む、ユーザーと接するすべてのタッチポイントで、ユーザーフレンドリーなコピーを作成するプロセスです。これは単なる装飾的な文章ではありません。UXコピーは、ユーザーに情報を提供し、導き、促し、行動を起こさせるものであり、正式なプロダクトデザインプロセスの一環として作成された場合にのみ、効果的に機能するものです。インタラクティブなUXデザインにおける優れたコピーは、製品を成功させる鍵のひとつである優れたユーザーエクスペリエンスを生み出すのに役立つのですから、それだけで重要な役割を果たすようになったのも不思議ではありません。

UXライターの仕事とは

UXライターは、ソフトウェア、ウェブアプリケーション、モバイルアプリケーションなど、デジタル製品全体で使用されるマイクロコピーを作成します。これらのコピーは、メニューラベル、ボタン、コールトゥアクション、確認メッセージ、エラーメッセージ、セキュリティノートなどです。UXライターは、ユーザーが特定の結果を得るために、何を、なぜすべきかを理解できるようなコピーを作成します。UXライティング(ユーザーエクスペリエンスライティング)とは、ユーザーインターフェースを含む、ユーザーと接するすべてのタッチポイントで、ユーザーフレンドリーなコピーを作成するプロセスです。これは単なる装飾的な文章ではありません。

長い間、デジタル製品のマイクロコピーを書くのは、ソフトウェア開発者やグラフィックデザイナーでした。当時、UXライティング は過小評価され、贅沢なものと考えられていました。その結果、製品内のマイクロコピーは一貫性がなく、ユーザーを混乱させることが多く、また、文法ミスやスペルミスが多いこともありました。すべてに秀でた人はいません。ソフトウェア開発者やデザイナーも例外ではありません。特に、製品のことを知り尽くしている彼らにとって、ユーザーに共感することは難しいのです。

UXライターがしてはいけないことは

UXライティング とは何でしょう - UXライターがしてはいけないことは

UXライターの役割を、テクニカルライター(テクニカルライティングを担当し、ユーザーエクスペリエンスではなく、わかりやすさと正確さを重視する)、コンテンツストラテジスト(コンテンツ戦略、つまり大規模なコンテンツを計画し、必ずしもコピーを書かない)、情報アーキテクト(情報アーキテクト、つまり持続可能な情報構造と分類を構築する)、コンテンツマーケティングコピーライター(リードを引きつけ、顧客に変え、顧客を維持するためのマーケティングコピーを書く)と混同してはいけません。

デザイン・プロダクトチームでの UXライティング

UXライターはUXチームのメンバーであり、そのためUXリサーチの実施や共同作業を行うことが期待されます。UXコピーとUXデザインチームは、最終製品の機能性、ユーザビリティ、アクセシビリティを向上させるオプションを発見するために協力します。その結果、デザインプロセスを効率化し、より多くのユーザーを惹きつける優れたデジタル体験を開発することができるのです。

UXライターは、製品開発者と緊密に連携して、ロジックの抜けやインターフェースの混乱を指摘し、開発中の最終製品に影響を与えます。UXライターはまた、マーケティング、法務、ビジネスデベロップメントなど、組織内の他のチームと協力して、コピーがブランドボイスに沿っているか、製品のUVPを強化しているか、会社に迷惑をかけていないかを確認します。

UXコンテンツの種類

UXコンテンツの具体的な種類は、デジタル製品によって異なりますが、一般的には以下のようなものがあります:

  • 初めてのユーザーのオンボーディング
  • メニューラベル、フォームフィールドラベル、リスト
  • ボタンやコールトゥアクション(CTA)の表示
  • 設定ラベル
  • 文脈上のヘルプとツールチップ
  • 確認メッセージ
  • エラーメッセージ
  • セキュリティノート
  • 製品内マーケティング(例:ポップアップ広告)
  • チャットボットの会話シナリオ
  • 法的通知と免責事項

UXコピーライティング の原則

優れたUXライティングとは、すっきりとした目的のあるラインで、一語一語を大切にすることです。余分なものや冗漫さは敵です。そのため、UXライティングを「詩を書くこと」に例える人もいます。しかし、優れたUXライターは次のようなことも求められます:

screens prototyping
  • 製品で何ができるのかを伝え、その方法を論理的にわかりやすく案内する。
  • 製品のフローを批判的に見て、ユーザーの質問を予測し、積極的なヘルプでユーザーのフラストレーションを先取りし、タスクをガイドする。
  • また、必要に応じて、複雑なプロセスを簡単なステップに分解しましょう。UXのコピーは、必要な情報や要求された情報だけを伝えるべきです。
  • ブランドボイスを使用し、可能な限り製品のユニークバリュープロポジション(UVP)を強化することで、競合製品との差別化を図ります。
  • ブランドボイスを使用し、可能な限り製品のユニークバリュープロポジション(UVP)を強化することで、競合製品との差別化を図ります。

まとめ

ご覧の通り、経験豊富なUXライターを起用することは、製品デザインの全体的な品質を向上させる鍵となります。ユーザーインターフェイスのマイクロコピーは、ユーザーが目的を達成するためにあることを忘れないでください。そしてこれこそが、最終的にあなたのデジタル製品に多くの顧客をもたらすのです。

testing user behavior prototype interaction

UXチームの作業を改善する方法を探しているなら、UXPinを試してみてはいかがでしょうか。UXPinはクラウドベースのデザインツールで、UXライターとUXデザイナーがリアルタイムでコラボレーションすることを容易にします。実際のデータをデザインに取り込むことも可能です。14日間の無料トライアルで使い心地を確認してください(購入の義務はありません)。

コンポーネントライブラリ とは?なぜUI開発に使う必要がある?

What is a component library

最初に

複数のツールにまたがって開発を効率的に行うには、コンポーネントライブラリの利用を検討するのが賢明です。

プロダクションレディで、カスタマイズ性があり、再利用可能なコードコンポーネント(例:ボタン、アコーディオンなど)にアクセスできるオープンソースリポジトリがあることで、UI/UXデザイナーは開発の高速化と成長を実現できます。

主なポイント(概要)

  • コンポーネントライブラリは、事前に構築・検証済みの十分に文書化されたUIコンポーネントのセットであり、製品のUI全体で簡単に再利用できる

  • コンポーネントライブラリにより、製品の一貫した LnF(ルック&フィール)が保証され、効率性と拡張性が促進される。

  • コンポーネントライブラリを使うことで、デザイナーと開発者は全体的なデザインの一貫性を保ち、新しい機能やページを素早く追加できる。

デザイナーとエンジニア間で「信頼できる唯一の情報源(Single source of truth)」を作成しましょう。

UXPin Mergeを使って、コンポーネントライブラリをデザインツールに取り込んでみましょう。

インポートした要素を使用することで、インタラクティブなプロトタイプが簡単に構築可能です。

UXPin Mergeについての詳細はこちらより。

コンポーネントライブラリとは

UIコンポーネントライブラリは、Webサイトやアプリケーションなどのデジタル製品向けに、統一感を持たせるために使用される、デザインおよび事前構築済みの ユーザーインターフェースの要素のコレクションです。

ライブラリには、様々なUI要素(例:ボタンやフォーム、ナビゲーションメニュー、アイコンなど)があらかじめ備わっており、各要素は一貫したルック&フィールでデザインされています。

また、UIコンポーネントライブラリは、チームメンバー間で「信頼できる唯一の情報源(Single source of truth)」を確実に使うことができます。

これによって、最終製品がプロフェッショナルで洗練された外観を確実に維持できることから、協働デザインおよび開発環境において有益です。

コンポーネントライブラリ には「信頼できる唯一の情報源(Single source of truth)」がある

コンポーネントライブラリによって、仕上がりのばらつきや、さまざまなコンポーネントが色々な場所に配置されてしまうというリスクが下がります

コンポーネントライブラリでは、UI要素のソースコードを扱い、通常はCSSとJavaScriptを使用します。

Reactは、よく使われているオープンソースのフレームワークの代表例であり、Facebookによって「コンポーネントライブラリ」として開発されました。

それ以来、アプリ、静的サイト、デスクトップアプリケーションを作成するための大規模なエコシステムに成長しました。

コンポーネントライブラリ を使う利点

アクセシビリティ

コンポーネントライブラリは、既製の再利用可能なコンポーネントを格納する単一のレポジトリとして、あらゆる開発者やデザイナーに迅速なアクセスを提供する。

チームを超えて働く開発者やデザイナー間の連携や連絡が改善される。

重複コードを削減

さまざまなデザインやプロジェクトで重複コード(コードクローン)がよく起きるが、コンポーネントライブラリを使うことでピクセルを全てコードに変換する必要はなくなる。

代わりとして、すでにコード化されたコンポーネントを使うことができる。

一貫性

コンポーネントライブラリを使うことで、「信頼できる唯一の情報源(Single source of truth)」が促進され、プロジェクト全体で一貫したUI/UXを可能にし、統一性を出しやすくなる。

全体的な作業の高速化、効率化につながる。

スピード

ボトムアップ型手法での構築を避けることで、チームの時間が節約される。

UIの作り直しやデザインする代わりに、すでにあるUIを使うことができる。

既製のコンポーネントを使用することで、これまで時間を要した意思決定のプロセスを省略できる。

互換性

フロントエンドデベロッパーは、クロスブラウザやクロスデバイスの互換性の確保が大変な時があるが、コンポーネントライブラリを使用して標準化することによって非互換性の回避が可能。

コンポーネントライブラリを使うベストタイミング

コンポーネントライブラリでプロジェクトに測定可能な価値が加わる特別な状況がいくつかあります。

では、それがどのようなものか見てみましょう。

コード優先のプロトタイプ

ビジュアルデザインよりも機能性を重視するプロジェクトは、コンポーネントライブラリの恩恵を受けやすく、さらに、コードによるプロトタイプは、画像から始めてコードに変換するよりも効率的です。

なので、デベロッパーが画像ベースのデザインを解釈してコードを作成するのを期待するのではなく、既製のデザインからコードコンポーネントを取り入れるだけでいいのです。

コンポーネントライブラリ Prototyping

これにより、デベロッパーはデザインスキルの不足を心配することなく、事前に構築されたコンポーネントを使ってデザインできる機会も広がります。

自分で作る技術や経験がない場合

独自のコンポーネントライブラリの作成や、独自のエンタープライズデザインシステムの一部としてのコンポーネントライブラリの開発を夢見ているかもしれませんが、再利用可能なUI コンポーネントの構築の経験がチームになかったり、プロジェクトの締め切りが厳しかったりすると、これは現実的ではないかもしれません。

その代わりに、統合されたコンポーネントライブラリだと、デザイナーやデベロッパーがデジタル製品に変換する前に、機能性、使いやすさ、デザインをテストするのに必要なコードコンポーネントをすべて得られます。

小規模な企業やチームの場合

スタートアップ企業や中小企業では、資金繰りにもっと慎重になる必要があるかもしれません。また、効果的で汎用性の高いオープンソースのコンポーネントライブラリが幅広く存在するため、中小企業でも一歩ずつ規模を拡大することができます。

結局のところ、業界の巨大勢力が一夜にしてそこに到達したわけではなく、その多くは、その進化を通して、オリジナルのコンポーネントライブラリにこだわり続けているのです。

拡張に役立つ優れたツール

もし、コンポーネントライブラリがどのようなメリットをもたらすのかがまだハッキリしないのであれば、以下のポイントを考えてみてください:

  • デベロッパーがプロジェクトごとに同じコンポーネントを、多少の違いはあるものの構築しているのを見るか。
  • インターフェースでどのUIやUX規約を使うべきかを迷っているデベロッパーはいるか。
  • アップデートや変更の迅速なリリースが必要か。
  • 多くのカスタマイズが必要か。
  • デザインシステムとコンポーネントライブラリの組み合わせを探しているか。

上記質問のいずれかに当てはまるものがあれば、以下のツールのいずれかをご検討ください。

1.Mergeコンポーネントマネージャー

Merge コンポーネントマネージャーは、UXPin で React の UI コンポーネントを管理するためのデザイン操作ツールであり、独自のコンポーネントライブラリを持ち込んで、コンポーネントマネージャーを使ってコンポーネントのプロパティを管理することができます。

これはアクティブな開発サポートが不足している場合に最適です。

UI コンポーネントをアップロードすると、それを使って UXPin で UI をデザインできます。

コンポーネントは React でコーディングされているため、UXPin で完全なインタラクティブ性が発揮されます。

2.npm統合

コンポーネントライブラリから UXPin に UI コンポーネントを取り込む方法の1つに、NPM パッケージの統合があります。

コンポーネントのインポートに必要なのは、ライブラリ名だけです。

その後は、Merge のコンポーネントマネージャーを使って プロップ を設定し、説明などを記述します。

npm 統合についての詳細はこちらをご覧ください。

3.Storybook統合

Storybook は、15のさまざまなフレームワークで UI コンポーネントを開発するためのオープンソースのツールです。

中でもReact、Vue、Angularは最もよく使われているフレームワークです。

これはコード化されたデザインシステムとコンポーネントライブラリを組み合わせたもので、効果的なコンポーネントとページの開発、テスト、ドキュメンテーションのためのサンドボックスとして機能します。

そしてデベロッパーは、視覚的なアプローチよりも効果的なコンポーネント駆動型のアプローチを取ることができます。

コンポーネントライブラリ Storybook

また、Storybook はデベロッパーが使うものであることから、デザインにも役立つ UXPin との統合があります。

UXPin Merge の技術があれば、Storybook を UXPin エディタと同期して、コードコンポーネントでデザインすることができ、すぐにアクセスできるように、完全に機能する要素はUXPinでのUIライブラリの1つとして表示されます。

4.MUI統合

MUI(Material UI)コンポーネントを使用し、デザインからハンドオフ、及び開発プロセス全体の流れの最後まで一貫性を確保します。

CSSユーティリティでReactフレームワークを簡単にカスタマイズし、求めるデザインを追及できます。

革新的なMerge技術を使って、コードでデザインする1番手になろう

コンポーネントライブラリで、開発の標準化やコードの重複の減少、チーム間の連携の改善およびスケーラビリティ推進のチャンスがもたらされます。

また、プロジェクトの成果物やチームのモチベーションに大きな影響を与えるため、ニーズに合ったソリューションを選択することが重要です。

ただ、デザインの一貫性と開発生産性の向上を目指している場合、UXPin の Mergeの技術には、Storybook統合の独自のポイントだけでなく、デザイン内のコンポーネントを管理するための独自のツールである Mergeコンポーネントマネージャーもあります。

こちらから UXPin Merge の詳細をぜひご覧ください。

デザインオペレーションマネージャー は必要ですか?

 デザインオペレーションマネージャー は必要ですか?

顧客とのつながりやプロセスの効率化に役立つデジタル製品を導入する企業が増えるにつれ、デザインオペレーションマネージャーの重要性が高まっています。デザインチームのメンバーが複数のプロジェクトを同時に進めている場合、デザイナーや開発者の管理方法を熟知した人材を導入することは理にかなっています。

比較的新しい職種であるデザインオペレーションマネージャーは、多くの仕事を兼任することが多いです。さらに、職務内容も様々なので、特定のタスクを果たすためにポジションをカスタマイズすることもできます。しかし、どのように定義したとしても、デザインオペレーションマネージャーは製品開発プロセスを改善することができます。

プロジェクトのワークフローを改善する

デジタル製品を成功させるには、時間とお金が必要です。現在では、ほとんどのチームは、コラボレーションによるアジャイルプロジェクトマネジメントが最高の結果を生むと考えています。おそらくそれは正しいでしょう。しかし、成功する製品を効率的に作るためには、どのアプローチが最適なのかを知るには、プロジェクトのガイドラインを見直したり、他のコンセプトを試したりする必要があります。

知識豊富なデザインオペレーションマネージャーは、スクラムやカンバンなどのオプションを検討し、プロジェクトのワークフローを改善できるかどうかを判断することができます。

UXPin Mergeのようなコードベースのデザインツールを使用しているデザイン・開発チームは、独自のワークフローを作成することで最良の結果を得られるかもしれません。例えば、PayPalはデザインとDevOpsを1つのフローに統合したシステムを使用しています。

デザイン業務担当者には、ワークフロー改善の機会を探るように促してください。今はまだ時間がかかるかもしれませんが、その努力は長期的にはチームの時間と労力を節約することになるでしょう。

プロジェクトに特化したスキルを持つ専門家のチームを作る

 デザインオペレーションマネージャー は、プロジェクトの要件を検討し、目標を達成するために必要な特定のスキルを持つ専門家のチームを構築する方法を知っている必要があります。例えば、あなたのチームが作っているのは非常にシンプルな製品なので、必要なのは1人のデザイナーと2、3人の開発者だけかもしれません。しかし、よりインタラクティブで表現力豊かなデジタル製品を作るには、新たな人材が必要になるかもしれません。デザインオペレーションマネージャーは、採用するために応募者を審査する方法を知っている必要があります。

  • アニメーション・デザイナー
  • プロジェクトマネージャー
  • ブランドマネージャー
  • アートディレクター
  • コンテンツクリエイター
  • UI/UXテスター

製品が高度化すればするほど、プロジェクトを完成させるために必要なスキルも増えていきます。デザインオペレーションマネージャーは、適切な人材を確保することができます。

最適な規模のチームを維持することでコストを削減(必要に応じて規模を拡大

あなたのチームは、ユーザーフレンドリーなデザインを作成し、プロトタイプを作成し、市場で通用する製品を作るために協力し合っていますか?

チームの人数が少なすぎると、マイルストーンを達成するのに苦労し、競合他社に追いつくことができません。従業員が多すぎると、潜在的な貢献者がチャレンジ精神に欠け、コストを浪費してしまいます。経験豊富なデザインオペレーションマネージャーは、チームを監査して、メンバーの数が必要かどうかを判断し、製品デザインチームの新しいメンバーの導入を進めることができます。

多くの企業がそうであるように、時折、追加の支援を必要とするプロジェクトがあるでしょう。デザインオペレーションマネージャーは、チームを過剰に拡大するのではなく、信頼できるフリーランスのデザイナーや開発者に連絡を取り、共同作業を支援することで、迅速に規模を拡大することができます。

また、デザインプロセスの拡張を容易にするツールやプロセスを知っている必要があります。例えば、UIパターンを定義し、一貫性を確立し、デザイン作業を容易にするために承認されたアセットへのアクセスを提供するデザインシステムがすでにあれば、チームはより迅速に作業を進めることができます。

 デザインオペレーションマネージャー による品質保証

あなたは、従業員、マネージャー、ステークホルダーにとって魅力的なデジタル製品を作っています。しかし、品質保証のために製品をテストするという特別なステップを踏んでいますか?

品質保証テストの最適な方法は、目的によって異なります。デザインオペレーションプログラムのマネージャーがその目標を明確に把握していれば、ターゲットとなる市場が製品に価値を見出すことができるようにテストを管理することができます。

社内製品の中には、大規模なテストを必要としないものもあります。試作品を数人の同僚に送り、フィードバックを求めるだけでいいかもしれません。

しかし、収益を生み出す市場向けの製品には、綿密なテストが必要です。デザインオペレーションマネージャーは、テストとフィードバックをしてくれるユーザーを募集するかもしれません。A/Bテストでは、あるバージョンのアプリが他のバージョンよりも優れているかどうかという疑問を解決することができます。これを機に、AIをユーザビリティテストに参加させてみてはいかがでしょうか デザインオペレーションマネージャー は必要ですか? - A/Bテスト

買ってもらえなかったり、クレームや悪い評価を受けたりするような商品は出したくない。当たり前のことですが、リスクを伴い、テストされていない製品は、あなたの会社に損害を与えます。製品を改善し、失敗を避けるために、品質保証の方法を知っているデザイン担当者を雇いましょう。

製品をリリースする前に、チームがすべてのタスクを完了していることを確認する

理想的なのは、プロジェクトのタスクが完了したことを示すチェックリストを管理することです。例えば、従業員Aがアプリのナビゲーションをデザインしているとします。従業員Bは、アプリがすべてのデバイスで完璧に見えるようにコードを調整していますので、その仕事が完了したら報告します。

この方法は通常、うまくいきます。しかし、タスクが時間通りに正しい順序で完了するように、誰かがチェックリストを監督しているでしょうか?これはプロジェクトマネージャーが行うことができますが、その人はデザインチームの中でどのアプローチがプロジェクトのタイプに最適かを知っているでしょうか?

ここにもデザインオペレーションマネージャーが介入し、製品開発プロセスを改善するチャンスがあります。タスクを割り当て、完了を監視するためのアプリケーションは数多く存在します。これらのツールを使いこなしている人は、プロジェクトごとに最適なオプションを選ぶことができます。プロジェクトマネージャーは進捗を監視するかもしれませんが、その進捗をどのように測定し、保証するかを決めるには、より広い視野を持った人が必要です。

UXPin Mergeでデザインオペレーションマネージャーの仕事が楽になる

デジタル製品を構築するほとんどすべての設計・開発チームは、デザインオペレーションマネージャーの洞察力から恩恵を受けることができます。

しかし、新しいマネージャーに過度の負担をかけてはいけません。ストレスの多い職場環境は、人間関係を悪化させ、仕事の進展を困難にするでしょう。

UXPin Mergeへのアクセスをリクエストすることで、チャレンジを容易にすることができます。Mergeは、デザインにコードベースのアプローチを取ることで、開発プロセスを合理化します。デザイナーはGitStorybookのような開発者のライブラリからインポートされたインタラクティブなコンポーネントを使用するので、デザインプロセスの時間が短縮されます。さらに、デザインを開発チームに送る前に、完全に機能するプロトタイプをテストすることができます。

 デザインオペレーションマネージャー は必要ですか? - 最適なデザインツールの選択

Mergeにアクセスして、デザインオペレーションマネージャーの仕事を容易にし、製品開発プロセスを改善することができます。

なぜ コードベース の デザインアプローチ をとるのか

なぜ コードベース の デザインアプローチ をとるのか

従来、プロダクトデザイナーはウェブサイトやモバイルアプリ開発においてイメージベースデザインツールを使用してデザインしてきましたが、それにはプログラミングとの連携が上手くいかないという課題がありました。デザインチームがベクターやラスターグラフィックで開発者にハンドオフした場合、開発者はユーザーにとって機能性があって、魅力的で、使いやすい要素を考えた上でコードを書くために多くの時間を要します。グラフィックデザイナーもまた開発者のために多くの時間を割かなければならないでしょう。

Code-to-Design」アプローチをとることで、グラフィックデザイナー、開発者、そして製品の連携が改善につながります。チームにコードベースデザインのアプローチを採用するべきか、まだわからないという方はこのままお読みください。

ユーザビリティテストの質を向上させ、製品をより早く市場投入し、デザイナーと開発者との連携を改善することができます。UXPinのMergeテクノロジーで、これらすべてを実現させましょう。詳しくはこちらまで。

イメージベースのデザインでは課題が多すぎる

イメージベースのデザインに依存しているチームは、チーム自身や開発者にとって多くの課題を抱えています。開発者がイメージベースのデザインを受け取る際に、以下のようなことが起きることがあります。:

  • 元のデザインの全体的な美しさが損なわれ、ユーザーエクスペリエンスに悪影響を及ぼす可能性がある。
  • 開発者は、デザインをより機能的にするために再解釈しなければなりません。開発者は余計な仕事をしなければならず、デザイナーは色や文字などの選択に多大な労力を費やしたにも関わらず、制作段階で変更されてしまうことを目の当たりにするため、全員にとって快適な作業とは言えない。
  • プロトタイピングと市場投入において、開発者は静的なイメージでドロップダウンメニューやソート機能などを備えたインタラクティブなコンポーネントに変換しなければならない。

しかし、コードベースのデザインであれば、上記のことを心配する必要がなくやり取りもスムーズに行うことができます。

デザイナーと開発者が同じ言葉でコミュニケーションが取れる

コードベース デザインプロセス

現在、デザインチームと開発チームの間では、まったく異なる言語が使われています。静止画のアートボードは、誰が見ても意味があると思っているかもしれません。しかし実際には、開発者にはデザイナーの意図が汲み取りづらいこともあり、お互いにとって難しいしているでしょう。

コードベースのデザインでは、デザイナーと開発者がより正確にコミュニケーションをとることができます。開発者が理解できないイメージベースのデザインを提供する代わりに、あなたのチームはコードベースのデザインを採用することができます:

デザイナーにコードを学ばせるということは、手間をかけているように聞こえるかもしれません。しかし、UXPin Mergeのようなコードレスのデザインおよびプロトタイピングソリューションを使用すると、そのようなことはありません。新しい難しいスキルを学ぶことを強制するのではなく、デザイナーと開発者が共に理解できる共通言語を与えるのです。適切なアプリケーションを選択するだけで、チーム間のコミュニケーションが向上します。

コードベースデザインは、プロトタイピングと市場投入プロセスを合理化する。

開発者は、デザインチームから与えられたものをすべてコードにしなければなりません。デザインの魅力も重要ですが、すべてのデジタル製品はコードで動いています。

コードベースのデザインは、開発者がコードで再現する必要のないデザインを提供することで、プロトタイプやリリースのプロセスを効率化します。コードベースという点で、すでにあるコード ベースのコンポーネントを使用することができます。使用するコンポーネントはすでにインタラクティブになっているので、プロトタイプが最終製品と同じように動きます。  UXPin Mergeの無料トライアルで、ワークフローがどれだけ改善できるのかご体験ください。節約できた時間でより多くのプロジェクトに取り組み、より高い収益を得ることにもつながります。

UXPin Mergeはコードベースデザインを提供する

チームがデザインにコードベースのアプローチを取るためには、適切なツールが必要です。UXPin Mergeで実現できること:

  • チームにコードレス、ドラッグ&ドロップのデザイン環境を提供。
  • コードリポジトリにすでに存在するコンポーネントを使用することで、追加作業やコーディングの専門知識不要。
  • 再利用可能なコンポーネントを保存、将来のプロジェクトでの作業時間を短縮。
  • 製品が消費者の手に渡ったときに確実に動作するよう、プロパティを制御可能。
  • ウォーターフォール方式のような時間のかかる欠点がなく、アジャイルワークフローを改善可能。

デザイナーは、静的なイメージではなくリアルでインタラクティブなコンポーネントを使うことができます。

UXPin Mergeでデザイナーを成功に導く

コード ベースのデザインの利点について一日中読んでいても、それがあなたのチームやワークフローにどれほどの価値をもたらすかを深く理解することは難しいでしょう。UXPin Mergeへのアクセスをリクエストすることで、経験から学ぶことができます。デザイナーと開発者間のコミュニケーションを改善し、ハンドオフの作業を効率化する方法を実際にご体験いただけます。

なぜ コードベース の デザインアプローチ をとるのか - UXPin Merge

デザインの失敗 :ワースト10例

10 Worst Design Failures of All Time

デザインでの失敗 はつきものです。だからといって、おかしなアイデアなどを見つけたとしても、それはそれでみるのを止めれませんよね。

それぞれのデザインからの重要な教訓があるので、みてみましょう!

10. Motorola ROKR w/ iTunes (2004)

Motorola ROKR

Author: Matt Ray. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

2004年、AppleはMotorola ROKRでスマートフォン市場への参入を決めました。モトローラは、iTunesプレーヤーをOSに統合しました。このアイデアは素晴らしいものでしたが、実際に実行してみると大失敗となりました。インターフェイスのデザインがよくありません。保存できる曲の数も限られていた。結果的には、iPod nanoが発売された時点で売上が激減し、モトローラは次の携帯電話でiTunesを使わなくなってしまいました。

Continue reading デザインの失敗 :ワースト10例