投稿者: tomotaka@xenon.io

UXPin Forge vs Figma AI｜AI時代のデザインシステムはどちらが強いのか？

AIは現在、デザインツール業界を大きく変えています。
Figmaは、プロンプトからUIを生成する機能やAI編集機能、MCPを活用した開発連携などを次々に発表しています。一方、UXPinは、実際のReactコンポーネントをベースにしたAIシステム「Forge」を展開しています。

一見すると、どちらも同じことを目指しているように見えます。

「AIでUIを生成する」

しかし実際には、両者は“デザインと開発の関係性”に対して、まったく異なる思想を持っています。

最大の違いは「ビジュアル生成」か「システム生成」か

UXPin Forgeは、単なるビジュアルを生成するAIではありません。
実際のReactコンポーネント、props、state、variantを理解しながらUIを生成します。

つまり、デザインシステムや本番コードを前提にAIが動作します。

一方、FigmaのAI機能は、

  • AIによる画面生成
  • デザイン編集支援
  • プロンプトベースのアプリ作成
  • コラボレーション強化

など、「デザイン制作の高速化」に重心があります。

この違いは非常に重要です。

項目 UXPin Forge Figma AI
プロンプトからUI生成 ○ ○
実際のReactコンポーネント利用 ○ 限定的
本番コードとの連携 ○ 一部対応
JSX出力 ○ 発展途上
デザインシステム統制 強い 比較的弱い
主な用途 エンタープライズ実装 高速なUI作成・共同作業

UXPin Forgeは「デザインシステムを理解するAI」

ForgeはUXPin Mergeの上に構築されています。

Mergeでは、Git上のReactコンポーネントをそのままデザイン環境で利用できます。
つまり、デザインツールと開発環境が同じコンポーネントを共有します。

そのためForgeは、

  • プロンプト
  • スクリーンショット
  • URL
  • JSX

などからUIを生成しつつも、最終的には「実際のコンポーネント」で構成された画面を作れます。

これはエンタープライズ企業にとって非常に重要です。

多くの企業では、

  • デザインと実装の乖離
  • デザインシステムの崩壊
  • handoff時の再実装
  • フロントエンド品質の不一致

が大きな課題になっています。

Forgeは、その“翻訳コスト”を減らそうとしています。

FigmaのAI戦略はより「広く・速く」

一方、Figmaの方向性は異なります。

Figmaはもともと、

  • コラボレーション
  • スピード
  • 柔軟性
  • アイデア共有

に強みを持っています。

AI機能もその延長線上にあります。

最近のアップデートでは、

  • AIによるUI生成
  • 自然言語による編集
  • AI開発ツールとの接続
  • MCP連携

など、「誰でも素早くプロダクトを形にできる」方向に進化しています。

特にスタートアップや新規事業では、

  • まず素早く形にする
  • アイデアを検証する
  • チームで共有する

ことが重要なため、Figmaのアプローチは非常に強力です。

AI時代に最も大きな問題は「デザインシステムを無視すること」

最近のAIデザインツールでよく起きる問題があります。

それは、「見た目はそれっぽいが、実装できない」という問題です。

AIは綺麗なUIを生成できますが、

  • デザインシステムに従わない
  • コンポーネントが統一されない
  • エンジニアが作り直す必要がある
  • governanceが崩れる

というケースが非常に多くあります。

UXPin Forgeは、この問題を正面から解決しようとしています。

単なる画像生成ではなく、“実装可能なシステムUI”を生成することが目的です。

それでもFigmaには圧倒的な強みがある

もちろん、Figmaの優位性は依然として非常に大きいです。

例えば、

  • 圧倒的なユーザー数
  • 巨大なプラグインエコシステム
  • 社内標準化
  • デザイナー採用市場との親和性
  • 学習コストの低さ
  • コラボレーション文化

など、多くの企業に深く浸透しています。

そのため、短期的に「Figmaが置き換わる」という話ではありません。

むしろ今後は、

  • Figma → アイデア・共同作業
  • UXPin Forge → 実装・システム運用

のように役割が分かれていく可能性もあります。

どんな企業にUXPin Forgeが向いているのか

UXPin Forgeは特に以下の企業と相性が良いでしょう。

  • Reactベースのデザインシステムを持つ企業
  • デザインと開発のズレに悩んでいる企業
  • エンタープライズ向けプロダクト企業
  • フロントエンド品質を重視する企業
  • 大規模組織でUI統制が必要な企業

逆に、

  • アイデア探索中心
  • 初期プロトタイピング中心
  • 小規模チーム

では、Figmaのスピード感が優位なケースもあります。

AIによって「デザイン」の定義そのものが変わる

これからの競争は、

「どちらが速くUIを描けるか」

ではありません。

本当に重要になるのは、

「どちらがデザイン意図を本番環境まで正しく繋げられるか」です。

Figmaは「AIによるプロダクト生成」に向かっています。

UXPin Forgeは「AIによるシステム実装」に向かっています。

どちらも重要ですが、解決しようとしている課題は違います。

特に大規模プロダクト開発では、

  • 再利用性
  • 実装精度
  • ガバナンス
  • 開発効率
  • デザインシステム統制

がますます重要になります。

UXPin Forgeは、その領域を狙ったAIデザインツールと言えるでしょう。

UXPin Forgeをすぐ試すことできます！

デザイナーと デベロッパー の連携においての課題と解決方法

デザイナー　デベロッパー

デザイナーと デベロッパー の間のギャップで、ワークフローが遅くなったり、製品の市場投入がしにくくなることがよくあります。デザインチームと開発チームの強力な連携がなければ、製品を完成させて消費者に届ける前に、多くの間違いを直さなければならないことになるでしょうからね。

デザイナーと デベロッパー 間のギャップに目をつぶる必要はありません。本記事でお話するヒントは、両者の距離を縮め、プロセスを改善し、より良いユーザー体験につなげるためのものになります。

おすすめ記事：Coding Designers and Design Collaboration with Developers – 2020 Design Trends with Joe Cahil    

デザイナーと デベロッパー  が同じ部品を使うデザインシステムを作る

デザイナーと デベロッパー が同じコンポーネントを使うデザインシステムを作成することは、チーム間のギャップを埋めるのに最も重要なことです。デザインシステムは、製品の以下のような承認を含め、デザインとコーディングのフェーズで必要なものをすべて提供する必要があります：  

  • タイポグラフィ
  • カラー
  • アイコン
  • フォトグラフ
  • GIF
  • サウンド
  • インタラクティブ要素

  デザイナーとデベロッパーが同じデザインシステムを使うことで、使用するフォントと色や、ボタンやフォームのコーディング方法を決めるような無駄な時間を省くことができ、制作の各ステップを改善することができます。従来、企業は製品の構築に画像ベースのアプローチを採用しており、デザイン システムの維持に多くの労力を費やす必要があるため、このアプローチでは大変なのです。これだとデザインチームが作業を終えた後に、デベロッパーはコンポーネントを機能させる方法を探す必要がありますが、コードベースのアプローチでは、デザイナーとデベロッパーがいつでも再利用可能な「信頼できる唯一の情報源（Single source of truth）」を利用できるようにすることで、このギャップをなくすことができます。

デザインシステムの例をご覧ください。  

デザインシステムでの準備はいいですか？コード化されたコンポーネントの技術である UXPin Mergeで、さらに一歩進みましょう。UXPin Mergeは、GITのレポジトリからUXPin エディタにコード化されたコンポーネントをインポートし、同期させることができますよ。  

interactive code-based design

