デザイン制作時の流れ

こんにちは。デザイナーのasatoといいます。
私は新卒で入社して現在4年目となります。
今まで社内では大きく分けて2つのデザインを担当してきました。UI/UXデザインとグラフィックデザインですね。

今回はそれぞれのデザインを作成するにあたっての流れや考えを記載していこうと思います。
先にUI/UXについて記載します。

そしてその前にどのようなプロセスでデザインを作成しているのかを記載します。
プロジェクトによって異なる場合もあるのですが、大体は下記の形です。
※受託プロジェクトを想定しています

目次のプロセスを深掘りしていきます。

1.要件定義の段階からプロジェクトに参加し、要望をお伺いする

弊社ではデザイナーも要件定義の段階からプロジェクトに参加することが多いです。
上流工程から参加するため、クライアントの要望をより理解しやすくなります。
要望を聞きつつやりたいことは何か？そのサービスを作成する目的は何か？を把握していきます。またターゲット像などもこの段階でヒアリングし、ユーザー像への理解を深めます。
疑問点もこの段階でお伺いしていきます。細かい仕様に関しては、実際にデザインしていく上で気がつくこともあるのでラフの段階でお伺いすることもあります。

2.要件を詰め、デザインイメージをお伺いする

要件がある程度固まったらデザインイメージをお伺いしていきます。
どのような色を使用したいのか、使用するユーザーに与えたいイメージ、逆に与えたくないイメージなどをヒアリングしていきます。
デザイナーの立場としては例えば「かっこいいデザイン」の言葉一つでも様々な「かっこいい」が存在しうるので、イメージをお伺いした後更に深掘りすることもあります。例えば濃い青を使用したスタイリッシュなイメージなのか？赤を使用したインパクト重視なのか？などです。
時には参考画像などを添えてすり合わせを行っていきます。

3.リサーチを行う

デザインイメージがある程度定まったら、リサーチを行います。
競合はどのようなサービスがあるのか？強みは何か？逆に作成するサービスの強みとは？など理解を深めていきます。強みを知ることでそれを活かしたデザインを起こせると考えています。弊社の場合はサービスのスクリーンショットを撮って特徴をメモ書きし、まとめるパターンが多いですね。

4.ラフデザイン(ワイヤーデザイン)を作成、場合によってはパターンも作成し複数案考える

実際にデザイン作成へ移っていきます。
私の場合はfigmaを使用しています。
figmaは非常に便利なデザイン作成サービスで、しかも複数人で共同作業もできるので仕事にぴったりのサービスです。
リサーチを元にラフを作成していきます。この段階でUX的な要素(使い勝手、導線)なども考えます。
工夫した内容などはミーティングでクライアントへ伝えます。ミーティングは基本的に週に1回1時間で行われるので週1ペースでスケジュールを作成してそれに沿って作成していきます。ミーティング内ではデザインの使い勝手について議論しつつ、フィードバックもお伺いします。口頭でやり取りすることで伝えたいことがより細かいニュアンスで伝わると考えています。

作成している際に細かい仕様について気になる部分が発生したらミーティングでお伺いしていきます。
例えば、求人サイトを作成したいという要望を受けて作成している場合、同じ求人への応募を同じ求職者が行って重複した場合はどのような表示をユーザーに行うのか？そもそも重複応募ができないようにするのか？など詰めていきます。要件定義の文章のみでは想定しづらかったパターンを考えて質問していきます。

作成している身としては、「この部分はこうした方が良いのでは？」と要件定義を見たり、実際に作業してみると思ったりするので論理的に説明できるようにプレゼンスキルも問われるなと感じます。例えば、検索項目を作成しプレゼンするとしてアコーディオン(＋ボタンを押すと隠れていた項目が出てくるもの)にして自分で開いて検索するのか、検索用のポップアップが開くのかそれぞれ利点や違いがあると思います。その時に画面の目的やメリットデメリットを簡潔かつわかりやすく伝える必要があります。

数年前のひよっこデザイナーの頃はきちんとわかりやすく説明できるように、実際に発表原稿を書いたりしてミーティングに挑んでいました。
もちろんビジュアルで魅せることも非常に重要ですが、説明もデザインに説得力を出す大事な要素なのでこちらも重要です。

またこの段階で大まかに色を当てはめているケースが多いので、カラーコンポーネントを作成し色の管理をしやすくします。例えば、UIデザインを作成するときはメインで使用するカラー、サブで使用するカラー、目立たせたい場所に使用するアクセントカラーを設定することがほとんどなのでそれらの色を定めまとめます。

もちろんその3色だけでは画面の要素を表現しきれないので、近似した色もまとめておきます。エラーが発生した場合などの色も決めておきます。そして複数人で作業した時にルールがバラバラで困惑しないように「この時は〇〇を使用する」などルールを決めておきます。

フォントもこの時点で定めている場合が多いので同様にコンポーネントを作成します。フォントカラーに関しても決めておきます。通常カラーやエラー時、プレースホルダーに当てはめている時などですね。

5.ビジュアルデザイン作成、アイコンなどの細かいグラフィックを当てはめる

ラフデザインが完成し、クライアントの合意も得られたら次はビジュアルデザインに移ります。サービス内で使用するアイコンや画像などを作成していきます。
アイコンは全体で統一感が取れるように線ベースか塗りベースかルールを定めます。
またカードデザインやヘッダー、ページネーションなどのコンポーネントもこの段階で作成します。規模によっては複数人で作業することもあるので統一感が計れるように、管理しやすくなるようにしていきます。
細かい余白なども調整していきます。微妙な余白の差によって押しやすさも異なるので気を配っていきます。
時にはプロトタイプを作成してより実装した時のイメージがつきやすくなるようにする場合もあります。

6.完成、場合によっては仕様書を記載し開発に連携

全てのデザインが完成したら、次は開発にバトンタッチします。
画面遷移やボタンのホバーした時の仕様などのアクションの仕様をデザイナーが記載することもあるので、その場合は記載した上で開発にバトンタッチします。

以上がUI/UXデザインのプロセスです。
デザイナーや会社により多少異なるかとは思いますが、弊社ではこのような形で進めていきます。

読んでくださりありがとうございました！
次はグラフィック編を書いていこうと思います。

良ければ次回も読んでくださると嬉しいです。