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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

段階的開示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

” デザイン ”というのは面白い言葉です。会話の中でそれを口にすれば、正確な意味を付加することなく、付加価値を与えてくれます。

もしあなたが「あれが素晴らしいデザインだ」と聞いたら、その相手が何を言いたかったのか正確に分かるでしょうか？美しさについてでしょうか？機能性についてでしょうか？それとも両方でしょうか。

数ヶ月前、私はシリコンバレーで経験豊富な起業家を前にプレゼンをしていました。そのプレゼン中に私は「“I’m a designer”」と言いました。プレゼン後、60代後半のある男性が、「“I’m a designer as well. I used to design circuits”.（私もデザイナーです。以前は回路設計をしていました。）」と言ってきたのです。しかし、私はそのようなタイプのデザインに関しては専門では無かったため、共通の話題は見つかりませんでした。

デザインという言葉は、危険なほど曖昧な言葉です。また、「良いデザイン」はどんな製品にとっても「良いデザイン」かもしれないですし、一方で「悪いデザイン」はどんな製品にとっても「悪いデザイン」かも知れません。

それでは、本ブログの目的である”デザイン”を一般的に定義してみましょう！

UXPin Mergeを使って、共有のビジョンでチームを調整し、デザイン業務を拡張しませんか。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

 デザイン とは ？

1. デザインの辞書的な定義

デザインとは、物体やシステムを構築するための計画や慣習の創作物の事です。（建築の設計図、エンジニアリングの図面、ビジネスプロセス、回路図、縫製パターンなど）

つまり、デザインは分野によって意味合いが異なるのです。

(出典：Cambridge Dictionary of American English)

2. デザインの語源

・デザイン(動詞での意味)：①＋②＋③の組み合わせ（ラテン語由来）

Design=「マークアウト、考案、選択、指定、任命」=de-「アウト」＋signature「印をつける」＋signum「印、記号」

※現在はdesignateに意味が付けられている。

・デザイン（名詞での意味）：①＋②＋③をミックス
①中フランス語のdesseign「目的、プロジェクト、設計」

②イタリア語のdisegno、disegnare「印をつける」

③ラテン語のdesignare「印をつける」

(出典: Etymology Dictionary)

3. デザイン の本質

• 目的を持った行動であり、特定の問題を解決するための計画の事。
• 受け手に価値を提供することを意図した一連の意図的な行動の事。
• 単なる企画機能ではなく、何かに意味を与えること。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに多用・適用できるのです。

4. デザイン の意味をより深く理解するために

すべての定義に共通するのは、デザインとは目的のある行動、つまり特定の問題を解決するための計画であるということです。デザインとは、特定の実用的な分野にかかわらず、「デザインされたもの」の受け手に価値を提供することを意図した一連の意図的な行動なのです。

デザインという言葉は、このように考えることで、より深い意味を持つようになります。デザインは美学以上のものである。デザインとは、単なる企画機能ではない。何かに意味を与えることなのです。それは、経験についてです。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに応用できるのです。

これって、すごいことだと思いませんか？
ここで、デザインの定義を少しグラフィックで表現してみましょう。私たち一人ひとりにとってのデザインの意味と、それをどう理解するかについて、これからも考えてみましょう。

読んでくださりありがとうございます。

The post 「 デザイン 」の本当の意味とは？ appeared first on Studio by UXPin.

ハイテクなデジタル製品におけるUXデザインの世界でも、ペンと紙は、Lo-Fi（低忠実度）のプロトタイプをサクッと作る選択肢として今でも好まれています。皆さんの思い込みとは裏腹に、UXチームはコンピューターから離れ、付箋やホワイトボード、メモ帳に書き込んだり、紙のプロトタイプに注釈を加えたりすることに多くの時間を費やしています。

デザイナーがコンピュータに向かう前に計画や準備をすればするほど、ワイヤーフレーム、モックアップ、プロトタイプをサッとデザインすることができます。そしてペーパープロトタイプは連携を促すことから、初期の UX デザイン思考プロセスの重要な部分であり、それでデザイナーは最小限のコストで多くのアイデアを検討できるようになるのです。

UXPin を使うことで、デザインチームと開発チームは、ペーパープロトタイプから忠実度の高いプロトタイプ作成にすぐに移行でき、それでデザインプロセスは大幅に加速されます。一貫性のある高品質なデジタル体験を構築しませんか。無料トライアルにサインアップして、UXPin のプロトタイピング機能をぜひお試しください！

ペーパープロトタイプとは

ペーパープロトタイプとは、デジタル製品を表す手描きの「スクリーン」を使ってアイデアを開発し、ユーザーフローをデザインするプロセスであり、ここではインタラクションデザインよりも、ハイレベルな UX（ユーザーエクスペリエンス）のテストを行います。

ペーパープロトタイプには機能がないことから、忠実度が低いため、ペーパープロトタイプのデザイナーがペーパープロトタイプを部門外で共有することはほとんどありません。

ペーパープロトタイプは、情報アーキテクチャをマッピングしてユーザーフローを可視化することを主な目的としています。

デザインチームは、よく机の上やフローの上に紙画面を並べて、実際のユーザーがどのようにナビゲートして最終的なゴールに到達するかを想像します。そのデザインは初歩的なもので、たいていは白黒でスケッチされ、コンテンツは見出しと行動喚起のリンクだけが読みやすいテキストで表示された限定的なものです。

また、スワイプやスクロールなどの基本的な機能をシミュレートするために、チームが厚紙を使って iPhone や Android のモックデバイスを作ることもあります。このようなモックデバイスを使うことで、デザイナーは自分のデザインが携帯電話の枠内でどのように見えるかを確認することもできます。‐ これはモバイルアプリのデザインの際には特に便利です。

紙のプロトタイプの主な利点はスピードですが、UI Stencils などのツールを使って、正確で見た目に美しい画面レイアウトをデザインするデザイナーもいます。これは、紙のプロトタイプをステークホルダーやテスト参加者に提示する予定がある場合に極めて重要です。

UXPinの旅は、Web Kitという同様のペーパープロトタイピング製品から始まりました。ペーパープロトタイプを自動的にワイヤーフレームに変換するデザインツールとペアになったペーパーパッドです。そして UXPin は、エンドツーエンドのプロトタイピングソリューションへと進化し、最初から制作可能なプロトタイプを作成できるようになりました。UXPinをぜひ無料でお試しください。

ペーパープロトタイプのデジタル化

reMarkable や Apple Pencil のようなツールを使えば、チームはアナログな紙の体験のようなスピードと多様性を楽しみながら、リモートで共同作業を行うことができます。

デジタルスケッチツールを使うことで、ペーパープロトタイプのプロセスは加速されます。デザイナーは、（画面を再描画することなく）より速やかに変更を加え、詳細なメモを添付し、完成したプロトタイプを UXPin のようなデザインツールにすぐにアップロードして、忠実度の高いプロトタイプを作成したり、ワイヤーフレームを作成したりすることができます。

ペーパープロトタイプがデジタル化されることで、紙やプラスチックのゴミも減って環境にも優しいですよね 。

ペーパープロトタイプのメリット・デメリット

スピードと柔軟性は別として、ペーパープロトタイプにはメリットもデメリットもあります。

以下の無料のeBook に載っているメリット・デメリットからいくつか挙げてみましょう（英語）

メリット：

• 速やかなイテレーション：１時間以上かけて完成させたデジタルモックアップよりも、５分で完成した紙のデザインを破棄する方が簡単。
• 低コスト：紙は安く、ツールやキットが追加されても破綻しない。
• 創造性の向上：鉛筆と紙の自由さで、実験と新しいアイデアが育まれる。デザインツールはデザインプロセスにおいて重要な役割を果たすが、デザインの初期段階では創造性を阻害する可能性がある。
• チーム構築：ペーパープロトプは、クリエイティブな環境でチームが一丸となれる貴重な機会となる。ペンと紙を使って作業することで、子供のようなエネルギーが引き出され、そこから絆が生まれ、同僚との関係が強くなる。
• 習得が一番ラク：誰もがアイデアをスケッチできるため、ペーパープロトタイプはマーケティング、開発、ステークホルダーなどの他部門を巻き込むのに最適な方法となる。
• ドキュメンテーション ：ペーパープロトタイプは優秀なドキュメンテーションとなる。例えばデザイナーは、プロジェクト全体を通して参照できるように、メモやアイデアのアウトラインを作ることができる。ペーパープロトタイプは優れた UX成果物である。

デメリット：

• ユーザーの反応がない：ユーザーからのフィードバックがないため、アイデアがうまくいくかどうかを知るのは難しく、ペーパープロトタイプを参加者とテストしたとしても、フィードバックは限られたものになると思われる。
• 不正確なフィードバック：UXチーム以外では、ペーパープロトタイプの解釈が大変である可能性があり、それで正確で意味のあるフィードバックが制限されてしまう。
• 潜在的に不要：UXPinのようなラピッドプロトタイピングツールでは、ペーパープロトタイプでデザインプロセスに不必要なステップが追加される可能性がある。UXPin にはあらかじめデザインシステムが用意されているため、デザイナーは忠実度の高い要素をドラッグ＆ドロップでサッとデザインして、作業用のプロトタイプを編集することができる。

１４日間のトライアルにサインアップして、UXPin を使って紙のデザインコンセプトを最終製品のように機能する高忠実度のプロトタイプにどれだけ早く変換できるかをぜひご覧ください。

ペーパープロトタイプを作るタイミング

Google のジェイク・ナップ氏は「ペーパープロトタイプは時間の無駄だ」と言っていますが、初期段階のコンセプト作りにはペーパープロトタイプが有効だと認めています。

一度紙からデジタルに移行したら、戻る理由はありません。新機能や製品の再デザインのために、紙のプロトタイプに戻るデザイナーもいるかもしれませんが、その場合でも、紙のプロトタイプまで戻る必要はないかもしれません。

とはいえ、紙のプロトタイプは初期段階の概念化に最適です。そのスピード、簡単さ、シンプルさにより、デザイナー以外の人も含むすべてのチームが利用でき、実験と創造性を育むことができます。‐ これはデジタルキャンバスでは実現できないことですですね。

また、ペーパープロトタイプは以下には理想的です：

• ブレーンストーミングのミーティングとセッション
• 初期段階での基本的な社内ユーザーテスト

ペーパープロトタイプの作り方

ペーパープロトタイプは、製品デザインの楽しみどころです。チームメンバーがブレインストーミングを行い、アイデアをスケッチする機会ですからね。

スケッチの綺麗さを気にする必要はありません。最高の UX デザイナーでも、別に素晴らしいスケッチアーティストというわけではないですし、そもそもこれは、自身のアイデアを視覚化して創造力を引き出すことが目標です。

ペーパープロトタイプの作成には、主に以下の３ステップがあります：

１．材料を準備する

紙、ペン、マーカー、付箋、はさみなどの材料を集めます。UI（ユーザーインターフェース）のスケッチに、ホワイトボードや大きな紙を使うのもいいかもしれません。

２．インターフェースをスケッチする

基本的な画面、UI、デザインの主要な構成要素を別々の紙に描き、そのスケッチを順番に並べることで、ユーザーの流れを表現します。

３．インタラクションのシミュレーションをする

ユーザーとのインタラクションの順序でスケッチをレイアウトします。ユーザーのアクションに基づいてスケッチを手動で切り替えてユーザー体験をシミュレーションし、フィードバックを集めてデザインを直していきます。

詳しいガイドについては、UXPinのプロトタイプに関する記事をご覧ください。

ペーパープロトタイプを作るための６つのヒント

1. プリンター用紙と安い鉛筆やペンを使う。罫線やラインが引いてあるノートは、多くの場合はデザイナーがたくさんのアイデアを練るよりも、線の間に描くことに気を取られて創造性が抑制されてしまう。
2. ウォーミングアップから始める！リラックスして流れに乗るには、数枚のスケッチが必要なこともある。クレイジーエイトは、同じ画面の多くのバージョンを素早くデザインするための素晴らしいペーパープロトタイプの手法であり、これを２，３ラウンド行うと、さらに発展させるアイデアがたくさん出てくるだろう。
3. モバイル優先型またはプログレッシブエンハンスメントのプロトタイプを作成する。最小のスクリーンから始めて、ビューポートを拡大縮小しながらレイアウトを調整する（これはモバイルと Web デザインに当てはまる）。拡大は、コンテンツを優先して、モバイルに変換されない複雑なデスクトップ用のレイアウトになるのが回避されることから、縮小よりもはるかに簡単である。補足: UXPinのオートレイアウトを使うと、自動的にデザインのサイズ、フィット、塗りつぶしがされることからモバイル優先型のデザインに便利な機能である。
4. １画面（１枚の紙）につき１枚のスケッチにこだわる。ペーパープロトタイプでは、紙片を順番に配置してユーザーフローを作成する必要があり、その入れ替えや、新しい画面の追加をしたりすることから、１枚の紙の上に複数の画面があると、このスピードと柔軟性が失われてしまう。
5. アイデアが浮かんだら反復する。目標は質ではなく量であり、紙でプロトタイプのアイデアをたくさん作ると、多くの場合、最終結果を得るために各アイデアから少しずつ取り出すことになる。これは、紙を使ったレゴ セットのようなものである。
6. ペーパープロトタイプがうまくいくには、計画を立てることが重要。十分な数のペン（黒の細いマーカーが最適）、紙、はさみ、のり、付箋、インデックスカード、テープ、厚紙、その他にもプロジェクトに必要と思われるものを用意する。ホワイトボードとマーカーも、ユーザーフローの概要を共同で描くのに最適。プロのアドバイス：ペーパープロトタイプを準備する仕事は、アート＆クラフト愛好家に割り当てる。どのチームにも少なくとも１人はいて、必要なものを十分すぎるほど揃えてくれるはず。

ペーパープロトタイプのテストと発表

UX部門外でペーパープロトタイプをテストして発表することは、常に厄介です。ステークホルダーやユーザビリティの参加者は、何が起こるかを「想像」しなければならないため、訳がわからなくなったり、提示しようとしている内容から焦点がそれる可能性があります。とはいえ、Jakob Nielsen の調査によると、ユーザビリティの問題の７５%は、ペーパープロトタイプのようなシンプルで忠実度の低いプロトタイプで特定できることが分かっています。

ペーパープロトタイプを発表してテストするためのヒントを以下に挙げてみましょう：

• 発表者以外の１人を「人間コンピュータ」または製品シミュレータ役に指名する：人間コンピュータ役の人は、スクロール、スワイプ、さまざまな画面への移動、その他の機能のシミュレーションをする。
• リハーサル：プレゼンターとシミュレーターが同期できるように、リハーサルは非常に重要。発表者は、シミュレータがプレゼンテーションに追いつくための適切なリズムを考案するといいかもしれない。
• 標準的なユーザビリティテストのベストプラクティスに従う – 「最低５人のユーザーを使ってテストを記録する」などの標準は、現在も適用されている。ユーザビリティの標準と実践方法に関する詳細については、当社のユーザビリティ・テスト・ガイド（無料）をこちらからダウンロード可能（英語）。
• ユーザーに紙のプロトタイプを渡して検査させる場合は、どこに注目して何をテストすべきかがわかるように、ガイダンスと注釈を必ず提供する。

UXPin でのプロトタイプ

モバイル アプリケーションを構築する場合でも、新しい Web サイトを構築する場合でも、UXPin でデザイナーは高度なプロトタイプを構築するためのツールを得られます。‐ 大抵の主要なデザインツールではこれができません。

でも本記事を鵜呑みにせず、１４日間の無料トライアルにサインアップして、次のプロジェクトでは UXPin の強力なプロトタイピング機能をぜひ実際にお試しください。

The post ペーパープロトタイプ： １０分でわかる実践ガイド appeared first on Studio by UXPin.

いい UX（ユーザーエクスペリエンス）には、いい UI（ユーザーインターフェース）が不可欠です。 Webサイトやアプリがインターフェースが原因で使いづらい場合、その製品は使われることない上に、テクニカルサポートを圧迫させて、コストが膨れ上がってしまいます。

UI はビジネスに大きな影響を与えるため、ビジネスの成功には不可欠なのです。

そしてこの原則の多くは、「ユーザーの生活を楽にする」ことに集約されます。

UI デザインの１４原則で、ユーザーの使いやすさが改善されます。この原則を実践してみませんか。UXPinを使えば、高度なプロトタイプが可能になり、美しく完全にインタラクティブなプロトタイプを数分で作成できます。UXPin をぜひ無料でお試しください。

１．ユーザーを中心に据える

いつものように、最初の UI デザインの原則は、人（あるいは、所謂「ユーザー」）に焦点を当てるということです。いい UI は、使いやすく自然で、混乱を招くようなことはなく、ユーザーが求めていることを実現してくれますからね。

ユーザーを理解して、彼らが何をしたいのかを理解する必要があります。そして例えば「ユーザーは専門家なのか」など、ユーザーについて知る最善の方法は、彼らと話すことです。

インタビューの作成と構成は本記事の範疇を超えていますが、対象者にインタビューして彼らがどのような人なのかを知り、彼らのための UI デザインを開発しましょう。HCD（人間中心設計）について学ぶことで、最高のインターフェイスのための正しい考え方に行き着き、人をまず第一に考えてデザインは第二に考えるということができるようになるでしょう。

２．明瞭さを追求する

 UI の目的は、ユーザーが Web サイトやアプリケーション（または、より一般的に言うと、より広いデザインでは、あらゆる製品）と対話できるようにすることです。なので、混乱を招いたり、インタラクションの助けにならないものは避けましょう。

３．画面ごとのアクションとステップの最小化

タスクとアクションを効率化し、できるだけ少ないステップで実行できるようにしましょう。各画面には、主要なフォーカスが１つあるべきです。例えば、このブログの目的は、みなさんがこれを読み、できれば楽しんでいただき、そこから学ぶことであり、SNS でシェアしたり、同僚にメールしたりするためではありません（シェアするほど価値があると判断した場合はシェアしてほしいですが）。

主要なアクションを常に前面中央に配置し、二次的なアクションをページの奥深くに移動するか、視覚的に軽い重みと適切なタイポグラフィを取り入れましょう。

４．シンプルさを目指す

クラシックなものが存在するのには理由があります。クラシックは時代を越え、流行遅れになることはありませんが、現代的なタッチが加わることでさらに魅力が増します。黒いカクテルドレスやタキシードを考えてみてください。どちらもファッションスタイルの定番です。シンプルでエレガントで、着る人に高級感を添えます。

UI はシンプルでエレガントであるべきです。シンプルさについて、詳しくはこちらの記事（英語）をご覧ください。

５．一貫性を保つ 

一貫性があることで「馴染み」が生まれ、馴染みのあるインターフェースは当然使いやすくなります。車のハンドルを握ったとき、ブレーキとアクセルが左右逆だったらどんなにイライラするでしょうか。あるいは、Webフォームへの入力で、赤が「送信」ボタンで、緑が「削除」ボタンだったらどうでしょう。

一貫したデザインだと、ユーザーが感じる摩擦が減ります。一貫したデザインは予測可能ですからね。予測可能なデザインとは、指示がなくても機能の使い方が理解しやすいということです。UI デザインは内部だけでなく、外部的でも一貫しているべきなのです。

Web サイトやアプリ間で同じように、あるいはほぼ同じように機能する一般的な規約だと、サイトのナビゲートや使用がしやすくなります。例えば Apple のヒューマンインターフェースガイドラインは、アプリ間の一貫性の素晴らしい例として挙げられます。このガイドラインは、どの Apple 製品のユーザーでも、他のどのアプリでも簡単に使えるように、アプリ間やすべてのApple 製デバイスでどのように機能が動作すべきかが詳しく説明されています。

これはまた、一般的なパターンを新たに発明したり一から作り直したりしないということでもあります。デザインの問題に対するパターンはすでに数多く存在しています （パターンがあると、ユーザーがすでにその仕組みを知っていることから認知負荷も軽減されます。これは８番目の原則で挙げています。)。なので例えば「検索バー」をページの一番下に置くと、それは「革命的なデザイン」になるのではなく、混乱を招くだけになるでしょうね。

デザインシステムは、UI デザインの一貫性を確保するための素晴らしい方法なのです。

６．UI デザインは見えなくていい

UI が注目されるようなものであってはいけません。素晴らしい UI だと、摩擦なく製品を使うことができ、インターフェースとのインタラクションの方法を考えることに時間が費やされることはありません。

７．有益なフィードバックを提供する

フィードバックには、視覚的なもの、音声的なもの（新着メッセージを受信したときの「チーン」という音）、触覚的なもの（ゲームや電話が「消音」に設定されているときの新着メールや電話の「バイブレーション」で通知する機能で有用）があり、どのアクションにも、そのアクションが成功したか否かを示すフィードバックがあるべきです。

フィードバックで、以下の４つの分野の質問に答えることができます： 

1. ロケーション：現在地
2. ステータス：今どうなっているのか、この状況はまだ続いているのか
3. 今後の状況： 次は何か
4. 成果と結果： それでどうなったのか

ナビゲーションアイテムの上にカーソルを置くと色が変わり、そのアイテムがクリック可能であることが示されます。また、ボタンはボタンのように見えるべきです。フィードバックは、ユーザーが正しいことをしているかどうか（または間違ったことをしているかどうか）を知らせてくれるものでであるべきです。 

８．認知的負荷を軽減する

この UI デザインの原則の多くは、ユーザーの認知的負荷を軽減する役割を果たすものです。つまり、基本的には、ユーザーに考えさせないということです（同様に UX デザインの原則としても有用です）。

認知負荷を減らし、Web サイトやアプリを使いやすくするための一般的な方法としていかが挙げられます：

• アクションと情報をチャンク（細切れ）にする ：ほとんどの人は、情報を処理するときに「７±２」の塊を処理できる。たとえば、電話番号を 「１２３４５６７８９０」のような１０桁のシーケンスではなく、「１２３−４５６−７８９０」のような通常の３-３-４ の方法で分割すると、エラーが少なくなる。
• ３クリックルールを適用する：情報を探すのに３回以上クリックされるべきではない。
• 認識を優先して想起を最小限に抑える：例えば「ゴミ箱」や「（通知によく使われる）ベル」のアイコン など、既存の記憶を呼び起こす一般的なアイコンを考えてみると、コンテクスト内の一般的な画像やアイコンで、ユーザーは機能を識別することができる。これは、大抵の人が理解できる一般的なアイコンを別のものを表すのに使わないということでもある。そういうことをすると、混乱を招くだけである。

９．アクセスしやすくする

UI デザインは、アクセシビリティの問題を考慮する必要があります。これは、オンラインにおいては、多くの場合は「視覚に障害がある人が製品にアクセスして使えるようにする」ということになります。あと、色覚に障害がある人のことについても忘れてはいけません。

男性のおよそ１２人に１人（約８％）、女性の２００人に１人（約０.５％）が、色覚に何かしらのハンデがあります。色は強調のために使いますが、情報伝達を色だけに頼らないようにしましょう。

１０．UI にユーザーのフィードバックを含める

デザインが独り歩きしてはいけません。ユーザーからのフィードバックを集めることで、デザインの選択をテストして検証しましょう。ユーザーがあなたのデザインを使おうとするのを（指導せずに）観察してください。彼らは混乱していませんか？望む結果を簡単に得られますか？

これをデザインプロセスで実行し、リリース後に継続的に評価しましょう （ヒートマップは UI の有効性を追跡する１つの方法であり、もう１つの方法として A/B テストがあります)。

１１．柔軟性

複数のプラットフォームで動作し、見栄えのする UI を作成しましょう。もちろん、デバイスのフォームファクターや 、Android や iOS などの OS（オペレーティングシステム）によって微調整が必要な場合もありますが、何にでも対応できる柔軟性が必要です。

１２．視覚的構造

一貫したビジュアル構造を保つことで、慣れ親しんだ感じを演出し、ユーザーの不安を取り除いて、リラックスしてもらえるようにしましょう。最も重要なものが明白になっている視覚的階層、配色、一貫したナビゲーション、要素の再利用、グリッドを使った視覚的順序の作成など、注目すべき要素がいくつかあります。

１３．ダイアログは終了につながるべきである

アクションには、（各ステップでフィードバックがある）始まり、中間、終わりがあるべきです。例えば、オンラインで購入する場合、ブラウジングや商品選択からチェックアウトに移り、最後に購入が完了したことを確認します。

１４．明確な次のステップを提示する

インタラクションの後にユーザーが取れる明確な次のステップを含めましょう。それは、例えば長いブログ記事の最後にある「トップに戻る」のクリックや、より詳しい情報へのポインタのようなシンプルなものかもしれません。ユーザーが次のステップで目標を達成できるようにサポートしましょう。

UI デザインの際に最後に覚えておくべきことは、すべての人にアピールすることは決してできないということです。ただ、大多数の人にアピールできるように最善を尽くすことはできますし、ペルソナと明確に定められたユーザーに基づいて、個別化するために最善を尽くすこともできます。

それでも、それですべての人が満足することはできませんが、UI デザインに何を盛り込んで何を除外するかを決める際に、本記事で挙げた１４の UI デザインの原則をすべて念頭に置いておくと、意思決定においてユーザーが常に前面に出され、中心に置かれるでしょう。

UXPinではUIの作成を簡単に行うことができます。ブラウザ上で作業し、リアルタイムのフィードバックを得て、チーム全員とオンラインで連携できます。UXPinを使えば、UI デザインの作成、テスト、反復がこれまで以上に速くなるでしょう。UXPin のUI デザインのパワーをご覧になりませんか。UXPin をぜひ無料でお試しください。

The post UI デザインの基本原則 appeared first on Studio by UXPin.

UXデザイン と UIデザイン がUXの世界で最もよく議論されることの一つです。その違いと共通点はどこにあるのでしょうか？UXデザイナーとUIデザイナーはどちらが必要なのでしょうか？誰が何をするのか？両者は分離すべきなのか？両者はどのように連携するのでしょうか？

このような混乱が生じるのは、ほとんどの教育機関がユーザーインターフェースデザインをUXデザインカリキュラムの一部として教えているからです。UIはユーザーエクスペリエンスの一部であり、なぜ両者を分けるのでしょうか？

中小企業やスタートアップ企業では、UIはUXの傘下に入ります。しかし、組織や製品の規模が大きくなると、ユーザーエクスペリエンス部門は、UXデザイナー、UIデザイナー、リサーチャー、ライター、UXアーキテクト、ResearchOps、DesignOps、その他UXスペシャリストに分かれます。

これらの役割は分かれていますが、いずれも素晴らしいカスタマーエクスペリエンスを実現するために、ユーザー中心のデザインを重視しています。そのためにUXチームは予算、製品、技術的な制約の中で、ユーザーの問題を解決するために協力し合わなければなりません。

UXPinは、UXチーム、プロダクトデザイナー、エンジニア、その他のステークホルダーを含む組織全体の強力なコミュニケーションを促進するコラボレーションデザインツールです。

