初めまして、デザイナーの森です。
デザイナーの採用面接では「デザイナーの役割、具体的にどんな仕事をするのか」について質問いただくことが多いです。
そこで今回は、Xtoneにおけるデザイナーの役割や作業内容について紹介したいと思います。
デザイナーの役割
ユーザーが目にするところや直接触れる部分の設計から作成までを行います。
ディレクターが作成したワイヤーフレームを元に、ユーザーが視覚的にわかりやすく操作しやすいUIを考えることが主な作業の内容になります。
大まかな仕事の流れ
まずは見積もりからスタート
案件が決まったら、まずデザインの工数見積もりを行います。 案件に応じてさまざまですが、以下のような考慮すべき点を踏まえて細かく見積もります。
・どんな案件か？：Webサイト、アプリ、検証のための資料やプロトタイプの作成など
・作成するデバイスの種類：スマホ/タブレット/PC/その他（スマートウォッチやサイネージなど特定の機種）など
・画面数
・案件によって作成が必要なもの：ロゴ、ファビコン、ストア画像、OGPなどのバナー、アニメーションの作成など
・案件による進め方の特性：ワークショップをしてほしい、都度プロトタイプで検証しながら進めたい、UIだけではなくイラストの方向性も複数案出してほしいなど
デザイン作業の前に
デザインの方向性を決定するために参考となる、現行サイト（リニューアルの場合）、競合サイトの調査・分析を行います。
競合調査を元にデザインキーワード（ターゲット、サービスコンセプト、企業理念）を分析し、デザインで目指すべきのコンセプトを設定します。
そこからキーカラーの選定やアイコンスタイルの定義、配色などトンマナを決めるための材料を集め、より説得力のあるデザインにするためのムードボードを作成します。
ムードボードを作成することで、デザインの方向性が固まり、クライアントとの意識合わせが容易になり、スムーズな作業につながります。
また、並行してディレクター側で作成しているワイヤーフレームのレビューに参加し、画面/サービス設計やユーザーストーリー、ペルソナ設定などのディスカッションを行います。
デザインスタート
デザインコンセプトとムードボードからデザイン案を作成します。２〜３パターン作成し、理想に近いデザインを探っていきます。
デザイン案は１案ごとにトップ画面+主要１〜２画面程度を作成します。
デザインのトンマナが決まったら本格的に全画面の作成を行います。
全画面を作成をする際には、デザイン要素を定義書にまとめます。
Figmaのコンポーネントやバリアントの設定を細かくつくっておくとまとめやすく、作業スピードを上げる助けになります。
必要に応じてアニメーション演出やプロトタイプを作成
必要に応じてプロトタイプを作成し、画面遷移や操作性の確認を行うこともあります。
また、アニメーションを作成することでよりインタラクティブなデザインに仕上げることもあります。
開発のサポート
エンジニアの実装と並行して、デザインパーツの追加作成やUI崩れがないかのデザインチェックを行います。
デザインチェックはユーザビリティを左右するとても大事な作業です。
細かいところまでしっかり確認し、エンジニアさんと相談して調整してもらいます。
おわりに
最後まで読んでいただきありがとうございました。
案件によっては上記以外にも作業が必要になりますが、Xtoneデザイナーの主な作業の流れを簡単にまとめてみました。
Xtoneのデザイナーの役割について少しでも興味を持っている方の参考になれば嬉しいです。
デザイナーがどんな環境で仕事をしているのか気になる方はこちらの記事もどうぞ！
