UIデザイン案件の始めに準備したいあれこれ

こんにちは、Gaji-Labo UIデザイナーの今西です。

以前、山岸がプロジェクトに参加してからクロージングするまでコミュニケーションフローやキックオフについて書きました。
私の方からはUIデザインを進めるにあたって、デザイナーが準備したいスターターについて書きたいと思います。

デザイン資産の確認

ブランド、サービスやプロダクトには、デザインのアセット/資産があります。 ブランドやサービスのロゴやデザインガイドラインの有無は、デザインを始める際に必ずお聞きします。

• ロゴデータ、使用規定
• デザインガイドライン、スタイルガイド

ブランド、サービスやプロダクトのスタイルは、新しいプロジェクトでも把握しておかないと一貫性に問題が出かねません。 スタイルに手を入れるタイプのプロジェクトの場合もありますが、それでもこれまでの資産は変えていくにしても継続するにしても、理解しておくべきです。

デザインガイドラインやスタイルガイドがまとまってある場合、デザイン資産に学ぶことがたくさんあります。
デザインガイドラインにブランドやプロダクトのプリンシパルが詰まっているので、カラーやスタイルでブランドやプロダクト見えてくるだけでなく、デザインのやる・やらない方針や特色が学べます。デザインする前の前提のインプットや理解において、大事な情報が詰まっているので、まず熟読します。

ロゴはあるけどデザインガイドラインやスタイルガイドはない、ということもよくあるのですが、その場合は既存サービスを見る、使ってみることでそのスタイルを学びます。
どのようなカラーを使用しているか、どのようなデザインのスタイルか、どのようなレイアウトか、頭に入れておくようにしています。

デザインするツール

弊社ではデザインツールはFigmaを推しています。 最近の状況を見ると、SketchからFigmaへの移行がかなり進んでいるようですね。Adobe XDも追い上げているようですが。

Figma推しの理由は下記でしょうか。最後の3点はUIデザインでメリットを感じているところです。

• デザイン 〜 プロトタイピング 〜 フロントエンド連携がひとつでできる
• ファイルの共有と権限管理ができる
• Webベースで閲覧・編集・コメントができる
• 共同編集ができる
• コンポーネントの管理や活用がしやすい
• ライブラリ共有するとさらにデザインの一貫性が保持しやすい
• プロトタイピングの設定の充実

始めにお客さんファイルを共有すると、デザインの途中経過も見えます。デザイナーによっては作業途中を見られることが嫌なひともいるかもしれません。

途中経過が見えてしまうことについてはファイルやページ運用の工夫するところだと私は考えています。 現在は下記のような運用でファイル内のページを管理しています。

• 作業中・検討中のデザインは [WIP] [Draft] など明示的に途中のもので分かるような名前のページで作業を進める
• お客さんに提案するデザインや確定したデザインはバージョニングのある [日付+提案]などの名前のページへ移動

スプリント的に進める場合は、決まっていないアイデアや軽めの提案レベルでもデザインを見せながら進めても良いと思っています。途中経過や過去のバージョンも残しながらデザインを進められるので、作業途中を見られることへのデメリットは私はあまり感じていません。
明示ページでバージョニングや現在のデザインがどれなのかがわかれば、デザインをレビューする側も混乱がないのかなと思います。

プロジェクトのデザインするベースをつくる

デザインの資産・ガイドラインの確認とツールの準備はデザインを行うベースづくりになるものなので、お客さんには必ず確認しています。

資産・デザインガイドラインの情報はプロジェクトのインプット、デザインを考える上でベースとなる情報となります。 デザインツールの準備はデザインを進める作業場所のベースです。

プロジェクトを進める上での情報と環境のベース作りではありますが、プロジェクトへの理解や具体的な進め方を考える作業にもなるので、ただの準備だけでなく、「よし、始まるぞ！」の気持ちで気合も入ります。

具体的な基礎ができると具体的なUIデザインを進める道が見えてきます。
プロジェクトの始めはお客さんへの提供のお願いや確認のやり取りが多くなってしまいますが、UIデザインをつくるベースをつくるため、お付き合いをお願いできると幸いです。

Gaji-Labo式UIデザインプロジェクトについて他にもいろいろ知りたい方は「UIデザインプロジェクトの進め方」まとめがおすすめです。