インポートされたコンポーネントは、デベロッパーが開発プロセスで使うコンポーネントと全く同じです。つまり、コンポーネントには、エンドユーザーが体験する実際の製品と同じような外観、感触、機能（インタラクション、データ）があり、デザインシステムと整合性があり、生産可能であるということです。それは、デザインと開発のギャップが埋まるのはもちろん、デジタル製品のデザインとコーディングの両方にかかる時間が大幅に短縮され、市場投入までの時間が早くなるということです。  

おすすめの記事：デザインツールはイメージベースからコードベースへ  

ウェブデザイナーとフロントエンドのコミュニケーションを高める

デザイナーと開発チームには、簡単に連絡を取り合える方法が必要ですが、少し前までは、チーム間のコミュニケーションを上げる方法は限られており、ワークスペースの共有やSNSグループへの参加などくらいしかありませんでした。  

今日では、チームメンバーがリモートで仕事をしている場合でも、以下のアプリのような連絡と連携を高めるツールが豊富に揃っています：  

  対面での会話に代わるものが必要なときは、以下のようなビデオ通話アプリなどを使うといいでしょう：  

  コミュニケーションがしやすくなると、それに伴ってチームメンバー同士の会話も増えます。連絡を取り合って仕事上の関係を築くのに必要なツールを設けましょう。  

製品デザインのブレーンストームにデザイナーや デベロッパー を招く

チームメンバーは、製品についての重要なブレーンストームのセッションからしょっちゅう外されてしまいます。プロジェクトマネージャーは、開発チームのリーダーくらいは招待して、製品にある機能を追加する際の課題についてのインサイトを得ようと考えているかもしれませんが。  

より多くのデザイナーやデベロッパーがブレーンストームに参加することで、仲間意識が高まり、アイデアが共有され、全員が参加しなければ見逃してしまうかもしれない革新的なコンセプトを発見することができるのです。

そのような話し合いをより成功させるには、次のような方法があります：  

  • ユニークなスキルを持つ多様な参加者を選ぶ
  • セッションのルールを決め、参加者が集まる前にそのルールを伝える
  • 時間を気にしなくていいようにタイマーをセットしておく
  • アイデアを話してもらうときは、順序よく進める（不意打ちは緊張させるだけ）
  • あらゆるアイデアをとかく書き留める
  • 進行役がフィードバックを提供し、グループが気に入ったアイデアを議論できるように、その日または週の後半にフォローアップのミーティングを予定する

  さらに、製品開発の初期段階から多くの人に参加してもらうことで、社内での役割に関係なく、みんな何かしらの役に立てることを各部門に示すことができるのです。  

UXデザイナーとフロントエンドエンジニアが互いの役割について学ぶことを促す

  UXデザイナーとフロントエンドエンジニアは、一緒に仕事をする時間が長くなければ、製品作りにおけるそれぞれの役割についてあまり知らないかもしれません。だとしたら、他のグループが行う基本的な用語や作業の種類をチームに紹介することで、デザインプロセスにおけるコミュニケーションのギャップを埋めることができます。  

だからといって、全員がスキルセットを共有する必要はありません。ただ、コミュニケーションをとって他の人が貢献していることの本質を理解するのに、十分な知識が必要なのです。  

デザイナーに必要な知識

  ウェブデザインチームは、HTMLの基本的なスキルは必要かもしれませんが、コードを学ぶ必要はありません。ただし、デベロッパーが使う一般的なツールは知っておく必要があり、それには、次のようなプログラミング言語が含まれます：

  • PHP
  • JavaScript
  • Java
  • CSS

  Web開発に欠かせないJQueryのようなツールを知ることで、デザイナーは自分の依頼に関わる仕事の多さを理解することができ、デベロッパーの仕事に対して、より深い敬意を抱くようになるはずです。  

フロントエンドとバックエンドの デベロッパー に必要な知識

  デベロッパーは、デザインのインタラクティブなコンポーネントへの変換のために、多くの技術的な知識とコーディングスキルが必要です。なのでデベロッパーの中には、「デザイナーの方が仕事が少ない」と誤解している人もいるかもしれません。

もちろん、デザイナーにも、製品の使いやすさや人気の高さに貢献する、以下のような並外れたスキルがあります。デザイナーには長年の経験があることを、コーダーは知っておくべきです：

  みんなが同僚の専門性のレベルを理解することで、チーム全体の尊敬とチームワークの向上が見られるかもしれませんよ。  

おすすめ記事：コードを学ぶ事なくコードベースデザイナーになる方法  

UXPin Mergeを使い、デザイナーとデベロッパーのギャップを埋める

  UXPin Merge は、コードベース独自のアプローチで製品のデザインとプロトタイプを実現します。画像ベースの要素の代わりにライブコードを使用するツールを選択することで、デザイナーと開発者の間のギャップを埋め、デザイナーと開発者に等しく適用されるデザインシステムの強みを活かすことができます。

UXPin Merge へのアクセス権をリクエストして、チーム間の連携を促すコードベースのデザインの利点をぜひご体験ください。

Mergeを見てみる

レスポンシブデザイン と アダプティブデザイン： 最良の選択とは

 

Responsive Design vs. Adaptive Design

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

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

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

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

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

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

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

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

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

responsive vs. adaptive design

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

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

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

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

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

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

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

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

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

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

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

Low resolution

そして一般的には、低解像度のビューポート用にデザインすることから始め、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 デザインでは再現できませんでした。

レスポンシブデザイン　Vs. アダプティブデザイン

出典：USA Today

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

３．IHG

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

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

レスポンシブデザイン　Vs. アダプティブデザイン

出典：IHG

 

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

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

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

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

fluid layout in responsive design by UXPin

写真提供： 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

出典：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 やノートパソコンで見られるデザインの選択肢を凌駕することも少なくありません。ただし、オンライン上のものは大抵デスクトップベースのサイトから始まり、モバイルバージョンは後から登場したことから、多くのプラットフォーム、ツール、サイトがデスクトップ起源に傾き、モバイルは補助的なニーズと見なされています。

screens prototyping

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

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

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

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

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

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

ボタンが小さすぎる 

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

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

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

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

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

lo fi pencil

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

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

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

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

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

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

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

settings

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

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

UXPinでUIをデザインしよう

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

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

Try UXPin for free

アプリのパーソナライゼーション – その意味と重要性を解説！

app personalization 1

AppleのApp Store開設から15年以上が経過し、モバイル市場は世界中で安定しつつあります。iOSおよびGoogle Playのダウンロード数は1,360億となり、前年比でほぼ横ばいでした。新規スマートフォンユーザーの流入が鈍化したほか、多くの消費者はすでにお気に入りのアプリのほとんどを入手していることから、ダウンロード数は2020年以降、年間1,350億～1,400億程度で推移しています。

  UXPinは、最終製品のように見えるプロトタイプを簡単にデザインすることができます。その優れた機能により、ユーザーやステークホルダーが実際に操作できるプロトタイプを構築することができ、ユーザーテストもスムーズに行えます。こちらからUXPinを無料でサインアップして、実際にご体験ください。

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

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

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

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

screens process lo fi to hi fi mobile 1

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

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

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

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

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

user bad good review satisfaction opinion

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

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

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

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

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

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

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

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

user choose statistics group

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインシステムのロードマップを作成する方法

How Can You Create a Design System Roadmap  

デザインシステムの構築というのは、時間と費用のかかる作業です。 しかし、多くの組織に見られるように、メリットはコストをはるかに上回ります。 デザインシステムのロードマップにより、チームメンバーとステークホルダーは、デザインシステムの成熟度、目処、およびタイムラインをモニタリングできます。  

この記事では、着手したばかりでも、既存のデザインシステムを拡張したい場合でも、デザインシステムが与えるインパクトをステークホルダーに納得させ、その価値を高めて採用を促進させる方法についての見解を述べていきます。  

