members

members

巨大プロジェクトで5年以上成果を出し続ける方法とは?-設計編 ③UX/UI設計のプロセスと成果物-

Tweet

我々が参画しているチームでは、前の記事で解説しました、スクラム開発の中のUX/UI設計フェーズを主に担当しています。
この章では、もっともUX/UIに関わる「要件定義」「詳細設計」「UIデザイン」の詳細について解説していきます。

まずUX/UI設計のプロセスでは、ビジネスリクワイアメントで決まった各エピックに対し、 要件定義→詳細設計→UIデザインの順でプロセスを経て、仕様とデザインを固めてきます。

3-1. 要件定義フェーズの説明

要件定義フェーズの具体的なプロセスを解説していきます。

各機能のあるべきプロセスを検討する

まずは導線設計ですが、既存サイトへの影響範囲の調査をおこない、流入からコンバージョンまでの流れを確認します。
例としてドローン配送の場合、自宅配送やメール便などの「配送方法一覧画面」にドローン配送のオプションを追加するだけではなく「注文、最終確認画面」や「注文履歴画面」にも、配送方法を表示させる必要があるので、影響があるということを検討資料などに明示します。
これは、前の記事の「設計者の基本姿勢パート」でもお話しましたが、影響範囲を調査する際は必ずサイト構成がすべて可視化されたドキュメントを用いて確認するようにしています。

業務要件をサイトに当てはめる

フロー・シナリオでは、洗い出した影響範囲・導線設計を元に「全体フロー図」「それぞれの画面の大まかな表示要素」「挙動」をパワーポイントなどの資料にまとめ、クライアントの企画チームやプロダクトマネージャーと合意を取ります。
ドローン配送の場合、ドローン配送が選べる画面から配送が完了するまでの「フロー」を組みつつ、「配送先の住所が登録済みかどうか」などの分岐によって、表示や動作が変わるものを「シナリオ」として分岐パターンを網羅します。
ここでのポイントとしては、ビジネス要求にマッチしているか、技術的に実現可能かを判断するためにも全体感を整理しておくこと。そしてシナリオについては色んなユーザーパターンが想定されるので、漏らさずシナリオを網羅することが大事になってきます。

3-2. 詳細設計フェーズの説明

続いて詳細設計フェーズの具体的なプロセスを解説します。

要素のレイアウトを設計する

ワイヤーフレームは実装時の要素配置を開発チームと連携するため、ワイヤーフレームを制作して仕様書の中に組み込みます。
ドローン配送の場合、配送方法選択画面でドローン配送が可能な場合のワイヤーフレーム、ユーザーが配送エリア外にいるなどの何かしらの理由があってドローン配送が不可能な場合など条件ごとのワイヤーフレームを用意します。またその他にも着陸地点を指定する画面など、ドローン配送導入によって、影響のあるすべての画面のワイヤーフレームを用意します。
ポイントとしては挙動やシナリオごとに配置要素が変わる場合は、全パターンのワイヤーフレームを作成して開発側と連携することが大事です。

機能の詳細を詰める

続いて、ワイヤーフレーム作成後それぞれの表示要素に対する挙動や、機能詳細を仕様書に落としていきます。
仕様書に書く内容としては、ユーザーがアクセスしたときやクリックしたときなどの挙動の定義だったり、どこで取得した何の情報を表示される条件や、「遷移するための条件」「エラーが表示される条件」など細かい仕様をすべて書いていきます。
ドローン配送の場合、ドローン配送選択時に初めてECサイトを使うユーザーは配送先住所の登録が必要になってきますし、過去にサイトを利用したことがあって配送先がすでに登録されている既存ユーザーに対しては、登録されている住所の表示をしてあげる必要があります。このようなそれぞれの表示条件やロジックを仕様書にまとめます。
ポイントとしては、各仕様がワイヤーフレームのどこの話をしているかわかるように、上にある要素から、順番に仕様として落としていくこと。また、複数箇所に同じ挙動のパーツがある場合は、そのパーツを一つのモジュールとして定義し別ページで管理したりすることもあります。