チームはUXPinのコメント機能を使って、プライベートまたはパブリックなコメントを作成したり、人にタグを付けたり、タスクを割り当てたりして、UXPinを通じてコミュニケーションをとることができます。UXPinを14日間お試しいただき、ユーザーエクスペリエンスデザインを強化するために作られたコラボレーションデザインツールをご確認ください。

ユーザー中心のデザインとは？

ユーザー中心設計とは、UXとUIを結びつける接着剤のようなものです。UXデザイナーとUIデザイナーが効果的に仕事をするためには、ユーザー中心設計のアプローチを用いなければなりません。

ユーザー中心設計とは、お客様を中心にしてデジタル製品を設計するプロセスのことです。この言葉は、アップル社の元社員でニールセン・ノーマン・グループの創設者であるドン・ノーマンが1986年に発表した著書”User-Centered System Design: New Perspectives on Human-computer Interaction “の中で、この言葉を使っています。

その中で彼はこう書いています。「人間は適応能力が高いので、人工物への適応という負担をすべて背負うことができるが、熟練したデザイナーは、人工物をユーザーに適応させることで、この負担の大部分を消滅させることができる」。

ドンが言いたいのは、ユーザーエクスペリエンスデザイナー（UX＆UI）の仕事は、A）人間の問題を解決し、B）ユーザーの制限をなくすように製品を適応させることだということです。

UX デザイン とは？

UXデザインとはユーザーインターフェースを含む、より広範なユーザー体験と、製品に触れたときのユーザーの感じ方を包含するものです。UXデザイナーは製品の体験を最適化し、より楽しく使いやすいものにするために、ナビゲーションやユーザーフローにも重点を置きます。

UXデザイナーの責務

• 製品構造：ナビゲーション、ユーザージャーニー、フロー

• リサーチ：ユーザー、競合他社、市場の分析

• テスト：ローフィデリティおよびハイフィデリティ・プロトタイピング

• デザイン：ワイヤーフレーム、ヒエラルキー、コンテンツレイアウト

UXデザイナーの資質とスキルセット

• クリティカルシンカー
• 問題解決能力
• データや分析に興味がある
• 構造に興味がある
• 機能的なデザイン
• プロジェクトマネジメント

UIデザイン とは？

ユーザーインターフェースデザイナーは、デジタル製品やWebサイトでユーザーが操作するボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネントなどの視覚的要素を作成します。

また、アニメーションやマイクロインタラクションなどのインタラクティビティにも関心があります。

基本的に、UIデザインはユーザーエクスペリエンスデザインの中の専門的なポジションです。

UIデザイナーの責任

• 製品の美学：ブランディング、ビジュアルデザイン

• リサーチ：デザインリサーチ、ユーザー分析

• テスト: UIプロトタイピング（ハイフィデリティ・プロトタイピング）

• デザイン：モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト(レスポンシブデザイン)

UIデザイナーの資質とスキルセット

• ビジュアル・クリエイティブ
• グラフィックデザイン
• ビジュアルデザインに興味がある
• 美意識が高い
• 形と機能のバランスをとる
• ユーザーのインタラクションや行動を考慮する
• タスクオリエンテッド

UXデザインと UIデザイン の違い

責任の所在からわかるように、UIデザイナーは美的感覚とインタラクティビティを重視し、UXデザイナーは全体的な体験、構造、ナビゲーションを重視します。

UXデザイナーは製品の体験を幅広く見ますが、UIデザイナーは各画面で何が起こっているかに注目します。

UXデザイナーは通常、リサーチを深く掘り下げ、ユーザーを超えて競合他社や市場分析にまで目を向けます。UIデザイナーは、ビジュアルデザインのトレンドを研究しながら、ユーザーの研究も行います。

ここでは、デザイン思考プロセスにおけるUXデザインとUIデザインの主な違いをご紹介します。

共感する

• UXデザイナー：ユーザーのペインポイント、ニーズ、エモーションに焦点を当てる。
• UIデザイナー：ユーザーの環境や動き、行動に着目する

定義

• UXデザイナー：ユーザーの問題と達成しようとする目標を定義する
• UIデザイナー：ユーザーが目標を達成するために必要な各ステップに焦点を当てる

アイデアを出す

• UXデザイナー：ユーザーの問題を解決するための情報アーキテクチャとナビゲーションを検討します。
• UIデザイナー：ユーザーが製品を操作する際に必要となる要素やコンポーネントを検討します。

プロトタイプ

• UXデザイナー：ワイヤーフレーム、ローフィデリティ、ハイフィデリティのプロトタイピングを用いて、ページの階層やユーザーフローを設計します。
• UIデザイナー：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする

テスト

• UXデザイナー：全体的なユーザーエクスペリエンスをテストし、ユーザーが製品を使用する際にどのように考え、どのように感じるかを知りたいと考えます。
• UIデザイナー：ユーザーが製品をどのように操作するかをテストし、実用的な質問を投げかける

UXデザインと UIデザイン の共通点

UXデザイナーとUIデザイナーは、どちらもユーザー中心のデザインを重視し、UXデザイン思考の原則に従っています。UXデザイナーはユーザーの目標を定義し、UIデザイナーはユーザーがその目標を達成するのを支援します。UXデザイナーはユーザーのゴールを定義し、UIデザイナーはそのゴールを達成するための手助けをします。

UIとUXを2つの独立した部門ではなく、1つの組織として捉えることが重要です。どちらもユーザーエクスペリエンスデザイナーであり、UXデザインの中で異なるタスクに焦点を当てているだけなのです。

もしデザイナーがどちらかのタスクをうまく実行できなければ、他方のタスクがどんなに優れていても、ユーザーエクスペリエンスと製品全体が失敗してしまいます。

UXデザイナーとUIデザイナーは、どちらもアクセシビリティを考慮しなければなりません。UXデザイナーは、レイアウト、階層、配置など、製品の使いやすさを重視し、UIデザイナーは、色、フォント、サイズ、インタラクションなど、ユーザーインターフェースのアクセシビリティを重視します。

プロダクトデザインのプロセスにおけるUXとUI

ここでは、典型的なプロダクトデザインのシナリオと、UXとUIの役割分担をご紹介します。

1. UXデザイナー／UXリサーチャーは、ユーザー、市場、競合他社の調査を行います。
2. UXデザイナーは、プロダクトマネージャーやステークホルダーと協力して、製品や予算の制約の中でアイデアを開発する。
3. UXデザイナーは、情報アーキテクチャ、初期スケッチ、ワイヤーフレーム、ローフィデリティ・プロトタイプを作成します。
4. UXデザイナー/リサーチャーは、ナビゲーションやユーザーフローを改善するための初期テストを行います。
5. UIデザイナーは、色、アイコン、ボタン、タイポグラフィを使ってワイヤーフレームをモックアップに変換します。
6. UIデザイナーは、インタラクティブな機能を追加して、忠実度の高いプロトタイプを作成します。
7. UXリサーチャーはハイフィデリティプロトタイプをテストし、UX/UIデザイナーに変更を依頼し、反復作業を行います。

デザインチームは、デザインハンドオフの際にエンジニアと協力し、開発プロセスを開始します。

この例は、決して「業界標準」のアプローチではありません。UXデザイナーとUIデザイナーは、デザインプロセスを通じて密接に連携します。

UXデザインは常にユーザーインターフェースデザインに先行します。製品のインターフェイスをデザインするには、それを支える構造やアーキテクチャが必要です。

UXデザイナーは基礎を作り、UIデザイナーはインタラクションと美観を重視します。これらの作業を行うためには、どちらのデザイナーもユーザーのニーズを意識して、楽しいユーザー体験を生み出す必要があります。

UXと UIデザイン ツール

UXデザイナーとUIデザイナーは通常、同じデザインツールを使用しますが、タスクや目的は異なります。

UXデザイナーは、ワイヤーフレームを作成し、各画面を基本的なクリック／タップ操作でリンクさせ、ローフィデリティのプロトタイプを作成します。UXデザイナーは、グリッドシステムを使って各ページの構造を構築し、ナビゲーションを組み込みます。

ワイヤーフレームが完成したら、UIデザイナーは色、インタラクティブ性、ページトランジション、アニメーション、タイポグラフィなどを追加し、忠実度の高いプロトタイプを作成します。

UXPinがUX/UIデザイナーのスピードと一貫性を高める方法

UXPinは、UXデザイナーとUIデザイナーが協力して、ワイヤーフレームからプロトタイプ、そして最終的なデザインに至るまで、お客様に素晴らしい製品を提供するためのエンドツーエンドのユーザーエクスペリエンスデザインツールです。

1. UXデザイナーは、内蔵のデザインライブラリを使用して忠実度の高いワイヤーフレームを設計することができ、UIデザイナーや関係者は画面のレイアウトやフローをより深く理解することができます。
2. UXデザイナーは、試行錯誤されたビルトインのデザインライブラリを使用することで、初期のテストにおいてユーザビリティスタディや関係者から有意義なフィードバックを得ることができます。
3. ほとんどの作業が完了しているため、UIデザイナーはブランディングや製品の要件に合わせてデザイン要素を洗練させ、すぐにテストを開始することができます。
4. UXPinのコードベースのデザインツールを使えば、UIデザイナーは高度なインタラクションやアニメーションで製品に命を吹き込むことができます。また、条件付きインタラクションを使用して最終製品の機能を模倣することで、ユーザビリティテストでより良い結果とフィードバックを得ることができます。

コミュニケーションとコラボレーションの向上

製品チーム、開発者、その他の関係者を招待し、ブラウザ上でプロトタイプをプレビューしてもらうことができます。UXPinのコメント機能を使ってフィードバックを残したり、UXデザイナーやUIデザイナーにタスクを割り当てたりすることができます。

UXPinを実際に試してみませんか？14日間の無料トライアルにお申し込みいただくと、ユーザーエクスペリエンスを向上させるために構築された、コードベースのコラボレーションデザインツールをご覧いただけます。

The post UXデザイン vs UIデザイン その違いを把握しよう appeared first on Studio by UXPin.

ReactJSとReact Nativeの違いを理解すると、デザイナーはエンジニアとのコミュニケーションは円滑になり、コストのかかる技術的な問題は回避され、デザイン引き継ぎ時の摩擦を最小限に抑えることができます。

デザイナーは、JavascriptやReactの基本的な違いを理解するのに、コードを学んだり技術的な詳細に踏み込む必要はありません。デザイナーに関係する最も大きな違いは、ウェブベースの製品とネイティブのモバイルアプリケーションをデザインする際のコンポーネントライブラリとその選び方です。

UXPin Mergeを使用すると、React UIコンポーネントをGitリポジトリからUXPinのデザインエディタに同期させることができるので、デザインチームは問題なく機能するコードベースのプロトタイプを作成できます。この信頼できる唯一の情報源（Single source of truth）により、デザインのズレがなくなり、市場投入までの時間が短縮され、デザイナーとデベロッパー間の結束が高まります。この画期的なテクノロジーへのアクセスに関する詳細およびリクエスト方法については、Mergeについてのページをご覧ください。

ReactJS とは

ReactJS（一般にReactと呼ばれる）は、Webベースのユーザーインターフェース構築のためのオープンソースのJavascriptライブラリです。コンポーネントベースのフロントエンドフレームワークで、バニラHTML、CSS、Javascriptを記述するよりも早く簡単にWebサイトやWebアプリケーションの開発・拡張ができます。

ReactJSでは、基本的なボタンから複雑なチャートやデータグリッドまで、再利用可能なタグやコンポーネントを作成でき、デベロッパーはコード一行でそれを呼び出すことができます。デザイナーがマスターコンポーネントを作成し、それをユーザーインターフェースの他の部分にコピー＆ペーストするのとよく似ていますね。

ReactJS の例

Facebookは、2011年に自社のWebベースの全製品のためにReactを開発し、現在もWhatsApp、Messenger、Facebook、InstagramのWeb版でこのフロントエンドフレームワークを使用しています。

Facebook以外にも、以下のような多くのグローバル企業やFortune 500社が、WebサイトやWebアプリケーションにReactを使用しています。

• Netflix
• Salesforce
• New York Times
• Reddit
• Cloudflare
• Tesla
• PayPal(PayPalがUXPin Mergeを使ってデザイン拡張させ、Reactリポジトリに同期した方法はこちら)

React Nativeとは

 React Nativeは、プラットフォームを超えたモバイルAndroidおよびiOSアプリ、ならびにWebベースのアプリケーションに使用されるReactJSのモバイル版です。ReactJSと同様に、 React Nativeは、モバイルアプリの開発・拡張のための再利用可能なコンポーネントをデベロッパーにもたらします。

技術的な大きな違いとしては、Reactは仮想DOM（Document Object Model）を使ってWebブラウザ上でコードをレンダリングするのに対し、React NativeはネイティブAPIを使ってモバイルデバイス上でUIをレンダリングする点が挙げられます。

Facebookが React Native を作った理由

 React Native 以前は、デベロッパーはApple XCodeまたはAndroid Studioを使用して、iOSとAndroid用の2つの別々のネイティブアプリケーションをそれぞれ作成しなければいけませんでしたが、今は React Native により、デベロッパーは、iOSとAndroid用のネイティブコードを自動的にレンダリングする単一のアプリケーションを開発することができます。

React Nativeの例

Facebookは、Instagram、Facebook、Facebook Ads Manager、Oculusなど、ネイティブモバイルアプリケーションに React Native を使用しています。 また、以下のように多くのグローバル企業がReact Nativeを使用しています。

• Coinbase
• Shopify
• Discord
• Skype
• Bloomberg
• Pinterest
• Baiduモバイル

 React NativeとReactJS の違い

２つの最大の違いは、ReactがJavascriptのライブラリであるのに対して、React NativeはJavascriptのフレームワークであることです。

• ライブラリとは、エンジニアがWebサイトやアプリケーションを開発しやすくするために、あらかじめ用意されたコードのことです。
• フレームワークはより複雑で、Webサイトやアプリケーションを構築するためのライブラリ、テンプレートフレームワーク、API、セッション管理などで構成されています。

その他にも、ReactJSとReact Nativeの決定的な違いは以下のようにあります；

• ReactJSはJavascriptとCSSでアニメーションを行い、React Nativeはアニメーション用のAPIを使用します。
• ReactJSはUIでHTMLをレンダリングし、React NativeはJSXをレンダリングします。
• デベロッパーは主に、Web開発にはReactJSを、モバイルアプリケーション開発にはReact Nativeを使用しています。
• ReactJSではWebページのナビゲーションにReact-routerが使われ、React NativeではNavigationライブラリが組み込まれています。

プロトタイプデザインのためのReact

ここでは、デザイナーがReactのプロジェクトに取り組む方法をいくつかご紹介します。

コンポーネントベースのデザイン手法

ReactJSやReact Nativeでは、コンポーネントベースのフレームワークを用いてUIを構築していました。デザイナーも同様に、コンポーネントベースのデザインマインドセットを使わなければいけません。自身がデザインするUIについてそれぞれ、「デベロッパーはこれをどのようにして核となるコンポーネントに分解できるのか」と自問してみましょう。

React製品をデザインする場合、コンポーネントを作成し、製品デザイン全体で一貫してこれらを再利用します。コンポーネント内でフォントサイズやスペーシングの変更は、エンジニアが新しいコンポーネントを構築したり、追加のスタイリングを記述する必要があるためなるべく避けましょう。

コンポーネントライブラリの採用

ReactJS やReact Nativeのデザインシステムをゼロから構築すると、デザインと開発の間で常に課題が発生し、ズレが生じてしまいます。そこで企業は、カスタマイズ可能なReactコンポーネントライブラリを採用することで、この課題を克服しています。

Reactコンポーネントライブラリを用いたデザインにより、デザイナーは、デザインを最終製品に変換する際にエンジニアが直面する制限や制約がわかってきます。

GoogleのMaterial Design UIをベースにしたMUIは、最もわかりやすく広く使われているコンポーネントライブラリの1つであり、デザイナーは、MUIを基盤として、ウェブサイト、ウェブアプリ、ネイティブアプリケーションのデザインシステムを構築することができます。

UXPinのMUI統合により、デザイナーはReactコンポーネントを使用してUIの構築ができます。UXPinのプロパティパネルでMUIコンポーネントをカスタマイズして、ブランドや製品の要件に対応させることができます。無料トライアルにサインアップし、UXPinでReactコンポーネントを使ったデザインを始めてください。

モーションとアニメーション

モーションとアニメーションは、特にネイティブアプリケーションの場合、デザイナーとデベロッパーの間でしばしば摩擦を起こします。ReactJSでは、エンジニアは比較的簡単にデザインアニメーションを再現できますが、 React Nativeで同じ結果を得るのは、追加のツールやパッケージがなければ困難または不可能です。このような追加には時間とコストがかかり、プロジェクトの制約を超えてしまう可能性があります。 モーションとアニメーションについては、プロジェクト開始時に必ずエンジニアと話し合い、デザインの引き継ぎ時に摩擦が生じないよう、何ができるかを判断しましょう。

ReactとUXPin Mergeでデザインする

UXPin Mergeで、デザイナーはReactコンポーネントを使用してきちんと機能するプロトタイプを構築できます。デザイナーは、他のデザインツールと同様にReactコンポーネントを使用しますが、最終製品に含まれるコンポーネントと同じであるため、忠実度と機能性が大幅に向上します。

UXPin MergeでのデザインのためにReactを理解する必要はありませんが、理解していたら、エンジニアリングチームとのコミュニケーションと連携が改善されつつ、より忠実で機能的なプロトタイプを作成できる可能性があります。

Reactのプロップ

Reactコンポーネントは、色、文字デザイン、ボーダー、シャドウなどのプロパティを確定するのにプロップを使用します。Merge はプロップを自動的に認識し、デザイナーが編集できるようにプロパティパネルが表示され、デザイナーは JSX に切り替えて、コードで表示および編集もできます。

プロップでデザイナーが変更を加えることができますが、同時にプロップは、ブランドの色や書体など、デザインシステムで確定された制約を設定するものでもあります。この制約により、一貫性が維持され、チームメンバーが不正に変更するのを防ぐことができます。

UXPinはベクターグラフィックスではなくコードをレンダリングするため、デベロッパーはデザイナーがコンポーネントのプロップに加えた変更をコピー＆ペーストするだけで、さっとUIを開発できます。

より忠実に、より機能的に

Reactコンポーネントを使ったデザインでは、デザイナーは最終製品の正確なレプリカを作ることができます。たとえば、機能する日付ピッカーを従来の画像ベースのデザインツールで作成することはできませんが、UXPin Merge を使用すると、日付ピッカー、チャート、データ テーブル、グラフなど、エンジニアがレポジトリに追加したあらゆる React コンポーネントでプロトタイプを作成できます。

定義されたインタラクション

インタラクションやアニメーションは、デザインプロジェクトに多大な時間を要し、デザイナーはプロジェクトごとにこれらのインタラクションを作り直さなければならず、エラーや矛盾が生じる可能性があります。

Mergeでは、プロダクションコードから生成された機能的およびインタラクティブな要素を使用してプロトタイプを作成でき、デザイナーは、プロップを使用して新しいインターフェースやコンポーネントに合わせてアニメーション設定の変更ができます。

デザインシステムにアニメーションを組み込むことで、デザイナーはインタラクションの矛盾をなくしつつ、プロトタイピングの時間を短縮できます。

Storybookを使ったその他のフロントエンドフレームワーク

Mergeを使うと、React でのデザインだけにとどまらず、当社の Storybook 統合により、Vue、Ember、AngularJS、Web Components などの他の一般的なフロントエンドフレームワークを同期することができます。

Reactコンポーネントと全く同じようにStorybookコンポーネントを使用して、忠実度の高いプロトタイプのデザインができます。プロップの代わりにStorybook Argsを使用して、UXPinのプロパティ、スロット、スタイル、入力などを変更します。

コードを使ったデザイン

プロトタイピングとテストの強化に向けて、きちんと機能するReactやStorybookコンポーネントを使ったデザインを始める準備はできましたか？ここでは、開始法を2つご紹介します。

1. 14日間の無料トライアルにサインアップすると、MUIのReactコンポーネントライブラリを使用してUIをデザインするためのMUI統合にアクセスできるようになります。
2. または、Mergeページで、ReactのGit統合、またはその他の一般的な技術用の Storybookへのアクセスをリクエストすることもできます。サポートチームのメンバーが、オンボーディングプロセスのお手伝いのご連絡を差し上げます。

The post React Native と ReactJS – それぞれの違い appeared first on Studio by UXPin.

ユーザーフレンドリーなデザインは、UIおよびUXデザインの基本的な側面であり、テクノロジーをよりアクセスしやすく、誰にとっても使いやすいものにしたいという願望によって推進されています。

長年にわたって、デザイナーは、ユーザーのニーズを優先してユーザビリティを上げるインターフェースを作成するための方法論やベストプラクティス、デザイン原則を開発してきました。

テクノロジーが進化し続ける中、ユーザーフレンドリーなデザインは、世間に受けりれられるデジタル体験を生み出す上で重要な検討事項であり続けています。

インターフェースがユーザーフレンドリーかどうかを見分けるにはテストが必要ですが、静的なプロトタイプをテストすることはできません。そこで UXPinの出番です。UXPinはユーザーテストの質とインパクトを上げる機能プロトタイプに向けた使いやすいツールです。UXPin でインターフェースをいかに速く構築できるかをぜひご覧ください。UXPin の無料お試しはこちら。

 ユーザーフレンドリー の定義

「ユーザーフレンドリー」とは、ユーザーの使いやすさや利便性を考慮してデザインされた製品、インターフェース、システムを表す言葉です。それはそのアイテムが直感的でわかりやすく、ナビゲートしやすいということであり、それによってユーザーは、労力とイライラは最小限で自分のタスクを達成できるようになります。

ちなみに英語の辞書では、「ユーザーフレンドリー」は大体「（製品、システム、インターフェースなど）特にエンドユーザーにとって使いやすい、あるいは理解しやすいもの」を表す形容詞として定義されており、これは、そのアイテムやシステムがユーザーの利便性やインタラクションのしやすさを考慮してデザインされていることが示されています。

「ユーザーフレンドリー」という言葉は、HCI（ヒューマンコンピュータインタラクション）や UI（ユーザーインターフェース）デザインの分野で生まれたもので、ユーザーにとってわかりやすくて操作しやすいシステムやインターフェースのことを指します。

歴史を振り返ると、使いやすさには以下のような 「時代 」があります。

• 初期のコンピューティング（１９６０年代～７０年代）： インターフェースは主にテキストベースで、技術的なユーザー向けにデザインされていた。「ユーザー」のベースがコンピュータシステムに詳しい専門家や研究者に限られていたため、ユーザーフレンドリーかどうかは重要な考慮事項ではなかった。
• グラフィカルユーザーインターフェース（１９８０年代〜９０年代）： Xerox Star、Apple Macintosh、Microsoft Windows などのシステムによって普及した GUI（グラフィカルユーザーインターフェース）の導入は、UI デザインに大きな変化をもたらした。GUI は、アイコン、ウィンドウ、メニュー、（マウスなど）ポインティングデバイスを利用して、技術者でないユーザーにもコンピューティングをより身近なものにした。
• HCI（ヒューマンコンピュータインタラクション）研究（１９８０年代〜現在）：HCI は、人間とコンピュータの相互作用に焦点を当てた研究分野として登場した。研究者たちは、インターフェースの使いやすさを上げるために、認知心理学、ユーザビリティ工学、ユーザー中心デザインの手法を研究した。
• Web およびモバイルのインターフェース（１９９０年代～現在）： インターネットとモバイルデバイスの普及は、UI デザインにおける新たな挑戦と機会をもたらした。デザイナーはインターフェースを様々なスクリーンサイズ、入力方法、ブラウジングコンテキストに適応させなければならず、それがレスポンシブデザインの原則とモバイルフレンドリーなプラクティスの開発につながった。
• UCD（ユーザー中心デザイン）とユーザビリティテスト（１９９０年代～現在）： UCD（ユーザー中心デザイン）は、UI デザインにおいて支配的なアプローチとなり、それによってデザインプロセス全体を通してユーザーを関与させることの重要性が強調されるようになった。また、インタビュー、調査、ユーザビリティ調査などのユーザビリティテストの手法で、デザイナーはユーザビリティの問題の特定やデザインの反復をしてユーザーの利便性を上げることができるようになった。
• アクセシビリティとインクルーシブデザイン（２０００年代～現在）： アクセシビリティの問題に対する認識が高まるにつれて、デザイナーは、インターフェースがハンディキャップがある人にも使用可能であることを保証するために、スクリーンリーダーの互換性やキーボードナビゲーション、色のコントラストなどの考慮事項が含まれるインクルーシブデザインの原則を取り入れ始めた。
• UX（ユーザーエクスペリエンス）デザインの登場（２０００年代〜現在）： UX デザインで、ユーザビリティだけでなく、製品やサービスを使用する際の総合的な体験にまで焦点が広がった。UX デザイナーは、ユーザビリティの原則に加え、感情移入、ブランド認知、ユーザー満足度を考慮し、ユーザーフレンドリーな体験を作り上げる。

 ユーザーフレンドリー なシステムとは

ユーザーフレンドリーなシステムとは、直感的で効率的でアクセスしやいものであり、それでユーザーは、労力やイライラは最小限にタスクや目標を達成できるようになります。

ユーザーの利便性には、多くの場合は明確なコミュニケーションや直感的なデザイン、論理的なワークフロー、ユーザーの多様なニーズや能力への配慮が含まれます。また、ユーザビリティと使いやすさを優先することで、ポジティブで満足のいくユーザー体験を提供することを目的としています。

つまり、ソフトウェア、Web サイト、家電製品、その他あらゆる製品において、ユーザーフレンドリーなデザインはユーザーのニーズと期待を最優先し、ポジティブで効率的なインタラクション体験を提供することを目的としているのです。

 ユーザーフレンドリー の特徴

デザインの観点からは、使いやすさとアクセシビリティを優先するだけでなく、直感的で効率的、かつ楽しく使えるインターフェースを作成することを目的とした、以下のような原則と考慮事項が「ユーザーフレンドリー」に含まれます。