UXPinを使用すると、デザインシステムをゼロから構築することや、Merge機能を用いて既存のUIコンポーネントライブラリを同期するのが簡単にできます。 無料お試しを申し込んで、世界で最も先進的なコードベースのデザインツールを体験してみてください。  

デザインシステム のロードマップとは？

デザインシステムのロードマップは、タイムライン、タスク、目処、および成果物をグラフ化した高レベルの作業文書です。 製品ロードマップと同様に、チームメンバーとステークホルダーが着手と目処を視覚化して透明性を高め、予測を管理するためのタイムライン形式の戦略計画です。  

デザインシステムチーム（またはDesignOps）は、今後数か月の間に何が行われるかを誰でも確認できるように、ロードマップを通常四半期ごとに編成して発表します。  

典型的なデザインシステムのロードマップには、次のものが含まれます。

  • 最近のリリース
  • チームが現在取り組んでいること
  • チームが次に取り組むこと
  • 今後のリリース（6〜12か月前）

なぜロードマップが必要なのか？

チームとステークホルダーにとって、以下の目的によりデザインシステムのロードマップが必要になります。

  • チームがデザインシステムの展開を計画して優先順位を付けることができます
  • デザインシステムのロードマップにより、ステークホルダーは進捗状況を確認し、リリースのROIを測れます
  • チームはロードマップを元に製品リリースを計画できます
  • チームや部門間のコミュニケーションとコラボレーションを改善します
  • 役割と責任を明確にします
  • 一貫性を維持し、チームメンバーが同じ作業を繰り返すのを防ぎます

リリース計画とロードマップの違いは？

  ロードマップは、デザインシステムのリリース段階と目処についての概要を示す高レベルの全体像ですが、リリース計画は、各段階と目処を確実に達成するためにチームがやっていかなければいけない、特定の手順の詳細な所見です。  

  チームは、リリース計画の詳細や個々のタスクに必ずしも関心がないステークホルダーや顧客とやり取りをするのに、デザインシステムのロードマップを使います。  

デザインシステムのリリース計画は、リーダーが他のチームや部門と連携するのに最も有益です。   

デザインシステム のロードマップの作り方

process direction way path

   以下は、デザインシステムのロードマップを作成する7つのステップの概要です。Nielsen Norman Groupのこの記事を、大まかなガイドとして使います。  

  1. 目標の設定
  2. 監査
  3. 調査
  4. ビルドの確定
  5. 優先順位の設定
  6. ビルド
  7. 維持

ステップ１ー　目標の設定

最初のステップは、デザインシステムを構築し、ロードマップを作成する目的を確立することです。 ここで設定された目標は、プロセスを通してガイドし、後でデザインシステムのロードマップに優先順位を付けるのに役立ちます。  

ステップ２ー　監査

製品とユーザーインターフェースを監査して、各スタイル、要素、およびコンポーネントを一覧表示します。 この監査は、不整合やエラーを特定する絶好の機会です。  

監査は次の4つのカテゴリに分類できます

  1. スタイル：色、フォント、サイズ、間隔など。
  2. アセット：画像、動画、アイコン、ロゴ、その他の視覚的なデザイン要素
  3. UIコンポーネント：ボタン、CTA、カード、フォーム、モーダル、パンくずリストなど。
  4. インタラクション：アニメーション、マイクロインタラクション、その他のモーションアイテム
success done pencil

あくまでガイドラインとして使用してください。 組織では、デザインシステムの各部分に異なる名前またはカテゴリが使用されている場合があります。

ステップ３ー　調査

次に、デザインシステムのユーザー（UXデザイナー、製品チーム、エンジニア）にインタビューして、現在のワークフロー、問題点の特定、彼らがデザインシステムからどのようにメリットが得られるか（またはどのように既存のデザインシステムを改善させるか）を把握します。  

また、既存のアーティファクトのコピーを集めることもできます。

例：

  • 以前のロードマップとデザインシステムのドキュメント
  • デザインシステムガバナンスのドキュメント
  • ユーザージャーニー
  • IA　（情報アーキテクチャ）
  • スタイルガイド
  • バックログ（設計および開発）
  • UX戦略
  • UX監査

  作業が重複しないようにし、新しいデザインシステムのロードマップが現在の戦略、プロセスやプロトコルと確実に一致するようにするのが、これらのドキュメントを収集する目的です。  

ステップ４ー　ビルドの確定

監査と調査を使用して、構築する必要のあるデザインシステムの部分を明らかにします。 デザインシステムのパートを、監査で使用したカテゴリに分けます。  

EightShapesのネイサン・カーティス氏は、最初にホワイトボードと付箋を使って、5つのカテゴリの「構築する部分」を特定し、次に「今、もうすぐ、後で、待機」順に並べます。  

構築または修正する必要のあるデザインシステムの各部分を全て確定して一覧表示することが目標です。

ステップ５ー　優先順位の設定

  構築する必要のある部分を全部リストアップしたら、それに優先順位を付けて、デザインシステムのロードマップのタイムラインを作成します。  

user laptop computer   

ゼロからデザインシステムを構築する場合は、まずは基本的なスタイルと要素を優先します。 ブラッド・フロスト氏のアトミックデザインメソッドを使用して、デザインシステムを最小の部品とスケールに分けることをお勧めします。  

  既存のデザインシステムの場合、ユーザビリティとアクセシビリティの問題に関連する要素とコンポーネントを最優先します。  

ステップ６ー　ビルドとテスト

ロードマップができたら、設計者はデザインシステムの構築を始めます。 我々は、UXPinの開発と、40人以上の設計およびエンジニアリングのリーダーへのインタビューで得た経験に基づいて、デザインシステムを構築するためのステップバイステップガイドを作成しました。  

  12ステップのプロセスには、UIインベントリのカタログ化、組織の賛同の取得、デザインシステムチームの編成、デザインシステムガバナンスの確立、標準化、追加のリソースなどが含まれています。  

リリース前に、UXデザイナーは、使いやすさとアクセシビリティの基準を満たしているか、新しいコンポーネントをテストしなければいけません。 ガバナンスのシステムの実行によって、チームはリリース前に確実に正しいプロセスとプロトコルに従うことができます。  

設計者は、新しいデザインシステムコンポーネントのリリース前に正確なテストができるように、コードのような機能を備えた忠実度の高いプロトタイプを、UXPinを使って作成します。 高度なインタラクション、ステート、変数、およびエクスプレッションを使用して、最終製品のような見栄えと機能のプロトタイプを作成します。

ステップ７ー　維持

デザインシステムが完成することはありません。 デザインシステムは製品と共に進化し、設計と開発の間の信頼できる唯一の情報源に到達するまで、いくつかのデザインシステムの成熟の段階を経ます。  

settings

デザインシステムのロードマップも、完成することはありません。 デザインチームは、組織とステークホルダーを最新の状態に保つために、少なくとも四半期に1回はロードマップを再検討し、改訂する必要があります。  

デザインシステム のロードマップを作成するための最善法7つ

１．部門の枠を超えたチームの構築　UXデザイナー、プロダクトマネージャー、エンジニアを含む部門の枠を超えたチームを構築して、デザインシステムのロードマップを作成および管理します。 クロスファンクショナルチームで、複数の部門からの設計システムの支持者を確保して賛同と使用の可能性を高めます。

２．問題の確定　デザインシステムとロードマップを使用して、解決しようとしている問題を明らかにします。 製品と組織には、それぞれに固有の問題と優先順位があります。 問題を明らかにすることで、どこから始めて、どのように目標に優先順位を付けるかがわかります。

３．目標と目処の設定　チームが目標を設定し、いつ各タスクを正しく完了したことを確認できるように、デザインシステムとロードマップの目標と目処を設定します。

