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