すでに知的生産物に国境はない。 海外クラウドソーシングで作るiphoneアプリ<part Ⅱ >
前回は(2)リソース確保について書きました。
今回はその続きになるアプリケーション開発における(3)デザインについて書きます。
ベストな方法論を述べるというよりは
思考錯誤から自分にあった方法を見つけていく過程をお伝えできたら幸いです。
■デザイン■
(1)サービス企画の段階で、
仕様書とデザインのラフスケッチは出来ていました。
ここではロゴの作成からどうデザイナーとすり合わせていったかを書きます。
<Q1>ロゴのデザインどうするか？
アプリを作る上で、一番最初にすべきはロゴの作成でした。
ロゴの色がアプリ内部の配色に影響し、
ロゴの与える印象がサービスの機能や世界観を表現する必要があったからです。
私としてもここは1ピクセルも妥協したくなかったので、
クリエイティブディレクターの山本氏主導で作成しました。
少し紹介させて頂くと、
山本氏は北京にある建築事務所の建築士です。
都市設計、建築設計、店舗内装、会社ロゴ、アート・フォト等、
マルチな才能と常軌を逸したクリエイティブ精神を持っています。
当然、売れっ子なのでまともな時間には捕まらなかったです。
いつも夜11時とかから2，3時間ミーティングしていました。
初期段階のアイディア着想段階から考えると、
ゆうに100時間以上はセッションしてきたかと思います。
そもそもプロダクト自体、
彼の着想をシードに発展させてきた思い入れもあり、
ロゴだけで着地させるのに20時間ぐらい打ち合わせをしたと思います。
「田中さん、、、デザインは引き算ですよ」
「何がいいのかよくわかんなくなりましたね、競合をスタディしましょう」
と言いながらリードしてくれました。
そんな思考錯誤で出来たロゴが以下になります。
※下記は山本氏とのスタディで使った資料の一部です。
色合い毎に競合を整理してディスカッションしました。
<Q2>デザインはどんなマイルストーンで進めていくか？
常にフルタイムでそこに人がいる会社組織とは異なり、
自分の仕事が終わったらプロジェクトから離脱していくアウトソーシングは
一番最初にゴールを明確にしておかないと相手は怒ります。当然ですね。
ゴール設定で工夫したポイントは
最終成果物はエンジニアが使える形でなければなりませんので、
それをそのまんまゴールに設定したことです。
これで、自分が現時点で見えていないタスクを当事者間で吸収してくれます。
ちょっとずるい感じがしますが、
私が学習してキャッチアップするよりもその方が早いと判断しました。
そんな感じでデザイナーと握ったゴールとマイルストーンは
以下のような感じです。
Disign part goal:client enginner agree with the parts of UI.
(1)Hafiz can access all the works we alredy made.
(2)Hafiz can use prottapp
(3)Refer to the prottapp and UIigames ,Hafiz make the one option of UI
(4)yamamoto review and feedback
(5)make some option of UI
(6)yamamoto review and say Go
(7)Hafiz cut the pic and make UI in prottapp
(8)we discuss about the motion of UI
(9)make the ppt document about motion
(10)Hafiz communicate with Mukesh about the file format
(11)Mukesh get the works you made and say OK.
(1)Hafiz can access all the works we alredy made.
(2)Hafiz can use prottapp
(3)Refer to the prottapp and UIigames ,Hafiz make the one option of UI
(4)yamamoto review and feedback
(5)make some option of UI
(6)yamamoto review and say Go
(7)Hafiz cut the pic and make UI in prottapp
(8)we discuss about the motion of UI
(9)make the ppt document about motion
(10)Hafiz communicate with Mukesh about the file format
(11)Mukesh get the works you made and say OK.
<Q3>デザイナーに期待する成果物をどう伝えるか？
前提として、(1)サービス企画の段階で、
デザインのラフスケッチは出来ていました。
その際に使ったツールはパワーポイントとPrott(https://prottapp.com/ja/)です。
手書きで書く方法もありますが、
私の場合はディレクターが中国にいたので、
デジタルデータを使う必然性がありました。
ちょっと調べてみればすぐにわかりますが、
UIのプロトタイプ作成ツールは世の中にたくさんあります。
いろいろ使ってみた結果、
費用無料＋学習コストが極めて低いという点で、Prottを選びました。
デメリットがあるとすればUI遷移を詳しく表現できないことです。
「UI遷移を表現できないと後でエンジニアとトラブルよ」
という恐ろしい助言を大学時代の先輩からもらっていたのですが、
「UI遷移についてはこだわるつもりなので、よろしくね」という布石を開発者にうっておき、テスト/Bug修正段階で細かく指示を出したらトラブルなく、組み込んでもらいました。
言うまでもなくmotionは使い心地と関係が深いので、
初期段階でキメ打ちするよりはイメージだけ緩く伝えておいて、
テスト段階で実際に使いながら修正していく形がいいと振り返ってみて思います。
実際にデザイナーに伝えた成果物イメージは下記のような感じです。
<Q4>デザイン成果物へのフィードバックはどうするか？
成果物イメージを伝えたら、2・3日で最初のドラフトが上がってきました。
正直、あまり期待していなかったのですが、その質の高さにとても驚きました。
80の期待値に対して200で返してきました感じです。
山本氏とのセッションでも感じたことなのですが、
デザインとは絵を綺麗にすることではなく、
目的を表現することなんだなぁと感じた次第です。
下記は最初に上がってきたデザイナーの成果物イメージです。
これに対するフィードバックはパワーポイントで矢印を引いて、
ここをこうしてくれと指示していく形になります。
「自分はこう変えるべきだと思う」という話を山本氏に相談し、
彼からレクチャーや表現案をもらいながら進めました。
4回目のフィードバックで完了しました。
フィードバックで気を付けたポイントは
・重要ポイントや誤解しそうなポイントは「なぜ？」を入れたこと。
・アイコン等の表現は具体的にサンプルで例をしめしたことです。
もめたポイントは
「Thank youページの画像が子供っぽいから、大人っぽく変えてくれ」
と言ったところ、子供っぽいとは何か？ 大人っぽいとは何か？
という押し問答になり、完全にミスりました。
少しイラっとした彼から送られてきた提案が下記の画像です。
※確かに大人っぽいですね。
<Q5>デザインパートをどうクローズするか？
Q2でも言及しましたが、
デザインにおけるゴールは
アプリ開発者が使える形にデータを加工するところまでです。
具体的にはパーツをアプリ内で使える部品に切る必要があります。
アプリ開発者が「後は俺に任せろ」と言い、
元データ(aiファイル)をデザイナーから引き渡してもらえば、
彼のミッションは完了です。
ミスったポイントはiphone4,5,6では画面サイズが違うので、
後でiphone4用に別途画面が必要になってしまったことです。
契約段階でプロジェクト完了(ver1.0リリース)まで、
デザインに関する問題が発生したら助けてほしいとお願いしておいて良かったです。
アプリ開発者が後は俺に任せろと引き継いでくれたら、
今度は開発フェーズに入っていきます。
※今回アプリ内デザインを担当して頂いたパキスタンのHafizさんです。
イケメンですが、中身もナイスガイです。以下、再掲にはなりますが実際に作ったアプリの紹介です。
「今日やることを一つだけ宣言するTodo管理アプリ」
HALF STEP（ハーフステップ）
ご興味あればDLしてみて下さい。
▼Downloard(iphone)
※ご質問/ご意見等あればお気軽にお問い合わせください。
tanaka.j.tomohiro@gmail.com