• 直感的： ユーザーは、豊富な説明や予備知識を必要とせずにインターフェースの操作方法を簡単に理解することができる。
• 明快さ： インターフェースは、対象者にわかりやすい言語と視覚的要素を用いて、情報を明確かつ簡潔に伝える。
• 一貫性： レイアウト、カラースキーム、タイポグラフィ、ナビゲーションパターンなどの要素は、インターフェース全体で一貫性が保たれ、それによってまとまりのある親しみやすい体験がもたらされる。
• フィードバック： インターフェースは、ユーザーのアクションに対して明確なフィードバックを提供して、エラーや進行状況や状態の変化を知らせる。
• 効率性： 論理的なワークフロー、よくまとめられたコンテンツ、効率化されたインタラクションにより、ユーザーは最小限の労力で効率的にタスクを遂行できる。
• アクセシビリティ：インターフェースは、さまざまなハンデやニーズがあるユーザーに対応するようにデザインされており、それで誰でもシステムにアクセスして効果的に使えるようになっている。
• 柔軟性： インターフェースで、ユーザーは自分の体験をある程度カスタマイズすることができ、個人の好みや要求が適応される。
• エラー処理： エラーメッセージは、ユーザーがイライラしたり訳がわからなくなったりすることなく、問題解決へと誘導してくれるような、親切で不安を煽ることのない方法で表示される。
• 視覚的な魅力： 機能性が最優先される一方で、視覚的に魅力的なアプリや Web デザインでユーザー体験が上がり、それでインターフェースはよりユーザーを引き付けてくれるようなものになる。
• レスポンシブデザイン： さまざまなデバイスや画面サイズにシームレスに適応するインターフェースだと、ユーザビリティを無駄にすることなく、さまざまなプラットフォームからシステムにアクセスして使えることが保証される。

ユーザーフレンドリーなインターフェースの例

Spotify

Spotify のユーザーフレンドリーなデザインは、シンプルさ、個別化、利便性を優先していることから、ユーザーはシームレスで楽しい音楽ストリーミング体験を得られます。

Spotify のインターフェースがユーザーフレンドリーだと言われる理由にいかが挙げられます：

• 直感的なナビゲーション：ユーザーがアプリ内を簡単にナビゲートできるシンプルで直感的なインターフェースが特徴となっており、画面下部にあるメインのナビゲーションメニューから、ホーム、検索、ライブラリ、自身のライブラリなどの重要なセクションにサッとアクセスできる。
• 「あなたへの」おすすめ： 洗練されたアルゴリズムを活用して、ユーザーのリスニング履歴や好み、行動に基づいた「おすすめ」の音楽が提供される。また、「Discover Weekly」のプレイリストと個別化されたデイリーミックスで、ユーザーの好みに合わせた新鮮な音楽が提供され、それによってリスニング体験全体が上がる。
• 検索機能： Spotify の強力な検索機能で、ユーザーは、アーティストやアルバム、曲、プレイリスト、ポッドキャストをサッと見つけることができる。また、検索結果はわかりやすくまとめられて表示されるため、ユーザーが探しているコンテンツは難なく見つかる。
• プレイリストの作成と整理：ユーザーは好みに合わせてプレイリストを簡単に作成および整理ができる。プレイリストへの曲の追加、曲順の変更、プレイリスト名の変更も簡単にできることから、シームレスな音楽キュレーション体験がもたらされる。
• オフラインリスニング： 曲、アルバム、プレイリスト、ポッドキャストをダウンロードしてオフラインで聴くことができる。この機能は、旅行中や接続が制限されている地域など、インターネット接続なしで音楽を聴きたいユーザーにとって特に便利。
• クロスプラットフォーム同期： スマートフォン、タブレット、コンピューター、スマートスピーカー、ゲーム機など、複数のデバイス間でシームレスな同期ができ、ユーザーは、あるデバイスで音楽を聴き始めても、中断されることなく別のデバイスでシームレスに聴き続けることができる。
• アクセシビリティ機能： Spotify のインターフェースは、ハンディキャップのあるユーザーにも利用しやすいようにデザインされている。音声コマンド、テキスト読み上げサポート、カスタマイズ可能なフォントサイズや配色などの機能があり、それによって能力に関係なくどんなユーザーでもプラットフォームを堪能できるようになっている。

Gmail

Google のメールサービスは、そのユーザーフレンドリーなデザインで有名で、シンプルに効率よくまとめることを優先して長年進化してきました。Gmail がどのようにしてユーザーフレンドリーなインターフェースを実現しているのかを以下で見てみましょう：

• クリーンで直感的なレイアウト： Gmailのインターフェイスは、クリーンでミニマルなデザインが特徴で、直感的なナビゲーション要素により、ユーザーはメールへのアクセス、メッセージの新規作成、受信トレイの管理が簡単にできる。
• タブ付き受信トレイ： Gmail のタブ付き受信トレイで、受信メールは「プライマリ」、「ソーシャル」、「プロモーション」、「アップデート」、「フォーラム」などのタブに自動的に分類される。これによってユーザーは、メールの優先順位をつけて、より効果的に管理することができ、ゴチャゴチャ感が減って受信トレイがよりスッキリする。
• 強力な検索機能： Gmail の強力な検索機能で、キーワード、差出人名、件名、その他の条件を使ってメールをサッと見つけることができる。高度な検索オペレータで、検索の体験はさらに上がり、ユーザーは検索結果を正確に絞り込むことができまるようになる。
• 会話ビュー： Gmail の会話ビューは、関連するメールをスレッド化された会話にグループ化し、それでユーザーはコミュニケーションの流れを追いやすくなる。また、この機能により、受信トレイがゴチャゴチャになりにくくなり、特に長いメールのやりとりの場合に、メール閲覧が効率化される。
• カスタマイズ可能な設定： Gmail ではカスタマイズ可能な設定やプリファレンス（好み）が幅広く提供されており、ユーザーのニーズや好みに合わせてメール体験をカスタマイズすることができる。ユーザーは例えば受信トレイのレイアウト、メール転送、フィルター、署名などの設定を調整できる。
• Google サービスとの統合： Gmail は、Googleドライブ、Googleカレンダー、Google Meet などの他の Google サービスとシームレスに統合されており。この統合で、ユーザーは受信トレイから直接ファイルにアクセスして共有したり、イベントの設定やビデオミーティングへの参加ができることから、生産性や連携が上がる。
• レスポンシブデザイン： Gmail の iOS および Android 端末向けモバイルアプリは、小さな画面向けに最適化されたレスポンシブデザインを採用している。例えばモバイルアプリには、デスクトップ版の主要機能を維持したユーザーフレンドリーなインターフェースがあり、それでユーザーは外出先からメールにアクセスすることができる。
• セキュリティセンター： Gmail には、スパムフィルタリング、フィッシング対策、二要素認証、機密モードなどの機能が内蔵されており、ユーザーのセキュリティを最優先している。このような機能により、ユーザーのメールアカウントや機密情報は不正アクセスや悪意のある攻撃から守られる。

Amazon

Amazon のインターフェースは万人受けするものではないかもしれませんが、その使い勝手の良さは、以下のように機能的なデザイン、直感的なナビゲーション、個別化された「オススメ」、多様なユーザー層のニーズや好みを優先した便利な機能から来るものです。

• わかりやすいナビゲーション： 賑やかな外観とは裏腹に、Amazon のインターフェースは論理的にきちんとまとめられており、明確なナビゲーションメニューと検索機能が目立つように表示されている。それでユーザーはゴチャゴチャした情報で訳がわからなくなるということもなく、探しているものを簡単に見つけることができる。
• 包括的な検索： Amazon の強力な検索エンジンにより、ユーザーは商品名、カテゴリー、ブランド、あるいは特定の機能から商品をサッと見つけることができる。また、オートコンプリート機能と高度なフィルタリングオプションにより、ユーザーは検索結果を効率的に絞り込むことができる。
• 詳細な製品情報： Amazon の各製品リストには、包括的な詳細、仕様、画像、カスタマーレビューが含まれており、この豊富な情報によって、ユーザーはあっちにこっちに情報源にアクセスすることなく、十分な情報に基づいた購買決定を行うことができる。
• パーソナライゼーション： ユーザー体験の個別化に高度なアルゴリズムが採用されており、過去の購入履歴、閲覧履歴、好みに基づいて商品が「おすすめ」されることから、ユーザーは関連商品を見つけやすくなる。
• 便利なお会計プロセス： 様々な支払い方法、配送先の保存、ワンクリック購入などを提供することで、お会計プロセスが効率化されている。これにより摩擦が減り、全体的なユーザー体験が上がる。
• プライム特典： Amazon プライム会員になると、２日以内の無料配送、限定商品、ストリーミングサービスなどの特典が追加される。この特典が、ユーザーが定期的にこのプラットフォームに参加する動機付けとなり、ユーザーフレンドリーな評判の貢献になっている。
• カスタマーサービス： Amazon のカスタマーサービスへの取り組みは、その使いやすさの重要な要素である。チャット、メール、電話サポートなどの強固なカスタマーサポートチャンネルを提供し、手間のかからない返品ポリシーも用意することで、ユーザーに信頼と自信を与えている。

TikTok

広く普及している SNS プラットフォームである TikTok も、モバイルデバイスに合わせたユーザーフレンドリーなインターフェースを誇っている。TikTok のユーザーフレンドリーなインターフェースの主なポイントを以下で見てみましょう：

• フィード： TikTok のメインフィードでは、アプリとのインタラクションに基づいてユーザーの興味に合わせた短いビデオクリップの連続ストリームが表示される。このアルゴリズムによるフィードにより、ユーザーは手動でコンテンツを探すことなく、常に魅力的なコンテンツを見ることができる。
• 見つけやすさ： TikTok のインターフェースで、ユーザーは新しいコンテンツやクリエイターを簡単に見つけられるようになっている。「あなた向け」のページでは「あなたへの」オススメがが提供され、「トレンド」タブではトレンドの課題、ハッシュタグ、カテゴリーを検索することができる。
• ビデオ作成ツール： フィルター、エフェクト、サウンドトラック、編集機能などの直感的なビデオ作成ツールが幅広く提供されている。インターフェースはユーザーに使いやすくデザインされており、それでユーザーは、スマートフォンから直接、クリエイティブなビデオをサッと録画、編集、共有できる。
• エンゲージメント機能： TikTokは、「いいね！」、コメント、シェア、デュエット（他のユーザーと分割スクリーンの動画を作成できる）などの機能を通じて、ユーザーの関与を促している。このインタラクションオプションは、インターフェース内で簡単にアクセスできるため、ユーザー間のコミュニティ感覚やコラボレーションが育まれる。
• アクセシビリティ：TikTok のインターフェースは、あらゆる年齢や背景のユーザーがアクセスしやすく、ナビゲートしやすいようにデザインされている。レイアウトはすっきりとしていて直感的で、目立つボタンとアイコンがユーザーをアプリのさまざまな機能に誘導してくれる。

結論として、TikTok のユーザーフレンドリーなインターフェースは、Tiktok が世界中のユーザーに広く取り入れられて人気を博していることへの重要な役割を果たしており、プラットフォーム内でのシームレスなコンテンツ消費、作成、エンゲージメントが実現しています。

 ユーザーフレンドリー なインターフェースの作り方

ここでは、ユーザーフレンドリーなインターフェースを作る方法を見ていきましょう：

• シンプルであること： インターフェースをすっきりとさせ、必要な要素を優先して、注意が散漫になるようなものを最小限に抑える。
• 直感的であること： 詳しい説明を必要とせずに、ユーザーが操作方法や操作方法を簡単に理解できるようにインターフェースをデザインする。
• 組織化： 関連する要素を論理的にグループ化し、明確な視覚的手がかりを提供することで、ユーザーはインターフェースの構造を理解できるようになる。
• 個別化： 個別化された「オススメ」やカスタマイズオプションを提供し、ユーザーの好みやニーズに応える。
• 効率化： ワークフローとインタラクションを効率化し、ユーザーが最小限の労力でサッとタスクを達成できるようにする。
• フィードバック： 確認メッセージ、エラー通知、進行状況インジケータなど、ユーザーのアクションに対する明確なフィードバックを提供する。
• アクセシビリティ： キーボードショートカット、スクリーンリーダーとの互換性、調整可能なフォントサイズなどの機能により、能力に偏りのあるユーザーでもアクセスできるようなインターフェースであることが保証される。
• 一貫性： インターフェース全体のデザイン要素、レイアウト、用語、インタラクションパターンの一貫性を維持し、まとまりのある親しみやすい体験を提供する。
• 統合： 他の関連サービスやプラットフォームと統合し、さまざまなツールやデバイスでシームレスな体験をユーザーに提供する。
• セキュリティ：暗号化、安全な認証方法、プロアクティブな脅威検出など、ユーザーのデータとプライバシーを保護するセキュリティ機能を実装する。

つまり ユーザーフレンドリー とは

「ユーザーフレンドリー 」という意味の別の言葉として「直感的 」があります。どちらの言葉も、ユーザーにわかりやすく、ナビゲートしやすく、操作しやすいインターフェースデザインを表す同義語とみなすことができ、多くの場合は最小限の指示や予備知識しか必要ありません。

逆に、不親切なユーザーインターフェースは、直感的でない、分かりにくい、イライラする、または面倒くさいとも言えるかもしれません。このような用語は、ナビゲートしにくく、きちんとまとまっていなくて、フィードバックは少なく、全体的にユーザーがタスクを効率的に達成する能力を発揮できないインターフェースのことを表します。

このようなインターフェースは、ユーザーのニーズや好みを優先することができないため、直感的でない、何に重点が置かれているのかわからない、圧倒される、またはアクセスしにくいと表現されることもあります。結局のところ、不親切なユーザーインターフェースでユーザー体験は下がり、それがフラストレーションや不満につながるということです。

また、複雑すぎたり操作が難しかったり、効果的な使用には専門的な知識が求められるようなソフトウェアアプリケーションで、ユーザーはイライラして生産性が阻害される可能性があるため、ユーザーフレンドリーではないと考えられます。

「 ユーザーフレンドリー 」と「使いやすさ」は同じ意味なのか

「ユーザーフレンドリー」と「使いやすさ」は関連する概念ではありますが、まったく同じというわけではありません。

「ユーザーフレンドリー」とは、一般に、ユーザーの使いやすさや利便性を念頭に置いてデザインされた製品、インターフェース、またはシステムを指します。ユーザーフレンドリーな製品やインターフェースとは、直感的で効率的、かつアクセスしやすく、ユーザーは労力とイライラは最小限に、タスクや目標を達成できるものです。また、直感性、わかりやすさ、効率性、フィードバック、アクセシビリティ、柔軟性など、さまざまな側面が含まれ、そのすべてが肯定的で満足のいくユーザー体験を提供することを目的としています。

対する「使いやすさ」とは、特に製品やインターフェースとのインタラクションの単純さやわかりやすさを強調するものであり、「使いやすい」製品とは、ユーザーが不要な複雑さや混乱に遭遇することなく、ナビゲート、操作、タスクの達成方法をサッと理解できるものです。

つまり、ユーザーフレンドリーというのは「使いやすさ」に貢献しますが、アクセシビリティ、フィードバックの仕組み、柔軟性など、全体的なユーザー体験を上げる付加的な要素も含まれます。したがって、ユーザーフレンドリーな製品は多くの場合「使いやすい」ですが、「使いやすい」製品がすべて必ずしも完全に「ユーザーフレンドリー」であるとは限りません。

UXPin で ユーザーフレンドリー なインターフェースを作成しよう

ユーザーフレンドリーなインターフェースを作るには、ユーザーを圧倒しないよう、シンプルさとわかりやすさを優先しましょう。また、直感的なナビゲーションやきちんと理論的にまとまった機能を確保し、ユーザーのカスタマイズのための個別化オプションを提供しましょう。

そしてワークフローを効率化し、明確なフィードバックを提供することで、ユーザーの理解を深めましょう。アクセシビリティを考慮したデザインを行い、インターフェース全体の一貫性を維持して、関連サービスとのシームレスな統合を行い、セキュリティとプライバシーへのアプローチに重点を置きます。このような原則に従うことで、ユーザーの満足度とエンゲージメントを上げるインターフェースを作成することができるのです。

デザインを高度にインタラクティブかつコラボレーティブなものにするプロトタイピングツールである UXPin でユーザーフレンドリーなインターフェースを構築しませんか。UI デザイン、デザインハンドオフを効率化し、デザインと開発間の一貫性を保ちましょう。UXPin をぜひ無料でお試しください。

The post ユーザーフレンドリーって具体的になに？【徹底解説】 appeared first on Studio by UXPin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UXPin Merge の紹介

 

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

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

２つ目は、オープンソースの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 にすでに存在しているからです。なのでデベロッパーが新たに何かを作る必要はありません。

パート２ – UXPin Storybook の統合

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

達成された一貫性

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

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

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

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

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

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

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

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

The post デザイナーにコーディングは必要か？ appeared first on Studio by UXPin.

ダブルダイヤモンドのデザインプロセスは、問題の特定や、ソリューションの開発のために広く使われている方法論であり、この成果ベースのフレームワークは、核となる問題とエンドユーザーへの影響に焦点を当てながら、創造性と革新性を促します。

世界最先端のプロトタイピングツールで、より良い製品をユーザーに届けませんか。無料トライアルにサインアップして、UXPin によるインタラクティブなプロトタイピングをぜひお試しください。

ダブルダイアモンドとは

ダブルダイアモンドモデルは、２００３年にブリティッシュデザインカウンシルによって開発されたイノベーションとデザインのためのフレームワークです。デザインカウンシルは、どのような手法やツールを用いても、プロジェクトを実現するためのシンプルなデザインプロセスを求めていました。

デザインのフレームワークには２つのダイヤモンドが以下のようにあしらわれています：

• 問題を表すダイヤモンド
• ソリューションを示すダイヤモンド

デザイナーはこのダイヤモンドの中で仕事をし、このダイアモンドで彼らは問題を真に理解し、ソリューションを徹底的にテストすることができます。

デザイナーは、最初のダイヤモンドで核となる問題を特定すると、２番目のダイヤモンドの基礎となるデザインブリーフを作成します。２つ目のダイヤモンドでは、プロトタイプを作成し、リリース準備が整うまでソリューションをテストすることに重点が置かれます。

ダブルダイヤモンドデザインプロセスの起源

私たちがデザインフレームワークとして知っているダブルダイヤモンドは、ブリティッシュデザインカウンシルから生まれたものですが、このプロセスは、ハンガリー系アメリカ人の言語学者であるベーラ・H・バーナシー氏の「発散-収束モデル」から影響を受けています。

ベラのモデルは、最初のダイヤモンドを使って問題を広く深く探求し（発散的思考）、次に適切な集中的な行動をとる（収束的思考）というデザインフレームワークと非常によく似ています。

ダブルダイヤモンドデザインプロセスにおける４つのフェーズ

ダブルダイヤモンドのデザインプロセスは、２つのダイヤモンドと「４D」とも呼ばれる以下の４つのフェーズで構成されます：

1. 発見（Discover）
2. 確定（Define）
3. 開発（Develop）
4. 提供（Deliver）

ダイヤモンド１ – 問題の発見と定義

最初のダイヤモンドは、UXリサーチと探索に関するもので、多くの場合「問題空間」と呼ばれます。 ‐ デザイン思考プロセスの共感と確定のステージに似ていますね。

デザイナーはまず、問題とユーザーのニーズを調べることから始めますが、このフェーズには、アナリティクスや UX成果物のレビュー、エンドユーザーへのインタビュー、サービスサファリの実施、その他の初期段階のリサーチ方法が含まれる可能性があります。

第２フェーズでは、デザイナーは「発見」フェーズでのリサーチを用いて、問題とそれがユーザーに与える影響を確定しますが、デザインチームは、核となる問題にたどり着くまで、第１フェーズと第２フェーズを何度か繰り返すことがあります。そしてデザイナーが作成する UX 成果物には、以下のようなものがあります：

• ユーザーペルソナ：対象とするユーザーの架空の人物像で、その特徴やニーズを概説する。
• カスタマージャーニーマップ： タッチポイント間のユーザー体験を可視化した成果物。
• 問題ステートメント：取り組むべき具体的な問題を簡潔に表現したもの。
• 共感マップ：理解と共感を促進するために、ユーザーの思考、感情、行動を図示したもの。

第２フェーズの最後では、デザイナーはデザインブリーフを作成して、それをデザインプロセスの後半で適切なソリューションを見つけるための指針とします。

ダイヤモンド２- ソリューションの開発と提供

 ２つ目のダイヤモンドでは、適切なソリューションを見つけるためのアイデア出し、プロトタイプおよびテストを行います

開発のフェーズでは、ダブルダイヤモンドのフレームワークの中でも、チームが以下のようなさまざまなツールや手法を用いる忙しいフェーズです：

• ワークショップとブレーンストーミング：チームとして集まって、アイデア出しや仮説立て、実験の実行、可能性のあるソリューションについての話し合いを行う。
• 低忠実度（Lo-Fi）デザイン：スケッチ、ワイヤーフレーム、ペーパープロトタイプなど、デザイナーが多くのアイデアをサッと開発してテストするのに使われる、忠実度の低い（Lo-Fi）メソッド。
• 部門横断での連携：デザイナーは、エンジニア、プロダクトオーナー、その他のステークホルダーとミーティングを行い、可能性のある課題や制約に関するフィードバックを得るためにアイデアを話し合う。

開発のフェーズは、デザイナーが以下の点において最も可能性の高いソリューションを１つ特定するまで、アイデア出しやプロトタイプ、さまざまなアイデアのテストを繰り返すプロセスです：

• 問題を解決する
• ユーザーのニーズに合わせる
• 予算と技術的制約を満たす

状況によっては、デザイナーはソリューションを１つ選ぶか、いいと思うアイデアを２つ３つ選んで、提供のフェーズで忠実度の高いプロトタイプとテストを行います。まずは、１つのソリューションにたどり着くまで、うまくいかないものを排除することを目標にします。

それでデザイナーは、１つのソリューションにたどり着くと、最終的なプロトタイプを改良すべくさらにテストを行います。この一連のテストにおいて、デザイナーは、最終的な結果でデザインブリーフとステークホルダーが確実に満足できるように、ユーザビリティと UX（ユーザーエクスペリエンス）に焦点を当てます。

また、デザイナーは問題に遭遇すると、ソリューションを見つけるために開発のフェーズに戻り、ソリューションが見つかるまで反復とテストを繰り返します。

プロトタイプとテストが完了すると、デザインチームは、ドキュメント、注釈、アセット、他にもエンジニアがリリースのために最終製品を開発するのに使う指示など、デザインハンドオフに備えます。

あとは、デザインチームは UX監査と QA（品質保証）を実施し、最終リリースが確実にプロジェクトの要件、ビジネス目標、ユーザーニーズを満たしているようにする必要があります。

ダブルダイヤモンドデザインプロセスの使い方

ダブルダイアモンデザインプロセスをワークフローに活用する実践例を見ていきましょう。

第１フェーズ：発見

• ユーザーリサーチ：ターゲットユーザーへのインタビューやアンケートを実施する。
• 市場調査：競合他社や業界動向の調査
• ステークホルダーへのインタビュー：ステークホルダーからインサイトを得る。
• 共感マップ作成：共感マップを作成して、ユーザーの感情や動機を理解する。

第２フェーズ：確定

• データの統合：親和図を使ってパターンを特定する。
• 問題提起：明確で簡潔な問題ステートメントを作成する。
• ユーザージャーニーマップ：ユーザージャーニーをマッピングして、ペインポイントを特定する。
• デザインブリーフ：プロジェクトの目標と制約をまとめたブリーフを作成する。

第３フェーズ３：開発

• アイデア出し：共同ワークショップを通じてソリューションをブレインストーミングする。
• プロトタイプ：ワイヤーフレームやスケッチを作成する。
• ユーザーテスト：実際のユーザーとプロトタイプをテストする。
• イテレーション（反復）：フィードバックに基づいてデザインを改良する。

第４フェーズ：提供

• 高忠実度（Hi-Fi）プロトタイプ： 忠実度の高いモックアップでデザインの詳細を最終決定する。
• 開発：デザイナーとデベロッパーの密接な連携により、サイトを構築する。
• 品質保証：広範なテストを実施する。
• 立ち上げと監視：サイトを立ち上げ、継続的にパフォーマンスを監視し、さらなる改善を図る。

ダブルダイヤモンドデザインプロセスに従うことで、徹底したユーザー中心のアプローチで新しいサイトをきちんとデザインできることから、ユーザーのニーズを深く理解し、ソリューションを探って改良を重ね、最終製品を効果的に実装して立ち上げることによる、成功の可能性の最大化につながるのです。

UXPin でエンドツーエンドのUXデザインを試してみよう

プロトタイプとテストは、ダブルダイアモンドフレームワークなどのエンドツーエンドのデザインプロセスにおいて重要な意味があります。デザイナーは、潜在的なソリューションの徹底的なテストや正確な結果の獲得のために、高品質のプロトタイプの使わないといけません。

残念ながら、高忠実度のプロトタイプは、特定のツールでは時間がかかることがあり、ダブルダイヤモンドのデザインプロセスで多くのアイデアをテストするには理想的ではありません。

UXPin の完全インタラクティブデザインなら、デザイナーはスピードのために品質を妥協する必要はなく、最終製品のような外観と機能を備えた、忠実度の高いプロトタイプを作成できます。そしてより良いプロトタイプだと、テスト時に正確な結果がもたらされることで、デザイナーは画像ベースのデザインツールでもっと色々できるようになります。

UXPin には組み込みのデザインライブラリも標準装備されていることから、デザインチームはコンポーネントをドラッグ＆ドロップして、忠実度の高いモックアップを数分で作ることができます。数回クリックすれば、インタラクションを追加して、以下のコードのような機能を持つプロトタイプを作成できます：

• ステート：任意の要素に対して複数のステートを作成し、それぞれに個別のプロパティとインタラクションを設定できる。
• 変数：ユーザーの入力を捉えてデータに基づいたアクションを実行することで、ダイナミックで個別化された UX（ユーザーエクスペリエンス）をテスト中に作成する。
• 条件付きインタラクション: 「if-then 」と「if-else 」のルールを作成し、ユーザーのアクションや入力に対してさまざまな反応を実行する。
• Expression：フォームのバリデーション、計算コンポーネント、パスワード認証のシミュレーションなど、従来はコードでしか実行できなかった複雑な操作を実行する関数をデザインする。

どんなフレームワークでも、UXPin だとデザインプロセスを強化して、顧客により良いユーザー体験をお届けできます。無料トライアルにサインアップして、UXPin によるコードベースのデザインの可能性をぜひご体験ください。

The post ダブルダイヤモンドのデザインプロセス – 製品デザインを成功に導くおすすめのフレームワーク appeared first on Studio by UXPin.

Google はレスポンシブ・ウェブデザイン（RWD）を常に推奨しており、特に２０１５年４月２１日にモバイルフレンドリーなサイトを上位に表示する大規模なアップデートが実施された後は、その傾向が顕著です。

ただし、アップデートではレスポンシブデザインを使わなければいけないとは規定されておらず、サイトがモバイルからアクセスでき、いい UX とパフォーマンスを備えていることだけが明記されています。

それを念頭に置いて、パフォーマンスと UX デザインに関して、「アダプティブデザイン」と「レスポンシブデザイン」の長所と短所を検証してみましょう。

Web デザイン用のプロトタイピングツールをお探しでしたら、UXPin がオススメです。様々なブレークポイントを使用できます。こちらから無料トライアルをぜひお試しください。

アダプティブデザイン と レスポンシブデザイン の違い

