全員が同じ絵を観ていなければ、すれ違いが起きます。皆で説明しあったり、議論を重ねて考えを発表し合いましょう。機能一覧表を作成ページ(あるいは1つの画面)毎の機能をマトリクスとしてまとめます。このページでは、こんなことができるということを明らかにしましょう。従来はエンジニアが行っていた仕事ですが、デザイナーもぜひ参加すべきです。デザイナーはフロントからUI主導で考え、エンジニアはバックエンドからデータ構造やAPIの設計について考えますが、最終的にまとまる機能一覧表に相違が発生するはずなので、ここで議論をして具体的な機能の面からも認識を一致させます。定義した機能一覧のマトリクスを元に、具体的にUIに落としこんでいく作業に入ります。ここで重要なのは綺麗なワイヤーフレームを描くことではなく、UIから機能の導線を書いていくことで足りない機能をキャッチアップすることです。機能だけで概念として考えていると、実際にUIに起こしてみると足りない要素があることに気がつくはずです。仕様を確定させる足りない機能をキャッチアップしたら、今度こそ仕様が確定します。最初にゴールを共有したときはコンセプトや思想レベルのものでしたが、改めてロジック的な面でもゴールを共有します。ワイヤーフレームに落とし込み確定した機能一覧マトリクスとUIのラフを元に、ワイヤーフレームに落としこんでいきます。ラフスケッチでUIの検討をするときにはディティールを考えがちですが、具体的にワイヤーフレームを出して画面遷移を確認することで俯瞰的にもデザインを考えることができます。モックアップ作成ワイヤーフレームを書き出して、アプリケーション全体のUIの整合性が確認できたら、ここで初めてAdobeツール等のデザインソフトが登場します。完成形のビジュアルに落としこんでいきましょう。フロントエンドの実装フロントエンドの実装を行います。Webアプリケーションの場合、SassやLess、BootStrapを使うことも多いようです。まとめいかがでしたか?今回紹介したのはデザイナー側のワークフローでした。短くまとめるためとはいえ、色々はしょりすぎた感は否めませんが、わたしが会社で所属しているチームだと、おおよそこんな感じで開発してます。してみると、いかにデザインしている作業そのものよりも、「議論」や「コミュニケーション」が必要かということがわかると思います。簡単なWebサイトくらいならデザイナーだけでもできると思いますが、大規模なWebアプリケーション等になると、皆で力を合わせなければ良いものは作れません。今回のワークフローはあくまで一例ですので、必ずしもこの通りにやってプロジェクトがうまくいくとは限りません。ソフトウェア開発の分野ではプロジェクトの進め方にもフレームワークは沢山ありますが、必ずしも理論通りに進むとは限らないのです。あなたのチームやプロジェクトの特性を皆で考えて、最も優れたワークフローで良い開発をしようと試行錯誤を続けることが大切です。00:10少人数でのWebアプリ開発におけるデザイナーのワークフローTweet関連記事2017-08-27情報アーキテクチャ(IA)とは何か?その役割と仕事について最近わたしの中で、空前のしろくま本ブームが到来しています。去年の年度末頃に、「Figma」というコラボレーションツールを知...2015-11-05Sketchは、エンジニアでも気軽に使えるデザインツールなのかも!Sketchは、WebやUIなどスクリーンデザインに特化しており、余分...2015-11-05本当に重要なのは、問題解決ではなく問題定義である問題解決についての本ってよくありますよね。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。