「デザインの変更」から開発のスピードアップを探る

プロジェクトの開発においてスピードというのは最重要事項の1つであると言えます。多くの開発プロセスにおいては、デザインの修正や変更が生じます。よいサービスを作るには欠かせない作業ですが、同時に開発スピードを落としてしまう原因の1つでもあります。闇雲にデザインの変更を行えば、

• 時間がなくなり、良いものを作ろうと思っていたはずがクオリティを落としてリリースすることになる
• リリースが遅れて他サービスに狙っていたマーケットポジションを奪われる
• デザイナーのモチベーションが下がる

といった問題につながりかねません。

しかしそんなデザインの変更は、うまく行うことによって従来の開発をよりスピードアップさせることができる絶好のチャンスでもあります。本記事では具体的にどのようなTipsを取り入れると良いかをご紹介します。

開発を遅らせる変更とは？

当然多くのことが決定していない前半よりも、後半になればなるほど変更にかかってしまうコストは高くなります。しかし意外にもはっきり形が見える後半になってからの方が、変更点が多くなってしまう開発を行っていませんか？例えば完成した本番デザインが「これでいこう！」と決めたはずのラフデザインと全く違うなんてことはないでしょうか？それはまさに後半になってからたくさんの変更を行った証拠です。

デザイン開発後半における変更はコストが非常に大きく大きな遅れになるのはもちろん、デザイナーのモチーベションを下げてしまう可能性もあります。骨組みだけのラフデザインでは完成物の想像がしにくく、できていく制作物を見てイメージと違うと感じることもあるでしょう。

開発手法のジレンマ

近年注目されているスクラム開発などに代表されるアジャイル開発も、柔軟に開発を行うことで変更のコストを軽減できる、ある意味で「変更」にスポットライトを当てた開発方法と言えるのではないでしょうか。

Goodpatchではスクラム開発を導入しており、いくつかの問題を改善することができました。詳細は以下の記事よりご覧ください。

しかしそんなアジャイル開発も

• アジャイル開発経験者がいないからやり方がわからない
• コミュニケーションコストがかかりすぎてなかなか成功しない
• プロジェクトの性質上合わない
• なんちゃってアジャイル開発になってしまい以前より開発しづらくなった

など取り入れるための障壁が存在していたり、取り入れ後にうまく機能しないことがあったりします。「アジャイル開発をやってみよう！」と言っても、すぐにできるわけではありません。中途半端に新しい開発手法を取り入れるより、従来の手法をアレンジする方が効率よく開発できる場合もあります。

今回は2つのアレンジ方法をピックアップして、デザインの変更を減らし、プロジェクト開発のスピードアップにつながる方法を紹介します。

開発をスピードアップさせる方法① イメージの共有

まず注目したいのがイメージの共有です。

プロジェクト開発は様々な人と関わりながら行っていくものですが、人はフィルターを通してイメージをするため、クライアントが脳内で展開しているイメージとデザイナーが展開しているものには差が生じてしまいます。そうならないためには事前にプロジェクトに関わる人全員で完成物のイメージを共有しておくことが重要です。

また「かっこよく」「かわいく」「きれいに」「大人っぽく」などの形容詞でイメージを共有しても、人によって思い浮かべるものが異なるので、イメージしたものに差が生じます。

以下では実際にイメージを形にして共有するために役立つウェブサービスを紹介します。

ユーザー投稿型ギャラリー

Behance

Pinterest

Dribbble

Behance 、Pinterest、Dribbbleは言わずと知れたユーザー投稿型のギャラリーサイトです。世界中の優秀なデザイナーやクリエイターの作品を見ることができます。特にPinterestはピンで保存した画像をチームで共有できるので、イメージの共有にうってつけです。

行動フロー別UIギャラリー

UXarchive

MOBILE PATTERNS

UXarchive、MOBILE PATTERNSはユーザーの各行動フローを複数枚の画像で表現しているウェブサイトです。機能ごとにイメージを共有するのに向いていると言えます。

プラットフォーム別UIギャラリー

Inspired UI

pttrns

Inspired UI、pttrnsはアプリのカテゴリーやプラットフォームごとのUIに関するギャラリーです。複数のプラットフォームでの展開を考えている場合に使い勝手が良いでしょう。

コンポーネントギャラリー

Iconsfeed

iconDrop

logo stock

lovely ui

Iconsfeed 、iconDrop 、logo stock、lovely uiはロゴやアイコンに関するギャラリーです。Lovely UIはApp Storeに掲載するスクリーンショットの画像やボタンなども探すことができます。

開発をスピードアップさせる方法② プロトタイピング型開発

次に紹介したいのがプロトタイピング型開発です。

プロトタイピングのプロセスを導入するだけなので、比較的導入のハードルは低いと言えるでしょう。

このプロセスを導入することで、後半に現れる変更点を事前に修正することができ、大幅にスピードアップを狙うことができます。

以下はプロトタイピングから得ることのできるメリットです。

可視化のコストが下がる

作って壊してを前提としているプロトタイピングでは、ツールの質が年々高くなっていることもあり、簡単に可視化できます。その結果、この段階での変更コストは低く済みます。早い段階でアイデアが可視化されたものを見られるので、エンジニアは本番デザインが完成する前にプログラミングの構成を考えることができます。

決断が早くなる

実際に動くものを見れることで判断軸が明確になり、決断をしやすくなります。

いくつか案を出してその中から選んでもらいつつ、形が見えている状態で判断をしてもらえるので、確実度が高く、後からの決断の覆りを減らすことができます。

変更のし忘れがなくなる

プロトタイピングツールを使えばコメントを残すことができます。クライアントやマネージャーとのやりとりを見返すことで、フィードバックを忘れてしまうことが原因で後々現れる変更をなくすことができます。この変更はチームのモチベーションに関わってくる場合もあるので是非なくしたいですね。

プロトタイピングを行う際の注意点

重要な注意点は2つあります。まず1つ目は、プロトタイプを完成物として認識しないことです。クライアントやディレクターなどに見てもらう際にプロトタイプであることをしっかり伝えなければ、「なんかクオリティ低いなあ」「もっと作り込んだ状態で見せてくれる？」という言葉が返ってきてしまうかもしれません。

2つ目は、プロトタイプを確認してもらう際には「どの部分に関して確認して欲しいのか」をもれなく伝えることです。先ほども言いましたが、あくまで完成物ではないので、全体的に確認してもらうことが目的ではありません。確認部分を伝えず、どの部分に関してお互い合意しているかがわからなくなると、結局後になってから変更されることもあるかもしれません。これではスピードアップどころか更なる時間のロスになってしまいます。

GoodpatchでもProttというプロトタイピングツールを展開しています。

以下ではProttを利用した業務効率化事例も紹介しているので、ぜひ参考にしてみてください。

開発スピードが倍速に!? Prottは絶対に欠かせないツールの1つ – ビズリーチ

Prottを使って約5営業日の効率化を実現！日本最大級のQ&AサイトOKWAVE 新機能開発プロジェクトの裏側

さいごに

今回は変更点を減らすことで開発のスピードをあげる手法を2つご紹介しました。効率の良い開発は、リリースを早めたり、チーム内のストレスを軽減することができます。現在の開発に満足していない場合は導入してみてはいかがでしょうか？
開発手法を機能させるコツはなぜそのプロセスを踏んでいるのかを意識することです。行っている作業の理由を理解していることが無駄のない開発につながるのだと思います。