こんにちは、デザイナーのむろおかです。
今回は普段行っている、アプリ・webサイトのデザイン手順をざっくりご紹介します。
１目的・目標・ターゲットユーザーを決める
まずサイトを作るにあたっての目的・目標を明確に設定します。
プロジェクトになくてはならないものですが、デザイナーにとっては「そもそもどうしてサイトを作るのか」という根本の部分がズレると、多方面の意見を取り入れすぎてしっちゃかめっちゃかになり、成果物のクオリティに影響するため設定する、という部分が大きいかなと思います。
次に目的と目標にあったターゲットユーザー、あるいはペルソナを設定します。ターゲットを決めてから目標を作る場合もあります。
KPI（直近の目標）やKGI（目指すゴール）など細かく設定できれば理想ですが、とりあえず目的・目標・ターゲットが決まっていれば、要素の検討に移れます。
２要素・機能、その優先度を決める
サイト内に必要な要素を検討します。
先程設定した目標によって「ユーザーにさせたい事」が明確になっているほど、何が必要か、どれくらい必要かの優先度が決めやすいです。
作る側の「こんな要素を入れたい」はこの辺りで吸い上げることが多いです。ただ基本的に要素は少ない方が使いやすいものなので、ユーザーにとって必要かを検討した上で入れるかを判断します。
検討には様々な手法がありますが、よく行うのは「ユーザーがサイトに着地してから、ゴールにたどり着くまでに各ページで何をするかを可視化する」ことです。
初めてきたユーザーとミドル・ヘビーのユーザーでは行動が異なるため、それぞれにあった想定をします。
どこから来て何をして貰えたらゴールなのか、目標を達成するのに十分かなどを考え、必要なページと各ページに入れる要素が分かった段階でワイヤーフレームの作成に移ります。
３ワイヤーフレームを作る
前段階で決めた必要なページと要素を、画面のどこに配置するか、あたりをつける作業です。サイト全体の流れを理解し、足りない要素や矛盾している箇所がないかを確認します。
ここでは細かいUIや文言は置いておき、何があるか分かる程度で問題ありません。
UIを詰めていく際に要素の置き場所が変わる場合もありますが、要素を別ページに移す、増やす/減らすといったことはワイヤーの段階で終わらせておくのが理想です。
プロジェクトによってはこの段階でFigmaのプロトタイプ機能を使い、ページ移動のイメージを加えることもあります。
４イメージボード、デザインの詰め
ワイヤーフレームを元にデザインの肉付けをしていく作業です。
アイコンなどの細かい部分を作ったあとに全体の雰囲気が変わってしまうのは非効率なので、デザインを詰める前に「どんなデザインがいいか」を決めるイメージボードを作成したり、デザインのパターン出しをします。
その後、修正やパターン出しをしつつ進めていくと、デザインデータが散らかるので落ち着いたタイミングで整理します。
大抵はデザインがfixしたあと、データ整理とcssなどでの表現についてメモを残す作業が入ります。
まとめ
チーム内にUXを専門としたデザイナーがいる場合は、見た目に入る前の段階がもっと細かくなります。
私の仕事は見た目を整える比重が大きいですが、使いやすいUIを作るには見た目を整えるだけでは不十分なので、目的や要素の検討から関わっています。
アプリやwebサイト制作以外の方、中々全体の流れを知る機会がない方のご参考になれば幸いです。