４．フィードバックと貢献の奨励　組織全体、特にUXデザイナー、製品チーム、エンジニアからのフィードバックと貢献を奨励します。 このインプットにより、賛同が高まり、チームにデザインシステムの所有権が与えられます。

５．ソフトローンチの活用とプロジェクトのテスト　デザインシステムをリリースや拡張する前に、ソフトローンチを行い、社内チームとプロジェクトをテストして、早期の見解を得ます。 これらのソフトローンチにより、制御された環境の問題点を特定でき、それによって変更や修正の実行がしやすくなります。 ６．ツールを見つける　デザインシステムとロードマップの管理に役立つツールを見つけましょう。 正しいツールを使用すれば、ワークフローを最適化し、時間のかかる管理タスクを自動化できるため、デザインシステムのROIが向上します。

７．設計トークンと標準化された命名規則の実行　最初のコンポーネントの設計をこれから始めるという時でも、設計トークンと標準化された命名規則を実行します。 これらのデザイントークンで、デザインシステムを拡張するときに、まとまりと一貫性を維持しやすくなります。

UXPinを使用したデザインシステムの作成と拡張

UXPinは、組織がデザインシステムをゼロから構築したり、成熟のどの段階での既存のデザインシステムを管理したりするためのソリューションを提供します。  

ゼロからの構築

デザインシステムはUXPinで簡単に作成できます。 外部ツールやプラグインを使用せずに、1つのユーザーインターフェースからデザインシステムを構築、共有、管理、および拡張できます。  

各デザインシステムは、色、文字デザイン、アセット、コンポーネントの4つの部門で構成されています。 設計者は、ドキュメントの説明を含めたり、チームメンバーが不正な変更を加えないように権限を設定したりすることもできます。  

無料お試しを申し込んで、UXPinで初めてのデザインシステムコンポーネント構築がいかに簡単かを体験してみてください。  

デザインシステムの成熟度のためのUXPin Merge

  UXPin Mergeは、古いデザインシステムを備えた組織に最適なソリューションです。 Mergeを使用すると、コードコンポーネントをリポジトリからUXPinのエディターに同期できるため、UXデザイナーと製品チームは完全に機能するプロトタイプを作成できます。  

Mergeは、1つのデザインシステムを維持するだけでよいため、デザインと開発の間のギャップを埋めることにより、信頼できる唯一の情報源（Single Source of Truth）を作成しながら、多くのDesignOpsの課題を解決します。 リポジトリへの更新は、どれも自動的にエディターに同期され、UXPinは設計チームに変更を通知します。  

  Vue、Angular、Ember、Webコンポーネントなどの他の一般的なフロントエンドフレームワークのGit統合またはStorybookを使用してReactコンポーネントを同期できます。  

 UXPin Mergeの詳細を確認し、この強力なコードベースの設計テクノロジへのアクセスを申し込んでください。

誇大広告の向こう側：ポケモンGOのUXリアリティチェック

今回の記事では、誰もが知るポケモンGOのUXの長所と短所ついて分析・解説していきます。

image05

ポケモンは、ほぼ20年前に全国的な現象として爆発的に流行しました。 人々はポケモンを見つけて捕まえるというアイデアを愛し、ゲームボーイをそのプラットフォームとして使用することを気に入っていました。

ここ何年かは、あの時のように人々が熱中するようなゲームが出てくる様子がないため、ポケモンゲームに関する話題は薄れ始めましたが、ポケモンGOでは、何百万人もの忠実なファンや普段ゲームをしない人達さえもゲームに熱中しました。 わずか2週間で、ポケモンGOのダウンロード数は7,500万回と推定されています。

しかし残念ながら、それはいいことばかりではありませんでした。

ゲームにはまだたくさんのバグがあり、ゲームのやり方さえも閲覧できないなどの状況でした。 経験豊富なゲーマーとしても、最初の数分間はポケモンを見つけて捕獲する方法を探りました。 絶賛されている記事はたくさんありますが、多くのプレーヤーが頻繁に定期的にバグることをノーマルとして受け入れることはできません。

まず、PokemonGoのUXが非常に魅力的な理由を探りましょう。

長所

プロファイルの構築

image06image01

カスタマイズ性

通常のポケモンゲームとポケモンGOの両方を含む、ポケモンのような没入型の世界のゲームの何がいいかといえば、疑似体験ができることです。 彼らは世界を探検し、まるで自分たちがポケモンの旅に出ているかのように体験できるのです。

ユーザーを早く簡単にそのような感覚にするためには、ユーザーがキャラクターを作成してカスタムできるようにすればいいのです。

任天堂は、第2世代のポケモンゲームでプレーヤーの性別を選択できるようにしたときに、まずこれに気づきました。実際に、ポケモンGOには、他のポケモンゲームよりも多くのカスタムオプションがあります。

ユニークなプレースタイル

image08

ポケモンゲームの特徴的な要素の1つは、高く生い茂る草の中を歩いていて、どこからともなくポケモンに出くわした瞬間です。 任天堂はその経験を活かし、ARと組み合わせることで、無限にリアルでワクワクするものにしました。

ゲームに入ると、ほとんどどこでも文字通りポケモンを見つけることができます。 これは、1996年にポケモンがゲームボーイで最初にリリースされたときに人々が最初に感じたのと同じ興奮の感覚を刺激します。

重要なのは、通常のポケモンゲームと同様に、最初のモンスターボールのスローでは勝利が保証されないということです。 時々あなたの狙いが外れたり、ポケモンがボールをそらしたり、捕獲後にポケモンが飛び出したり、あるいはポケモンが逃げたりすることさえあります。

そのチャンスを、ワクワクしながらプレーできます。プレーヤーは、ポケモンマスターへの旅に魅了されます。 ニール・エヤル氏のHook Model Canvasを使用して、ポケモンGoの現象を以下のように説明しました。

image00

みんなとシェア

image03

任天堂とナイアンティックは、ソーシャルゲームとしてポケモンGOをデザインしました。 人々は、友人など他人とプレーする場合においても、ゲームに価値を見出します。

あなたの周りにプレーヤーがいればいるほど、ポケモンをもっと見つけることができます。 ポケモンGOは、人口密度と同時にプレーする人数に基づいてデザインされたゲームなのです。

 

レベル5に達すると、プレーヤーは3つのチームに分けられます。 その後、ゲームは、プレーヤーが「ジム」をコントロールするために戦うときに、チーム間で切磋琢磨することを促進し、そして「ジム」はどのチームにも引き継がれます。 プレーヤーはレベルアップのために一生懸命になり、さらにプレーするのがもっと楽しくなります。

何よりも、任天堂はポケモンGOのUIに非常に便利な機能を追加しました。 ほとんどのプレーヤーは、特に友達と遊んでいる場合は、自分の経験を他と共有したいと思っています。 任天堂は、ポケモンGOのインターフェースに画面キャプチャボタンを組み込んでおり、プレーヤーが珍しいポケモンやその他の面白いものを見た時に、簡単にスクリーンショットができるようになっています。

短所

次に、ポケモンGOのUXの惜しい部分を見ていきます。

image07

実用的でないオンボーディングUI

ゲームを起動できた瞬間から、環境とのインタラクション方法についてほとんど何の助けも得られません。

幸い、ポケモンGOの世界に到着したら、早々に画面上のいくつかのポケモンのところに行けますが、実際にポケモンを捕獲する方法についての明確な指示はありません。 自分で方法を見つけないといけません。そのため、非ゲーマーやカジュアルゲーマーは、その「発見！」の瞬間が遅れる可能性があります。

また、次のようなコアアクションについてユーザーに通知する段階的開示もありません。

  • ポケモンを「師範」に転送すると、ポケモンを進化させるためのキャンディーをゲットできること。
  • ラズベリーのような特定のアイテムがゲーム内でどのように機能するか
  • 近くの特定のポケモンを押して、その種をもっと見つける方法

