Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

少人数でのWebアプリ開発におけるデザイナーのワークフロー

f:id:tamusan100:20150721000942j:plain

少人数でのWebアプリケーション開発において、デザイナーはどのようなワークフローでデザインすればよいのでしょうか。

従来ならば、「デザインはデザイナー。エンジニアリングはエンジニア。マーケティングは…」と、自身の職種の範囲で完結することもあったかもしれません。 

しかし昨今では、デザイナーもデータ構造やインタラクションの実装、エンジニアもUIデザインの知識が求められています。

お互いがお互いの領域だけで完結していると、いわゆる「見た目はオシャレだけど全然使えないアプリ」ができてしまいます。

そうならないために、プロジェクトに横断的に関わり、デザイナーとプログラマーが密接に議論を重ねながら開発することが、イケてるWebアプリケーションを生み出す鍵となるのです。

今回は、デザイナーサイドのワークフローについて紹介します。

  1. ゴールの共有
  2. 機能一覧表を作成
  3. ラフスケッチでベースUIの検討
  4. 仕様を確定させる
  5. ワイヤーフレームに落とし込み
  6. モックアップ作成
  7. フロントエンドの実装

ゴールの共有

まず、職種を問わずチームの皆がゴールとなる絵を明確に描けていることが大切です。

わたしたちが作ろうとしているアプリケーションは何ができるのか。何ができないのか。何が目的なのか。

全員が同じ絵を観ていなければ、すれ違いが起きます。

皆で説明しあったり、議論を重ねて考えを発表し合いましょう。 

機能一覧表を作成

ページ(あるいは1つの画面)毎の機能をマトリクスとしてまとめます。

このページでは、こんなことができるということを明らかにしましょう。

従来はエンジニアが行っていた仕事ですが、デザイナーもぜひ参加すべきです。

デザイナーはフロントからUI主導で考え、エンジニアはバックエンドからデータ構造やAPIの設計について考えますが、最終的にまとまる機能一覧表に相違が発生するはずなので、ここで議論をして具体的な機能の面からも認識を一致させます。

ラフスケッチでベースUIの検討

定義した機能一覧のマトリクスを元に、具体的にUIに落としこんでいく作業に入ります。

しかし、ここで重要なのは綺麗なワイヤーフレームを描くことではなく、UIから機能の導線を書いていくことで足りない機能をキャッチアップすることです。

機能だけで概念として考えていると、実際にUIに起こしてみると足りない要素があることに気がつくはずです。

しっかりと検討しましょう。 

仕様を確定させる

足りない機能をキャッチアップしたら、今度こそ仕様が確定します。

最初にゴールを共有したときはコンセプトや思想レベルのものでしたが、改めてロジック的な面でもゴールを共有します。

ワイヤーフレームに落とし込み

確定した機能一覧マトリクスとUIのラフを元に、ワイヤーフレームに落としこんでいきます。

ラフスケッチでUIの検討をするときにはディティールを考えがちですが、具体的にワイヤーフレームを出して画面遷移を確認することで俯瞰的にもデザインを考えることができます。

モックアップ作成

ワイヤーフレームを書き出して、アプリケーション全体のUIの整合性が確認できたら、ここで初めてAdobeツール等のデザインソフトが登場します。

完成形のビジュアルに落としこんでいきましょう。

腕の見せどころです。

フロントエンドの実装

フロントエンドの実装を行います。

Webアプリケーションの場合、SassやLess、BootStrapを使うことも多いようです。

まとめ

いかがでしたか?

今回紹介したのはデザイナー側のワークフローでした。

短くまとめるためとはいえ、色々はしょりすぎた感は否めませんが、わたしが会社で所属しているチームだと、おおよそこんな感じで開発してます。

こうしてみると、いかにデザインしている作業そのものよりも、「議論」や「コミュニケーション」が必要かということがわかると思います。

簡単なWebサイトくらいならデザイナーだけでもできると思いますが、大規模なWebアプリケーション等になると、皆で力を合わせなければ良いものは作れません。

今回のワークフローはあくまで一例ですので、必ずしもこの通りにやってプロジェクトがうまくいくとは限りません。

ソフトウェア開発の分野ではプロジェクトの進め方にもフレームワークは沢山ありますが、必ずしも理論通りに進むとは限らないのです。

あなたのチームやプロジェクトの特性を皆で考えて、最も優れたワークフローで良い開発をしようと試行錯誤を続けることが大切です。

当ブログのおすすめ記事