https://developer.so-tech.co.jp/entry/2022/05/16/153515
こんにちは。ATOM事業部の下江です。普段はフロントエンドエンジニアとして開発を行っています。 最近は、ATOMの新機能の仕様検討や画面のデザインを行っています。
今までここまで集中してデザインの設計をしたことがなかったため、 得た知見をこの場で紹介していきたいと思います。
各社が公開しているデザインシステム(検索するとたくさん出てきます)を読むだけで、たくさんの学びが得られました。 デザインシステムではないですが、以下のQiita記事はエンジニア必見です。
私達のチームでは、デザインツールとしてfigmaを利用しています。 基本的には調べなくても使い方がわかるようになっていますが、 たまに言われて初めて気づく機能があったりしました。(プラグイン周り等...)
これから作ろうとしているシステムに似ているサービスを徹底的に探し、調査しました。 以下サイトは色々なwebデザインがまとまっており、非常にわかりやすかったです。https://webframe.xyz/ (※今回はここのサイトに載っていないような画面だったため、身近なwebサイトも調査しました)
ATOMを普段使っている方にヒアリングを行いました。 実現可否は考慮せず、まずはどういうことがやりたいことなのかを洗い出しました。
最低2つ以上、全く別の切り口から画面を作りました。 figma上でデザインを作る前に、まずは紙と鉛筆を使ってアナログで書いてみるとやりやすかったです。
私達のチームでは、仕様書をDocbaseを利用して書き起こしています。
仕様書を整理することで、ワイヤーフレームが改善されたり、 ワイヤーフレームを整理することで、仕様書が改善されたりします。 これを何往復もすることで、徐々に徐々に洗練させていきました。
複雑な業務要件をシンプルな画面に落とし込む作業は重要ながら難しい作業です。 ときには、Googleスプレッドシートを活用してパターンを洗い出すということもしました。