上記のアクションは、すべてユーザーがゲームとのインタラクションを深めるのに役立つため、UIは少なくともコンテキストヒントを落とすべきです。

サーバー問題

image04

ポケモンGOのUXの最も重大で惜しい点は、サーバーの問題にあります。

ユーザーがアカウントを作成しようとした瞬間から、ユーザーは長い読み込み時間と頻繁なバグに直面します。 多くのユーザーは、ゲームのリリースから1週間以内にアカウント作成さえできませんでした。 アバターをポケモンGOの世界に上手く立ち上げることができた人々のうち、多くの人々は、深刻なゲームラグ、ユーザーに強制終了させるキャッチとバトルのメカニズム内のバグなどが複数回に渡り発生したせいで、なかなかプレーできませんでした。

ポケモンGOのプレー自体と社会的側面は楽しいですが、前提として、問題なく機能するときだけです。

幸い、任天堂とナイアンティックは、サーバーの問題に対処するためのアップデートをリリースしました。 結果、読み込み時間やバグりは完全には改善されました。

十分な持続機能がない

image02

ポケモンGOは楽しいです。 ポケモンを捕まえてジムと戦って、世界中を旅することができます…しかし、言ってしまえば、それだけです。

ポケモンGOは、捕獲とバトルという2つの主なゲームプレーメカニズムで動作します。

  • 捕獲は250パターンに制限されています。 一度にゲームをプレーする人の数が減ると、利用可能なポケモンの数も減ります。
  • バトルは世界中に点在するジムで行われます。 ジムは大抵、特に人口密度の高い地域では、互いに近くにありますが、人口の少ない地域では、ジムは非常にまれであり、トラフィックがはるかに少ないため、発生するバトルは少なくなります。 これにより、人口の少ない地域のユーザーが疎外されます。

ユーザーがゲームの最初の興奮から冷めると、「グラインド」がゲームに組み込まれます。 「グラインド」とは、進歩に必要だけれども退屈な作業のことです。

ユーザーが基本的なプレーに慣れた後、ポケモンGOは段々飽きられてきます。 秋と冬も近づくにつれ、気温が低くなると、より多くのユーザーが室内籠る可能性があります。 任天堂とナイアンティックは、停滞と季節性を克服するために入念な機能を追加する必要がありました。

教訓のまとめ

最後に、ポケモンGOからの教訓をまとめましょう。

  • 最初の手引きは、ユーザーの既存の認知度と一致する必要があります。 ポケモンGOのオーディエンスは、初心者、カジュアルゲーマー、経験豊富なゲーマーの幅広い基盤で構成されています。 そのため、もう少し親切な説明が実は役立つのかもしれません。
  • 製品は発売時に気密である必要はありませんが、UXと技術的負債の蓄積に注意してください。 製品はフィーチャークリープの影響を受けませんが、ゲーム内のバグやサーバーの問題の多くは修正する必要があります。
  • 製品の次の次の段階まで考えましょう。 ポケモンGOのバリュープロポジションは、初期の急速な成長を促進するのに十分強力ですが、ARの目新しさは永遠に続くことはありません。 現金化の面では、ナイアンティックと任天堂がベンダー（レストラン、コーヒーショップなど）と提携して、より多くの人の往来を促進する可能性もあります。

その他のUXのベストプラクティスについては、無料の電子書籍Real-LifeUXProcessesをご覧ください。 Slack、Autodesk、3M、SumoLogicの内部デザインをご覧ください。

DesignOps – スペシャリスト向け おすすめツール

Tools for DesignOps specialists

DesignOpsのほとんどは理論と戦略に焦点を当てていますが、デザインと開発のツールは、プロセスとワークフローの実装、最適化に不可欠です。

本記事で、パフォーマンスの最適化からプロジェクトの管理、デザインチームの構築、顧客向けの優れたユーザー体験の作成まで、あらゆることに対応できるDesignOpsのツールについて掘り下げてみましょう。

その前に、DesignOpsの課題の多くは1つのデザインツールで解決できることをご存知でしょうか。

UXPin Mergeを使用すると、GitまたはStorybookの統合経由でエディタと企業レポジトリのコードコンポーネントを同期できるため、デザイナーはきちんと機能するHi-Fiプロトタイプの作成ができます。UXPin Merge の詳細と、この画期的なテクノロジーへのアクセスをリクエストする方法についてご覧ください。

UXPin Merge – 究極のDesignOpsツール

ここでは、UXPin MergeがDesignOpsに役立つ方法を４つ紹介します。

  1. まず、最も重要なのは、UXPin Mergeがデザインシステムを統一することです。UX デザイナー、製品チーム、デベロッパーは、みんな会社のレポジトリにホストされている同じデザインシステムで作業します。Mergeはすべてを自動で同期するので、DesignOpsは各チームや部署が同じ要素やコンポーネントで作業しているかの確認の心配はいりません。
  2. UXPin Mergeで、デザイナーが企業のデザイン標準に準拠することが保証されます。すべての要素やコンポーネントは既に完全にコード化されているため、何ができて何ができないかについてデザイナーとデベロッパーが何度もやりとりする必要はありません。デザイナーは、デザインシステムのコンポーネントをドラッグ＆ドロップするだけで、新しい製品やインターフェースの構築ができ、デザインハンドオフの後、エンジニアはUXPinから変更点をコピー＆ペーストし、一から始めることなく製品の開発を始められます。デザインシステムへの変更はすべてUXPinのデザインエディタに同期されるため、チームは常に最新バージョンで作業ができます。
  3. UXPin Mergeは、驚くほど多くのDesignOpsとDevOpsの時間と労力を節約してくれます。UXPin Mergeのようなツールがなければ、チームは全員が確実に同じデザインシステムを使うように多くの時間を費やしてしまいます。また、ほとんどの開発が完了しているため、UXPin Mergeはデザインのハンドオフプロセスは合理化され、エンジニアは仕事をしやすくなります。
  4. UXPin Merge は、非デザイナーによる製品開発をサポートします。実際に、UX の知識がほとんどない PayPal の製品チームは、従来のベクトルベースのデザインツールを使用する経験豊富なデザイナーよりも 8 倍速く、Mergeを使ってきちんと機能するプロトタイプをデザインしています。このワークフローにより、UX デザイナーはプロトタイプの構築とテストではなく、ユーザー エクスペリエンスの課題の解決に集中することができます。

パフォーマンスの最適化

パフォーマンスは、DesignOps戦略とチームの精神状態がいい状態にあるかの重要な指標ですが、どのようにしてチームが最高のパフォーマンスで稼働しているかを知るのでしょうか。

Level Upは、その問いに答えるための7つの質問からなるアセスメントです。また、他の同規模のチームとベンチマークを行って、企業のパフォーマンスの評価もできます。

Level Upが作るレポートは、ExcelやSheetsに取り込んで改善点を評価できるようになっています。

Designer Fundの元デザインマネージャーで、現在はSlackのデザインディレクターであるヘザー・フィリップス氏は、何百ものデザインチームを構築し教育してきた経験から、レベルアップフレームワークを開発しました。

プロジェクト管理ツール

プロジェクト管理は、DesignOpsが効率を上げることができる分野ですので、チームにとって使いやすく、現在の企業のプロセスや手順と連携できるプロジェクト管理ツールを探す必要があります。

プロジェクト管理ツールを使っていない場合は、チームが実際に使用し、現在の管理ツールやプロセスと統合されるものを見つけることを目標にします。