ではまず、レスポンシブデザイン と アダプティブデザイン の主な違いは何でしょう。

レスポンシブ Web サイトデザイン と アダプティブ Web サイトデザイン

レスポンシブ Web デザインは、画面のサイズに関係なく流動的に適応し、対象デバイスに応じて CSS メディアクエリを使ってスタイルを変更します。これにより、ディスプレイのタイプ、幅、高さなどの要素に基づいて、1 つのクエリだけでレスポンシブ Web サイトがさまざまな画面サイズに適応することができます。

対するアダプティブ Web デザインでは、最初に読み込まれると反応しないブレイクポイントに基づいた静的なレイアウトが使われます。

アダプティブは、画面サイズを検出し、それに適したレイアウトを読み込む仕組みになっており、大体は以下の一般的な画面幅に合わせてアダプティブサイトをデザインすることになります：

• 320
• 480
• 760
• 960
• 1200
• 1600.

一見アダプティブの方が、最低でも６つの幅に対応したレイアウトをデザインしないといけないことから手間がかかるように見えますが、レスポンシブはメディアクエリの不適切な使用（あるいはまったく使用しない）によって、表示やパフォーマンスに問題が生じる可能性があるため、より複雑になる可能性があります。

特に後者については、多くのサイトが完全なデスクトップ モデルを提供しており、モバイル デバイスに読み込まれていない場合でも、サイトの速度が大幅に落ちるため、ここ数年で多くの議論を巻き起こしてきました。この回避にはメディアクエリの使用ができますが、レスポンシブサイトがモバイル専用サイトほど速くなることはないため、若干のトレードオフが発生してしまいます。

Web サイトがレスポンシブかアダプティブかを見分ける方法は

レスポンシブデザインには、さまざまな画面サイズに動的に調整する、より流動的で柔軟なアプローチがあり、アダプティブデザインには、サーバー側の検出によって特定のデバイスや画面サイズに合わせた、事前に定められたレイアウトがあります。

アダプティブな Web サイトを認識する際に、さまざまなデバイスや画面サイズからサイトにアクセスする時に、レイアウトが急激に変化することに気づくかもしれません。これは、事前に設定された特定のレイアウトが読み込まれるためであり、画面サイズに柔軟に対応するのではなく、そのサイズに合わせたレイアウトが用意されているためです。

レスポンシブ Web サイトは流動的なグリッドを使用しているため、レスポンシブ Web サイトを識別するには、ブラウザウィンドウのサイズを変更するか、さまざまなデバイスでサイトを表示し、画面サイズに合わせてレイアウトとコンテンツがどのように再配置されるかを観察するといいでしょう。

アダプティブ Web デザインを使う理由

アダプティブは、既存のサイトを携帯電話向けに改修する際に有用であり、これによって、特定の複数のビューポートに対応したデザインと Web 開発をコントロールすることができます。

デザインするビューポートの数は、完全に自身や会社、そして全体の予算次第ですが、レスポンシブデザインでは必ずしも得られない一定のコントロール（コンテンツやレイアウトなど）が可能です。

そして一般的には、低解像度のビューポート用にデザインすることから始め、UI デザインがコンテンツに制約されないように、またユーザビリティが損なわれないように、順を追ってデザインしていきます。

デザインは、前述の６つの解像度に対応していくのが標準的ですが、最も一般的に使われているデバイスの Web 解析を調べ、そのビューポートに合わせてデザインすることで、より十分な情報に基づいた決定を下すことができます。

ゼロからアダプティブ Web サイトをデザインする場合でも、それは問題ありません。一番低い解像度のデザインから始め、徐々に上げていきましょう。その後、メディアクエリを使って、より高い解像度のビューポート用にレイアウトを拡張するといいでしょう。ただし、さまざまなスクリーンサイズ向けに UI デザインを行った場合、ウィンドウのサイズをデバイスのスクリーンサイズに合わせて変更すると、レイアウトが「ジャンプ」してしまうことがあります。

複数のビューポートに対応したサイトをデザインおよび開発するのは余分な作業になりかねないので、通常は後付けに使われます。

アダプティブ Web デザインの３例

アダプティブ Web デザインを使用しているサイトの例を探すと、おそらく大企業や大規模な組織の Web サイトで見つかるでしょう。その組織の多くは、モバイルが登場する以前から存在しているため、複雑なレスポンシブリデザインを行うよりも、巨大な Web サイトをアダプティブ Web デザインで改修する方がはるかに簡単（かつ安価）ですからね。

では、世界の主要企業が、Google のモバイルフレンドリーなランキング要素への適合に向けて現代的なデザイン要素を取り入れるために、どのようにアダプティブ Web デザインソリューションを活用しているかを見ていきましょう。

１．Amazon

EC の巨大勢力である Amazon は、自社の Web サイトにアダプティブデザインのオーバーホールが必要であることをすぐに見極めました。それによって、世界中の顧客がどのデバイスからサイトにアクセスしても、（Google ランキングの重要な要素の一つである）「より速いページ読み込み速度」と「一貫した UX（ユーザーエクスペリエンス）」を提供することができるようになりました。

Amazon のアダプティブ Web デザインのアプローチで、フルサイトのエクスペリエンスとブランドアプリが整合され、それによってユーザーは２つのアプリを切り替えたり、Web とアプリの見た目のデザインの違いに関係なく、同じ機能とワークフローの配置を堪能することができます。すべてのデバイスでこの一貫性を確保するアダプティブデザインのテンプレートによって、ユーザーは、ナビゲーションの方法を色々と学ばなくても、ブラウズ、ショッピング、チェックアウトを行うことができるのです。

このアプローチにより、Amazon ではページの読み込み速度が最適化され、ユーザーはデスクトップの Web サイトからもモバイルと同様にこの EC プラットフォームにアクセスできるようになります。また、重要な検索バーのような要素は、モバイル向けに最適化された他の様々な機能にもかかわらず、すべてのフォーマットでデザインレイアウトの焦点のままであり、Amazon のアダプティブデザインアプローチは、物事を効率的かつ一貫性を保つ方法の成功例となっています。

２．USA Today

アメリカで人気の日刊紙である USA Todayは、オンラインニュースソースがきちんと人目につくようにするために Web サイトのリニューアルを選択した際、テクノロジーに精通したアダプティブ Web デザインのアプローチを採用しました。‐ これは、レスポンシブ Web デザインでは再現できませんでした。

出典：USA Today

同紙は、 Web サイトとアプリケーションが使用されているデバイス、OS（オペレーティングシステム）、スクリーン・サイズを識別し、それに応じてコンテンツを適応させる技術を採用しました。この革新的なアプローチにより、デベロッパーは上述の一般的な６つの画面幅に制限されない体験を作成することができ、ユーザーにユニークな体験を提供することができました。

３．IHG

アダプティブWeb デザインのアプローチを考えるとき、ホスピタリティ企業は通常、頭に浮かばないでしょう。

しかし、IHG では、顧客はモバイルか PC かに関係なく、より速やかな予約ができる、より速い Web およびアプリの予約体験を求めていることがわかり、ホテル チェーンもそれに応じました。

出典：IHG

IHG では、ほぼすべてのモバイルデバイスに搭載されている、アクセス可能なGPS データと位置情報サービスを活用したアダプティブ Web デザインアプローチを採用したことにより、外出先から地元のホテルを予約できるようなアダプティブ Web サイトのインターフェースが開発され、ユーザーは予約の確認や、利用可能なオファーにサッと簡単にアクセスできるようになりました。

レスポンシブ Web デザインを使う理由

現在、新しいサイトのほとんどではレスポンシブが使われていますが、WordPress、Joomla、Drupal などの CMS （コンテンツ管理システム）のシステムを通じてアクセスできるテーマが利用できるようになったおかげで、経験の浅いデザイナーやデベロッパーでもレスポンシブに対応できるようになりました。

レスポンシブデザインは、アダプティブデザインほどコントロールはできませんが、構築と維持にかかる労力ははるかに少なくなります。また、レスポンシブレイアウトは流動的であり、アダプティブでは拡大縮小時にパーセンテージを使ってより流動的な感覚を与えることができますが、ウィンドウサイズが変更されると再びジャンプが発生する可能性があります。例えば、流動的なレイアウトを示す下の画像では、デザイナーがパーセンテージ幅を使用しているため、ビューはユーザーごとに調整されます。

写真提供： Smashing Magazine

レスポンシブでは、すべてのレイアウトを念頭に置いてデザインすることになりますが、もちろんこれはプロセスがややこしくなったり、非常に複雑になってしまう能性があります。つまり、中解像度用のビューポートを作成することに集中し、後でメディアクエリを使って低解像度や高解像度を調整すればいいということになります。

要するに、新規プロジェクトにはレスポンシブを、改修にはアダプティブを使うのが一般的だということです。

デザインをレスポンシブする方法はこちらの記事をご覧ください：レスポンシブデザインガイド – 簡単な8ステップ

レスポンシブ Web デザインの３例

レスポンシブ Web デザインは、ユーザーにより流動的な体験が求められる新しいサイトや、Google がより注目するサイトに適しています。また、デベロッパーとデザイナーにとってレスポンシブ Web サイトの作成や維持がしやすいことから、世界中の大手テクノロジー企業やデザイン企業の多くに選ばれているデザイン手法でもあります。

次に、レスポンシブ Web デザインを採用したサイトの良例と、それがサイトのパフォーマンスやユーザーエクスペリエンスにどのような影響を与えているかを見てみましょう。ちなみにこれらは、ECやメッセージングの分野で活躍する大手ブランドの要求にも応えています。

１．Slack

企業の間で Slack の人気が急上昇している最大の理由の１つに、ユーザーがメッセージングアプリ導入や使用がしやすいと言う点があり、多数の統合機能と最適化機能を備えたわかりやすいインターフェースを誇る Slack のシンプルさと「人間的」な雰囲気は、その印象的なレスポンシブ Web デザインに反映されています。

デスクトップとモバイル間のアプリの有名な適応性は、ディスプレイがいかにシームレスに遷移してレイアウトを再配置するかによって強調されており、Flexbox と CSS グリッドレイアウトが使われていることで、Slack のレスポンシブインターフェースがワンランク上になっています。

つまり、Slack の Web サイトがアプリと同じであるということであり、それによって、ユーザーは仕事用のノートパソコンや PC と同じシンプルさと使いやすさをモバイルデバイスでも体験することができます。

出典：Slack

２．Shopify

Shopify は、レスポンシブ Web デザインにさまざまな路線を取りました。Webサイトとアプリをさまざまな方向に進め、「１つで事足りる万能な」アプローチではなく、デバイス選択型の最適化を選択したのです。

Shopify のデザイナーは、スクリーンサイズに関係なく、デザイン要素はユーザーが使うスクリーンに合わせるべきだと考えました。そこで Shopify は、（たとえそれが変更を意味する場合でも）全ユーザーが一貫した UX を享受できるようにするため、デバイスの画面サイズに応じて反応するようにサイトをデザインしました。また、色々な CTA（Call to Action）とイラストを多様なサイズとページ上のさまざまな位置で提供しました。

PC やタブレットでは Shopify の CTA や画像がフォームの右側に表示されますが、モバイルではそれらの要素がフォームの下および中央に表示されます。このレスポンシブデザインのアプローチにより、ユーザーはより多様な UX を堪能しながら、スクリーンのサイズに関係なく、最適化されたインタラクション機能を体験することができます。

３．Dribbble

クリエイティブデザインのハブである Dribbble を利用している人なら、このセルフプロモーションとソーシャルネットワーキングプラットフォームが、いいレスポンシブ Web デザインであることがわかるでしょう。このプラットフォームの Web サイトは、閲覧しているデバイスにアクティブに対応し、閲覧体験を上げる柔軟な空間を提供しています。

Dribbble の Web サイトは、スクリーンサイズと連動するフレキシブルなグリッドレイアウトを採用しており、デバイスに応じてシフトするグリッドカラムにレイアウトを適応させることで、ユーザーのインタラクションにアクティブに反応します。つまり、デザイナーはグリッド上に表示されるアイテムを調整し、視認性とアイテム数を最適化できるということです。そしてその結果、ユーザーはごちゃごちゃして見えたり、無秩序に見えたりすることなく、バランスの取れたいい体験を得ることができます。

例えば １３インチのノートパソコンや PC の画面でサイトにアクセスするユーザーには４×３のグリッド構成が表示され、より小さな画面でアクセスするユーザーには同じポートフォリオが1カラム形式で表示されます。

出典：Dribbble

アダプティブ か レスポンシブか？サイトのスピード、コンテンツ、UX の検証

前述したように、レスポンシブサイトは（適切に実装されていなければ）サイトスピードの面で苦戦する可能性があります。

また、レスポンシブでは、アクセスする各スクリーンにサイトを確実にフィットさせるために、コーディングがより多く必要になります。対するアダプティブデザインでは、レイアウトごとに別々の HTML と CSS コードを開発して管理する必要があるため、（アダプティブ・デザインと比較して）余分な作業については議論の余地があります。また、アダプティブサイトの修正は、実装時に SEO、コンテンツ、リンクなど、サイト全体ですべてが機能していることを確認しなければならない可能性が高いため、より複雑です。

もちろん、UX（ユーザーエクスペリエンス）も考慮べきです。レスポンシブでは基本的に、デバイスのウィンドウに合わせて流れるようにコンテンツをシャッフルするため、デザインが移動する際の視覚的な階層に特に注意を払う必要があります。

Nielsen Norman Group では、「レスポンシブデザインは、大きなページ上の要素をより細い長いページに合わせて整理するか、またはその逆を考えるようなパズルの解読のようになってしまうことがよくあるが、要素がページ内に収まるようにするだけでは不十分である。レスポンシブデザインの成功には、デザインはすべての画面解像度とサイズで使用可能でないといけない。」とあります。

つまり、どちらのテクニックを使うにしても近道はなく、両者とも、基本的に「すべてに対応できる」サイトの作成に伴う作業が必要です。ただレスポンシブには、今後はサイトのメンテナンスに膨大な時間を費やす必要がなくなるため、若干の利点があります。

レスポンシブデザイン と アダプティブデザインはどちらがいいのか

結局のところ、重要なのは、どのようなデザイン手法を取り入れるにしても、何よりもまず対象者（オーディエンス）を考慮することです。彼らがどのような人たちで、どのようなデバイスでサイトにアクセスする傾向があるのかを正確に把握すれば、さまざまなレイアウトやコンテンツなどに関して、彼らを念頭に置いたデザインがしやすくなります。

また、既存のサイトがあるか、ゼロから始めるかによっても大きく変わってきます。レスポンシブ デザインは主力のデザイン手法となっており、現在約 1/8 の Web サイトがレスポンシブを使用していると考えられています (一方、アダプティブの使用率についてのデータはほとんどありません)。レスポンシブの採用率も急速に伸びており、単体のモバイル サイトとほぼ同じレベルに達しています。

これらを考慮すると、アダプティブデザインが求める継続的な作業のためだけであれば、通常はレスポンシブが望ましい手法であると言ってもいいでしょう。

ただし、Catchpoint が行ったテストによると、クライアントや企業に予算がある場合は、アダプティブの方が良い選択となる可能性があります。彼らは WordPress で「標準の WP TwentyFourteen レスポンシブ テーマ」と、 「Wiziapp と呼ばれるプラグイン」をの２つを使って２つの Web ページを作成しました。

このプラグインは、ユーザーが Web ページにアクセスしているデバイスに応じてモバイルテーマを提供し、さらにプロセスを効率化できるように高度な設定オプションも提供しています。

読み込み時間の結果がそれを物語っています：

最適化が全く行われていないことが指摘されるべきですが、これでレスポンシブサイトがデスクトップコンピューターに必要なものを全てダウンロードしていることがわかります。つまり、まっさらな状態だと、このテーマはあまり良いパフォーマンスを提供しないということです。

繰り返しになりますが、これはメディアクエリを使うことで克服できますが、上記の例は、レスポンシブ UX デザインが一般的な選択肢である一方で、スマートフォンにとって必ずしもベストではないことを示す良い例です。ただし、より良いものが登場するまでは、適切なコーディングと優れたレスポンシブサイトの実装方法を学ぶ以外に、私たちに何ができるかはまだよくわかりません。

結論ですか？

レスポンシブ デザインは今後も人気があり続けるでしょうが、それは、アダプティブに求められる多大なメンテナンスに対する適切な解決策がまだ見つかっていないからかもしれません。 ただ、Web が明らかにレスポンシブを好むにもかかわらず、アダプティブ Web デザインは廃れていないため、少なくとも理論的には、レスポンシブ Web デザインを吹き飛ばすような改善が現れる可能性があります。

レスポンシブ Web サイトデザインとアダプティブ Web サイトデザイン – よくある間違い 

デザインはイテレーション（繰り返し）のプロセスであり、何がうまくいき、何がうまくいかないかを見極めるまでには、ある程度の試行錯誤が必要です。ただだからといって、レスポンシブ Web デザインとアダプティブ Web デザインの両方をマスターするのに、デザイナーが失敗を重ねて痛い目に遭わないといけないというわけではありません。

それでも、プロセスを遅らせがちな最も一般的な間違いを避けることはできます。

デスクトップ版にこだわりすぎる

モバイルデザインは、デスクトップベースと肩を並べる勢いであり、より小さなデバイスで最適化された UX を提供することで、PC やノートパソコンで見られるデザインの選択肢を凌駕することも少なくありません。ただし、オンライン上のものは大抵デスクトップベースのサイトから始まり、モバイルバージョンは後から登場したことから、多くのプラットフォーム、ツール、サイトがデスクトップ起源に傾き、モバイルは補助的なニーズと見なされています。

デザイナーは、デスクトップ中心の考え方から脱却し、デザインがモバイルで機能する可能性と、それがデザイン思考の進化にどれだけ大きな影響を与えることができるかに焦点を当て、モバイル主導型の仕事へのアプローチに適応し始める必要があります。

これは、複数のスクリーンサイズに対応するデザインに根ざしたアプローチへの移行ということであり、専用デザインが必要とされる可能性が最も高いと言われてきた従来の６つのスクリーンサイズから切り離して、固定比率ではなくパーセンテージをターゲットとするということです。つまり、デスクトップデザインを完全に割り引くという意味ではなく、モバイルとのバランスを取るということになります。

ジェスチャーを考慮しない 

今日のモバイルデバイスのほとんどがタッチ機能を誇り、ユーザーがハードウェアや表面に接触することなく Web サイトをナビゲートできるようになるのは時間の問題ですが、ジェスチャーは、大きな可能性を秘めたレスポンシブウェブデザインの要素として見過ごされがちです。

ジェスチャーを使ったズーム、スワイプ、スクロール、リターンから、指示の伝達や複雑なコマンドの実行に至るまで、レスポンシブデザインはこれらの動きを次のレベルに引き上げるための豊かな土壌ですが、主に、全デバイスで一貫したナビゲーションを実現するジェスチャーアーキテクチャの開発が複雑なことから、デザイナーは、デザインの革命的な側面となりうるこのデザインを避け続けています。

考えられる解決策としては、 Web サイトが他のデバイスでも複製可能な統一された構造に従い、使いやすさと正確さを提供できるようにするというのが一つ挙げられます。

ボタンが小さすぎる 

ボタンが小さすぎて正確に打てないアプリを扱ったことがある人なら誰でも、これがモバイルで一番イライラするデザイン上の問題の一つに挙げられることに異議はないでしょう。デスクトップ版では正確なマウスカーソルの恩恵を享受できますが、小さい画面やモバイルデバイスでは、親指や指はマークを見逃しがちです。

レイアウトと利用可能なスペースを最適化しようとするレスポンシブデザインでは、クリック可能な要素をひとまとめにしたり、小さな画面に合わせて縮小したりする傾向がありますが、これがユーザーのイライラの原因になったり、サイトの正確性、操作性、UX を引き起こしてしまうことがあります。 

なのでデベロッパーは、親指、指、目が全て同じように作られているわけではないことをよく考え、レスポンシブデザインのアプローチによってボタンがどのような影響を受けるかに注意を払わないといけません。

機能性よりもデザインを優先する

デスクトップでもモバイルでも見栄えのする Web サイトは重要ですが、Web サイトは何よりもまず、機能するものであるべきです。魅力的なサイトにアクセスしたユーザーは、当然、その実用性にも同等の努力が払われていると考えるでしょうから、見た目と同じように Web サイトが機能しなければ、そのイライラはすぐ想像がつきますよね。そしてその怒りは、トラフィックや評判の大幅な低下につながりかねません。

デスクトップとモバイルの機能レベルについても同じことが言えます。言いデザインと操作性のベンチマークとなるデスクトップサイトが、モバイルでは全然ダメなようでは、モバイルをまったく意識しない方が賢明です。

さまざまなニッチでテストを行い、効果的なプロトタイプを使って、デザインが機能性に合っていることを確認することで、デベロッパーの認識を超えていきましょう。

モバイル用に別の URL を設ける

デスクトップ版とモバイル版で別々の URL を使うのは、貴重な時間を無駄にして、検索順位にダメージを与えるデザインキラーです。各バージョンを行き来することでユーザーのイライラを引き起こすだけなく、複数の URL を使うというのは SEO のベストプラクティスに反しており、多くの場合不要なことです。

ただ場合によっては、複数の URL を使用すると、デベロッパーはモバイル デバイスでのパフォーマンスが上がる軽量モバイル バージョンの Web サイトを作成できるようになります。ただし、デスクトップ バージョンがモバイルに非常に適している場合に限ります。

将来の維持・開発コストが考慮されていない

開発にはお金がかかりますが、将来のことを考えずに目先の金銭的なことを考えてデザインを決定してしまうことがよくあります。

アダプティブ Web デザインは、その開発に労働集約的な性質があるため、より高い初期投資が必要ですが、そのメンテナンスのコストは一般的に長期的に安定しています。

対するレスポンシブ Web デザインは、予期せぬコストにつながる可能性がありますが、UX の向上から生じる報酬は、そうした金銭的リスクを帳消しにしてくれるかもしれません。

UXPinでUIをデザインしよう

自身でレスポンシブな UI デザインのモックを始めたい場合は、UXPin でするのがおすすめです。このコラボレーションプラットフォームには、あらかじめ設定されたブレークポイントとカスタムのブレークポイントが用意されています。そして完成したら、スペックモードを有効にして、デベロッパーへのデザインハンドオフを自動化しましょう。

UXPin を使って、モバイル、デスクトップ、およびその中間のすべてのプロトタイプを作成しませんか。さまざまなインタラクティブ・プロトタイピング機能を試して、ステークホルダーやエンジニアが理解しやすいデザインを実現しましょう。無料トライアルはこちら。

The post レスポンシブデザイン と アダプティブデザイン： 最良の選択とは appeared first on Studio by UXPin.

 データテーブル は、多くの企業のUXプロジェクトにとって非常に重要なコンポーネントであり、UXデザイナーは、ユーザーのニーズに応じてデータを視覚化してソートするための最適なUXテーブルデザインソリューションを見つけなければいけません。

本記事では、一般的なコンテンツとユーザビリティの問題を解決するために、テーブルUIデザインのベストプラクティスを例を挙げて見ていきます。また、特定のトピックをさらに研究するのに役立つリソースもご紹介します。

主なポイント：

•  データテーブル のUXデザインには、ユーザーが情報を簡単に検索、理解、操作できる方法でデータを整理して表示することが含まれる。
• 効果的なデータテーブルのデザインには、レイアウトの選択、データの構成、見やすさ、ユーザータスクの機能性などが含まれる。
• データテーブル のデザイナーは、読みやすさの優先、視覚的な階層作り、応答性の確保、列の適切な順序付け、より良いUXのためのアクセシビリティに注力すべきである。

データテーブルの UXデザインとプロトタイプは、画像ベースのデザインツールを使うデザイナーにとっては大変です。画像ツールには、ソート、検索、スクロール、アクションなどの基本的なテーブル機能を作成する機能がありませんからね。

UXPin Mergeを使うと、デザイナーは完全に機能するデータテーブルを同期したり、MUIのようなコンポーネントライブラリを使ってテーブルのUXをデザイン、プロトタイプ、テストすることができます。

 データテーブル のデザイン

まずは、ユーザーが情報を視覚化できるように、データテーブルの構造と、これらの要素がどのように組み合わされているか詳しくみてみましょう。

• テーブルヘッダー： データテーブルの各列のラベル
• 行： データベースからの各エントリー
• ツールバー： データを操作するためのツール（検索、編集、削除、設定など）
• ページネーション： 複数ページのデータを表示するための UIパターン
• 行チェックボックス： 単一または複数の行を選択して削除、コピー、処理などのタスクを実行するために使用する。
• 並べ替え： 特定の列を昇順、降順に並べ替えることができる。
• 水平ルール： 各行を区切る水平線（<hr> HTML要素）。

いい データテーブル にするには

いいデータテーブルをデザインするには、主に以下の４つの要素が挙げられます：

1. ​​表示したいコンテンツに適したデータテーブル UI を使う。
2. テーブルのレイアウトとコンテンツの優先順位を正しく設定する。
3. コンテンツを読みやすくする。
4. データテーブルで、ユーザーがタスクを完了するための機能を得られる。

何よりもまず、ユーザーに必要なデータをすべて表示するのに十分なテーブルでないといけません。また、UXデザイナーはデータに正しい優先順位をつけないといけません。

いいデータ表には明確なヘッダーと説明があり、これによってユーザーは自分が何を見ているのかがわかります。また、デザイナーは読みやすいタイポグラフィーを使ったり、列と行の間に適切な間隔をあけて、ユーザーがコンテンツを読みやすく、吸収しやすいようにしないといけません。

最後に（最も重要なことですが）、データテーブルはユーザーにとって使いやすいものでないといけません。ユーザーのニーズを解決し、直感的に使えるものであるべきです。ユーザーがデータテーブルの使い方の習得よりもデータの分析に集中できるように、難なく習得できるものであるべきです。

ユーザーにとって使いやすい データテーブル をデザインする方法

ここでは、ユーザーに優しいデータテーブルをデザインするためのベストプラクティスを見ていきましょう。

データテーブルの読みやすさ

データテーブルのUXにとって、読みやすさは非常に重要です。デザイナーは、以下のような要素を考慮する必要があります：

• 視覚的なノイズを減らす： ユーザーがデータを読んで操作するのに必要なコンテンツと UI 要素のみを表示する。
• 読みやすいフォントを使う：データテーブルの書体、サイズ、空白、文字間隔は、アプリケーションの他の部分とは異なるフォントを使うことになる場合でも、ユーザーがコンテンツを読むのに十分な大きさでないといけない。
• 分離を作る: ユーザーがデータを簡単に区別して吸収できるように、パディング、間隔、配置、および線での分離の作成が有効である。
• 一貫性： ユーザーが必要なものを見つけるためにテーブルをより速くスキャンできるようになるように、フォント、スペーシング、サイジングなどを使うことで、一貫性や親しみやすさを作る。
• 固定ヘッダー： ユーザーが常にコンテキストを把握できるように、スクロールしてもヘッダーは表示されるようにする。

