こんにちは。ATOM事業部の下江です。普段はフロントエンドエンジニアとして開発を行っています。
最近は、ATOMの新機能の仕様検討や画面のデザインを行っています。
今までここまで集中してデザインの設計をしたことがなかったため、 得た知見をこの場で紹介していきたいと思います。
知識を得る
デザインシステムを学ぶ
各社が公開しているデザインシステム(検索するとたくさん出てきます)を読むだけで、たくさんの学びが得られました。 デザインシステムではないですが、以下のQiita記事はエンジニア必見です。
figmaの使い方を覚える
私達のチームでは、デザインツールとしてfigmaを利用しています。
基本的には調べなくても使い方がわかるようになっていますが、
たまに言われて初めて気づく機能があったりしました。(プラグイン周り等...)
競合のシステムを観察する
これから作ろうとしているシステムに似ているサービスを徹底的に探し、調査しました。
以下サイトは色々なwebデザインがまとまっており、非常にわかりやすかったです。
https://webframe.xyz/
(※今回はここのサイトに載っていないような画面だったため、身近なwebサイトも調査しました)
要望を洗い出す
ATOMを普段使っている方にヒアリングを行いました。 実現可否は考慮せず、まずはどういうことがやりたいことなのかを洗い出しました。
作成する
色々なパターンの画面を作ってみる
最低2つ以上、全く別の切り口から画面を作りました。
figma上でデザインを作る前に、まずは紙と鉛筆を使ってアナログで書いてみるとやりやすかったです。
仕様書の作成とワイヤーフレームを行ったり来たりする
私達のチームでは、仕様書をDocbaseを利用して書き起こしています。
仕様書を整理することで、ワイヤーフレームが改善されたり、
ワイヤーフレームを整理することで、仕様書が改善されたりします。
これを何往復もすることで、徐々に徐々に洗練させていきました。
複雑な業務要件をシンプルな画面に落とし込む作業は重要ながら難しい作業です。
ときには、Googleスプレッドシートを活用してパターンを洗い出すということもしました。
レビューする
先入観を抜いてワイヤーフレームを眺める
先入観を抜いてワイヤーフレームをふと見たとき、少しでも違和感があったときには改善の余地が必ずあると思っています。
第三者にも見てもらったときに「いいじゃん！」って言われるよう、徹底的に修正していきます。
実際に操作した時のことをイメージする
入力フォームに入力する情報量がたくさんあった際、
タブ表示やページングさせることで一度に表示する情報量を減らすべきなのか、
一度に全ての入力フォームを表示させて入力漏れを防ぐのか
等、実際に操作している人の気持になって検討しました。
まとめ
デザインの世界は学ぶことがたくさんありました。
これからwebのデザインをしていこうとしている方に少しでも参考になれば幸いです