大抵のプロジェクト管理ツールでは無料トライアルが提供されているので、時間をかけてチーム内で色々なオプションを試してみてください。ワークフローを迅速化し、会社の成長に合わせて拡張できるものを見つけることが重要です。

  • Trello：カンバンスタイルレイアウトで有名なTrelloは、プロジェクトを視覚的に整理することができ、常に自分がどこにいるのかを全体的に把握することができます。Trelloには、タスクの割り当て、タイムライン、生産性メトリクス、カレンダーなどの特筆すべき機能があります。
  • Asana（アサナ）：世界で最も人気のあるプロジェクト管理ツールの1つであり、このツールでは、リスト、タイムライン、またはボードを使って、プロジェクトやタスクの表示方法をユーザーがカスタマイズできます。また、特定のタスクを自動化し、一般的なフローやプロセスの最適化も可能です。
  • Jira：リリースや開発関連の統合を可視化できることから、エンジニアリングチームの間で根強い人気があります。このツールはAtlassian Suiteの一部なので、もし企業が既にAtlassian 製品を使っていたら、Jira は理にかなっているかもしれません。また、Jira はスプリントの計画、追跡、実行に最適です。
  • Confluence：リモートチームでの連携に最適化されたもうひとつのAtlassian製品です。Confluence は「信頼できる唯一の情報源（single source of truth）」として販売されており、ナレッジベースを作成し、全員が同じページを閲覧できるようにすることができます。また、ソーシャルイントラネットを構築し、部門間の連絡、連携、企業文化を育むこともできます。
  • Monday：Monday は Asana と同様、チームのワークフローの構築、実行、拡張のためのプロジェクト管理ツールです。Mondayのシンプルで直感的なインターフェースにより、プロジェクトの戦略、計画、実行、レビュー、納期厳守が簡単にできます。
  • Notion：プロジェクトのロードマップやWikiを作成し、ガイドラインや期待値を概要を示すことができるユニークなプロジェクト管理ツールです。また、プロジェクトごとにタイムライン、カレンダー、カンバン、リストなどの複数のビューの設定ができます。

チーム構築用のツール

デザイン・開発プロセスには、人が不可欠な要素であり、DesignOpsは、ビジネスと顧客に貢献する共通の目標に向かって人々が協力し合えるよう、チームの構築を促さなければなりません。

以下のチーム構築ツールで、チームの結束力を高め、士気を向上させるとともに、チームやステークホルダーがDesignOpsの考え方やプロセスを理解できるようになります。

  • TriviaMaker：バーチャルまたはオンライン環境で、グリッド、リスト、トリビア、ホイールなどのゲームを開催できます。TriviaMakerの既成のゲームを使うことも、自分で作ることもでき、楽しみながらチームを活性化させることができます。
  • Pizzatime: ピザパーティーは、チームビルディングのためのエクササイズとして根強い人気があります。Pizzatimeを使えば、世界のどこにいるチームメンバーにもピザを送ることができ、遠隔地でのピザパーティーを開催できます。
  • Virtual Zoom Games：ビデオ通話でできるゲームやアクティビティーの包括的なリストが見られます。
  • Game Word Generator：ワードゲームは、楽しいし、ブレインストーミングやクリエイティブな思考を促すので、ユーザー・エクスペリエンスの課題解決には不可欠なスキルです。Game Word Generatorは、対面でもオンラインでも遊べるシンプルな言葉遊びです。

UXPin – 包括的なDesignOpsデザインツール

UXPinは単なるデザインツールではありません。連携を促し、多くのDesignOpsプロセスを合理化できます。ここでは、DesignOpsに役立つUXPinの主な機能をいくつか紹介します。

デザインコラボレーション

UXPinのコメント機能により、デザイナーはワイヤーフレームからデザインのハンドオフまで、世界のどこにいてもプロジェクトで共同作業を行うことができます。タグを付けてコメントをチームメンバーに割り当てることでチームメンバーがアクションを起こすことができます、完了すれば「解決済」としてマークすることもできます。

また、プレビューにコメントを付けることができるので、ユーザビリティテスト時に研究者がプロトタイプに直接メモを取ったり、ステークホルダーが感想やフィードバックを共有したりすることができます。

デザインシステム

企業のデザインシステムは製品の心臓部であり、UXPinでそのデザインシステムの管理と維持がしやすくなります。UXPin Mergeでデザインワークフローを次のレベルに引き上げ、企業全体で信頼できる唯一の情報源（Single source of truth）を維持しましょう。

ユーザーエクスペリエンス

顧客が喜ぶユーザー体験をデザインしましょう！変数を使ってユーザーデータをとらえ、その情報を使って、完全に機能するサインアップおよびログイン シーケンスの構築などの実行に移します。UXPinを使ってプロトタイプを作成すると、ユーザビリティ テストでより良い結果が得られるので、エンジニアが最終製品を開発する前にUXチームが問題を解決することができます。

アクセシビリティ

DesignOpsは、製品が視覚障害のあるユーザーにとってアクセスできるものであることを保証しなければなりません。デザイナーは、アクセシビリティをテストするために、プラグインをインストールしたり、ファイルを外部ツールにエクスポートしたりしなければならないことがよくあります。

UXPinにはコントラストチェッカーと色覚異常シミュレーターが組み込まれており、デザイナーはデザインエディター内で色やインターフェースのテストができます。これらのアクセシビリティ機能は、デザイナーがUXPinを離れることなく作業を確認できるため、時間の節約とアクセシビリティ問題の軽減につながります。

デザインハンドオフ

デザインプロセスの中で最も緊張し、ストレスを感じるのがデザインハンドオフです。UXPinは、デザイン仕様書、CSS、スタイルガイドなどの煩雑な作業が自動化され、エンジニアに渡す前にデザイナーが行うべき作業を最小限に抑えます。

また、UXPinではアセットの保存やドキュメント作成ができるため、デベロッパーはクラウドストレージとWord文書やPDFを切り替える必要がなく、すべてが一か所に集められています。

今後の展望

企業の規模に関係なく、DesignOpsはチームに多大な利益をもたらすことができ、効果的なDesignOps戦略は、デザインだけでなく、企業全体の連携、結束、一貫性、および効率性を促せます。

DesignOpsツールや、またそれがデザインチームにどのような利益をもたらすかについて学びましたが、DesOpsの方法論と思考にはさらに多くのことがあります。

UXPinは、世界の6人のDesignOpsリーダーと協力して、無料のeBook「DesignOps 101: デザインオペレーションへのガイド」を作成しました。この本では、次のようなトピックを取り上げています：

  1. DesignOpsとは：DesignOpsスペシャリストの役割と責任、そしてこの分野がどのように多くのデザインおよびビジネスの課題を解決することができるかについて詳しく説明します。
  2. DesignOps の重要性：DesignOps がどのように問題を解決するか、チームとの連携をより良くする方法、そしてデザインを拡張する方法をご覧ください。あなたのチームのニーズについてもっと掘り下げてみましょう。
  3. DesignOpsのインパクト: DesignOpsのコーチであるロビン・クライン・シップホルスト氏が執筆した章では、この規律がいかにデザイナーに力を与え、重要なことに時間を割くことができるかが説明されています。
  4. DesignOpsの仕組み：DesignOpsのマインドセットでの共同作業、調和をとり、優先順位をつけ、チームのパフォーマンスと能力を測る方法についてひと通り説明しています。
  5. 自身の会社でDesignOpsを始めるには：あなたのチームや企業にDesignOpsを導入する方法について学びます。ロードマップと戦略はどのようなものであるべきかをご覧ください。
  6. DesignOps Tools（この記事でおさらいしています）：デザインチームと製品開発チームのパフォーマンスを最適化するためのツールをご紹介します。どれがプロジェクト管理やチーム構築に適しているかご覧ください。