プロジェクトを円滑に進行するツール

要件定義と詳細設計フェーズの締めくくりとして、我々が参画しているチームで利用しているツールについてご紹介します。
当プロジェクトのサイトリニューアルでは、プロジェクト進行管理ツールとコラボレーションツールを用いて数千人規模のプロジェクトを管理しています。

JIRA – プロジェクト進行管理ツール

  • JIRAはバグトラッキングや課題管理、プロジェクト管理に用いられるWebベースのソフトウェア
  • エピック、ユーザーストーリー、タスクを階層構造にして一覧化できる
  • 議事録代わりに課題へコメントすることで「タスクを見れば進捗がわかる」状態になる

Confluence – コラボレーションツール

  • Confluenceはプロジェクトの計画状況、文書、チャット情報などを一元管理するWebベースのソフトウェア
  • 履歴差分の保存や、ツール内の被リンク確認、ページ名変更時のリンク更新を動的におこなえる
  • ワイヤーフレームや仕様は機能ごとにドキュメントページを作りまとめる

3-3. UI設計フェーズの説明

UI設計の土台となるデザインシステム・インタラクション・デザインガイドラインについて説明します。

デザインシステムとは?

デザインの基準・原則・ガイド、基準を満たすUIパターンなど、デザインに関するルールを定めたもの。UI設計の土台になります。チームがプロダクトを設計、実現、構築するときに参照するためのソースであり、定めることで、デザインやプロダクト開発を統一することができ、制作コスト・時間の節約にもなります。

  • 我々のチームのような大規模なプロジェクトは開発する画面数も関わるベンダーも多く、逐一画面をいちから作成していると大変なのでこのデザインシステムを採用していています。

どのように作成すれば良いのか?

デザインシステムを作る上で大切なのは、どのような考えを基に作成していくかというデザイン概念・原則の定義(下図①②)。その定義後、コンポーネント・モジュール作成(③④⑤)をおこなっていきます。

アトミックデザイン


引用元:Atomic Design Chapter2

モジュラーデザインの考えかたを元にブラッド・フロストさんが考案したUIデザイン手法。アトミックデザインにおける、コンポーネント(デザインの構成物)がいくつも組み合わさったような製品のパーツをモジュールといい、製品の各モジュールを作成し、それらを繋げて1つの完成品を作ります。
インターフェイス作りは、常に最小の素材 = Atoms(原子)の組み合わせであるべき”を基本理念に、原子が分子を作り、分子が有機体を作りと小さなパーツが積み重なって大きなプロダクトになっていくのがアトミックデザインのイメージです。

諸説はあるのですが、一番小さい単位であるアトムスというものが、要するに先ほど話していた“コンポーネント”となり、モルキュラスとオルガニズムズというものが“モジュール”になると、当チームでは認識しています。

なぜアトミックデザインなのか?

アトミックデザインでデザインシステムを作成するメリット

  • 大規模プロジェクトにおいては、共通のコンポーネント・モジュールを用いることにより、開発におけるビジョンをメンバーに共有し、サイトに一貫性をもたせることができる
  • 定義されているカラーやタイポグラフィーなどのコンポーネントを組み合わせて使用するので、デザイナーのレベルを問わず制作ができる
  • プロジェクト全体で一貫したルールを設けることで、画面それぞれに細かく仕様書を書く手間が省ける
  • 共通のコンポーネントを使用するため、開発コストが抑えられる

などがあります。
説明をしたようにいろいろとメリットはあるのですが、共通のコンポーネント・モジュールを用いることで、デザイナー・エンジニア両方の工数の削減とサイトの統一ができることが大きいと思います。

デザインシステムがないとこうなる

  • 共通のコンポーネントがないため、画面それぞれ独自のルールで作成することになり、サイトの統一感や一貫性が失われる。(統一感や一貫性がないことでユーザーの混乱の元にもなる)
  • 定義されているコンポーネントがないと、デザイナーの裁量で画面が作成されることになり、成果物のクオリティに差が出る
  • 一貫したルールがないため、画面それぞれに細かく仕様書を書かなければならず、工数が増える
  • 共通のコンポーネントがないため、画面ごとに開発しなければならず、開発コストが増える

