弊社デザイナーの仕事とこれから。

f:id:mac-tech:20191204183906j:plain

初めまして

Webデザイナーの長竹です。 今年6月にジョイン、はや半年経ちました。 それなりに慣れてきてやれること / 課題がたくさん出てきました。

この記事では、Webデザイナーとしてこの半年間どのように過ごしてきたか、この先どういう感じになるのか(なりたいのか)をまとめて行こうと思います

自己紹介

イケたいWebデザイナー長竹です。専門卒業後、自社開発系の会社に就職。 その後フリーランスで活動していたところ株式会社M&Aクラウドにたどり着きました。 twitter.com note.com

なにをやってるの?

  • 社内印刷物の作成
  • SNS広告クリエイティブ作成
  • イベント用グッズ制作
  • 新規機能のデザイン・実装(HTML/CSS)
  • 既存機能(ページ)の改善
  • 動画制作(デモ・広告用) などなど…

現在は唯一のデザイナーなので、デザインが絡むものは大方やらせてもらっています メインではM&Aクラウドのプロダクトチームで開発に関するデザイン(UI/UX)、HTML/CSSマークアップなどをしています。

何を使って作業しているの?

Githubを使ってエンジニアと連携し実装を行います。 基本ツールに縛りはなく、自由に選択しています(Sourcetreeは自分だけ) モックアップツールはXDがメインです。

スプリントのワークフロー

f:id:mac-tech:20191202183542j:plain
弊社プロダクトチームは2週間のスプリントでプロジェクトを進行しています。 ざっくりですがこんな感じで、デザイン(仕様)作成中にバックエンドが動き出し、デザイン完成後にフロントエンドの実装に入ります。

エンジニア作業が重い場合は自分でHTML/CSSマークアップをして、デザイン作業が重い場合はエンジニアにお願いする。といったバランスです。

プロジェクトオーナーとのワークフロー

すでにある程度の仕様が固まっているものに関しては 仕様を元にデザイン作成 → オーナー確認 → 修正 → 最終チェック → 完成 といった流れがベースです。 このフローの中で意識してることが3つあります。

  1. まずは仕様通りに作る

  2. リデザインする(考えられるパターンを作る)

  3. 比較しながら提案する(自分の答えは決めておく)

一度形にしてみて、その上でもっと良いUI・UXがあると思ったらそれも形にしています。 これにより「実際に作ってみたが、このような問題点があった。その解決方法を考えてみました」というやりとりが可能になります。 仕様の段階で細部まで考えることも重要ですが、UIを実際に作って全体像を見て初めて気づくことが多く存在します。 何よりデザイナーの頭の中身を一番伝えることができるのは、ビジュアルそのものだと思っています。

f:id:mac-tech:20191206090040p:plain
ざっくりこんな感じでXDでパターンを確認出来るようにしています

失敗と学び

この半年間のプロジェクトでは、既存サイトへの追加機能や機能改善がメインでした。 その中でいくつか失敗がありました。

既存UIとのズレ

新規機能で絞り込みなどをデザインする際に、他のページの絞り込みやチェックボックスのUIがどうなっているかなどを考えずに1つの箇所にこだわってしまいました。 ユーザーが同じような機能を使う際に、それぞれでUIやインタラクションが異なれば困惑します。今後はStorybookやXDのコンポーネント機能などを用いてUIを一元化し管理出来るようにしていきます。

仕様が曖昧

把握しきれていない仕様が存在し、デザインに落とし込めていなかった。なんてことがありました。 これはプロジェクトに関わる時間が増えることで減りましたが、ここが不足していると混乱してしまうのでエンジニアに想定漏れがないかを聞いたりなどして 設計漏れを減らしています。

上流工程に関わる

やはり最初に仕様が固まってしまうと、そもそものUX変更などが難しくなります。 弊社は柔軟なのでそこまで問題はありませんが、仕様策定の段階でデザイナーが加わればUI・UXの方向性をその時点でブラッシュアップすることができます。 そのためには人に伝わるデザインロジックやビジュアルの用意が必要になります。

インプット

  • UX MILK Fest 2019
  • Web担当者Forum
  • Adobe MAX
  • その他細かいミートアップイベントなど

インプットのためのイベント参加は推奨されていて、たくさん行かせてもらっています。 他には海外のサイトや本、SNSなどから常に最新の情報が取れるようにしています。 (Slackのフィードを利用したり、デザインの第一人者をフォローしたり)。

f:id:mac-tech:20191204170749j:plain Adobe MAX Japan 2019

アウトプットを増やして名を上げよ

デザイナーという存在はプロダクトを生かすも殺すも自由自在、超重要なポジションです。 技術だけでなく、プロジェクトを成功に導くためのロジックや思考が必要になります。 このあたりはアウトプットを増やして少しずつ身になってくるものなので、積極的に活動したいと考えています。

おわりに

今回は自己紹介も合わせて半年間でやったことなどを簡単にご紹介しました。 今後は技術的な内容などを発信できればと思います!

Adobe MAXのイベントレポートをnoteにまとめました note.com