DesignOpsの世界とその始め方について、あなたのチームにデザイナーが1人でも100人でも関係なく、こちらで無料でダウンロードができます。

一度見るべきの7つの例 – UXデザインポートフォリオ

ux portfolio examples

UXデザイナー にとって、ポートフォリオの作成は重要な第一歩です。ここではあなたの最高の作品を紹介し、あなたのスキルと個性を輝かせることができます。 採用担当者や潜在的なクライアントはあなたを採用する前に、あなたのポートフォリオサイトを見たいと思うでしょう。これはあなたがこの業界に入ったばかりの人でも、次のステップを探している先輩でも同じです。 ポートフォリオで紹介する作品は、最終的に雇用者やクライアントがあなたをどのように見ているか、そしてあなたを採用するかどうかを決定します。しかし、UXデザインに関しては、何を提示するかだけでなく、どのように提示するかが重要です。あなたのウェブサイトは、実はあなたの仕事の一部なのです。

  1. Alex Lakas

Alex Lakasは、誰もが使う製品に10年以上携わってきた経験を持つUXデザイナーです。彼はLinkedInのフィードのリニューアルに参加し、Google Mapsの検索ページを今日のようなモダンなデザインにしました。 Lakasはサイトにアクセスした瞬間に、彼の経験を示す1行のバイオグラフィーによって、彼の能力を明らかにしています。 スクロールすると短いながらも正確な顧客リストが表示され、そのほとんどが有名企業です。これは単なる名前の羅列ではなく、経験豊富なデザイナーのポートフォリオの重要な部分を占めています。慣れ親しんだものに興味を持ってもらうことは、自分の作品を見てみようという気にさせる最良の方法です。 このサイトでは素晴らしい経歴を誇っていますが、それだけに頼ることはありません。いくつかの短い行の後に、UXポートフォリオの最も重要な部分であるケーススタディが表示されます。Lakasのケーススタディでは、彼の最も有名な作品の背景にある思考プロセスが明確な切り口で分かりやすく紹介されています。 Alex Lakasのポートフォリオサイトは彼のUXの仕事を反映した洗練されたデザインで、デザイナーが目指すべきものの好例となっています。

  1. Olivia Truong

Olivia Truongはプロダクトデザイナーです。彼女のポートフォリオに足を踏み入れた瞬間、彼女はそのことを明確にしています。彼女のウェブサイトや作品に通じるシンプルなファッションです。 TruongのUXポートフォリオには、引用文や証明書はありません。4つのプロジェクトが、美しくミニマルなデザインで展示されているだけです。また、「現場でイベントを管理するにはどうしたらいいか」といった疑問を投げかける見せ方は、まさにUXデザイナーが持つべき思考プロセスだと思います。彼女は一般的な問題に言及しながら質問を投げかけ、ケーススタディで解決策を提示しています。今回の事例では、イベントのチケット販売を管理するために開発されたアプリ「Ticket Manager」を紹介しています。 このケーススタディは、UXのケーススタディがどうあるべきかを示す完璧な例となっています。彼女は解決しようとした問題を説明しリサーチを行い、多くの画像を使ってデザインプロセスを詳細に説明しています。 Olivia Truongのポートフォリオは、 UXデザイナー が提示すべきものを的確に示しています。このポートフォリオは彼女のプロセスを示すだけでなく、これから始めようとしているデザイナーに大きなインスピレーションを与えてくれます。もしあなたが1つでも完成したプロジェクトを持っているなら、この方法でプレゼンしてみてください。

idea design brainstorm 1

  1. Ed Chao

Ed Chaoは、Dropboxでの仕事で最もよく知られています。彼はDropboxのウェブインターフェイス、モバイルアプリ、そしてデスクトップアプリのUIをデザインしています。 Chao氏のポートフォリオで最も効果的なのはミニマリズムです。画像はほとんどなく、テキストもさらに少ないです。彼が提供するいくつかのケーススタディは短く、あまり詳細には触れられていません。しかし、彼のDropbox UXデザインの背景にある主要な機能やアイデアはしっかりと紹介されています。これはChao氏が何が重要で、何を削ればいいのかを理解していることを示しており、 UXデザイナー としての素晴らしい特徴です。 小さなことですが、Ed Chaoが重要視しているのは連絡先の情報です。彼のポートフォリオにアクセスすると、まず最初にEメール、LinkedIn、Twitterへのリンクが表示されます。これは、潜在的な顧客や採用担当者ができるだけ簡単に連絡を取れるようにするための、ポートフォリオウェブサイトの最も重要な機能の一つと言えるでしょう。

  1. Jung Hoe

Jung Hoeは、Wix.comのPlaygroundでUX/UIデザイナーとして活躍しています。彼のポートフォリオサイトは、言語を素早く切り替える挨拶文ですぐに目を引きます。 しかし、訪問者の興味を引くのはユーモアです。美しくアニメーション化された黄色い塊が跳ね回る背景で、彼は自分自身を「天才的な赤ちゃん」が「完全に成長したデザインオタク」に変身したものとして紹介しています。このセリフに込められた個性が、すぐにつながりを生み出し、もっと知りたいという気持ちを起こさせます。 スクロールダウンしていくと、このポートフォリオが、才能と遊び心にあふれたUXデザイナーのものであることがわかります。訪問者としては、UI/UXの仕事と「楽しい仕事」の間でスイッチを切り替えることができます。どちらも、彼がデザインしたさまざまなアプリや製品を紹介しています。プロジェクトをクリックすると、彼のリサーチ、思考プロセス、最終的なデザインや破棄されたデザインなど、詳細なケーススタディが表示されます。 UXプロジェクトを見るにしても、Hoe氏の「Fun Work」を見るにしても、最終的には「Make somethin’ fun together！」という目を引くコール・トゥ・アクションにたどり着き、遊び心のある「Hit Me Up！」ボタンで彼のEメールにつながることになります。 Jung Hoeさんのポートフォリオは、デザイナーが作品と同じように自分の個性をアピールする方法の一例です。しかし、それでも完璧にプロフェッショナルなUXポートフォリオサイトを維持しています。

process direction way path

  1. Jamie Choi

Jamie Choiのウェブサイトは、目的を達成するだけでなく、それ以上のものでもない、優れたUXポートフォリオのもう一つの例です。 Jamie Choi自身のシンプルなイラスト、秋のカラーパレット、そしてプロジェクトの紹介のシンプルさが、彼女のウェブサイトをスクロールする際の癒しや楽しみとなっています。 地元のパン屋さんのオンラインプラットフォームをデザインしたことなど、彼女が提供するケーススタディは、完璧に正確で詳細なものです。課題、リサーチ、分析、作業プロセス、そして最終的なデザインのアイデアまで、読者に分かりやすく説明しています。これらのケーススタディは、採用担当者やクライアントが見たいと思うような、非常に詳細な内容になっています。 崔さんのポートフォリオサイトを完成させるのは彼女のアバウトページです。このページはケーススタディと同様に、お客様に興味を持っていただくために必要な詳細が記載されていますが、決して威圧的ではありません。 Jamie ChoiのUXポートフォリオは、ポートフォリオサイトに必要な最も重要な2つのことを完璧にバランスさせています。彼女のプロとしての仕事のプロセスを深く知ることができると同時に、個人的な親近感も醸し出しています。

  1. Liz Wells

