デザインチームの小高です。今回はデザイン前の準備について書きます。
プロジェクトの初動で、デザイナーはいきなり手を動かす事はありません。手を動かす前の準備こそ最も重要で、認識違いを防ぎ、スムーズにスケジュールを進めるための必要なフェーズになります。
また、ここにあげた工程の全てを毎回行うわけではありません。プロジェクトやチームの規模感により様々ですが、実際にデザインツールを使う前に、どのような準備をしているか整理してみました。
知る・理解する
携わるプロダクトについて知る。（ユーザー・市場、その業界のデザインのトレンド・UIの傾向について）
- プロダクトを利用するターゲットユーザーについて理解し明確にする。必要あればペルソナの作成。ニーズを知るために、できればユーザーインタビューをする。
- 市場や競合について知る。既存のサービスがあれば、ヒューリスティック調査を行い課題点などを洗いだす。
デザインのトレンドやUIの傾向については、普段より自分の引き出しにアイデアのストックを入れておく事が必要です。私はPintarestを利用する事が多く、カテゴリーやUIのパーツ別でフォルダに整理しています。Instagramのブックマーク機能も利用します。
Mobbinは、海外のアプリのトレンドを調査したい時に利用しています。代表的なページだけでなく全ページ掲載されているので、有料アプリなどもチェックできます。
オブジェクトUIモデルの作成
ワイヤーフレームの前に、オブジェクト設計UIモデルを作ります。
タスク指向UIになってしまっていないか、オブジェクト指向になっているか、オブジェクトを抽出しUIモデルを作ります。また、要件を満たしているかも確認し理解を深めていきます。
- デザイナーだけでなく、エンジニア、プロジェクトマネージャー達とチーム全体で考える事で、作るプロダクトへの共通認識を持ち、理解を深める
デザインコンセプト設計
- ユーザー層、キーワード等からデザインコンセプトを設計し、ビジュアルやトーン＆マナーを定める。例えば、プライマリーカラーを青にした時に、明度や彩度によって温度感が決まる。「信頼」の色はどんな青か、「親しみやすい」色はどんな青か。ベースになるプライマリーカラーを基準にカラーを設計する。
- フォントファミリーの設定。ウェブフォント使用するかシステムフォントのみにするか？
- 必要に応じてイメージボードなども作成し、トーン＆マナーやイラストレーション・使用素材等の検討をする。
デザインツールの選定
デザインツールは、デザイナーが複数人携わる場合、完成後の引き継ぎの必要がある場合、エンジニアのへのシェアのしやすさ等を考慮する必要があるため、少し慎重に選びます。最近のアシアルではAdobe XDを使用する事が多いです。デザインツールでの共同編集は必須になってきました。デザインはデザイナーだけでなくチーム全体でプロジェクト初期から共有する事が必要な事だと感じています。
CSSフレームワークの選定
エンジニア主体で決める事が多いですが、フレームワークの選定にも関わります。作るプロダクトにより使用の有無は変わりますし、フルスクラッチかCSSフレームワーク使用かで、工数やUI設計にも影響してくるのでチームで選定します。前後者ともメリット・デメリットはあるので、フレームワークのデザインガイドラインを確認したり、エンジニアが使用するプログラムとの親和性などから慎重に選定します。BootstrapやVuetify、Ant Designなどがあります。
以上、プロジェクト初動の準備期間で行っている事をあげてみました。自分たちだけではなく、クライアントともチームになる事で「思ってたものと違う」という乖離を防ぎます。スクラム開発時も、スプリント内でプロジェクトの進捗に必要なフェーズとして時間をとるようにしています。
普段より新しい手法やツールなどを試し知見を貯めておくのも大事で、実際に手を動かしていくフェーズにスムーズに移行できるかに関わってきます。