などがあります。
デザインシステムの作成は時間もかかり大変ですがブランディングやサイトの統一に役立つので、これを参考にぜひ対応している案件でもデザインシステムを取入れてみてほしいです。

デザインガイドライン

デザインガイドラインを作る理由

先述したデザインシステムは、命名規則やコード、UIコンポーネント、アニメーションなどの実装視点で必要となる要素も含まれたものであるが、デザインを制作する場合それらは必要ないため、デザインに特化したデザインガイドラインを作成することで、デザイン作成の効率化を図ります。

デザインガイドラインとは

デザインを進める際の指針のこと。デザインガイドラインを定めることでそれを見た人が誰でも統一したデザインを制作することができます。
アイコンのルールやリンクのルールなどの基本ルールや、画像のトリミングのルール、コンテンツごとのマージン幅など細かくルールを定めています。

どのようにデザインガイドラインを運用しているのか

デザインガイドラインは完成した後も新規デザインに対応できるようアップデートする。そのために最新情報がデザインガイドラインに反映されるまでをフローとして確立し運用します。
一例として紹介するのは、案件の新しいレギュレーション=新規デザインを作成するフローです。

ガイドラインの実例

Sketch(シンボル)やFigma(コンポーネント)などで、デザインガイドラインで定めたデザインのパーツを使用することで、デザインの統一化かつ効率の良い運用ができる。

おすすめのツール

Sketch

動作が軽く、共通部分をコンポーネント化できるため、ページを量産する構築などの場合に最適です。

  • 動きがスムーズ
  • シンボル機能が多彩なデザインを作りあげるのに有効
  • より使いやすくなるプラグインがたくさんあり、自分好みにカスタマイズすることができる
  • 無駄な機能がついていないため、余分な機能について学ぶ時間が削減される

Figma

ブラウザ上で複数人同時に作業することができるデザインツール。利便性が高くチーム体制での作業に向いています。Sketchファイルをインポートできます。

  • 他の人が作業している箇所がカーソルで表示され、作業の様子が可視化される
  • デザイン上で気になった箇所にコメントを残し、フィードバックすることが可能。スムーズに確認をおこなうことができる
  • ベクターデータでデザインを作成できる
  • Gitのようなバージョン管理機能があり、作業の履歴を残せる

まとめ

私たちがクライアントに評価されている理由の一つに具体的な制作フェーズまで貢献している点があります。
また、10年以上の運用実績はクライアントのビジネス理解にももちろん繋がっております。
そしてWebサイトとアプリなどの弊社のそれぞれのチームが成立しており、領域間での連携をとてもスムーズに取ることができます。
最後に、過去の検討経緯やサイトの詳細仕様などのナレッジが蓄積されている点は、おそらくかなり重宝されており、クライアントと弊社の切っても切れない関係性の最大の要因となっております。

次のフェーズでは「高難度プロジェクトに参画するチーム作りとは?」を問いに執筆されておりますので、是非ご覧くださいませ。


関連コラム

巨大プロジェクトで5年以上成果を出し続ける方法とは?-設計編 ①設計者の基本姿勢-
巨大プロジェクトで5年以上成果を出し続ける方法とは?-設計編 ②プロジェクトの進め方(スクラム開発)-
[当記事] 巨大プロジェクトで5年以上成果を出し続ける方法とは?-設計編 ③UX/UI設計のプロセスと成果物-
巨大プロジェクトで5年以上成果を出し続ける方法とは?-チームビルディング編 ①スキル向上-
巨大プロジェクトで5年以上成果を出し続ける方法とは?-チームビルディング編 ②スキル発揮-
巨大プロジェクトで5年以上成果を出し続ける方法とは?-チームビルディング編 ③働き方改革&運営基盤整備-

関連記事

UXデザイン

 

コラム執筆

中新田 紫乃

2014年新卒入社のデザイナー。現在大手アパレル企業さまのWebサイトのUI/UX設計・改善を担当。