視覚的階層を構成する

読みやすさには、視覚的階層を構成することが関係しています。つまりデザイナーが、タイポグラフィー、サイズ、間隔、その他の要素を使うことで、データが区別され、表が見渡しやすくなります。

• 列と行のヘッダーには、太字と少し大きめのフォントサイズを使う。
• 見出しと表の内容を区別するために網掛けを使う。
• 「ゼブラストライプ」で、行と行の間の区切りができて読みやすくなる。
• リンクには対照的な色を使い、どのコンテンツがクリック可能か分かるようにする。

 データテーブル はレスポンシブでないといけない

UXデザイナーは、ユーザーが日々のタスクをこなしながらテーブルをどのように使うかを理解し、組織全体で一貫したまとまりのあるユーザー体験を作り出さないといけません。

データテーブルは、ユーザーがビジネスのどこででもデータを分析できるように、レスポンシブでないといけません。例えば営業チームは外出先でモバイルデバイスからデータにアクセスしたいかもしれませんし、倉庫の従業員は主にタブレットを使いますよね。

データの関連性に応じて列を並べる

NNグループの記事では、「列のデフォルトの順序は、ユーザーにとってのデータの重要性を反映すべきであり、関連する列は隣接すべきである 」と推奨しています。

UXデザイナーは、関連性に応じて列を並べてグループ化しないといけません。例えば、住所、都市名、国名、郵便番号のような場所の詳細は、一緒でなければならず、これをバラバラに配置すると、ユーザーはカラムを比較するためにテーブルをスクロールしたりスキャンしたりする手間が増えてしまいます。

 データテーブル のアクセシビリティ

WebAIM では、アクセシブルなテーブルを作成するための以下のようなヒントが挙げられています：

• テーブルのキャプション：テーブルを開く要素の後に配置されている HTML要素の<caption>は、スクリーンリーダーにコンテクストを提供する。HTML はエンジニアの責任である一方で、UX デザイナーは、ユーザー調査とテストに基づいて、適切なキャプション記述を提供しないといけない。
• 行と列のヘッダーを識別する： UX デザイナーは、スクリーンリーダーがコンテンツを正しく識別できるように、適切な行見出しと列見出しを使わないといけない。
• データセルを適切なヘッダーに関連付ける： scope属性は、例えば、<th scope=”col”>Name</th> と <th scope=”row”>Jackie</th> など、スクリーンリーダーにヘッダーが行に属するか列に属するかを伝える。また、scope属性で、スクリーンリーダーは、ユーザーが視覚的にスキャンするように、テーブルを簡単に色々と行けるようになる。
• 絶対的なサイジングではなく、比例的なサイジングを使う： ピクセルのセルサイズを固定するのではなく、パーセンテージを使うことで、テーブルを自動的にスクリーンのサイズに合わせることができ、視覚にハンデのあるユーザーにも読みやすくなる。

データテーブルのアクセシビリティに関するその他のリソースとして、以下が挙げられます：

• Creating Accessible Tables by WebAIM（WebAIM による、アクセシブルなテーブルの作成）
• Accessible Tables by the University of Minnesota（ミネソタ大学によるアクセシブルなテーブル）
• Tables Tutorial by Web Accessibility Initiative（Web Accessibility Initiativeによるテーブルのチュートリアル）

複雑なデータテーブルのためのアトミックデザイン

Smashing Magazine社 では、複雑なデータテーブルをデザインするためのアトミックデザインのアプローチが概説されています。アトミックデザインとは、最小のUI要素からデザインし、より複雑なコンポーネント、パターン、UI全体を作成するために徐々に構築していく手法です。

例えば Smashing Magazine社 は、この手法を用いてデータテーブルを以下のように分類しています：

• 原子：フォント、色、アイコン
• 分子：セル、ヘッダー、アクセサリ
• 有機体： 行、列、ページネーション、ツールバー
• テンプレート： 表全体

おすすめの UXテーブル例６選

ここでは、UX テーブルの例６選と、それがユーザーのために解決する問題を見ていきましょう。

１．大規模データセットの水平スクロール

大規模なデータセットでは、多くのカラムに対応するために水平スクロールが必要です。UXデザイナーは、ユーザーにとってどのコンテンツが最も重要かを判断し、常に表示されるものと、スクロールしなければ表示されないものの優先順位を決めないといけません。

この好みは組織全体で変化する可能性があるため、ユーザーが列を並べ替えることで表示されるものを個別化できるようにするというのは、いいユーザー体験を生み出す上で極めて重要です。

ユーザーがスクロールするときに常に参照できるように、最初の列に識別子を置いて固定することをお勧めします。ユーザーが複数の列を固定できるようにするとで、さまざまなデータを比較できるようになります。

２．拡張可能な行と列

拡張可能やサイズ変更が可能な列は、ユーザーのための２つの目的があります：

1. ユーザーが過剰な内容のセルを表示できるようにする。
2. ユーザーが重要でないと判断したコンテンツのセル幅を最小化できるようにする。

UX デザイナーは、視覚的なノイズを減らし、目の前のタスクにとって最も重要なコンテンツを読みやすくするために、行や列を「非表示」にすることも検討できる場合もあります。

拡張可能な行によって、UX デザイナーはユーザーが必要なときにだけ表示される詳細な情報を含めることができます。CodePenの例では、簡単な説明とステータスを持つ一連のジョブカードが示されており、そこでユーザーは、アコーディオンを開いて、追加のメモや仕事のコストを表示することができます。

３．行フォーカスデータ表

このホバー効果により、ユーザーは一度に１つの行にフォーカスすることができます。複数の列やデータポイントがある場合、このエフェクトを使うと、ユーザーは行をハイライトすることができることから、もっと読みやすくなります。

また、UXデザイナーは、他の行をぼかして、１つの行を選びやすくするようにしてもいいかもしれません。

同じような例で、このデータテーブルは特定のセルをホバー効果で強調しています。

４．無限スクロールデータ表

無限スクロールは、データ量の多いテーブルで便利です。ページネーションに代わる優れた方法であり、ユーザーはクリックする代わりにスクロールするだけでより多くのコンテンツを見ることができます。

５．列の並べ替え

列の並べ替えは、ユーザーが好みに応じてデータを並べ替えるのに非常に重要です。たとえば、倉庫管理者は注文を早い順に並べ替えて進捗状況を監視し、問題に早期に対処できます。 また、配送希望に基づいて並べ替えることもでき、同日の注文が締め切り前に発送されるよう順調に進んでいることを確認できます。

６．インラインフィルター

データテーブルのフィルターで、ユーザーは自分の好みを絞り込んで、関連する項目だけを表示することができます。このデータテーブルの例では、ユーザーは複数のフィルターを適用して、必要なものを正確に見つけることができます。そしてこのようなインラインフィルターは、無関係なコンテンツを排除できる大規模なデータセットにとって特に便利です。

UXPinでテーブルをデザインする方法

UXPin は、インタラクティブで忠実度の高いプロトタイプを作成するための高度なプロトタイピングツールです。１つのインタラクションをシミュレートするのに複数の静的なアートボードを作成する代わりに、デザイナーは UXPin で、１つのアートボード「Page（ページ）」を使ってファンクショナルコンポーネントを設計するのにステート（状態）、Variables（変数）、および条件付きインタラクションを利用できます。

また、UXPinでテーブルを挿入するには、「Search All Assets（すべてのアセットを検索）」の検索アイコン（command + F / Ctrl + F）をクリック -> 入力フィールドに「table」と入力 -> 「コンポーネント」見出しの下にある「Table」をクリックします。

テーブルコンポーネントへのデータのインポート

テーブルコンポーネントに実際のデータを入力するには、JSONファイル、CSV ファイル、Google シートなどの外部データソースに接続します。その際、テーブルのスタイリングを行う前にこの作業を行い、デザインするコンテンツのイメージをよく把握しておくのが一番です。

まず、レイヤー名が JSON/CSV/Google Sheet のテーブルヘッダーと一致していることを確認する必要があります。Googleシートでどのように動作するかは、以下の画像を参照してください。

データを同期するには、入力したいレイヤーを選択し、水平ツールバーの 「Fill with Data （データ入力）」のアイコンをクリックして「JSON / CSV / Sheets」に移動します。

ローカルの JSON または CSV ファイルからデータをインポートする場合は「Browse File…（…のファイルを参照）」 をクリックするか、「Import from URL （URL からインポートする）」の入力フィールドに外部の JSON、CSV、または公開されている Google Sheets のファイルの URL を貼り付けます。

その後、構造が正しく一致している場合だと、データはテーブルコンポーネントに表示されます。

テーブルコンポーネントにソート機能を追加する

ステートとインタラクションを使ってデータをソートすることもできます。