ブルックリン在住のデザイナーであり、Squarespace社のシニアプロダクトデザイナーでもあるLiz Wells。彼女のUXポートフォリオサイトは、驚くほどカッコ良いものです。 ホームページには5つのケーススタディが表示され、ユニークなタイポグラフィだけが使われています。プロジェクトの上にカーソルを置くと画像が表示され、カーソルを動かすとその画像がページ全体に広がっていきます。 Wellsのポートフォリオで最も印象的なのは、彼女のケーススタディです。例えば、「Sidewalk Toronto」のケーススタディは、短いビデオにまとめられています。さらに詳しく知りたい方は下にスクロールすると、手書きのサイトマップのスケッチがあり、続いてプロジェクトの説明、UXの課題と解決策が紹介されています。このケーススタディには、彼女のプロセスに命を与えるビジュアルが添えられています。 Liz WellsのUXポートフォリオは、デザイナーとしての彼女の個性を完璧に表現しながら、何の不満も感じさせません。

user laptop computer

  1. Jeremy Stokes

Jeremy Stokesは、Duolingoのプロダクトデザイナーで、GoogleでUXデザインのインターンをしていたこともあります。しかし、彼の仕事で最も特別なのは、彼の情熱的なプロジェクトである「Cultivate」です。 Cultivateでは、アフリカ系アメリカ人のメンタルヘルスを理解するための新しい方法を模索しています。このプロジェクトは他のケーススタディのように、問題の背景やプラットフォームのコンセプトを構築・設計するプロセスを詳細に説明しています。 またStokesのポートフォリオで際立っているのは、彼のプレゼンテーション能力です。彼のAboutページには、彼の好きなビデオゲームやアニメなどのイメージや参考資料がたくさん掲載されています。しかし、彼は経歴だけでは満足しません。彼のポートフォリオには見事な履歴書が含まれており、ケーススタディと同様にポートフォリオの一部となっています。 Jeremy Stokes氏のUXポートフォリオは、プロのポートフォリオと個人のウェブサイトの間を行き来し、見事にそれを実現しています。訪問者に自分の個性を示すことは、仕事を検討してもらえるか、何十人ものUXデザイナーの中で忘れられてしまうかの違いを生み出します。

UXPinでUXポートフォリオをデザインする

UXデザインポートフォリオ

UXポートフォリオをデザインしたい方は、14日間の無料トライアルに申し込んでみてはいかがでしょうか？体験するとすぐに、あなたのポートフォリオに加えるべきデザインツールがまた一つ増えたと実感するでしょう。

UXケーススタディ：世界初の航空会社のレスポンシブホームページ

レスポンシブデザインは、今やウェブデザインにおける業界の常識ですが、以前は必ずしもそうとは限りませんでした。

今日は、2014年までタイムトリップしてみましょう。世界初のレスポンシブ航空会社サイトのデザインと立ち上げについて、深く掘り下げていきます。

今から、過去数年間で最も影響力のあるウェブプロジェクトの1つに繋がった背景の詳細と決断のすべてをご覧いただけます。そのベストプラクティスは、今日でも当てはまるものです。

アラスカ航空は、当時社員10人程度の新しい会社だったWork & Coとタッグを組むことにしました。その結果どうなったと思いますか？

初のレスポンシブ航空会社サイトへの収支決算と賞、そして現在もアラスカ航空とタッグを組み、今や従業員が100人以上にまでとなり、Work＆Coの爆発的な成長を遂げました。

image09

写真：Work & Co

Work＆Coの創設パートナーであるフェリペ・メモリア氏に、最も人気のあるプロジェクトについて一つ話を聞きました。 これは、コラボレーションデザインが、アラスカ航空をIPOの成功に導くのにどのように貢献したのか、そのストーリーをご紹介します。

image08

継続：両極端な設計

プロジェクトの全段階で、「航空券をもっと売る」という1つの目標がすべてを導きました。

「ビジネスだけでなく、ユーザーの視点においても最も重要なことに集中できたことが、このプロセス全体の素晴らしいところです」と、同社の創立パートナーであるフェリペ・メモリアは述べています。

アラスカ航空チームと協力しているWork＆Coチームは、エッジケースとそれに関連するすべてのフローに基づいて設計するのではなく、単独で往復チケットを購入するというコアユーザーに焦点を当てました。

チームは、このユーザーのプロセスが正しく行われれば、確かなベースラインを手に入れると考えました。

image00

写真：アラスカ航空

さらに、「モバイルファースト」設計への動きとは対照的に、アラスカ航空プロジェクト全体は「エクストリームファースト」のアプローチから入りました。 チームは、最小のビューポートから始めてデスクトップにスケールアップするのではなく、モバイルビューとデスクトップビューを同時に設計し、中間のビューポートに変換するという極端な作業を行いました。

ステップ１：明確な目標を一つ決める

このプロジェクトは、アラスカ航空をウェブサイトから、現代の旅行のニーズや行動に対応できるデジタルプラットフォームに移行することを目的としていました。 Work＆Coは、同社のウェブサイトと収益の分析に基づき、コンバージョン率、リピート訪問、モバイルエンゲージメントを改善するために、予約体験の見直しを優先することを推奨しました。

メモリア氏は、「実際、そのことついて考えると、航空会社の予約フローは1つの大きな形にすぎません。そこで我々は、良いかたちとしてだけでなく、実際に楽しく使用できるものを作成するところから始めました。 我々のプロジェクトをこの相対的な方法で考えることで、すぐに設計に取り掛かることができた。」と述べています。

ステップ2：コラボレーション・コンセプティング

このプロジェクトは、プロセス全体を通して、複数の専門分野にわたる協力的なアプローチによって明確化されました。

Work＆Coは、「それぞれが特化した自身の強みを持っていますが、その強み以外でもさまざまな役割をチーム内で果たすこともできます」というようなコンセプトに基づいてエージェンシーを構築しました。例えば、分析のスペシャリストが、もしかしたら素晴らしいプロジェクトマネージャーでもあるかもしれません。 実際、Work＆Coにはアカウントマネージャーが一人もいませんが、社員は皆、プロジェクトとクライアントの要望を管理するために必要な技術的なスキルとソフトスキルを兼ね備えています。

image02

写真：Work & Co

アラスカ航空プロジェクトの過程で、製品戦略担当者3名、デザイナー者3名、および開発者4名が、アラスカ航空の経営幹部レベルのステークホルダーと協力しました。 チームは、クライアントと直接に緊密な協力以上の法務や運用などの企業の他の重要な部分も設計プロセスに取り入れました。これによってアイデアを確実に実現し、継続を可能にしました。

コンセプトの段階では、一人の旅行者が往復の旅行を予約するという、ひとつの核となるシナリオの解決にすべてを費やしました。2週間にわたり、バックグラウンドの異なる3人のデザイナーがこの1つの課題に取り組みましたが、これは通常のプロジェクトの分業体制とは対照的です。例えば、あるデザイナーはグリッドと色で考える古典的なUIデザイナーでした。もうひとりは、プロトタイプを作れる新世代のハイブリッドデザイナー兼デベロッパーでした。

「コンセプトについてより多くの頭脳を得られたことで、我々のプロジェクトに大きな変化がもたらされました。 我々は、遥かに優れたものを設計するより高いチャンスを得られました。 ほとんどレアなケースに焦点を当てる理由はありません。メインのエクスペリエンスだけをテストして反復することで、より純粋なものを思いつくことができます。」とメモリア氏は言います。

チームは1日に1回だけ正式にチェックインします。 問題を解決するために、一旦設計から離れて一呼吸置く時があります。 チームは実際にアラスカ航空本社の会議室で働いていますが、メモリア氏に関して言うと、家族をニューヨークからサンフランシスコのベイエリアに呼び寄せて、物理的にクライアントに没頭できる環境を作っていました。

全員が旅行者でアラスカ航空の顧客であったため、クライアントから提供された既存の顧客調査をすぐに利用することができました。その結果、自分たちが解決しようとしている問題が正しいことを確認することができたのです。

ワークショップと共同設計を2週間集中して行った後、チームは設計戦略を経営幹部のステークホルダーに提示する準備が整いました。