まず、新しい状態で異なるレイヤーをすべて選択します (この場合、特定の列のText Layers 全てになります）。 その後、水平ツールバーの「Add State（ステートの追加）」（command+shift+S/ctrl+shift+S）のアイコンをクリックし、「Set State（状態の設定）」入力フィールドを使って新しいステートに名前をつけます。

次に、例えば 数値順、アルファベット順など、好きなように表のセルを並べ替えます。これを行う方法では、別の外部データソース（この場合はGoogle Sheetsが最適）を作成し、新しいデータを取り込むために前の手順を繰り返すのがベストです。

その後、元のステート（デフォルトでは 「Base（ベース）」と表記）に戻します。

最後に、関連するテーブルヘッダーを選択し、「Properties Panel（プロパティパネル）」の 「New Interaction（新しいインタラクション）」のアイコン（「+」）をクリック ->「Set State（ステートの設定）」を選択 ->「Element（要素）」で関連するエレメントを選択 ->「Set state（ステートの設定）」で作成したステート（および指定したい追加設定）を選択します。

テーブルコンポーネントのスタイリング

次に、Component （コンポーネント）のスタイルを設定します。すでに本記事で説明した UXデザインのベストプラクティスに従った方法で構造化され、スタイルが設定されていますが、プロパティパネルを使って、好きなデザインに設定できます。

また、UXPin でデザインシステムを使っている場合、デザインシステムのカラースタイルとテキストスタイルを再利用することで、このステップを短縮できます。それには、スタイルを設定したいレイヤーを選択し、「Design System Library（デザインシステムライブラリ）」のアイコンをクリックしてUXPin のデザインシステムライブラリに移動し、適用したいスタイルを選択します。

ゼロからデザインせずにオープンソースのコンポーネントを使う

もっといい方法は、オープンソースの React コンポーネントを UXPin にインポートするか、ビルトインライブラリのいずれかを使うことです。例えば UXPin Mergeには、MUI、Ant Design、Bootstrapにデータテーブルのコンポーネントがあるので、ライブラリから取り出してキャンバスにドロップするだけです。

そして、データをインポートし、ニーズに合わせてコンポーネントのプロパティを調整すれば、ステークホルダーにデザインを見せる準備が整いました。これで完了です！

そしてテーブルはコードでバックアップされているので、StackBlitzのような開発環境に直接コピーすることができます。

従来、UXデザイナーはプログラミング スキルを必要とするか、HTML、CSS、JavaScript を使用して機能するデータ テーブルを構築するエンジニアに頼る必要がありました。

しかし、UXPin Mergeを使うことで、UXデザイナーは主導権を握ることができ、コンポーネントを使うために 1 行のコードを記述する必要がなくなるのです。 また、エンジニアリングチームからの入力なしで変更を加えたり反復したりすることもできます。気になった方はまずは14日間の無料トライアルでお試しください。

The post 【 データテーブル 】テーブルUIのベストプラクティス appeared first on Studio by UXPin.

この記事は、UXTweak のコンテンツデザイナー責任者であるDaria Krasovskaya様によるゲスト投稿です。ぜひ最後までお楽しみください！

プロトタイプが完成し、デザインを検証する方法をお探しですか？この記事では、プロトタイプテストを実施する際のベストプラクティスと知っておくべき情報をまとめました。

プロトタイプテストは、デザインを検証し、ビジネスの目標を達成しながらユーザーのニーズを満たすことを確認するための優れた方法です。UXチームがデータに基づいた意思決定を行い、ユーザー中心の製品を作成する上で大いに役立つ、極意とも言えるユーザーリサーチ手法です。

プロトタイプとは

プロトタイプは、デザインコンセプトとプロセス検証のために構築される製品を具体的に表すものであり、製品が本格的な生産に入る前に改良を加えることができます。

そして、製品固有のニーズと製品ライフサイクルの段階に基づいて、以下のようにさまざまなタイプのプロトタイプを開発することができます：

• 高忠実度プロトタイプ： 最終製品を模した詳細なモデル。製品の使いやすさを改良するために製品開発プロセス後半で使用される。
• 低忠実度プロトタイプ： 製品ライフサイクルの初期段階で、製品を構築するデザインコンセプトのテストや検証に使用するシンプルなモデル。
• ワイヤーフレームまたはペーパープロトタイプ： 製品の構造とレイアウトの概要を示す非常に基本的な表現方法。ワイヤーフレームまたは手描きのペーパープロトタイプのいずれかの形式を取ることができる。

プロトタイプテストとは

プロトタイプテストは、UXの手法の1つで、製品が本格的な生産に移る前に、プロトタイプを評価してデザインを検証したり、改善点を特定したりするものです。

プロトタイプテストは重要なフェーズで行われ、UX専門家は、製品がユーザーのニーズや期待に合致していることを確認することができます。

また、プロトタイプの種類によって、テストは一般的なUX（ユーザーエクスペリエンス）、機能性、ユーザビリティだけでなく、問題の製品の全体的な美しさを評価することができます。

製品のプロトタイプテストが重要な理由

プロトタイプテストは、対象ユーザーの視点で製品を見ることができる見逃せない機会であり、製品開発にとって多くの利点があります。これによって、デザインプロセス全体と最終製品の開発に付加価値を与えます。

以下で、プロトタイプテストを実施する主なメリットを見てみましょう：

反復的な改善

プロトタイプテストは、UXデザインにおける継続的改善の思考の典型です。UX専門家はプロトタイプテストで製品の使いやすさ、機能性、美しさに関して、潜在的な改善点を特定することができることにより、製品の改善をサポートします。 UXは反復的なプロセスですが、プロトタイプテストも同様なのです。

時間とコストの節約

プロトタイプを作成し、UXプロセスの早い段階でテストするのは、費用、時間、リソースの節約になる優れた方法です。

プロトタイプのテストにより、製品が生産に入る前にコストおよび時間を効率化し、専門家によるコストのかかる再デザインや手直しを回避することができます。

ステークホルダーとのやりとり

先述したように、プロトタイプは製品の具体的な表現なので、チームが同じ認識かを確認するための優れたツールとして機能します。

さらに、プロトタイプテストは、社内のステークホルダーからのフィードバックを集めるだけでなく、製品がユーザーのニーズを満たしながら、ビジネスの戦略的目標に貢献していることを確認する見逃せない機会でもあります。

リスク軽減

プロトタイプテストのもう 1 つの重要な利点として、リスク軽減のメカニズムとして機能する点があります。 プロトタイプテストにより、UX専門家は開発プロセスの早期段階でリスクと課題の特定して対処できるため、対象ユーザーに製品が採用される可能性が高まります。

そしてプロトタイプテストといえば、モバイル用のテストも忘れずに。Unswitchの２０２３年の調査によると、世界の携帯電話市場の統計において世界のスマートフォンユーザーは４６億人いるとのこと。

プロトタイプテストを行うタイミング

プロトタイプテストは、反復的で動的なプロセスであることから一過性のタスクとして行わないようにしましょう。プロトタイプのテストは製品開発を通じて行っていきましょう。プロトタイプテストは、初期段階の場合特に、コンセプトを検証するための素晴らしい方法となります。

アイデアの検証後はプロトタイプテストで基本的な機能性を確認し、製品が対象ユーザーのメンタルモデルに反していないことを確認することができます。

発売直前や発売後といった後期段階では、プロトタイプのテストを行うことで、全体的なユーザーエクスペリエンスを検証し、変化するユーザーニーズに対応するための改善点を的確に特定できます。

プロトタイプテスト用製品の種類

プロトタイプテストは汎用性の高いツールであるため、ソフトウェアアプリケーションやプラットフォームなど、多くの製品に適用することができます。ある種の UI を伴うデジタル製品であれば、プロトタイプを使ってテストすることができますが、家電製品や医療機器などの物理的な製品も、プロトタイプのユーザーテストから恩恵を受けることができるというのは注目に値します。

プロトタイプの種類

プロトタイプテストにはさまざまな種類があり、それぞれ「製品の評価」という点で異なる目的があります。最もよく知られているカテゴリーで「量的テスト」と「質的テスト」があります。さらに、ファシリテーターの有無によって、「モデレート型」と「非モデレート型」に分類できます。

このようなカテゴリが持つ独自の性質をより理解できるように、それぞれの主な特徴と違いを概説した表を以下のように作成しました：

「量的テスト」と「質的テスト」

「モデレート型テスト」と「非モデレート型テスト」

プロトタイプテストの実施方法

プロトタイプテストの初心者であれば、このガイドで、効果的なソフトウェアプロトタイプテストの実施、さらに、よりユーザー中心の製品向けのデータに基づいた意思決定を行うことができるようになります。

１．プロトタイプテストを計画する

まずは、テストの目的を明確に設定することから始めましょう。たとえば、「使いやすさ」や「ユーザー満足度」に焦点を当てたいと思うかもしれません。目標がすべて決まれば、プロジェクトのニーズに最も適したプロトタイプテストのタイプを選択します。そしてリサーチの目標に沿ったテストのシナリオを作ることから始めましょう。ユーザーペルソナを使って対象者を確定し、ユーザビリティテスト参加者を募集しましょう。

２．プロトタイプテストのツールを選択する

適切なプロトタイプテストツールの選択は、プロトタイプテストの取り組みを左右します。プロトタイピングツールとの統合のしやすさだけでなく、テスト固有の要件に基づいて適切なツールを選択しましょう。

３．テストを実行する

プロトタイプのセッションを実施し、質的データと量的データの両方を取るようにしましょう。一挙手一投足まで見逃さないよう、メモを徹底的に取ってレポートを作成することも忘れずに！

４．結果を分析する

次は結果の分析です。パターンを特定し、質的データと量的データの両方を考慮した上で、結論を導き出しましょう。そして特定した問題の重大性や影響度に基づいて優先順位をつけます。

５．反復と繰り返し

今度は、調査結果をデザインチームへの実行可能な提案に変換します。 プロトタイプに変更を実装し、行われた改善のプラスの効果を検証するために追加のテストを必ず加えてください。そしてその最終製品に満足するまで、改良とテストを行い続けましょう。

おすすめプロトタイプテストツール

現在市場に出回っているプロトタイプテストツールの中から、おすすめを以下に挙げましょう：

１．UXtweak

UXtweakのような主要なプロトタイピングツールとのシームレスな統合によって、プロトタイプのテストがしやすくなります。また、使いやすいインターフェースによって、あらゆるレベルの人にとって利用しやすく、専任のサポートチームによる専門的なガイダンスを受けることもできます。UXtweakのプラットフォームは、プロトタイプテストのリサーチが大幅に効率化されるリクルート用のユーザーパネルを備えている点も魅力です。

２．Lookback

Lookback もまた、プロトタイプテストを実現する強固なツールです。UXリサーチャーやデザイナーがリアルタイムでテスト参加者と対話できるライブリモートテストツールを提供します。このコラボレーション機能によりチームメンバー間の連携を促進します。

３．Userlytics

Userlyticsは、リモートプロトタイプテストツールを特徴とする包括的なUX分析ツールです。また、プロトタイプテストの参加者が、メモや音声、ビデオなど様々な形でフィードバックを収集できる、きれいに作られたマルチメディアフィードバックツールも魅力です。

４．Optimizely

Optimizely もまた、プロトタイプテストを実現する優れた実験プラットフォームです。このプラットフォームは A/B テストやリモートセッション録画のようなツールが提供され、プロトタイプのテスト作業を強化できるデータ駆動型のインサイトとパーソナライズ機能があります。

ヒント：FullStory統合を使って、UXPinのプロトタイプをテストすることもできます。 

プロトタイプテストの募集方法

プロトタイプテストの参加者を募集するのは、すべてのプロトタイプテスト調査において不可欠なステップです。インサイトの妥当性は、募集採用の質やターゲットを代表とする多くの参加者に影響を与えますからね。テストを達成するには、参加者の募集を行う前に、ターゲットの具体的な特徴を定義し、ユーザーペルソナを参照するようにしましょう。

もう１つの大きなヒントは、特定のスクリーニングクエスチョンを使って、ターゲットとしている層をその参加者が代表していることを確認することです。これが完了したら、参加者を１つのチャネルからのみ集めようとしないでください。

その代わりに、SNS や関連するオンラインコミュニティなど、いくつかのリクルートチャネルを利用して、リサーチに豊かなインサイトがもたらされるような多様な参加者を集めましょう。

参加者の募集を慎重に行うことで、よりユーザー中心の製品に貢献する質の高い、実用的な結果がもたらされることをお忘れなく。

プロトタイプテストのベストプラクティス

もしプロトタイプテストに足を踏み入れようとしているなら、以下のルールを覚えておきましょう。

量的データと質的データを組み合わせる

質的方法論と量的方法論の両方をプロトタイプテストのリサーチに統合すると、大きな効果が得られます。 数値統計でユーザーの行動を定量化することができ、質的なインサイトはユーザーの行動の背後にある「理由」を明らかにすることができます。

それによって、ユーザーの内発的動機とニーズをより包括的に理解できるようになり、よりユーザー中心のデザインプロセスが実現します。

現実的なシナリオを含める

プロトタイプテストを実施するとき、複数のシナリオとエッジケースを含むなどのセッションを一気に詰め込んでしまいがちです。 テスト参加者向けに現実的なタスクを作成して、順調に進めていきましょう。 実際のタスクを使うことで、参加者がリアルにプロトタイプに取り組むことができ、インサイトがより実用的なものになります。

テスト参加者の多様化

これは本当に大事です！ 前述したように、参加者の募集はあらゆるプロトタイプテスト調査のすべてと言えるでしょう。 テスト参加者の多様性を常に目指すことで、ニーズや期待についてより幅広いインサイトが得られ、対象とするユーザーについてより包括的な理解につながります。

テスト全体で一貫性を確保する

最後に重要なことですが、さまざまなプロトタイプのテスト セッション間で常に一貫性を確保してください。

一貫性により、プロトタイプテストのセッションから得られるインサイトが信頼できるものであり、一番重要なこととして、比較可能であることが保証されます。

プロトタイプテストをするときに避けるべきよくある間違い

プロトタイプテストをするときに避けるべきよくある落とし穴を以下で見てみましょう：

アクセシビリティに関する考慮事項を無視する

誘惑に駆られるかもしれませんが、プロトタイプテストのセッションではアクセシビリティを必ず考慮してください。 そうしなければ、基本的なユーザーのニーズが無視されたデザインになる可能性があります。

モバイルテストをしない

モバイル ユーザーは増加しているため、モバイルのプロトタイプテストもお忘れなく。常にモバイルエクスペリエンスをテストし、デスクトップのパフォーマンスがモバイルデバイスでの最適なUXメトリクスになるとは決して考えないでください。

インサイトの文書化でしくじる

インサイトの文書化でしくじるのは、プロトタイプテストにおける大きな落とし穴の 1 つです。 貴重なインサイトを失くしたり、結論を急ぐことを避けるために、各プロトタイプテストのセッションを徹底的に文書化し、質の高いメモをとることを怠らないようにしましょう。

まとめ

プロトタイプテストは、ユーザーとビジネスの両方のニーズに合わせてデザインを調整する上で、非常に重要な役割を果たします。 このテストによってUXチームはよりユーザー中心の製品を大いに構築できるようになるため、UXデザインプロセスに統合する価値のあるユーザーリサーチの手法の頂点の 1 つに挙げられます。

プロトタイプテストを最大限に活用するには、プロトタイプテストに対して反復的なアプローチを採用し、決して一過性のタスクとして扱わないようにしましょう。

UXPinを使ってインタラクティブなプロトタイプを構築してみましょう！UXPinは、アイデア出しからデザインハンドオフまで、デザインプロセス全体をカバーするオールインワンのデザインツールです。こちらからUXPinをぜひ無料でお試しください。

The post これを読めばすべてわかる プロトタイプテスト 【徹底ガイド】 appeared first on Studio by UXPin.

UX（ユーザーエクスペリエンス）デザインとは、ユーザーとデジタル製品の関係が良好なものであるのを保証するためのものです。ありがたいことに、最新のツールが数多く存在するため、デザイナーチームはリアルタイムで簡単にデザインについての共同作業や、ユーザビリティのテスト、デザインのイテレーション（反復）を行うことができます。

リサーチも一つの手ですが、実際に使ってみて初めて最適な UX デザインツールを選ぶことができるようになります。UXPin でリアルなプロトタイプをデザインしませんか。こちらからぜひ無料でお試しください。

UXPin

UXPin には、完成したデジタル製品を実際に使っているかのような忠実度の高いプロトタイプをデザインするのに必要な機能がすべて備わっています。また、UXPin には何百もの UI（ユーザーインターフェイス）要素があるため、速やかなデザインや、チーム全体での一貫性の維持がしやすくなります。

UXPin Merge

UXPin には、他のどのツールよりも速やかにレイアウトを構築するための独自の Merge テクノロジーがあり、チームは MUI、Fluent UI、その他のコード化されたデザインシステムなど、オープンソースのコンポーネントライブラリにあるドラッグ＆ドロップのコンポーネントでデザインできます。

デザインが完了したら、各コンポーネントの背後にあるコードを抽出して、それをアプリの開発に使うことができます。デザインからコードへの変換はもう必要ではなく、そのデザインはすでに開発の準備ができており、ツール内にすべての仕様が揃っているのです。簡単なレビューを以下でご覧ください。

さらに、UXPin でユーザビリティテストがしやすくなります。あなたのデザインを他の人と共有し、彼らがどのようにそのデザインを扱うのかを見るだけです。これだけで、デザインの開発に時間が費やされることがなくなります。

Figma

Figma は「インターフェースデザイン」と「ブレインストーミング」に重点を置いています。Google ドキュメントと同様に、現在プロジェクトに取り組んでいる人と、その人が入力している内容を確認することができ、プロジェクトにおけるリアルタイムの連携を便利に行うことができます。また、モックアップや部分的な機能プロトタイプを作成することもできます。

Figma のデザインを最終製品のように機能させるには、プロトタイピングツールと統合するといいかもしれません。ちなみに UXPin には、Figma のデザインを UXPin にコピー＆ペーストして、インタラクティブにする独自の拡張機能があります。チュートリアルはこちら（英語）。

InVision

かつて InVision は画期的なツールであり、デザイナーのための素晴らしいハブでした。このプラットフォームの直感的なインターフェースで、UI のデザインおよびイテレーションがしやすくなり、それによって貴重な時間とリソースが節約されたものです。

デザイナーは InVision を使ってチームメンバーやステークホルダーからのフィードバックを集め、より反復的で協力的なデザインプロセスを育みました。また、InVision には、プロトタイプと UX デザインにユーザー中心のアプローチがあり、それでデザイナーは、ユーザーニーズとビジネスゴールに沿った高品質でインタラクティブなデザインができるようになりました。

ただ残念ながら、InVision は ２０２４ 年 １ 月でサービスが終了してしまいます。代替手段をお探しの場合は、インタラクティブ UX デザインの第一線で活躍している UXPin Merge を試してみることを強くお勧めします。 UXPin Merge について見てみる。

Sketch

Sketch もまた、共有ライブラリやレイアウトに対応し、他の人とのデザイン共有やエクスポートなどができる UX デザインツールです。ベクターツールやプラグインツールなど多くの編集ツールが備わっており、詳細なデザインに取り組んでいる場合は、ズームインしてより正確なレベルで編集することができます。そして、コマンドでデザインの一部をリサイズできるのも便利な機能です。

Sketch はライブラリに保存できるユニークなアイコンやデザインの作成に適しています。そしてそれによって、例えば、あるアイコンを複数の別々のデザインに比較的簡単に使うことができる、プロジェクト間での簡単な共有機能ができるようになります。

その上、デザインをクラウド上に保存できるため、チームや組織はデザインに簡単にアクセスでき、より流動的なデザインプロセスを実現できます。そしてもう１つの重要な機能として、貢献者がプロジェクトにコメント、編集、変更を加えることができ、それが自動的にクラウドに同期されます。

Marvel

Marvel も、Web デザインを自動的にクラウドに同期するクラウドベースのプラットフォームです。加えて、出先でサッと変更できるモバイルサポートもあります。また、簡単にアクセスしてプロジェクトに実装することができるテンプレート、画像、ボタンなどのスクリーンコンポーネントのライブラリも用意されています。

Marvel はより初心者向けに作られており、ドラッグ＆ドロップシステムによって、ユーザーは我流のコーディングをすることなくデザインを開発することができる。また、他のチームメンバーからフィードバックを得られ、自分のデザインを入力することができる共同デザインプラットフォームでもあります。

タブレット、スマートフォン、デスクトップパソコンなど、さまざまなデバイス向けに特別にデザインされたテンプレートがあり、モックアップは本物と同じようにテストすることができるため、デザイナーは速やかに欠点を見つけ、必要に応じてデザインを更新することがでます。

また、iOS や Android のデバイスにMarvel のアプリをダウンロードするのもいいせしょう。それによって、スマートフォン端末でのアイデア試しや、簡単な共有ができるようになります。

最適な UX デザインツールを選ぼう

上記の例からわかるように、最も使われているデザインプラットフォームの中には、デザインプロセスの１つの要素に集中できるものもあり、Marvel のようにカジュアルなデザインに最適なものもあれば、より複雑なデジタル製品やモバイルアプリの制作に適したものもあります。

ただ残念なことに、複数のソリューションを使うのは、デザインツールキットの規模が大きくなるということであり、それで作業スピードが下がる可能性があります。そうなるとデザイナーは、日々の作業で多くのアプリの統合や、アプリ間を飛び越えたりする必要があります。

幸い、アイデアから完成までデザインに取り組むことができる高度なツールを利用することもでき、あるいは、UXPin のように、デベロッパーがデザインからワークフローに HTML や CSSコードをコピーすることもできます。

他のソリューションと比べると、UXPin は業界で最も包括的な UX デザインツールの１つです。なので、Axure、Proto.io、Figma のような、従来のデザインプロセスの特定のフェーズで使われてきたソフトウェアに代わる、特に魅力的な選択肢となっています。

UXPin があれば、最終的な UX がどうあるべきかを明確にする完全インタラクティブなプロトタイプをデザインできます。UXPin を使って、よりリアルなプロトタイプをデザインする方法をぜひご覧ください。無料お試しはこちら

The post ２０２４年のおすすめ UX デザインツール appeared first on Studio by UXPin.

プロトタイピングツール は、デザイナーが最終製品のレプリカを作成するための製品で、ユーザーテストやステークホルダーへのプレゼンテーションや、デベロッパーへの引き渡しに使われます。デザインツールには、大抵追加機能としてプロトタイプがありますが、専用のツールを使うことで、より高度なプロトタイプができるようになります。

コードベースのデザイン革命を牽引する企業の１つである UXPin の１４日間の無料トライアルにサインアップして、次のデジタル製品や Web デザインのプロジェクトで UXPin の高度なプロトタイプ機能をぜひお試しください。

１．UXPin

UXPin は、デザインを完全にインタラクティブにすることができる、コードベースのプロトタイピングツールです。多くの主要なデザインソリューションとは違い、UXPin にはプロトタイプとテストに必要なものがすべて組み込まれているので、プラグインは必要ありません！

UXPin は、デスクトップ（Mac および Windows）へのダウンロードか、ブラウザでの使用を選択できますが、UXPin のダウンロードの方には、オフラインでも作業を継続できるというメリットがあります。

そして、ブラウザでのプロトタイプのテストや、UXPin の Mirror アプリを使って、iOS や Android などのモバイルデバイスでのプロトタイプの実行ができます。また、UXPin のドキュメントは素晴らしく、１ステップごとの説明やビデオによるチュートリアルで、このツールのあらゆる側面がカバーされています。

さらに UXPin には、他の プロトタイピングツール にはないもう１つの利点として、React コンポーネントで完全に機能するプロトタイプを構築するための UXPin Merge というのものがあります。

Merge を使うと、Git レポジトリや npm 経由での React コンポーネントの同期や、Vue、Angular、Web コンポーネント、Ember 向けの Storybook 統合の使用などのオプションがあります。また、Merge でレイアウトのデザインや、製品を １０ 倍速く立ち上げることができます。

２．Figma

Figma は、最も広く使われているデザインツールの１つであり、多くの YouTube コンテンツや詳細なドキュメントを備えた大規模で熱心なコミュニティがあります。

また、Figma には、複数のデバイスでプロトタイプをテストできるモバイルアプリを備えた「プロトタイピング機能」が内蔵されており、ブラウザでの作業も、Figma をダウンロードしてデスクトップでのオフラインの作業もできます。

ただ、Figma は初期段階のコンセプトには優れていますが、高度なプロトタイプはまだ完璧ではありませんし、デザイナーはユーザーテストに対応できるプロトタイプを作れるとは思えません。

２０２３年、Figma にはインタラクティブなプロトタイプをシンプルにする多くの機能が加わりましたが、Figma の入力はまだ制限されており、UX リサーチャーは、ユーザーの情報入力が必要なアクションをテストすることができません。このツールだと、ユーザーのインタラクションに適応する動的なユーザーフローは作りにくいです。

ただし、Figma で作成したプロトタイプにインタラクションを追加できます。Figma のデザインを UXPin にインポートして、インタラクティブなプロトタイプを作成するためのプラグインを使います。詳しく次のチュートリアルをご覧ください：Figmaのデザインをインタラクティブなプロトタイプにしよう

３．Adobe XD

Adobe XD も人気のある UX デザインツールですが、２０２３年に廃止されました。

Adobe UX のプロトタイプの面白い機能の１つに、特定のインタラクションの時間を節約してくれるオートアニメーションがあります。オートアニメーションで、アニメーションシーケンスの最初と最後のフレームを作成すれば、あとは Adobe XD が埋めてくれます。この機能は全アニメーションで機能するわけではありませんでしたが、パララックス（スクロールエフェクト）のようなものを作成する際にはかなりの時間の節約になりました。

４．Invision

Invision は長年にわたって強力なプロトタイピングコンポーネントでしたが、Figjam に似たコラボレーション用のツールに焦点を当てることにしました。プロトタイピングツールはまだありますが、市場にある他のツールに比べると、２０２４年にインタラクティブな製品を作るには物足りない感じです。

Invision には素晴らしい DSM（デザインシステム管理）機能があり、デザインシステムの管理や、デベロッパーへの CSS やスターターコードの提供に便利です。また、DSM は Storybook と統合されているので、デザイナーとデベロッパーはデザインシステムを同期することができます。ただ残念ながら、デザイナーは UXPin Merge のようにコードコンポーネントを使ったプロトタイプの作成はできません。

５．Framer

Framer は、２０２４年の Web レイアウト作成向けのプロトタイピングツールにおいてトップに君臨するうちの一つです。ラピッドプロトタイピングのための AI 機能を備えており、ユーザーが希望する Web サイトの種類を入力すると、Framer がカスタマイズするデザインを提供します。 Framer では AI が非常に早く取り入れられました。

その他の特筆すべき機能には、レイアウトと挿入メニューがあり、その機能によって、コンセプトのデザインや反復をサッと行うことができます。これは印象的ですが、UXPin にもオートレイアウトとビルトインのデザインライブラリによる同様の機能があります。

Framer の Smart Components 機能には、UXPin の ステートに似た機能がありますが、それほど包括的ではありません。バリアントと変数を使って、スイッチの切り替えやチェックボックスのアクティブ化など、要素にホバーまたは押された状態を付けることができるくらいです。

また、Smart Components は、他のベクターベースのデザインツールからステップアップしたとはいえ、UXPin のステート、インタラクション、エクスプレッション、変数の機能ほど忠実ではありません。

その他のデザインツール比較

その他にも、よく使われている以下のようなプロトタイピングツールと UXPin の比較もご覧ください：

• Marvel App
• Justinmind
• Proto.io
• Axure
• Zeplin
• Balsamiq

UXPin を体験してみよう

デザインツールをお探でしたら、上記の５つも含め、デザイナーが見た目のいい Lo-Fi（低忠実度）ワイヤーフレームやモックアップを作成するのに使えるのがたくさんあります。

ただ、UX のデザインにはテストが必要であり、つまりモックアップではなく、Hi-Fi（忠実度の高い）プロトタイプが必要だということです！UX デザイナーはコード化された製品をデザインしますが、画像ベースのプロトタイプでユーザーテストを行います。ただ、それだと正確で意味のある結果を得ることは不可能であり、必ずユーザビリティの問題が発生し、それが最終製品に反映されてしまいます。

そこで、UXPin のようなコードベースのツールがあれば、デザイナーは機能するHi-Fi（忠実度の高い）プロトタイプを作成できるので、ユーザビリティの参加者は、ボタンや入力が機能することを「想像」する必要はありません。

UX デザインの革命に繰り出しませんか。１４日間の無料トライアルにサインアップして、UXPin でより優れたプロトタイプとテストをぜひご体験ください。

The post ２０２４年版 – プロトタイピングツール ５選 appeared first on Studio by UXPin.

 デザイン制約 は、どんな企業規模であろうとプロジェクトとその成果に少なからず影響を与えます。経験が豊富なデザイナーは、仕事を形作る「制約」について向き合い、うまく活かすことで真の創造性がもたらされることを認識しています。

このブログでは、シニアデザイナーにとって身近な課題であるデザイン制約について掘り下げます。

主なポイント

• デザイン制約とは、デザインプロセスで行われる創造的で技術的な決定に影響を与える制約のことをいう。
• 最初のステップは、制約を認めることであり、これらの制約がUXデザイナーに素晴らしいデザインの成果をもたらすことを制約していることを認めること。
• デザイン制約を理解することで、悪影響を最小限に抑える、または問題を完全に取り除くことができる。

UXPin Mergeでプロトタイピングの制約をなくし、デザイナーとエンジニアのギャップを埋め、優れたユーザー体験を提供しましょう。

UXPin Mergeに関する詳細およびアクセスリクエスト方法については、こちらのページをご覧ください。

 デザイン制約 とは

デザイン制約とは、デザインプロセスにおいて、内的要因や外的要因によって課される制限や制約のことです。この「制約」は最終製品に影響を与えるため、組織の全員が制約について認識し、毎回各プロジェクトの開始前にその制約についてしっかりと考えることが非常に重要です。

デザイン制約は大きく分けると以下のようなものがあります：

• 技術的制約：製品の技術スタックとエンジニアリングのチームによるもの
• 金銭的制約：部門予算やプロジェクト予算
• 法規制の制約：従う必要がある法律
• 組織の制約：文化、構造、方針、官僚主義
• 自主規制：各デザイナーのワークフローとクリエイティブな意思決定
• 才能の制約：デザイナーのスキルや経験、プロとしての欠点
• プロジェクト独自の制約：時間、予算、利用可能なチームメンバーなど、プロジェクトに関連する制約

これらをさらに詳しく調べ、チームメンバーやステークホルダーのデザイン制約への対処法について見ていきましょう。

１．技術的制約

技術的な制約は、デザイナーが創造的で革新的な限界をどこまで押し広げられるかを左右するため、デザインプロジェクトに大きな影響を与えます。

以下に技術的制約の例を挙げてみましょう：

• デバイスとOS（オペレーティングシステム）の制限：iOSとAndroidの制約、画面サイズ、処理能力など
• アクセシビリティの制約：音声コントロールとスクリーンリーダーがデザイン決定に与える影響
• 性能の制約：ユーザー帯域幅/インターネット接続、製品サーバー、および技術スタックの影響
• 統合とAPI：外部サービスからの制限とAPI要件
• 技術スタックの制約：フロントエンドとバックエンドの技術によるデザインプロセスへの影響

２．金銭的制約

金銭的制約は、人材、ツール、ユーザーリサーチ、プロジェクトスコープ、テクノロジーなど、デザインプロセスの多くの分野に影響を与えます。多くの人は金銭的制約を「障害」と見なす一方で、ブートストラッピングや回避策を通して創造的思考やデザインイノベーションが促されることがよくあります。

金銭的制約がデザインプロセスに与える影響には、以下のようなものがあります：

• 各分野（リサーチ、ワイヤーフレーム、プロトタイピング、インタビュー、テストなど）の範囲が制限される
• イテレーションとテストの回数が制限される
• デザイナーが使うツールが限定される
• デザインチームの規模とスキルレベルが決まる

３．法的および規制上の制約

法的制約は、UXプロジェクトに関してコンテンツとユーザーデータに最も影響を与えます。法律は国によって変わるため、デザイナーは法律顧問やステークホルダーからのアドバイスに頼ることになります。

法的制約がデザインに与える影響は以下のようなものがあります：

• プライバシー法：デザイナーが収集するデータ、収集方法、ユーザーへの法的通知、許可を得る方法などを規定する法律で、特に欧州連合（EU）の一般データ保護規則（GDPR）やカリフォルニア州消費者プライバシー法（CCPA）などがある。
• アクセシビリティに関する法律: デザイナーは、さまざまな障がいがあるユーザーのために法的に利用しやすいUI（ユーザーインターフェース）にする。（例：米国のADA（Americans with Disabilities Act ：障がいを持つアメリカ人法））
• 知的財産法：文字、画像、動画などのオリジナル作品の著作権。さらに、デザイナーは競合他社やブランドの知的財産、商標、その他の法的保護を侵していないかを考慮しないといけない。
• 業界独自の規制：金融や医療など、プライバシーやセキュリティに関する法律があり、ログインや認証の手順など、デザインに大きな影響を与える業界もある。

４．組織的制約

組織的制約とは、会社の他の部分によってデザインに課される制約を指します。多くは組織の価値観、文化、会社のビジョン、他部門との利害の競合に関係します。

組織的制約の例としては、以下のようなものがあります：

• 時間的制約：ステークホルダーが設定する締め切りは、デザイナーのデザインアイデアの調査やプロトタイプの作成、テストの実施法に影響を与えることがある。
• ブランドガイドライン：組織のブランドは、スタイルやメッセージの決定に影響を与える。
• マーケティングとビジネス目標：デザイナーは、「顧客のニーズ」と「組織の目標」とのバランスをとらないといけないことがよくある。
• デザインシステムの制約：利用可能なコンポーネント、デザイン原則、スタイルガイド、ガイドライン、デザインシステムガバナンスは、デザイナーが製品を作成する方法に影響を与える。
• 組織のサイロ化：連絡や連携がきちんとなされないと、進捗を妨げるサイロ化につながり、これによって重複作業、遅延、デザインドリフト、不整合、その他の摩擦につながることがよくある。
• デザインの価値：組織がUX部門をどのように認識しているかがリソースの配分や賛同に影響を与えてしまい、デザイナーができることが制限される可能性がある。

５．自主制約

デザイナー自身の制約としては、使用するデザインツール、タスクを完了するためにかかる時間、製品のデザインシステム使用の有無など、デザインプロセス中の選択肢やオプションに関連して生じます。

６．人材的制約

人材的制約とは、デザインチームが利用できる「スキル」と「スペシャリスト」に関するものです。管理者はお互いを補い合う人材を配置できるように、各デザイナーのスキルセットと専門知識を把握しておくことが重要です。人材的制約を理解することで、管理者は適切な人材を置いたり、特定のデザインプロジェクトのために専門業者を雇うタイミングを計ることができます。

７．プロジェクト特有の制約

プロジェクトの制約が、他の場合は存在しない、あるいは組織にとって稀なデザイン上の問題を引き起こします。例えば、デザイナーは慣れた時間枠よりも短い時間枠でプロジェクトを完了しないといけない可能性があると、望ましい結果を達成するのにワークフローを適応させたり、ツールを切り替えたりすることになります。

 デザイン制約  – その解決方法

多くの組織では、制約の克服はDesignOpsの仕事です。DesignOpsチームは、部門のアウトプットと組織の価値を最大化するために、このような制約や障害を軽減しないといけません。

この問題ベースのフレームワークで、組織が抱える最大の課題からデザイン制約を克服することができるでしょう。問題ベースのアプローチでは、具体的な問題とそれに関連する制約を解決することができるため、そのインパクトが大きくなります。

• 問題の定義：市場投入までの時間短縮や、デザイナーの生産性向上など、どのような課題を解決しようとしているか。
• 制約の特定：この問題に関連する制約、つまり予算、資源、時間、技術的な制約などをリストアップする。
• 制約の優先順位付け：どの制約が最も重大かを判断し、それに従って優先順位をつける。
• ソリューションのブレーンストーミング：適切な専門家、チームメンバー、ステークホルダーと会ってソリューションのブレーンストーミングを行い、可能性があるもののリストを作る。
• ソリューションの評価：各アイデアの長所と短所を検討し、実現可能性が最も高く、潜在的な影響が最も大きいものを決定する。
• ソリューションの選択：最良の結果をもたらすと思われるソリューションを選択し、実施するための計画を立てる。
• テストと反復：ソリューションの効果を測る KPI （重要業績評価指標）を作成し、結果を最適化するために時間をかけて微調整する。遠慮はせずに、パフォーマンスの悪いアイデアは放棄して新しいアイデアは反復する。

問題の特定：有効性 と 効率性

UXPinが主催したこちらのウェビナーでは、DesignOpsのエキスパートであるPatrizia Bertini氏がソリューションの結果を測るために実務者がどのように問題を解決するべきかについて説明しました。ここでは「有効性」と「効率性」の違いを認識することが不可欠であると主張しています。

有効性は、以下のような定性的なメトリクスを用います：

• 共感と継続的なユーザーエンゲージメント
• アイデア出しと実験のサイクルタイム
• チームのスキル構成（スキルマトリックス）
• デザインスキルの分布
• 部門横断的パートナーによるデザインの価値認識
• デザイナーの満足度と定着率

効率性は、以下のように数字、パーセンテージ、比率を用いて測定可能であり、定量化できます：

• ツールの ROI （コスト／エンゲージメント／アドプション）
• テストとプロトタイプのリードタイム（時間）
• 品質レビューの回数と種類
• チームの生産性（リソースの利用率）
• エンドツーエンドの納期（時間）

UXPin Mergeで制約を減らす

従来のデザインワークフローや画像ベースのツールは、デザイナーに多くの制約をもたらします。特にプロトタイプの忠実度や機能性は、以下のような多くの問題を引き起こします：

• ユーザーテストの範囲が限られる
• デザインプロセス中にユーザビリティの問題を発見できない
• 問題解決の機会が少ない
• ステークホルダーの理解度が低く、購買意欲に影響する
• ビジネスチャンスを特定する能力が低い
• デザイナーとデベロッパーの連携が不十分で、デザインのハンドオフが大変。

UXPin Mergeは、製品のコンポーネントライブラリをUXPinのエディタと同期させることで上記の問題やその他の問題を解決するします。デザイナーは、エンジニアが最終製品の開発で使用する同じUI要素をデザインプロセスで使えるようになります。

Mergeコンポーネントは完全にインタラクティブで、UXPin上でもレポジトリや最終製品とまったく同じように機能します。このインタラクティブ性によって、デザインチームはコンポーネント駆動のワークフローを利用できるようになり、プロジェクト範囲が拡大し、テストと反復が大幅にスピードアップします。

Mergeではデザイナーとエンジニアは共通の言語を使用することができるため、サイロや運用上の制約をなくします。Mergeを使ったハンドオフは摩擦がなく、エンジニアがすでに同じコンポーネントライブラリを持っているため、ドキュメントや説明が少なくて済みます。UXPinがJSXをレンダリングするので、エンジニアは、コピー＆ペーストだけでコンポーネントのプロップに適用できます。

また、テストにおいての制約も大幅に減ります。ユーザビリティテスト参加者とステークホルダーは、最終製品と同じようにプロトタイプを操作できるため、反復して結果を改善するための有意義で実用的な結果を得られるのです。

「UXPin Merge を使うことで、ステークホルダーからのフィードバックを非常に早く行えるようになりました。プロトタイプのリンクを共有するだけで、相手は空いてる時間で自由に閲覧できますし実際にプロトタイプを操作してもらえます。また、Comment機能を使用して相手からのコメントをもらうこともできます。もらったコメントを参考にして改善したら［解決済み］としてマークできるので、使いやすいです。」 – Erica Rider, UX Lead EPX – PayPal

UXPin Mergeのコードベースのデザインソリューションで、プロトタイプの制限をなくしませんか？

時間の制約が厳しい場合でも、反復作業をスピードアップして高品質なプロジェクトを実現できます。

詳細とアクセスリクエスト方法についてはこちらのページをぜひご覧ください。

The post ７つの デザイン制約 とその解決方法 appeared first on Studio by UXPin.

デザインコミュニティの一員である魅力の１つとして、年齢や地位などに関わらず多くのデザイナーがアイデア交換や知識の共有ができることです。

駆け出しのデザイナーでも、オピニオンリーダーであっても、 デザイン会議 を通して新しい学びが見つかるでしょう。

また、 デザイン会議 ではすべてがUX/UIのコミュニティ向けを対象としているわけではなく、日々の業務でUX/UIに携わる人々を対象としている点が良いところでもあります。

プロダクトマネージャーやデベロッパーなど、デザインと密接に関わる他分野のプロでも自分に合ったイベントを見つけることができます。

UXPin Mergeでデザインの成熟度を高めてみませんか？インタラクティブコンポーネントをプロトタイプに使用して、よりコラボレーティブなデザインプロセスを構築し、デザイナーとデベロッパーのギャップを埋めましょう。

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

１月

 QRCA 2024 Annual Conference

QRCA（Qualitative Research Consultants Association）の会議では、デザイナーが次の時代の定性的調査に備えるための調査方法、ツール、レッスンについて取り上げます。

• 開催日：２０２４年１月２２日～２５日
• 料金：有料
• 場所：オンラインまたは現地（コロラド州・デンバー）
• 対象者：UXリサーチャー、マーケティングリサーチャー
• 共通トピック：定性的調査、調査方法、調査ツール

UX360 Research Summit 2024

今年で３回目を迎える、完全に研究に特化したこのカンファレンスでは、Google、Meta、Dropbox、Deliver Hero などのトップ企業のUXリサーチャーがラインナップされています。

• 開催日：２０２４年１月３０日、３１日
• 料金：有料
• 場所：オンライン
• 対象者：UXリサーチャー、UIデザイナー、UXデザイナー
• 共通トピック：リサーチ、デザイン戦略、HCD（人間中心設計）

Design Matters Mexico

Design Mattersに参加し、メキシコ人デザイナーが語るローカルデザインとテクノロジーと人間性の交差について聞いてみませんか。

• 開催日：２０２４年１月３１日、２月１日
• 料金：有料
• 場所：メキシコシティ
• 対象者：UXリサーチャー、UIデザイナー、UXデザイナー
• 共通トピック：インクルーシブ、デザインの未来、テクノロジー

２月

２０２４年の２月はどうでしょう？皆さんの目に留まりそうな会議がいくつかあるので、早速見てみましょう。

AXE CON 2024

アクセシブルなデジタル体験の構築やテストおよび保全に焦点を当てた仮想アクセシビリティ会議への参加に申し込んでみませんか。

• 開催日：２０２４年２月２０日～２２日
• 料金：有料
• 場所：オンライン
• 対象者：デザイナー
• 共通トピック：アクセシビリティ、UX

Product World（ハイブリッド）

シリコンバレーの一流ハイテク企業の技術製品担当者が製品のサクセスストーリーを紹介する製品会議です。

• 開催日：２０２４年２月２１日～２９日
• 料金：有料
• 場所：オンラインおよびサンフランシスコ・ベイエリア
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：連携、リーダーシップ、育成

ConveyUX 2024（ハイブリッド）

AI主導の時代に、UXの世界で何が起きているのかをのぞいてみましょう。

• 開催日：２０２４年２月２７日～２９日
• 無料：なし
• 場所：オンラインおよびアメリカ・シアトル
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：デザインプロセス、デザインの将来性、AI

HUCCAP 2024

ConveyUXと同時期に、イタリアのローマでHCI（ヒューマン・コンピュータ・インタラクション）会議が開催されます！学際的な環境でHCIについて議論しませんか？

• 開催日：２０２４年２月２７日～２９日
• 料金：有料
• 場所：オンラインおよびイタリア・ローマ
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：HCI（ヒューマンコンピューターインタラクション）

３月

ACM IUI 2024

AIデザインに関心がある方はとくに見逃せません！AI（人工知能）と HCI（ヒューマンコンピュータインタラクション）の交差点における進歩に焦点を当てた内容です。

• 開催日：２０２４年３月１８日～２１日
• 料金：有料
• 場所：オーストラリア・シドニー 
• 対象者：プロダクトデザイナー、リサーチャー
• 共通トピック：情報アーキテクチャ、AI

Leading Design New York

Clearleft社による デザイン会議 の１つがニューヨークで開催されます。

• 開催日：２０２４年３月２０日、２１日
• 料金：有料
• 場所：アメリカ・ニューヨーク
• 対象者：UXデザイナー
• 共通トピック：キャリア、リーダーシップ、デザインの未来

UX Copenhagen（ハイブリッド）

毎年恒例の 「Human Experience（ヒューマン・エクスペリエンス） 」会議の第１０回目になります。今年は過剰消費を検証し、脱成長に取り組みます。

• 開催日：２０２４年３月２０日、２１日
• 料金：有料
• 場所：オンラインおよびデンマーク・コペンハーゲン
• 対象者：UXデザイナー、UXリサーチャー
• 共通のトピック：UXデザイン、リーダーシップ、未来

４月

Information Architecture Conference

情報アーキテクトやデザイナーなど、UIや情報環境を構築および管理する人たちのための主要なカンファレンスのひとつであり、今年は、AIが情報アーキテクチャに与える影響の検証がテーマとなります。

• 開催日：２０２４年４月９日～１３日
• 料金：有料
• 場所：オンライン
• 対象者：プロダクトデザイナー、リサーチャー、プロダクトマネージャー
• 共通トピック: 情報アーキテクチャ、AI

UX Research Festival（ハイブリッド）

ヨーロッパ最大のUXリサーチ・コミュニティであるUXInsightsの考案です。この会議では、オランダのブレダで開催されるUXリサーチに関する素晴らしい講演を聞くことができます。

• 開催日：２０２４年４月１５日～１７日
• 料金：有料
• 場所：オンラインおよびオランダ・ブレダ
• 対象者：リサーチャー、デザイナー
• 共通のトピック：UXリサーチ、ResearchOps

５月

CHI 2024（ハイブリッド）

今年は、ACM の CHI の年次会議は美しいハワイで開催されます。この会議は、最先端のテクノロジーの「波」を推し進め、人間とコンピューターの相互作用における新たな発展の「波に乗る」ことに焦点を当てているという意味を込めて「Surfing the World（世界をサーフィンする）」というテーマを取り入れています。

• 開催日：２０２４年５月１１日～１６日
• 料金：有料
• 場所：オンラインおよびハワイ州・ホノルル
• 対象者：リサーチャー
• 共通トピック：リサーチツール、リサーチ方法

UXDX Community USA （ハイブリッド）

UXDXは、世界中からUXデザイナー、デベロッパー、プロダクト担当者が集い、組織・チームの連携についてのアイデアを共有する人気の会議です。

• 開催日：２０２４年５月１５日～１７日
• 料金：無料
• 場所 オンラインおよび会場
• 対象者：UXデザイナー、UXリサーチャー、デベロッパー、プロダクトマネージャー
• 共通トピック：リーダーシップ、連携、デザインシステム

UXistanbul

UXServices が主催するこのカンファレンスは、Web3 の愛好家やこの分野に興味のあるデザイナーが集まる場です。ぜひ Discord でご参加ください。

• 開催日：２０２４年５月２１日～２３日
• 料金：有料
• 場所 バーチャル 
• 対象者：プロダクトデザイナー、研究者、プロダクトマネージャー
• 共通のトピック NFT、メタバース

UXLx

太陽が眩しいリスボンで、デザイナー仲間に加わりませんか？UXの知識を吸収し、志が同じなデザインーとネットワークを広げ、デザインスキルを磨きましょう。

• 開催日：２０２４年５月２１日～２４日
• 料金：有料
• 開催地：ポルトガル・リスボン
• 対象者：デザイナー
• 共通のトピック：UX、デザインプロセス

From Business to Buttons 2024

ストックホルムで、UXと CX（カスタマーエクスペリエンス）について考える１日にしませんか？ビジネスに精通したデザイナーのための素晴らしい会議ですよ。

• 開催日：２０２４年５月２４日
• 料金：有料
• 開催地：スウェーデン・ストックホルム
• 対象者：デザイナー、プロダクトマネージャー
• 共通トピック：デザインプロセス、デザインインパクト、リーダーシップ

ProductCon New York

Product SchoolのProductConが５月にも開催されます。製品管理において、また製品管理の将来性について学びたい人向けのプロダクト デザイン会議 です。

• 開催日：２０２４年５月２９日
• 料金：有料
• 場所：ニューヨーク
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：リーダーシップ、製品管理の未来、製品の成長

WebExpo

ヨーロッパの素晴らしい都市プラハにいる、Webデザイナー、デベロッパー、マーケティング担当者なと一緒にWebデザインと開発の革新について語り合いましょう。

• 開催日：２０２４年５月２９日～３１日
• 料金：有料
• 場所：チェコ・プラハ
• 対象：デザイナー、デベロッパー、プロダクトマネージャー
• 共通トピック：Webデザイン、フロントエンドデザイン、UX

６月

ACE!

このポーランドの会議には「 アジャイルソフトウェア開発」と「プロダクトデザイン＆マネジメント」２つのトラックがありますが、プロダクトデザイナー向けの内容も多く含まれます。

• 開催日：２０２４年６月１３日、１４日
• 料金：有料
• 場所：ポーランド・クラクフ
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：リーダーシップ、製品戦略、製品成長

Pixel Pioneers

たった１日ではありますが、Pixel Pioneers は UX/UI デザイナーやフロントエンドデベロッパーのインスピレーションを刺激するプレゼンテーションが満載です。

• 開催日：２０２４年６月１４日
• 料金：有料
• 場所：イギリス・ブリストル
• 対象者：プロダクトデザイナー、デベロッパー、リサーチャー
• 共通トピック：HCD、インクルーシブデザイン、デザインの未来

UXPA 2024

刺激的な講演をお探しでしたら、フォートローダーデールで開催される UXPA の会議がお薦めです。これは、米国のデザイン会議です。

• 開催日：２０２４年６月２４日～２７日
• 料金：有料
• 場所：米国フロリダ州フォートローダーデール
• 対象者：プロダクトデザイナー、リサーチャー
• 共通トピック：人間中心設計、リーダーシップ、研究

DRS 2024 BOSTON

DRS（Design Research Society）主催のこの会議は、４つのR（Resistance、Recovery、Reflection、Reimagination）をテーマにしており、２０２４年のデザインのあり方に関連するものだと確信しています。

• 開催日：２０２４年６月２４日～２８日
• 料金：有料
• 場所：アメリカ・ボストン
• 対象者：デザインリサーチ
• 共通トピック：リサーチ、リーダーシップ、デザインの未来

HCI INTERNATIONAL 2024

HCI 国際会議は、例年はスウェーデンのヨーテボリで開催されますが、今年はアメリカのワシントンDCで開催されます。ぜひ参加されることをお勧めします。インタラクション・デザイナーにとってはとくにお楽しみですよ。

• 開催日：２０２４年６月２９日～７月４日
• 料金：有料
• 場所：オンライン
• 対象者：製品デザイナー、リサーチャー
• 共通トピック: HCD、 リサーチ、リーダーシップ
• ７月

#mtpcon Digital Americas

Mind the Product会議が来年の夏、南北アメリカで開催されます。

• 開催日：２０２４年７月１５日～１９日
• 料金：有料
• 場所：オンライン
• 対象者：プロダクトデザイナー、プロダクトマネージャー、デベロッパー
• 共通トピック: リーダーシップ、製品の未来、製品の成長

８月

ProductCon

Product School が主催するProductConは、製品管理についてより深く学びたい製品担当者のための１日会議です。オンラインのデザイン会議なので、いつでも見ることができます。

• 日時：２０２４年８月
• 料金：無料
• 場所：オンライン
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：リーダーシップ、製品イノベーション、連携

UXDX APAC 2024

またまたUXDXイベントが8月にも開催されます！プロダクト、UX、デザイン、開発の各チームが上手く協力するには？

• 開催日：２０２４年８月１３日～１５日
• 料金：有料
• 場所：オンライン
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック: プロダクトの方向性, デザインの拡張, 検証, プロダクトの成長

UX Australia（ハイブリッド）

今年で１６回目を迎えるUX Australiaは、UX、プロダクト、サービスデザイン、そしてリサーチ、コンテンツ、オペレーション、マネジメントなど幅広い分野に焦点を当てています。

幅広い分野のデザイナーが一堂に会し、プロダクトデザインについて語り合います。

• 開催日：２０２４年８月２７日～３０日
• 料金：有料
• 場所：オーストラリア・メルボルン
• 対象者：UXリサーチャー、プロダクトマネージャー、プロダクトデザイナー
• 共通トピック：リサーチ業務、リーダーシップ、リサーチ方法、リサーチツール

UX Nordic（ハイブリッド）

スキルを磨き、UXリサーチャー、デザイナー、またはライターとしてのキャリアを磨きませんか？他のデザインプロフェッショナルと出会い、自分の興味を探ってみましょう。

• 開催日：２０２４年８月２８日〜３０日
• 料金：有料
• 場所：オンラインおよびノルウェー・オーフス
• 対象者：UXリサーチャー、UXデザイナー、UXライター
• 共通トピック：デザインプロセス、リーダーシップ

９月

SmashingConf Freiburg 2024

UXアーキテクト、UI デベロッパー、またはエンジニアとの作業が多いプロダクトデザイナーでしたら、開発とデザインをとてもスムーズに融合させるこの UXデザイン会議は見逃せません。

• 開催日：２０２４年９月９日～１１日
• 料金：有料
• 場所：ドイツ、フライブルク
• 対象者：プロダクトデザイナー、デベロッパー
• 共通トピック：アクセシビリティ、ウェブ開発、デザインプロセス

１０月

World Usability Conference

オーストリアで他のUXプロフェッショナルとユーザビリティについて議論し、厳選されたスピーカーが有意義で実践的なインサイトを共有してくれる講演やマスタークラスに参加しませんか。

• 開催日：２０２４年１０月１５日～１７日
• 料金：有料
• 場所：オーストリア・グラーツ
• 対象者：プロダクトデザイナー、UXリサーチャー
• 共通トピック：デザインプロセス、ユーザビリティ、持続可能性

Design Matters Copenhagen（ハイブリッド）

この有名な デザイン会議 は、「デザイナーの、デザイナーによる、デザイナーのための会議 」と自ら宣伝しています。そして本当にそうなのです！ぜひ参加されることをお勧めしますが、もし参加できない場合は、彼らの講演のライブラリをチェックしてみてください。

• 開催日：２０２４年１０月２３日～２５日
• 料金：有料
• 場所：デンマーク・コペンハーゲン
• 対象者：プロダクトデザイナー、UXリサーチャー
• 共通トピック：チュートリアル、デザインプロセス、リーダーシップ

１１月

Leading Design London

ロンドンでデザインについて話し合いましょう。

• 開催日：２０２４年１１月６日、７日
• 料金：有料
• 場所：イギリス・ロンドン
• 対象者：UXデザイナー
• 共通トピック：キャリア、リーダーシップ、デザインの未来

Push UX 2024

素敵な街ミュンヘンで、デザインリサーチやプレゼンテーションなど、UX デザイナーの日常的な活動について話し合う、同じ志を持った UX プロフェッショナルと出会いませんか。

• 開催日：２０２４年１１月７日、８日
• 料金：有料
• 場所：ドイツ・ミュンヘン
• 対象者：プロダクトデザイナー、UXリサーチャー
• 共通トピック：デザインプロセス、デザインリーダーシップ、製品成長

Web Summit Lisbon

晴天に恵まれたリスボンで、Web デザインとWeb 開発に関する活発なディスカッションに参加しませんか？

• 開催日：２０２４年１１月１１日～１４日
• 料金：有料
• 開催地：ポルトガル・リスボン
• 対象者：プロダクトマネージャー、デベロッパー、プロダクトデザイナー
• 共通トピック：Webデザイン、Web開発

２０２４年参加したい デザイン会議 は見つかりましたか？

２０２４年は、デザインとプロダクトマネジメントでの刺激的で充実なコンテンツでいっぱいになりそうですね。

あなたにぴったりの会議は見つかりましたか？ここで紹介した以外にも、新しいイベントがあれば、またお知らせします。

 デザイン会議 で得た知識を実践してみましょう！サイロ化された環境で作業するのではなく、デザインと製品にまたがって使えるインタラクティブコンポーネントを使用して、チームの連携を強化しましょう。

UXPin Mergeの詳細については、こちらをぜひご覧ください。

The post ２０２４年のおすすめ デザイン会議 appeared first on Studio by UXPin.

UX デザインプロセスは、製品のUX（ユーザーエクスペリエンス）をデザインするうえで必要な「体系的、反復的、構造化」された一連のアクションです。 これによって、チームは再現しやすいプロトコルに従って、組織の品質基準を満たしながら製品を提供できるようになります。

デベロッパーがアプリを構築するのと同じUIコンポーネントを使ってプロトタイプを構築することで、デザインプロセスのスピードを上げませんか。 厳しい納期を守り、高品質の製品をリリースしましょう。詳細は UXPin Mergeのページをぜひご覧ください。

UX デザインとは

UX (ユーザー エクスペリエンス ）デザインとは、人間の問題を解決するためのデジタル製品のデザイン方法論であり、 この人間中心のデザインアプローチによって、デザインチームは仮定ではなくユーザーのニーズに基づいた意思決定を行うことができます。

この人間中心のアプローチの中核となるのは「共感」であり、UX デザイナーは「ユーザーがデジタル製品を使って達成したいこと」と、「その過程で遭遇する可能性のあるペインポイント（問題点）」を理解しないといけません。

UX デザインプロセスとは

UX デザインプロセスは、UXデザインチームがプロジェクトを完了するのに使う反復的な段階的な方法論であり、デザイン思考プロセスから派生したものです。 デザイン思考のプロセスと同様に、UX デザイナー時間をかけてユーザーに共感し、ビジネスや背景について学び、問題の範囲を確定します。

UXデザインプロセス と デザイン思考プロセス の違いとは

デザイン思考プロセスは、人間の問題に対するユーザー中心のソリューションを開発するための５段階のプロセスです。対する UXデザインプロセスは、UXプロジェクトを実現するためのデザイン思考を組み込んだ、多段階のエンドツーエンドの方法論です。

企業は UXデザインプロセスはデザイン思考の原則を基にしていますが、手順や方法は若干異なる可能性があります。

UX デザインプロセスが重要な理由

企業が UX デザイン プロセスを標準化するのには、以下のような理由があります：

• プロジェクトが確実に品質と一貫性の基準を満たしているようにする
• デザイナーが偏見や思い込みを持たずにソリューションをデザインできるようにする
• デザイナーが多くのアイデアをテストおよび反復して、最適なソリューションを見つけることができるようになる
• チームや部門間の連携を促す
• 設定されたプロトコルに従うことで手戻りのリスクを軽減する
• ステークホルダーがプロジェクトの進捗状況を追跡できるようにする
• 隠れたリスクと機会を特定する

UX デザインプロセスの７ステップとは

一般的な UXデザインプロセスには、製品の目標の確定からデザインハンドオフ、すべてが想定通りに動作することの確認まで、７つのステップがあります。

ステップ 1: プロジェクトと範囲の確定

UX デザインプロセスの最初のステップでは、複数の部門のチーム メンバーとステークホルダー (通常は以下の部門の代表者で構成) とともにプロジェクトの目標と範囲を確定します：

• ビジネス – プロジェクトのビジネス要件と目標について説明する。
• デザイン – デザインの前に何をする必要があるかを伝え、プロジェクトに期待されることを管理する。
• 製品 – コンテクストを共有し、デザインに必要なタイムラインとリソースの計画を支援する。
• 技術 – UXデザインの実現可能性と技術的制約を確定する。

この初期のデザインフェーズは、新しい製品や機能が解決しなければいけない問題を特定することを目的としています。製品チームは、プロジェクトの範囲、計画、成果物、納期についても概説します。

ステップ 2: UXリサーチの実行

次に、デザイナーは問題を調査して、考えられる解決策を探します。 そしてこのリサーチ段階では、UX デザイナーは次のようなタイプのリサーチを実施します。

• ユーザー調査：潜在的なユーザーを調査して、ユーザーが誰であるか、何を必要としているか、どのようなコンテキストで操作しているかを理解する。 また、ユーザーのニーズを調査したり机上調査を行ったりするために、フォーカス グループを招待する場合があり、 UX リサーチの結果は、ユーザーペルソナやユーザージャーニーマップなどがある。
• 市場調査：市場を分析して、市場の細分化と製品の差別化を決定する
• 競合調査：競合他社が同様の問題をどのように解決し、機会を特定するかを理解するための競合分析。
• 製品調査：既存の製品からのインサイトとアナリティクスを分析して、ユーザーの行動を理解する。

ステップ 3: ソリューションの下書きを作成する

ユーザー、市場、競争環境を明確に理解した上で、デザイナーは、ソリューションがどのようなものになるかについての初期の下書きを作成すべくブレインストーミングのセッションを実行でき、これは、多くの場合「アイデア出しの段階」と呼ばれます。そしてデザイナーは、初期のビジュアル デザイン計画中に紙とペンを使うことも、デジタル UX ツールに直接移行する場合もあります。

低忠実度の手法には、以下のようなものがあります。

• スケッチ：UIの手描きのスケッチ
• ペーパープロトタイプ：プロトタイプの紙バージョン
• ワイヤーフレーム：基本的な線と形状を特徴とする紙のプロトタイプのデジタル バージョン
• 低忠実度のプロトタイプ: ワイヤーフレームを使ってユーザーフローと情報アーキテクチャをテストするデジタル プロトタイプ

また、チームは、デザインスプリントを使って、ステークホルダーや他のチーム メンバーと特定の問題を解決することもあります。

ステップ 4: 高忠実度のモックアップとプロトタイプをデザインする

次に、UIデザイン チームはワイヤーフレームをモックアップに変換し、最終製品と同様の外観と機能を備えた忠実度の高いプロトタイプを構築します。 企業にデザインシステムがある場合、デザイナーは UIコンポーネントライブラリを使ってインタラクティブなプロトタイプを構築します。

ステップ 5: ユーザビリティテストを実施する

高忠実度プロトタイプの主な目的はユーザビリティテストであり、UX デザイナーは、以下の目的でそのプロトタイプを実際のユーザーでテストします：

• アイデアの検証
• ユーザビリティの問題の特定
• アクセシビリティのテスト

ステップ ２〜５は反復可能であり、デザイナーはテスト結果を使って、ステージ ２または３に戻り、有用性、実行可能性、実現可能性の基準を満たすソリューションが見つかるまでアイデアを繰り返します。

ユーザーテストは第５段階ですが、デザインチームはUXデザインプロセス全体を通して複数のテストを実施し、アイデアや仮説を検証することに注意することが重要です。 そしてこのようなテストには、チームメンバーとの内部テスト、またはフィードバックのためにアイデアやプロトタイプをステークホルダーと共有することが含まれます。

ステップ 6: デザインハンドオフを手配する

UXデザインプロセスの最後から ２番目の段階はデザインハンドオフです。ここでは、デザインチームが最終デザインとそのドキュメントを開発チームに引き渡し、エンジニアリング プロセスを開始します。

デザインハンドオフは UXプロセスの終盤に近いですが、デザイナーとエンジニアの連携は、デザインが技術的な制約を満たしていることを確認しながら、デザインから開発への移行を効率化するためのアイデア作成中に始まります。そして彼らの連携は、やり取りがしやすくなる色々なツールを通じて促されます。

関連記事：デザイナーとデベロッパーの連携をダメにする5つの間違い

ステップ 7: 製品を起動する

UXデザインプロセスの最終段階は、新しいリリースの起動と明確な検査です。 新しいリリースがプロジェクトのビジネス目標、UX、アクセシビリティ要件を満たしていることを確認する時期が来ました。

いいUXデザインプロセスのベスト プラクティス

UXデザインプロセスはすべての組織、プロジェクト、チームで同じではありませんが、プロセスを効率化するためにデザイナーが従うことができるベスト プラクティスがいくつかあります。

ユーザー中心の思考を適用する

デザイナーは、デザインが確実にユーザーのニーズを満たすものであるようにするために、デザイン決定の中心にエンドユーザーを置かないといけません。 そしてこの人間中心の考え方により、無関係なコンポーネントや機能のコストを削りながら、ユーザーが望む製品を提供できます。

共感を実践する

ユーザー中心の考え方を維持する方法の 1 つに、ユーザーへの共感があります。しかし、デザイナーがUXデザインプロセスを進めていくと、ユーザーを重視することから、見栄えは良くても特定のユーザーニーズには応えられない機能のデザインに移ってしまうことがあります。

なので、UXデザインプロセス全体を通じて共感を実践することで、デザイナーはユーザーのペインポイントの解決に集中できるようになります。

デザインシステムを構築する

デザインシステムは、組織全体の一貫性と整合性を強化しつつ、市場投入までの時間を大幅に短縮できます。 デザインシステムを最初から構築する余裕がない場合は、MUIや Bootstrapなどのテーマ対応のオープンソース コンポーネントライブラリの使用を検討しましょう。

ちなみに、UXPinには、マテリアルデザインUI、Bootstrap、iOS、Foundationなどのデザイン ライブラリが組み込まれているため、デザイン チームはモックアップやプロトタイプをサッと作成できます。

デザイナーが開発コンポーネントの完全に機能するプロトタイプを構築できるように、UXPinのデザインエディタをコンポーネントライブラリに連携するツールであるUXPin Merge を使ってプロトタイプを次のレベルに引き上げましょう。

デベロッパーとの連絡および連携

UXデザインプロセスを成功させるには、連絡と連携が非常に重要であり、 デザイナーは他のデザイン チームとつながり、エンジニア、ビジネス マネージャー、製品チーム、ステークホルダーとオープンなコミュニケーションをとらないといけません。

DesignOpsで、他の時間のかかる運用タスクや管理タスクを効率化しながら、より良い連携と連絡が促されます。

UXPinによるUXデザインプロセスの強化

UXプロセスを成功させるには、デザインチームが変更の追加や迅速な反復ができるようにするツールが必要であり、 UXPinは、エンドツーエンドのデザインソリューションであり、デザイナーは UX デザインプロセスのあらゆる段階での機能を得られます。

完全にインタラクティブなプロトタイプ

デザイナーは、UXPin のビルトインデザイン ライブラリの 1 つを使うか、デベロッパーのコンポーネントライブラリをインポートして、すぐにプロトタイプを開始できます。 UXPinはコードベースであるため、プロトタイプは画像ベースのデザインツールよりも忠実度が高く、機能が豊富です。

高品質のユーザーテスト

コードベースのプロトタイプで、UXデザイナーは正確でより包括的なテストを実行できます。テストの品質が上がると、最終製品に反映されるエラーやユーザビリティの問題が少なくなります。

ステークホルダーの有意義なフィードバック

UXデザインの反復プロセスでは、ステークホルダーのフィードバックが非常に重要です。 プロトタイプが直感的でないと、ステークホルダーは賛同と資金調達に影響を与える可能性のあるデザインコンセプトを理解するのが大変になりますからね。

UXPin を使っているかどうかに関係なく、プロトタイプは他の一般的なデザインツールよりもはるかに高い忠実度と対話性を備えています。 その結果、デザイナーはステークホルダーから有意義で実用的なフィードバックを得ることができるのです。

UXデザインプロセスをレベルアップしよう

UXPin Mergeを使うと、デザイナーはテスト中にデザインハンドオフを効率化しながら、より良い結果を得ることができるため、市場投入までの時間とコストが削減されます。

そしてデザイナーは、ゼロからデザインするのではなく、コンポーネントをドラッグ ＆ドロップして、最終製品のように見えて動作する、完全に機能するコードベースのプロトタイプを構築できます。詳細は UXPin Mergeのページを是非ご覧ください。

The post UX デザインプロセス – 実用的な７ステップ ガイド appeared first on Studio by UXPin.

個別化、スクローリーテリング、データストーリーテリング、ボタンレスUIは２０２３年で注目されたUIトレンドです。

UXPinではこれらの需要の高まりに対応するために、大画面でのUX/UIが着目されていることが判明し、Instagramのデスクトップ版でのエクスペリエンス改善に力を入れて取り組みました。

UXPinを使って、高品質で完全に機能するプロトタイプを作成し、UIデザインのアイデアをテストしてみましょう！

無料トライアルにサインアップして、UXPinの高度な機能をぜひ今すぐお試しください！

２０２４年におさえておきたい UX/UI トレンド

その１：AI統合デザイン

デザインソリューションのブレインストーミングから、調査計画の作成、複雑なUXデザインの決定まで、AI（人工知能）はデザインプロセスに融合しつつあります。

ChatGPTがほとんどの業界に嵐を巻き起こしましたが、デザイン業界でも同じです。

デザインにAIが統合され、ほとんどの反復作業が自動操縦になることから複雑な問題の解決に集中できるようになります。

その２：クロスプラットフォームのUX

クロスプラットフォームのUXは皆さんにとって目新しいものではありませんが、２０２４年にはさらにレベルアップするでしょう。

昨年、Instagramのようなアプリが大画面モニターを活用するためにデスクトップ版をアップグレードしたことをお伝えしましたが、その一方で、YouTubeはTikTokのようなストーリー形式を採用し、携帯端末により適したものとなりました。

あと、クロスプラットフォームのエクスペリエンスにおける個別化（パーソナライゼーション）がトレンドとして来ています。

アプリは関連性を保ち、ユーザーに楽しんでもらえるコンテンツを提供することで、より長く使ってもらいたいと考えているのです。

その３：位置情報 UX

位置情報の体験に関する話題は高まっています。

ユーザーは、個別化されている上に簡単で便利なエクスペリエンスを重視し始めているため、それが実現するアプリは来年、ユーザー中心のデザインの典型となるでしょう。

自分のライフスタイルに合った公共交通機関をオススメしてもらう画が頭に浮かびませんか。

位置情報のエクスペリエンスの未来を形作る中心は AI です。

これでユーザーの動きや行動を予測できるようになり、製品チームは AI を使ってユーザーの好みを予測し、（多くの場合はユーザーが積極的に検索する前に）関連する場所やイベント、サービスを直感的に提案することができでしょう。

その４：アニメーションアイコン

アニメーションアイコンが iOS17 に正式に登場し、Apple アプリに命が吹き込まれました。

しっかりしたアイコンを好む人も、エレガントなアウトラインアイコンを好む人も、今こそビジュアル要素に動きを取り入れる時です。.

iOS17のダイナミックなスピリットとシームレスに共鳴するアニメーションアイコンで、あなたのインターフェースに新しい息吹を吹き込みましょう。

その５：3Dのビジュアル要素

複雑なデータの視覚化や、VR アプリの UX の構築、ブランド認知度の向上などをしたいと思っていますか？それでしたら、作品に 3D 要素を盛り込みましょう！

このようなインターフェースは、２０２４年に大きな話題になりますよ！

3D 要素で、デザイナーはユーザーの目を引き付けたり、ユーザーを引き込む奥行きとリアル感を加えることができるようになります。

何がこのトレンドの始まりなのかはわかりませんが、別の AI ツールである Midjourney を使って作成されたもののように見えるデザインもあります。

その６：感情的で知的なデザイン

感情的で知的なデザインとは、ユーザーの感情を考慮した製品、サービス、体験を創造するということであり、テクノロジーと人間の相互作用の感情的な側面を認識し、対処するものです。

このデザインの例としては、共感できるエラーメッセージや、ユーザーの気分に適応するインターフェースなどの機能が挙げられます。

感情的で知的なデザインには、主に以下のような側面があります：

共感

ユーザーのニーズ、欲求、感情を理解および共感することであり、デザインプロセスを通じたユーザーの視点や感情、潜在的なペインポイントの考慮が含まれる。

予測

ユーザーが感情やニーズを明示的に表現する前に、それを予測して対応することであり、データやユーザーリサーチ、直感的なデザインを使った、ユーザーの反応の予測や、潜在的な問題への積極的な対処が含まれる。

フィードバックおよびコミュニケーション

ユーザーに対して明確で支持的なフィードバックを提供し、ユーザーの行動を認め、効果的にコミュニケーションをとることであり、ユーザーの感情に響く言葉やビジュアル、インタラクションの使用が含まれる。

適応性

ユーザーの感情状態やニーズの変化に適応できるインターフェースをデザインすることであり、カスタマイズオプション、個別化機能、ユーザーの行動に反応する動的コンテンツなどが含まれる。

インクルーシブ

感情的反応、文化的背景、好みの異なる多様なユーザーを認識して対応することであり、インクルーシブデザインで、製品や体験が幅広い人々の感情に響いていることが保証される。

倫理的配慮

潜在的な感情的影響も含め、製品やサービスの倫理的な意味を考慮した上できちんとデザインを決定することであり、操作的な行為の回避や、利用者の幸福感の優先が含まれる。

その７：太字および大文字のタイポグラフィ

２０２４年のタイポグラフィの最新トレンドは、「大きく」「太字で」「大文字である」という３つの言葉にまとめられます。

ユーザーの注目を集めたい UI デザイナーにとっては素晴らしい戦略であり、世界的な Web トレンドサイトの Awwwardsでさえ、ホームページの 「見出し１」とヘッダの吹き出しに大文字の太字タイポグラフィが使われています。

UIデザイナーはまた、言葉を強調したり、ユーザーの注意を引くために書体やスタイルを色々と組み合わせます。

例えば、ラコステの「Draw it Yourself」キャンペーンのこのヒーローでは、太字の大文字のスタイルと、しっかりとしたアウトラインで囲まれた文字の組み合わせが「見出し１」に使われています。

テニス界のスターである、ビーナス・ウイリアムズもまた、自身のWeb サイトのデザイン全体に、大きく、太く、大文字のタイポグラフィーを使っています。

このフォントで、彼女の強くて圧倒的な世界ナンバーワンとしてのステータスが強調されています。

ブランドを目立たせ、圧倒的なマーケットリーダーとして位置づけたいのであれば、２０２４年には、大きく、大胆で、大文字のタイポグラフィが有効でしょう！

また、よりソフトで落ち着いたアプローチには、豪州を拠点とするクリエイティブ・イニシアチブである、Hip Opera の例のように、細く、凝縮された、大文字のタイポグラフィを使うといいでしょう。

世界最先端のデザインおよびプロトタイピング ツールである UXPin を使って、UI デザインを次のレベルに引き上げましょう。

ユーザーテストを改善し、最終製品のように見える完全インタラクティブなプロトタイプで、有意義なステークホルダーのフィードバックをもらいませんか。

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

The post ２０２４年以降を支配するUX/UI デザイントレンド７選 appeared first on Studio by UXPin.

デザイン会社のIDEOによれば、持続可能な長期的成長や成功する製品の特徴として、有用性（Desirability）、持続可能性（Viability）、実現可能性（Feasibility）が必ずあるといいます。

 デザイン思考 のプロセスでは、最も顧客の役に立つ製品や機能性を決めるために、リサーチ、つまり「デザインレビュー」を行います。このデザインレビューがうまくいけば、競合他社が解決していない問題を特定することができ、エンドユーザーとビジネスの双方に利益をもたらすでしょう。

しかし、デザインレビューは何から始めるべきでしょうか？競合における自社の強みはどうやって見つけるのでしょうか？そして、ユーザーや組織のために実行可能なビジネスモデルかはそのように判断するのでしょう？

本記事では、 デザイン思考 を概念化する段階でのリサーチと、以下３つの重要な基準を満たすアイデアを発掘する方法について見ていきます：

• 有用性（Desirability）
• 持続可能性（Viability）
• 実現可能性（Feasibility）

UXPinは、顧客に最高のユーザー体験を提供するための、高度なエンドツーエンドのデザイン、プロトタイピング、テストツールです。無料トライアルにサインアップして、UXPinでUXワークフローとデジタル製品デザインがどのように強化されるかをぜひお試しください。

デザインにおける有用性、持続可能性、実現可能性とは

有用性、持続可能性、実現可能性とは、アイデア、コンセプト、仮説を検証し、独自の価値提案（UVP （Unique Value Proposition）とも言う）があるかどうか、それを追求する価値があるかどうかを判断する デザイン思考 の方法論です。

この３つをすべてクリアしないと、リスクやコスト、失敗の可能性が高まってしまいます。有用性、持続可能性、実現可能性は、アイデアのリスク分析手法であり、イノベーションの芯の部分を見つけるためのツールキットであるとも言えるでしょう。

この方法論を適用することで、デザインコンセプトの弱点を突き止め、さらなるリサーチを重ねたり、アイデアを破棄して次のステップに進むことができるのです。

この方法論の由来

世界的なデザイン会社である IDEO は、２０００年代前半にアイデアをテストする方法として、『有用性』、『持続可能性』、『実現可能性』という デザイン思考 の手法を概念化しました。

IDEOは、最高のアイデアは、この３つの条件が満たされたときに成功すると考えました。逆を言えば、「素晴らしいアイデア」は、これら３つの基準のうち１つでも欠けているとうまくいかないことが多いのです。

では、この３つのレンズを通して、これらの３要素がどのように組み合わされているのかをみてみましょう。

有用性

デザイナーがまずチェックしないといけないのは、有用性 です。もし製品アイデアに市場価値がなく、誰もそれを欲しがらない、必要としないのであれば、それは売れませんよね。

また、有用性を調査することで、その商品が「欲しいもの」なのか「要るもの」なのかがわかります。

例えば、以下のようになります：

• 徒歩、公共交通機関、車、相乗りなどでの通勤が必要。
• 車通勤は便利で公共交通機関よりも快適かもしれないから、車通勤したい。

要るものとは、顧客にとってなくてはならないものであり、欲しい物とは、そのニーズを満たすための、より望ましい選択肢であることが多いです。どちらも「有用性」を満たすものですが、「欲しい」や「あったらいいな」よりも、「必要」という欲求を満たすものの方が、はるかに価値があります。

有用性のある製品を見つけるには、顧客を調査して、満たすことのできるペインポイント（「欲しいもの」と「必要なもの」）を特定しないといけません。

• 製品で問題が解決される人がいるか
• 競合他社は解決策を提示しているか
• もっといい考えはあるか
• そのアイデアは何がユニークなのか、なぜ競合他社ではなくそのアイデアを選ぶ人がいるのか
• その製品でエンドユーザーはどう思うか
• その製品は、使った人が誰かに話したくなるような有用性があるか
• その製品は、一度使ったら一生手放せないようなものか

有用性を調査する場合、そのアイデアをストレステストして、修正すべきギャップを見つけるという意図があります。ギャップが埋まれば埋まるほど製品は強くなり、ステークホルダーからの厳しい質問や顧客満足度にも耐えられるようになるのです。

持続可能性

持続可能性とは、その製品がビジネスとして成立しているかどうかを示すものです。たとえ世界で最も有用性のある製品があるとしても、それが高すぎたり、利益が出なかったりすれば、それは良いビジネスモデルとは言えませんからね。

本当に持続可能な製品アイデアは、短期的にも将来的にもビジネスとして意味があり、投資に対するプラスのリターンをより早く、より長く提供できるほど、デザインアイデアの持続可能性は高くなります。

持続可能性の素晴らしい例として、いかにしてコカ・コーラが１８８６年に生み出した飲料が、今でも世界で最も消費されている飲料の 1 つであり続けられるのかが挙げられます。その初期投資は、発明者に莫大な富をもたらし、１３５年以上経った今でも株主に信じられないほどの利益をもたらしていますよね。

また、持続可能性は、社会的、環境的なインパクト、つまりデザインの倫理的な側面も重要です。そのデジタル製品は、社会にとってプラスの利益をもたらしますか？例えば２０２１年に、フェイスブックの内部告発者フランシス・ハウゲン氏は、SNS 大手の内部調査で、インスタグラムが１０代の少女たちの不安や鬱、自殺願望を生み出していることを示す文書を公開しました。

Instagramは短期的には高い経済的リターンをもたらすかもしれませんが、このティーンエイジャーへの害は長期的に持続し得るものでしょうか。また、政府はFacebook や Instagram を規制するために何ができるのでしょうか？

Facebookは、社会的な論争、罰金、訴訟を克服するためのリソースを持つ巨大企業ですが、小さな会社やスタートアップ企業は、同じような圧力に直面した場合、ほとんどが折れてしまうでしょう。

そのため、持続可能性を検討する際には、事業、顧客、社会に対する価値の提供が必要であり、以下のようなことを検討してみるといいかもしれません：

• このデザインが成立するには何が必要か
• デザインを機能する製品にするには、どのような費用がかかるか
• 新製品や新機能を構築するための設備投資はあるか
• 価格モデルはどうなっているか、また、そのビジネスは利益を上げられるか
• ROI（投資対効果）が出るまでどのくらい時間がかかるか
• その製品はサステナブルか
• その製品は社会にどのような影響を与えるか

なお、持続可能性は有用性と同様に、その製品が確実に実行可能で持続可能であるようにするために、アイデアの調査、分析、ストレステストが求められます。

実現可能性

実現可能性は、現在のリソースに注目し、予測可能な将来において製品を開発する能力があるかどうかを判断します。そしてデザイナーは、その製品がビジネスにどのような影響を与えるかを考慮しないといけません。

実現可能な要因としては、以下のようなものがあります：

• 技術的な制約
• 財務上の制約
• 製品がブランディング、マーケティング、カスタマーサポートなどに与える影響
• 想定される市場投入までの時間
• 運営能力

理想的には、利用可能なリソースを用いて、会社の現在の能力の範囲内で新製品や機能をデザインしたいものです。新製品をサポートするためにインフラを構築しないといけないとなると、リスクとコストが増加しますからね。

新製品や新機能をデザインする際に考慮したい実現可能性に関する質問として、以下のようなものが挙げられます：

• 現在のデザイン体制で、新製品を開発するための部品が揃っているか
• デザイン・開発にかかる時間はどれくらいか
• 新製品の構築や拡張に十分なプロダクトデザイナー、UX デザイナー、エンジニアがいるか？
• 技術的な制約は新しいデザインに対応できるか
• 組織は新しい人材の採用が必要か
• 組織の能力を拡張する必要がある場合、それが将来の製品にどのような利益をもたらすのか
• その製品はブランドにどのような影響を与えるのか
• 製品のリリースは、マーケティング、セールス、カスタマーサポートなど、組織の他の分野に影響を与えるか？また、そのような部門はより多くの仕事をこなす能力があるか

デザインレビューにおける「有用性、持続可能性および実現可能性」の使用

組織は、「インフラ、マーケティング、販売、カスタマーサポートなどのコストを伴う開発を行う前にデザインやプロトタイプの問題点を特定する」という目的のもと、製品デザインの初期段階でデザインレビューを実施し、特定の基準に照らしてデザインを評価します。

基本的には、組織は製品デザインの有用性、持続可能性、実現可能性を知りたいと考えています。

UXデザインレビューのテンプレートのご紹介

「有用性、持続可能性、実現可能性」の デザイン思考 の方法論を適用することで、ステークホルダーに包括的かつ客観的なデザインレビューを提示するためのインサイトとデータを得ることができます。

以下は、ステークホルダーが読みやすく、理解しやすいように、デザインレビューの説明する際に使用できるストラクチャーまたはテンプレートです。

問題：問題は簡潔に述べましょう。デザインチームとビジネスチームは、この土台から共通の理解を深めていきますからね。

システム（現状）： 問題のコンテクストを理解するために、現在のシステムがどのように機能しているかを示しましょう（既存の製品であれば）。その後、あなたの提案する経験によって、システムがどのように機能するかを示すといいでしょう。

JBTD（ジョブ理論）： デザインレビューでは、何が顧客のモチベーションを高めるのかについて、共通の理解を持つことが重要です。Tony Ulwick氏はJBTDを「市場、顧客、ユーザーニーズ、競合他社、顧客セグメントを異なる角度から観察することでイノベーションをより予測しやすく、収益性の高いものにする。」であると定義しており、これによって、顧客がソリューションをどのように「採用」または「不採用」にするかの決定方法をステークホルダーが理解するために役立ちます。

事業目的： 顧客の問題解決におけるビジネス価値とROI を述べましょう。

把握すべきメトリクス： 測定しないものは改善できません。このメトリクスによって、新製品のデザインによって生み出されるビジネスと顧客の価値を定量化できるはずです。

提案された体験： 提案内容を文章でまとめ、明確で理解しやすいものにしましょう。その場にいる人たちは、その提案があなたが以前に明確にした問題とどのように関連しているのかを理解しないといけませんからね。

提案の意味合い：その提案がビジネスの他の部分にどのような影響を与えるか、もしかしたらわからないかもしれません。製品デザインの初期段階でそれを理解するのは、有用性、持続可能性、実現可能性のバランスを取るのに重要です。

基本的なエクスペリエンスデザイン： ワイヤーフレーム、モックアップ、プロトタイプ、またはMVP（最小実行可能製品）を提示して、顧客が製品をどのように望ましいと感じるかをステークホルダーがイメージできるようにしましょう。

デザインに反映されるインサイト：このデザインを選択した理由は何でしたか？インサイトや仮説などは何でしたか？いくつかの項目を箇条書きにして思考の深さを示しましょう。

新デザインに関する仮説：

• 新しいデザインについての仮説とは
• どのようにしてこの仮説にたどり着いたのか
• この仮説を、重要だと思われるメトリクスとどのように整合させることができるか

このような仮説は、明確でテスト可能なものであるべきです。明確な合格・不合格のメトリクスでテストを行うことで、この仮説は、少しずつ前進していることを測るための強力な基礎となるはずです。

チームの協調性を重視： ステークホルダーからどのような意見が必要か？デザインレビューのテンプレートのこのセクションによって、製品の成功の鍵を握るステークホルダーのために、明確なコンテクストと焦点を設定できます。

UXPinにあるデザインライブラリを使って、忠実度の高いプロトタイプやMVP を手短に構築し、デザインレビューの際にステークホルダーに提示することができます。無料トライアルにサインアップして、早速 UXPinプロトタイプ第１号を作成しましょう！

The post デザイン思考 における「有用性、持続可能性、実現可能性」とは appeared first on Studio by UXPin.

近頃、リーンスタートアップ、リーン生産方式、リーンソフトウェア開発、リーンUXなど「 リーン （Lean） 」という言葉をよく耳にするようになったのではないでしょうか。これらのリーンプロセスの目的は「余計なものを取り除くこと」であり、生産性を下げたり混乱させたりするシステムやプロセスをなくします。

リーン UX の主なポイント

• 「リーン生産方式」と「アジャイル手法の原則」を取り入れた、UXデザインへの共同アプローチである。
• ２０００年代初頭に出版されたリーンソフトウェア開発に関する本から派生したものである。
• 学習の優先順位付け、成果の重視、継続的な発見など１５の原則がある。

  適切なデザインツールを選択することで、UXのワークフローとプロセスの効率化につながります。UXPinは、スピード、一貫性、効率を向上させるために構築されたコラボレーションデザインツールです。１４日間の無料トライアルでぜひお試しください。

リーン UX とは

  リーンUX は、連携を促し、MVP（最小実行可能プロダクト）で多くのテストや実験行う成果ベースのデザインプロセスです。

リーン UX は、成果物よりも成果を優先し、「デザインするもの」ではなく「デザインする理由」を問います。「何」を「なぜ」に置き換えることで、デザイナーは「いいと思う人がいるから何か作ろう」という曖昧なものではなく、具体的に「デザインする理由や裏付けとなるデータ」を見つけないといけません。

このように、リーンUXでのデザインは「ワークフローの概念」というよりも１つの「思考プロセス」と言えます。デザイナーは構築する前に仮説を立て、それを検証しないといけません。この思考プロセスが、MVPコンセプトのテストと実験がリーンUXでのワークフローにおいて重要な理由です。

リーン UX の歴史

リーンUX は、２００３年に出版された『Lean Software Development（リーンソフトウェア開発）』という本とアジャイル手法から派生したものです。国際的に有名なデザインとビジネスの専門家であるジャニス・フレイザー氏は、２０００年代に「リーン UX」という言葉を世界で広めました。

“Lean UX is UX practice adapted for Lean Startups…”（日本語訳：リーンUX は、リーンスタートアップのために適応された UX手法である）と言います。

そして、彼はイノベーションとシリコンバレーのスタートアップ企業数社のスケールアップに関する知識と経験を活かし、リーンのコンセプトを UXデザインに応用しました。

アジャイル UX と リーン UX

  アジャイルUX と リーンUX は似たようなコンセプトですが、アジャイルUXはアジャイルを使っているチームに効果的であるのに対し、リーンUX のプロセスはどんなスタートアップや組織にも適しています。

リーン UX のプロセス

リーンUX のプロセスには、従来のUXデザイン思考のフェーズがすべて含まれており、プロトコルが違うだけであることに注意するのが重要です。

デザイン思考のプロセスには５つのステージがあります：

1. 共感：ユーザーが何を必要としているかを発見する
2. 確定：解決したい問題を特定する
3. アイデア出し：ユーザーの問題に対する解決策を考える
4. プロトタイプ：プロトタイプを作成する
5. テスト：プロトタイプをユーザーやステークホルダーとテストする

  一方、リーンUX はプロセスを３つのステージに分けます：

• 思案： 結果、仮定、ユーザーリサーチ、アイデア、メンタルモデル、スケッチ、ストーリーボード
• 作成：ワイヤーフレーム、プロトタイプ（MVP）、価値提案、仮説
• 確認：データと分析、ユーザビリティ・テスト、ステークホルダーとユーザーからのフィードバックの分析

  ご覧のように、どちらのプロセスも同じ要素を含んでおり、方法論だけが異なっています。

リーン UX の原則

こちらの記事で、Ben Ralph氏はコアとなる リーンUX の１５原則を概説しています：

1. 部門横断チーム – 同じプロジェクトに取り組む複数の部署のメンバーでチームを作る。
2. 小規模、専任、同拠点 – チームを５〜９人ほどの少人数にし、ひとつの問題に集中し、同じワークスペース（リモートチームの場合は同じタイムゾーン）に置く。
3. 進歩＝成果であり、アウトプットではない – ビジネス目標の達成は成果であり、機能やサービスはアウトプットである。
4. 問題集中型チーム – チームは新機能のデザインではなく、問題の解決に集中しないといけない。
5. 無駄を省く – ビジネス目標につながらない作業やプロセスを省く。（チームは明確な理由もなく会議に出席したり、報告書を作成したりしていないか？）
6. 少人数制 – チームは一度につき１つのタスクや目的を完了することに集中しないといけない。
7. 継続的な発見 – 顧客、エンドユーザー、ステークホルダーと定期的に関わる。
8. GOOB（Get Out Of the Building）- 社内で仮定をごちゃごちゃ話し合うのであれば実際のユーザーとアイデアをテストする。
9. 理解の共有 – チーム全体が共に学び、成長できるよう、協力し、アイデアを共有する。
10. アンチパターンのロックスター、達人、忍者 – どのチームメンバーも同じように評価する。
11. オープンな職場 – 自由にアイデアを共有できる環境を作る。アイデアに正誤はない！
12. 分析より創造 – うまくいくかどうか議論して時間を無駄にせず、まずはやってみて、その経験から学ぶ。
13. 成長よりも学習 – 最初に正しいものを作り、それから規模を拡大する。
14. 失敗の許可 – 実験とリスクを取ること。マーク・ザッカーバーグ氏の“move fast and break things.” （素早く行動し、破壊せよ）という有名な言葉にあるように、完璧さよりも市場投入スピードを優先する。
15. 成果物ビジネスからの脱却 – UXドキュメントは最小限に。結果に優先順位をつける。

  また、このリーンUXの １５原則には、以下の２つの共通テーマがあります：

• 行動を起こす – アイデアを MVP とプロトタイプに変える。テストを繰り返す。
• チームワーク – 共有、連携、連携

リーンUX のメリット

  従来のUXデザインプロセスには、監督会議、不要な文書や成果物、部署やチームのサイロ化、コミュニケーション不足など、時間をムダにしてしまう障害がありました。

リーンUX で、部門間で連携を促進させ、付加価値をもたらさないプロトコルを避けることでUXワークフローが最適化されます。

また、リーンUX の成果主義とは、UXデザイナーが、CTA（Call to Action） ボタンの色を議論するためにミーティングするのではなく、ユーザーの問題を解決し、アイデアのテストに集中するということです。

複数の部門から代表者を集めた部門横断チームを構築することで、デザイナーは多様なアイデア、経験、視点を活用することができます。この豊富な知識により、チームはより良いMVPを作り、より多くのアイデアをより早くテストすることができるのです。

リーンUX の利点は以下の５つにまとめられます：

1. 無駄を省く
2. 連携を促進
3. 速い
4. 効率的
5. ユーザー中心

 リーンUX の手法

リーンUX 手法の中心となる主な原則は以下の３つです：  

1. 仮定
2. 仮説
3. MVP（最小実行可能製品）

仮定

仮定は単なるアイデアですが、メリットとしては、間違っていても許されることです。これは「実験とリスクを取る」という リーンUX の哲学を補完するものですね。

仮説を立てるには、 思考 の段階で得た研究知識と問題提起が必要です。これらの知識があれば、次のような仮説を立てることができます：

• ビジネスの成果 – うまくいく成果とは？
• ユーザー – サポートしようとしている人（ユーザー・ペルソナ）について具体的にする
• ユーザーの成果 – ユーザーのペインポイントは何であり、製品がそれをどのように解決できるか？
• 製品の特徴 – 問題の解決に必要な製品の改善点

  一連の仮定を強みに、問題解決のための仮説を立て始めることができます。

仮説

UXの仮説とは、以下の３つの変数を持つ検証可能な仮定です：

1. しようとしていること
2. （ユーザーのための）問題解決
3. 望む結果の達成

  仮説は次のように書くことができます： ［このユーザー］のために［これをする］ことで［この結果］が達成されると思われる。

理論は検証されるべきものであって、議論されるべきものではありません。なのでチームメンバーは、仮説がどうなるかについての意見をめぐって議論になることは避けないといけません。次に何をすべきかは、テスト結果に任せましょう！

MVP（最小利用可能製品）

製品全体をデザインする代わりに、チームは仮説を検証するための MVP（最小利用可能製品）を作ります。  

仮説がうまくいけば、それを発展させるための小さな機能的製品を手に入れることができ、仮説が正しくない場合は、そのアイデアを捨てて、無駄な時間を最小限に抑えて次に進むことができます。

デザイナーは、ワイヤーフレーム、モックアップ、プロトタイプを使ってMVPを作り、あらゆるものをテストすることができます。チームは、より時間のかかるデジタルのデザインプロセスに取り組む前に、多くのアイデアをサッと洗い出すために、初期のテスト中に紙のMVPを作成することもあります。

MVP は仮説を検証できるものでないといけません。例えば、ボタンのインタラクションをテストしたい場合、紙のプロトタイプでは有意義な結果は得られませんよね。なので、デジタル製品のコンテクストの中でインタラクションをテストするには、色とコンテンツを備えた忠実度の高いプロトタイプを使用する方がいいでしょう。

それに対し、登録フォームをテストするために、何時間も何日もかけて完全に機能する忠実度の高い製品プロトタイプを作る必要はなく、シンプルなワイヤーフレームがあれば、より早く仕事を終わらせることができます。

UXPin における MVP

UXPin にあるデザインライブラリを使えば、デザイナーはコンポーネントをドラッグ＆ドロップして、MVP をサッと構築できます。高度なインタラクションを追加することもできるので、プロトタイプは最終製品のように見え、感じられるのです。

テストの精度を上げるために、より忠実なテストが必要ですか？  

デザインと開発のギャップを埋めるテクノロジーである UXPin Merge を使って、MVP を次のレベルに引き上げましょう。UXPinのデザインエディタをリポジトリ（GitおよびStorybookとの統合が可能）を介して社内のデザインシステムに同期することで、デザイナーは完全に機能するコードコンポーネントを使用してプロトタイプを構築できます。

UXPin Mergeを活用してリーンUX のプロセスを最適化した使用事例として、PayPalが行った検証があります。あるデザイナーが１ページのプロトタイプ（またはMVP）を2つ作成しました。１つ目はイメージベースのツールで、２つ目はUXPin Mergeを使用しました。イメージベースのデザインツールを使用した場合では、デザイナーは MVP の作成に１時間強かかり、UXPin Mergeを使用した場合だと８分で作成できることがわかりました。その上、Mergeで作成したプロトタイプの方がより忠実で機能的でした。

UXPin Mergeについての詳細や、洗練されたコードベースのデザイン技術で DesignOpsの課題を解決する方法については、ぜひこちらをお読みください。

デザイナーが MVPを作り終えたら、次はテストです！

テスト

最後に、チームは仮説と MVP をテストします。プロトタイプのテストでアイデアの検証をできるだけでなく、リサーチャーがユーザーの行動やプロトタイプとのインタラクションを観察することで、貴重なインサイトを集めることができます。

また、ユーザビリティテストによってユーザビリティの問題やビジネスチャンスも明らかになり、デザイナーはそれを次の反復に追加することができます。

テスト結果を元に、リーンデザインチームは新たなインサイトを得ることができ、思考 の段階に戻ってプロセスを再開することができます。

まとめ

リーンUX のプロセスは、ワークフローを最適化し、連携を強化するために、従来のデザインプロセスを再構成します。チームは新しいスキルを学ぶ必要はありませんが、製品をデザインする新しい方法論へのマインドセットシフトが必要なのです。

この記事で説明してきたように、UXPinを使うことで リーンUX の考え方とワークフローが実現できます。また、コメント機能を使うことで、チームはコミュニケーションをとったり、タスクの割り当て、完了後は［解決済み］にしてタスク管理を円滑で明確に行うことができます。

さらに、デザインライブラリがあれば、デザイナーは低忠実度のプロトタイプを省略でき、ユーザビリティテスト参加者やステークホルダーから実用的なフィードバックを得られる、高忠実度の MVPにすぐに移ることができます。

そして何よりも、UXPinのドキュメンテーション機能によって作業を最小限に抑えることができます。デザイナーはデザインのハンドオフ時に、デベロッパーのために UIに注釈を付けたり、指示などの説明を作成したりすることができます。 世界最先端のコードベースデザインツールの使いやすさをぜひご体験ください。１４日間の無料トライアルはこちら。

The post リーン UX ：UXで効率性を最大化するためのヒント appeared first on Studio by UXPin.