こんにちは、UX Designerの大塚です。
モックテックアカデミーで、クリエーターが新しいスキルを習得するための取り組みを行っています。このブログでは、そこで行ったインタラクションデザインについての試みの一部を紹介したいと思います。


今回この試みに参加した若手デザイナー達。左から、デザイナーの中 隆理松川 逸内田 達也

1. マクロからマイクロまでのインタラクションデザイン

インタラクションデザインと一口にいっても、単に動くUIを派手につくればいいのか?といえば、当然そうではなく、マクロな視点からユーザー体験を調査・設計し、構造を考えた上で、マイクロな体験を製品の振る舞いとして、トリガーやフィードバックを設計し、モーションが意味を伝え、心地よさにつながるような動きになっているか検証する必要があります。

ただ、そういったマクロ~マイクロまでのインタラクションをデザイナー1人で考えてつくるということはあまりありません。 プロジェクトメンバーで色々な制限や可能性を検討して行くものです。その時、デザイナーがなにを求められるのかというと、やはりどういったパターンが考えられるのか? 新鮮なインタラクションのアイデアはなにか? 狭い画面で優先順位がうまくつくれない場合、どのように考えればいいのか? 心地よくするためには、なにを変えればよいのか?プロセス云々といった話も大事ですが、クリエーターとして、より具体的なところが期待されることが多い筈です。

また、時間的、技術的な問題を理由にデザイナーは自ら動きをつけるところまでは行わず、既にある動きを参考にエンジニアにこう動かして欲しいと伝えることも多いのではないかと思います。それがうまくいく場合もありますが、時にはそういった事が歯がゆいものになる場合もあります。


そういった課題を一歩前に進めるため、今回は若手のデザイナー3名に新たにAfter Effectsやpixateといった動きを意識するツールを使って、ライフログカレンダーというテーマをベースにインタラクションを組こんだUIのデザインにチャレンジしてもらいました。

2. 動きのあるUIを作ってみる!



アプリのテーマはライフログカレンダーということで、私の方で簡単なワイヤーフレームを作成し、それをベースにデザインを自由につくってもらいました。課題のオリエン後、サービスサファリをして、ペルソナも緩ーく考えたぐらいでデザインにはいりました。今回の趣旨は動きのあるUI制作の学習なので、なるべく細かい制約に縛られるより、普段より面白みのあることを目指してもらいました。

最初はAfter Effectsなどのツールも使えなかったので、ハンズオンの勉強会などを行い、そこからはお互いにレビュー会などでお互いに学習していきました。作る過程は普段のデザイン業務と違ったためかなかなか大変だったようですが、繰り返しやって行くうちに段々とツールの深い部分も使えるようになってきました。

3. クリティーク(レビュー会)


クリティーク当日の様子。精神とテクの部屋の一角にあるリラクゼーションルームにて。

チーフクリエイティブディレクター佐藤洋介クリエイティブディレクター 鬼石広海
AWA株式会社 クリエイティブディレクター 室橋秀俊、AWA株式会社プロダクトマネージャー冨樫晃己、といったインタラクションデザインに鋭い面々に集まっていただきクリティークをおこないました。

クリティークの様子も踏まえて、それぞれの作品を紹介します。


Lica ライフログカレンダー 内田篇


ライフログカレンダーというテーマに対して、とにかく、クールで心地よいから使いたくなるようなアプリを目指したというこの作品は、カレンダーの数字の動きが秀逸で非常に美しい仕上がりになっています。短期間での制作と思えないような動きで、デザインに説得力があるなと思わせる仕上がりになっています。




内田:
「手帳アプリというお題を聞いた時、モレスキンのように持ちたくなるアプリを作ってみたいと思いました。画面を作る段階では、トーンに重きを置きすぎて機能性を損なわないことに配慮しました。下にスクロールすると過去に、上にスクロールすると未来の情報を見ることができます。またスクロールした時のカレンダーの数字の動きなど、アニメーションにも気を使いました。」



クリーティークでのフィードバック:

「カレンダーを出すところは完璧でいいね」

「時間を入れるところは、予定を入れるひとは結構細かい予定までいれるから、この横幅での入力は難しいかも」

「細かいところで突っ込む以外は全体が非常によく出ている」


製作者の振り返りコメント:

「今回、動きの部分はAfterEffectsで作りましたが、インタラクションの奥深さをさらに考えさせられました。イージングの自然さ、統一感などまだまだやれることがありそうです。」



Lica ライフログカレンダー 中篇


Pixateを使って制作しています。実際に触ってみてい方はこちらから
https://app.pixate.com/p1f67eaa1d0d7


Pixateはアニメーションツールではなく、インタラクションがつくれるプロトタイピングツールです。一度つくった人なら判ると思いますが、非常に面白いツールではあるのですが、インタラクションが複合されたり、繋がって行くとだんだんと、融通が効かなくなってくるのがネックです。が、ここまで出来るんだと改めて気づかされた作品でした。UIもパネルを引っぱりだす仕組みなっていて、インタラクションを誘発しやすいデザインに成っています。こういうイメージは、最初からインタラクションをつけようと思わないとあまり出てこないパターンだとは思いますが、実際にインタラクションをつけていくなかで、さらに学びが増えた作品でした。

中:
「実際に触ってもらえるように今回はPixateで制作しました。
予定のチェックをメインで使い、他のSNSアプリでの発言を日記としてためているユーザーを想定して制作しました。SNSの部分をタブなどに入れると振り返る頻度が落ちそうなので、更新感が伝わるようにちょい出ししているUIにしてみました。」



クリーティークでのフィードバック:
「スクロールしたあとで、3枚になってからぐっと大きくなるところの動きとかはいいね」
「Reminderとか機能が分離しちゃってるのは一つにまとめられたんじゃないかな。スクロールで3つの機能に分かれているのは難しいんじゃないかな。」
「設定が同じページにあるのは、避けたい。前のページとか保存できるから、ユーザーの継続性とかもかんがると、もうちょっとやる事を絞って必要な情報を必要なときに出すようにした方がいいかも。」

製作者の振り返りコメント:
「パーツ量が多かったり、ところどころにインタラクションを入れてみたので、なかなか大変でした。なんとか形になって良かったです。」


Lica ライフログカレンダー 松川篇


未来が上、過去ログが下という直感的なデザインになっています。当初デザイン段階で悩んでいたこともあり、ラフのアイデアを多く出す過程を経て出したアイデアです。結果的にUIのアイデアとしては今回の作品のなかでは、もっとも斬新なアイデアになっています。操作が楽しく、新しい体験を提供してくれそうなそんな可能性を秘めた作品です



松川:
「今回は実験的な意味も込めて、直感的に操作ができ、グラフィック的にも新しい、つい触ってみたくなるようなカレンダーアプリのUIを提案しました。
メインの画面から、上にその日の予定、下にログの画面を置き、スクロールすると画面自体が変化するようになっています。物理的な法則を意識して、動くUIでなく、動かすUI、それ自体が機能であるような設計をしました。」




クリーティークでのフィードバック:
「デザインとしては非常に面白い。使いたい。2回目起動するかかわからないけど、人には教えたくなるようなアプリかも」
「イージングをもっとこだわった方がいい。アイコンの出方は気持ちいい。OKをおしたところは気持ちいいけど、他のところはもうちょっと頑張った方がいい。」
「こういうスワイプとかプルでやらせるアプリは特に、何もしてないときに伝えるインタラクションが欲しい一回バウンスしてみるとかね。」

以上で、おしまいです。

4. さいごに

インタラクションデザインコンセプトいかがでしたでしょうか?
After EffectsやPixateのようなアニメーションをつけることができるツールをデザイナーが使えると表現の幅も広がるのはもちろん、デザインに対しての捉え方やイメージの沸き方も変わってきます。
興味を持った方は是非トライしてみてください。


今回作品を制作したモックテックアカデミーのデザイナーの皆さんお疲れさまでした!

サイバーエージェントでは
意欲のあるクリエーターが成長する仕掛けや学習支援を行っています。
https://www.cyberagent.co.jp/recruit/


UX Designer
大塚 敏章
https://otk.amebaownd.com/

はじめまして。2012年度新卒入社、GIRL'S TALKでWEBデザイナーをしています、もりた と申します。
以前、社内の取り組みで、弊社の未来を切り開くデザイナーを発掘するためのコンペ「YDC」(ヤング デザイン コンペディション)を開催しました。

社内でも盛り上がりをみせた企画で、私も運営にあたるサイトを制作する機会に恵まれたこともあり、弊社が抱える課題からコンペを通してデザインで解決する過程を執筆させていただきたいと思います。

デザイナー以外の方にも読みやすいように、インタビュー形式風にまとめてみました。デザインのいろはよりも、若手がチャンスを掴める体験事例とヒントをいくつかお伝えできるはずです。

インハウスデザイナーを抱えている企業の方々に通じるところもあると思いますので、最後までお付き合いください。


1. 現場の声に耳を傾けてみる。

ーYDCを開催したきっかけってなんですか?ー
(もりた:以下省略)弊社は何でもチャレンジさせてくれる会社なのですが、内製で1つのサービスを担当すると半年から2年ほど、同じターゲットユーザー•コンセプトのデザインを作り続ける現状があります。

常にユーザビリティを捉え、ブラッシュアップし、デザインでコミットできるメリットもあれば、異なる側面に、デザイナーの生み出すものに偏りが出るといった課題があります。
例えば、ターゲット層がアラサー女子系なのか、シティボーイ系が好むデザインなのか、一つのジャンルにこだわることなく、時に頭を切り替えて様々なデザインをアウトプットしたいな、と私も思うことがありました。 そこで、実務作業以外で手を動かすチャンスと、名前を売り込むきっかけを、弊社若手デザイナーに与える役割として生まれたのが「YDC」です。

ー名前を売り込めるようなチャンスもあったんですか?ー
社員にとって半期に一度の大舞台である総会で優秀作品を発表し、選ばれたデザイナーは舞台の上で眩しいスポットライトの光があたるラストが用意されることになりました。

今回はタイミングが良く、弊社の新しいロゴを提案してくださったNIGOさんからトロフィーの贈呈もあり、とても華やかでした。ここでは、多くの人に若手の成果が伝わることが大切だと思っていますので、皆さんの会社環境にあった形を選んでいただければと思います。


総会での表彰式

2. 社内の課題をポジティブに変えるチャンスに若手を抜擢する。

ーコンペのお題は何が出されたんですか?ー
第一回目のお題は下記の4つに決まり、入社3年目までの新卒•中途採用のデザイナーが募集期間中にwebサイトから投稿出来るような仕組みを作りました。


YDCのお題

ー内製だからこそ出せるお題ですね…ー
皆さんの会社でも「うちは、B to Bだからちょっと課題出すのは難しいね。」なんて意見もあるかもしれませんが、デザインできる場所なんて探せばいくらでもあります。
お客さんが来られた時のサイン設計など、「ここにはお手洗い、左に曲がれば喫煙室があるのね。」なんて一目で分かったりすれば、社外の方からも好感がもたれます。
「それがうちの社内の子が考えたものなんですよ。」なんていう話が進めばより話も膨らむと思いますよ。今回の課題も、デザインが古いな、と感じていたけれど更新されずにいたもので、既にあるものをより良くするためのリデザインです。

是非、社内の課題と若手の欲求を組み合わせて、全社がより良い方向に向くような課題解決策を見つけてみるのはどうでしょうか。


3. ゴールを決めて、制約をつくる。

ー目的が決まれば、あとは手段ですね。ー
今回は第一回目ということもあって、社員への認知を深める場面を多く作りました。


YDCの流れ

ー投稿サイトの構成、デザイン、ディレクションまで担当されたと聞きましたが、いかがでしたか?ー
制作時間にも限りがあり、「自由にやってみて!」と先輩から
依頼を頂いたので、自分で制約を決めていきました。「投稿された作品の善し悪しを、素直に社員が評価できる枠を提供すること。」ここに明確なポイントを当ててゴールを決めれたことで、構成からディテールまで速やかに詰める作業が出来ました。


作品一覧ページ。ひと目で作品のイメージが湧くように画像サイズは、大きく表示。


ー優秀賞作品を選ぶ評価方法が少し変わっていた、と聞きましたがー
多くの人を巻き込んだコンペにしたかったので、投稿された作品は全社員がサイト内で閲覧、無制限でLIKEボタンから投票できるようにしました。
もちろん、最終審査は、ベテラン格のデザイナーとNIGOさんが審査員として判断するといったものでした。

ーデザインにも影響した点はありましたか?ー
閲覧ページでは、各作品に投稿した人の名前が表示されず、LIKEした人の顔写真を表示する制約をつけました。投稿した人が分ってしまうと、内容よりも人のステイタスが前に位置づけられることがあるので、作品の善し悪しよりも人軸の評価でLIKEする人が出てくるんです。




作品一覧ページ。作品画像にmouse hoverするとLIKEボタン・LIKEした人・お題が表示。


これでは、作品を素直に評価できません。それに、「若手の発掘」を打ち出しているので、社内で顔が知られている、知られていないで票数の変動が大きく変わることはゴールから大きく外れるのです。

ーLIKEした人がわかるのはどうしてですか?ー

投稿促進の一環です。投稿した人にとって、作品だけで自分のことを評価してくれる嬉しさは、計り知れません。
社員の名前を見ても誰だかわからないこともあるんですが、
顔写真だと「あー、A部署にいるあの人からLIKEもらっちゃった!」といった喜びも感じるし、未だ投稿していないデザイナーにとって、
「B部署の人も見ているから、俺も出してみよう!」といったリアルな欲の部分でモチベーションをあげる事ができるものを残しておくべきだと思ったからです。


4. 私も成長できたYDC

ー最後にー
担当した時期は入社3年目の終盤を迎える頃で、内製馴れしている自分がいました。

普段であれば顔を見ながら口答説明だけで完結できるところも、今回は、社外のエンジニアの方とマンツーマンでやり取りしながらリリース作業を押し進めていくため、修正箇所がある度に、「どうしてこのアウトプットなのか」「どうしてこの動作が必要なのか」といった理由をメッ
セージツールを使って画像で説明するなど…

普段の仕事の進め方と違って、相手にどんな形で提示すれば、円滑に作業が進むか考えながらコミュニケーション力を鍛えることも出来ました。


左上から時計周りから、ソートメニュー表示の動作。ランキングアイコン表示の動作。投稿ページの動作。メニューリスト表示の動作。どれも伝えるのが至難 ;



実務作業以外でも、若手が成長できるきっかけとゴールが明確にあれば、新卒でも、私のような4年目でも伸びしろを伸ばす糸口が多くあることが分っていただけたかと思います。

是非、みなさまの会社でも若手の挑戦と成功体験を感じることができるチャンスを与えてあげてください。
長文におつきあい頂き、ありがとうございました。
女性限定サービス『GIRL'S TALK』も是非使ってみてください!

森田 彩花(もりた あやか)

こんにちは。
Ameba Ownd(アメーバ オウンド)でiOS・AndroidアプリのUIデザインを担当しています、鈴木です。

4月28日に『~「Ameba Ownd」制作秘話から学ぶ~CyberAgent UI design seminarというセミナーを行いました。

チーフ・クリエイティブディレクターの佐藤をはじめ、計4人のデザイナーから日々取り組んでいるデザインの現場についてお話しさせていただきました。
私からセミナーで話しさせていただいた「UIデザイナーの役割や進め方」を、Ameba Owndの立ち上げ秘話を交えて、お話したいと思います。

セミナー風景。セミナー後の座談会でも各デザイナーに熱のある質問をぶつけてくれていました。


Ameba Ownd(アメーバ オウンド)とは?

誰でもかんたんにウェブサイトを作成でき、更新できるサービスです。
PCブラウザにて提すべての機能を利用できるほか、iOS/Androidアプリで主にサイトの閲覧や記事の投稿を提供しています。

amebaownd.com/go

技術的にウェブサイトやブログを立ち上げられない方向けに、かんたんかつ、オシャレにサイトを作成できることが狙いです。

立ちはだかる壁「機能が多く、メンバー誰もが手探り」



Ameba Owndの開発は困難の連続でした。
予定されている機能の一つ一つが大きく、密に絡み合うので、機能一つで弊社からリリースしていたコミュニティサービスがひとつ作れてしまう規模感でした。

また近頃のサービス開発では、アプリメインでPCでも閲覧できる、というバランスで開発するケースが多かったのですが、Ameba OwndではPCブラウザを主としたサービスなので、アプリとしては機能が多い環境下で開発するという難しさがありました。

そういった課題に加え、機能を絞ってアプリらしい使い勝手を保てるように最適化していくという作業がありました。

これらの課題をどのように解決するか考えた結果、


「何を作るか決める/共有する/ディレクションする」ということを、 デザイナーが意識できれば、出戻りを減らすことができ、最短で作れるのではないかと思い試していきました。

制作フローと、共有の大切さ


全体としては、このような流れで進めていきます。
  1. 手描きでおおまかなデザインを作る
  2. デザインツールで作成
  3. モックアップで確認

開発のフローととしてはオーソドックスな流れだと思いますが、気をつけていたのは決まっていく仕様やUIデザインを早めに共有していくことです。



なぜ今回、ここまで共有を重視したのかというと、
冒頭であげた課題「メンバー誰もが手探り」という点が理由です。

手探りの状態でブラウザ、iOS、Androidを同時に大規模開発しているので、歯車1つが変わるだけで他の部分に影響が出る可能性も高かったので、開発メンバーにはUIデザインを含めてリアルタイムに共有できるように気をつけました。

ラフスケッチの効果



膨大な仕様を決めつつ、同時に画面を作っていくスケジュールの中で、UIのラフスケッチは効果的でした。

通常、デザイナー自身がアイデアをまとめることに使うことが多いですが、メンバーに対しての共有・確認方法としても非常に有効です。

ラフスケッチの具体的なメリットは、
違う紙にどんどんかけるので、アイデアを広げやすく、紙を並べればアイデア全体を俯瞰して見られる点です。 また、修正をその場で入れていくこともできるので、出戻りを減らすことができます。

一般的なコミュニティアプリであれば、UIデザインを作った方が早いと感じることが多いかもしれません。しかし、今回はプラットフォーム開発だったため、実装段階での出戻りは限りなく減らし、少しでも時間を作り出すためでした。

実際、ラフスケッチを使って仕様を固めた上でツールを使ってUIデザインを作るので、ほぼ迷うことなく作っていくことができました。

実装のディレクションで気をつけたこと



デザインを作ると同時に、
アプリ開発ではおなじみになってきたプロトタイピングツールの出番です。画面遷移をイメージできる状態でブラウザと仕様をすりあわせつつ、エンジニアにも同時に相談していきます。
(※場合によってはラフスケッチの段階でプロトタイプを作ることもあります)

この実装のタイミングで、「この画面でユーザーにやってもらいたいことは」というワードを意識して使っていました。

この段階までくると一つ一つの機能開発に集中していることが多いので、「ユーザーに何をしてもらいたいからこの画面フローになっている」ということに再び意識を向けるためです。

「この画面でユーザーにやってもらいたいことは◯◯です」と機能ごとに明確にすることで、開発メンバーの目指すゴールを一つにすることができました。

UIデザイナーの役割


最後になりましたが、UIデザイナーの役割とはなんでしょうか。
例えば、マークアップができることでしょうか? After Effectsを使ってアニメーションが作れることでしょうか?  企画ができたりイラストもかけることでしょうか。



どれでも非常に大切なことだと思います。しかし、わたし個人の考えにはなりますが、
「情報を整理して、問題を解決する。」それがデザイナー本来の役割だと考えています。

その考えのもと、冒頭でお話した課題をどうしたら解決できるかということを考えた今回の結果、「何を作るか決める/共有する/ディレクションする」というアウトプットになったにすぎません。状況しだいで変化するでしょう。

手段を増やすことも非常に大切ですが、「問題を解決する」というような目的意識があると、自分にとって必要な手段がより見えてくるのではないでしょうか。



UIデザイナー/クリエイティブ・ディレクター
鈴木 伸緒
@nobgraphica

ogp


いや~こんにちは
Ameba Owndのクリエイティブディレクター/デザイナーをしておりますjesus武本です。

「誰でもかんたんにオシャレなサイトが作ることができ、共有しあえるサービス」です。

今回は従来のAmebaのクリエイティブイメージを一新したAmeba Owndのクリエイティブがどのようにして創造されたのかをダイジェストでお送りいたします。
サービスの新規開発においてのクリエイティブディレクションについてもカンタンに触れたいと思います。


Ameba Owndのビジュアルアイデンティティ(※Amebaマーク変更前)


vi

※「ビジュアル・アイデンティティ」とは、ロゴマークなどのデザインを、決められた使用ルールで様々な広告物や印刷物に展開し、顧客・取引先・求職者・社会に対して視覚的統一性のあるブランド訴求を行うこと。


1、デザインポジション定義


サービスの目的
ターゲット(こちらもポジショニングマップを作成)を加味して狙うべきデザインのポジションを決める。

従来のアメーバのイメージ、ブランド感を一新するという目的があったため、市場から見てもとにかくスタイリッシュで、革新的という振り切ったポジションを目指そうとしていた。

position01


上記の方向性でデザインを作成していったが、いろいろな要因があり方向性を修正。
サービス自体のターゲット層はいろいろな利用シーンを想定すると非常に幅広く存在するため、振り切りすぎるのもよくない、さらにサービス自体をAmebaの基幹サービスとして立ち上げることが決定したため、最終的にはスタイリッシュさは残しつつもしっかり今のユーザーも囲い込めるように現状のAmebaトーンにもう少しよせていくという方向にポジションを定義。
このポジションを目指してデザイントーンを作成することに決定した。


position02



2、デザインコンセプト資料の創造


concept

※デザインの方向性が決まる前のコンセプト資料の一部

デザインに着手する前におおまかなデザインルールを策定
・ブランドカラー、配色ルール
・使用するタイプフェイス
・ムードボード

・アイコンのカタチetc


これらをチーム全員に共有することでデザインの共通認識を図った。
このコンセプト資料こそが最終的なVIの草案である。


【ブランドカラーについて】
Amebaの冠をつけるかつけないかという議論がなされていたが、結果的にAmebaの基幹サービスとして立ち上げるという結論になりそこからカラーを導いた。
今までのAmebaの系譜を受け継ぎさらに進化させる、一新させる
という思いを込めて先進的な印象をもつスタイリッシュなグリーンを選択。

ブランドカラーをOwnd greenとした。



3、コンセプトデザインの創造


ここは非常に大事な部分。
サービスのトーンや方向性を決めるため、時間をかけて作成する必要がある。
デザインパターンを何個も作成し、具体的なデザイントーン決め、洗練させていった。

4、サービスロゴの創造


logo


Amebaマークとどのようにコラボレーションするかが非常に難しかった。
Amebaという絶対的なアイデンティティがある中、Owndロゴ単体でもアイデンティティのあるものに仕上げたかったのでそのバランスに苦悩した。
最終的には非常にバランスのとれたロゴとなったOwndの「O」がシンプルかつ特徴的なカタチとなり、アイデンティティとなった。
最終調整はサービスローンチのぎりぎりまで行った。


5、UI compornentsの全体設計


compornents


全体のトーンがぶれないようにweb,iOS,Androidでそれぞれcompornentsを作成
はじめの段階でcompornentsを作成することによりすべてのデバイスでのデザイントーンがぶれることなく開発が進んだ。
compornents作成することにより、途中でデザイントーンの変更が発生しても柔軟に対応することが可能であった。
themeデザインについても同様に仕様策定、ガイドラインを用意し、ルールを定義してデザイン作成を行っていった。
ルールを定義することでわかりやすさや、使いやすさの向上にもつながった。


6、ブランド感を決定づけたキービジュアルの創造


keyvisual


Owndgreenの訴求のみだと弱いと感じたため、 最終的にOwndを象徴するキービジュアルを上記のビジュアルに決定した。
こちらについてはコンセプト動画で訴えているメッセージの一番核となる一枚を使用。
メッセージ性、インパクト、印象に残るキービジュアルとしてサービス認知に成功。 

movieのコンセプトについてはmovie編があればその機会に。

くわしくはこちら↓
【Ameba Ownd conceptmovie】
 Ameba Ownd:Your Own website


新規開発におけるクリエティブディレクターの役割


ウェブやアプリの新規開発において全体のビジュアルアイデンティティは
そのサービス自体の方向性を決めてしまうので非常に大事な部分です。
クリエイティブの力でサービス自体を成功に導くためにはビジュアルアイデンティティーをコントロールし、ブランドイメージを作っていくことがとても大事だと思っています。
中でも重要なのがデザインルールや設計を定義することだと考えます。

最近の話題でbootstrapがあればデザイナーが不要などと言われていましたが、
そのオリジナルのbootstrapやcompornentsを作るのがクリエイティブディレクターやデザイナーの仕事なのではないかと思ってます。

そこには全体の世界観創出やトーン&マナーの定義であったり、配色設計だったり、インタラクションを含めた設計などすべてが内包されています。それがしっかり設計さえできていればたしかにデザイナーがいなくても品質は担保でき、クリエイティブディレクターの手を離れた後も、自動的にトーン&マナーやビジュアルアイデンティティの一貫性を保持することができるかもしれません。

そのためウェブやアプリの新規開発に求められるクリエイティブディレクターのスキルはブランドトーンや世界観の創出に加え、bootstrapやmaterialデザインのようなルール作りや設計が重要だと今回のプロジェクトを通じて思いました。


最後に


クリエイティブは言葉だけでは語れない領域です。
ロジカルと感覚(右脳と左脳)のバランスがとても大事だと思います。
ルール定義はとても大事ですがアイデア、クリエイティブはルールやロジックを超える時があります。

最終的にはエモーショナルでユーザーの心を動かすものを作っていきたいですね。
ロジカルと感覚のはざまですね。ですね。
そんなクリエイティブを創造したいもんですね。

あと忘れてはいけないのは自分の周りに優秀なデザイナー、エンジニアがいるからすべては実現できた(できる)お話なのです。


Ameba Ownd 創造編ありがとうございました。
こんにちは。
iOS版のAmebaアプリを開発している @tasanobu@nghialv2607 です。

これまでのAmebaアプリはWebViewとのハイブリッド形式でしたが、UI/UXを改善すべくフルネイティブ化して大幅にリニューアルしました。
数ヶ月間に及ぶアプリの構成を大幅に変えるプロジェクトは、Objective-CではなくSwiftで実装を進めました。

このエントリでは、Objective-CのコードベースをSwiftへ移行していくために行った取り組みを紹介させて頂きます。

このエントリの公開時点では、Swiftを既存プロジェクトに導入した話はインターネット上でみかけません。
今後、多くのプロジェクトでObjective-CからSwiftへ移行する作業が行われると思いますので、その際の参考にして頂けると幸いです。

今回、@tasanobu からは”Swift導入の経緯””チームで定めた開発ルール” を、@nghialv2607 からは”Swiftの言語機能を利用したAPI設計””Swiftライブラリ” を紹介させて頂きます。

Swift導入の経緯

Amebaアプリは2009年にストアにリリースされ、5年以上も運用されているプロジェクトです。コードベースは巨大で、その全てがObjective-Cで実装されていました。こういったケースでは「Swiftを使うなら新規プロジェクトで」という判断をしがちで、Objective-Cでの開発を継続することが多いのではないかと思います。

しかし、昨年10月 Swiftを開発言語として使う という決定をしました。

前述したフルネイティブ化していく大規模改修が昨年末からスタートすることが決定しており、アプリの基盤部分をSwiftへリプレースするにはベストなタイミングだと考えたためです。数年後のiOSアプリ開発の状況を想像すると、Swiftで実装することが主流になっているはずで、Objective-Cで実装し続けること自体が技術的負債を生む行為になると考えたからです。

とはいえ、Amebaアプリは弊社随一のユーザ規模を誇ります。そのアプリでSwiftを採用するのは大きな決断でしたが、Objective-CやCocoaのフレームワークとの互換性が担保されている点が決め手となりました。Amebaアプリのコードベースは巨大なため、数ヶ月程度では全てをSwiftで実装し直すことは不可能です。この互換性により、完全Swift化までの過渡期として、新しく追加するSwiftのコードとこれまでのObjective-Cで実装された資産を共存させることができるからです。

開発ルール

AmebaアプリのiOSチームには常時3、4名のメンバーが所属しています。
このくらいの人数がいると、どうしても担当者によって設計や実装がバラバラになりがちです。
メンバー間で認識を合わせて効率的に開発を進めるため、次の項目をルール化しました。

1. コード規約

Swiftは言語仕様として強力な型推論を持ち、型の宣言を省略することが可能です。また、Closureなどでは記述を大幅に簡素化して実装可能です。この辺りは人によって好みが出やすく、ルール化しないと統一感がなくなってしまいます。
そこで下記のコーディング規約を採用し、原則としてこの規約に則ることにしました。

2. Swiftで実装する機能はObjective-Cとの連携を考慮しない

新しいクラスはSwiftで実装することになりますが、現在はSwiftへの移行の初期段階のため、連携するクラスは既存のObjective-Cで実装されていることが大半です。
こういった場合、Objective-Cとの連携を意識してしまうと、Swiftにしかない言語機能をどうしても使いにくくなってしまいます。
そのため、原則としてObjective-Cとの連携は考慮せず設計・実装を行うようにしました。
Objective-Cとの互換性がないEnumStructGenericsなどの言語機能を利用したことにより、既存のクラスと連携できないようなこともありましたが、その場合はむしろ積極的に既存のクラスをSwiftで書き直すようにしました。

3. 定数ブリッジ用ヘッダに言語間で共有する定数を集約する

とはいえ、Objective-Cの資産と連携せざる負えないことがあります。(よくないことなのですが、Objective-Cのクラスの依存関係が複雑すぎてサクッとSwiftに書き換えることができない 等々。長いこと運用している場合、ありますよね。こういうこと。)
幸いAmebaアプリでは、EnumNSNotificaitonNSUserDefaultsで使う文字列定数をSwift/Objective-C間で共有できれば連携できる形になっていました。
そのため、Objective-CとSwift間の定数ブリッジ用ヘッダを一つ用意し、このヘッダに言語間で共有する定数を集約することにしました。

この方法はSwiftとObjective-Cが混在する過渡期の暫定対応と位置付けております。
今後、既存クラスの書き換えが進み、そもそも定数を共有する必要がなくなれば、削除する予定です。

Swiftの言語機能を利用したAPI設計

Objective-Cとの連携を意識しない方針により、各所でSwiftならではの設計を採用しました。
Webサービスのクライアントアプリによくある表示用データを取得する処理を例にして説明させて頂きます。

次のサンプルは表示用データをWeb APIから取得するメソッドです。
内部的にはHTTPレスポンスのJSONをパースし、モデルクラスへの変換まで行っておりますが、APIを呼び出す箇所ではとてもシンプルな記述にできます。また、API.Topic.getDailyRankings()のように.(ドット)で機能毎に区切られ、どういった機能のAPI呼び出しかを分かりやすくしています。

API.Topic.getDailyRankings(limit, offset) { // ... }
API.Search.searchByName(keyword) { // ... }

Nested Classを使ったモデルクラスの宣言方法

API構造体に対して、各機能をextensionで分割し、`Nested Class`を使うことでName Space的な .(ドット) 区切りの見た目を実現しています。
API構造体を`Class`にしなかったのは、Swift 1.1では言語仕様として`stored type property`が提供されておらず、`API.version`のような文字列定数を使うことができないからです。Swift 1.2から`Class`でも`stored type property`が利用できるので、そのうちClassに変更するかもしれません。

struct API {
  static let version = "v1"
    // 他の実装
}
extension API {   class Topic {         // 他の実装     } }


Genericsを使ったモデル生成処理の共通化

API.Topic.getDailyRanking()の内部ではAPI.fetchModelData()を呼び出しています。

protocol JsonInitializable {
    // failable initializer
    init?(sJson: SwiftyJson)
}
struct API {     static let version = "v1"
    static func fetchModelData<T: JsonInitializable>(url: String, settings: APISetting, subJson: (SwiftyJson) -> SwiftyJson, completionHandler: (T?, NSError?) -> ()) {         AMBAlamofire.requestApi(.GET, URLString: url, setting: settings)             .responseApiSwiftyJson { _, _, sJson, error in                 if error != nil || sJson == nil {                     completionHandler(nil, error)                     return                 }                 if let top = subJson(sJson!) ?? sJson {                     completionHandler(T(sJson: top), error)                     return                 }                 completionHandler(nil, error)         }     } }

JsonInitializableプロトコル

JsonInitializableはモデルクラスが継承するプロトコルです。
モデルクラスでは引数に渡されるSwiftyJson型の値からモデルクラスを初期化します。Failable Initializer(※戻り値がnilになることもあるInitializerです。)にしているのは、引数に想定しない値が渡されることを考慮しているためです。

Amebaアプリでは各モデルクラスにisValidというcomputed propertyを実装しており、Failable Initializer内でisValidfalseの場合は初期化失敗という意味でnilを返すようにしています。

extension API {
  class TopicData : JsonInitializable {
    required init?(sJson: SwiftyJson) {
      title = sJson["title"].string
      if !isValid {
        return nil
      }
    }
    var isValid: Bool {       return title != nil     } }


subJsonパラメータ

モデルクラスの初期化はHTTPレスポンスとして返されるJSONのルートから直接行わず、所定のキーに対応する値を使いたいことがあります。この問題に対応するためにsubJsonクロージャを用意しました。

getDailyRanking()ではsJsonとして{ $0["data"] }を指定しており、Topic Dataの"data"キーの値を使って初期化するようにしています。

extension API {
  class Topic {
    typealias CompletionHandler = ([TopicData], NSError?) -> ()
    class func getDailyRanking(limit: UInt, offset: UInt, completionHandler: CompletionHandler) {
      let urlString = TopicRouter.Ranking(.Yesterday, limit, offset, ageParam).URLString
      API.fetchModelData(urlString, setting: APISetting(), subJson: { $0["data"] }, completionHandler: completionHandler)
  }
}
// Topic Data {   "version": "v1",   "data": {     "title": "This is the topic title!"     ...   } }

以上がざっくりとしたAPI設計の内側です。
Swiftの言語機能を利用することでObjective-Cを使った場合と比較すると、かなりスッキリと実装できることがお分かりになるかと思います。

Swiftライブラリ

Objective-Cのコードを使いたくないという考えが根底にありますので、Swiftで実装されているライブラリを使うようにしました。
採用したSwiftのライブラリは次の通りです。

Alamofire

AFNetworkingでおなじみのMattt Thompsonさんが開発しているネットワークライブラリです。Swiftの綺麗なシンタックスとメソッドチェインを利用してHTTP関連の処理をスッキリと書くことができます。

SwiftyJson

Swiftは型に厳しいのでJSONのパース処理は非常に面倒くさいのですが、このライブラリを利用するとシンプルにJSONを扱えるようになります。

HanekeSwift

画像とJSONのキャッシュライブラリです。
現在AmebaアプリではJSONのキャッシュ機能のみ利用しています。もともとは画像のキャッシュ機能も利用したかったのですが、導入時にはまだ画像キャッシュ機能が不安定だったため、利用を見送りました。
画像キャッシュにはObjective-CのSDWebImageというライブラリを利用しています。

Hakuba

@nghialvが開発しているライブラリです。
UITableViewUITableViewDelegateUITableViewDataSourceプロトコルを実装することなく簡単に使うことができます。
UITableViewを使った画面では、その画面仕様の複雑さに比例してUIViewControllerが肥大化してしまいます。
このライブラリを使うと、UIViewController上でUITableViewDelegateUITableViewDataSourceを実装する必要がなくなるため、肥大化問題をうまく解決できます!

PullToRefresh

@dekatotoroさんが開発しているPullToRefreshライブラリです。

sample

SlideMenuControllerSwift

@dekatotoroさんが開発しているスライドメニューライブラリです。

sample

ライブラリの利用方法

現在、AmebaアプリはiOS 7.0以上をサポートしており、SwiftのライブラリをDynamic Frameworkとして使うことができません。。。
そのため、各ライブラリはgit subtreeを使ってプロジェクトに追加しています。

通常、外部リポジトリを依存管理する場合はgit submoduleでいいと思います。
Amebaアプリの仕様上、一部のライブラリを修正する必要があったため、全ライブラリの取り込みにgit subtreeを使うことにしました。
こんなことをせずに、単純にCocoapodsで依存管理できる日が来ることを心待ちにしております。

まとめ

AmebaアプリにおけるSwiftへ移行するための取り組みを紹介させて頂きました。
Swiftに移行したことによる苦労(ビルド遅い、Swift Optimize Optionにより挙動の違い発生するなど)はありましたが、チームメンバーは総じてObjective-CからSwiftに移行したことに満足しています。

既存プロジェクトの場合、移行のタイミングを見定めるのは非常に難しいですが、Xcode 6.3ではSwift関連の改善が多く盛り込まれますので、ぜひ検討してみてはいかがでしょうか?
予想しているより、移行へのハードルは高くないと思いますよ!

長文・乱文の中、最後までお読み頂きありがとうございました。
今回のエントリが、Swiftへの移行に興味がある方の参考になれば幸いです。
2回目の登場になります、安斎です。今は、技術本部 Advanced Dev. Center(略してADC) というところで、アメーバの開発環境の整備・改善に取り組んでおります。
ADCでは、Github Enterprise・SVN・JIRA・Confluence・Hipchatなどなど、開発のサポートを行うツールの導入・管理を行っております。
中でも今回は、昨年9月に導入したInVisionというツールについて紹介します。

InVisionとは

title


InVision(http://www.invisionapp.com/)という会社が提供する、 簡単にモックアップが作ることができて、かつ、デザインのフィードバックも簡単にできるアプリケーションです。
アメーバでは、InVisionのEnterprise版を導入しました。
個人でも1プロジェクトであればフリーで使えるので(http://www.invisionapp.com/plans) 興味のある方は是非使ってみてください。

ところで、モックアップを作るということは、イメージの共有という点で大変優れている開発手順だと思います。今までは、フロントエンジニアやアプリエンジニアがコーディングをして擬似的なページを作ったりして、ある程度の時間を割いて作成していました。
しかしながら、導入のハードルが高いこともあり、モックアップを作成していたのはほんの一部のサービスだけでした。
そんな問題を解決してくれるのがInVisionです!
InVisionはデザイナーひとりで、モックアップの作成と、それに対するメンバーからのフィードバックを簡単に集めることができます。

InVisionでモックアップを作ってみよう!

InVisionでモックアップをつくるということは簡単にいうと「紙芝居をつくる」という感じです。
デザインをアップロードし、次のページを指定していく
というのが、基本的な作業になります。
それでは、モックアップを作っていく過程を説明しましょう。

今回は下図のようなフローのモックアップを作ってみます。

フロー


まずはプロジェクトを作成します

project

作成の時には、プロジェクト名と想定するデバイスを選択します。今回はiPhoneを選択しました。

出来上がったデザインをアップロードします。

upload


すると下記のように「スクリーン」が出来上がります。

screen

スクリーン名は勝手にファイル名からつけてくれます。
なお、同じファイル名の画像をアップロードしなおせば、画像の修正が可能です。
アップロードには、png、jpg、gif、psd、sketchに対応しています。
psdやsketchは、レイヤーを決まった命名規則で作成すれば、レイヤーから自動的にスクリーンを生成できます!
http://support.invisionapp.com/hc/en-us/articles/203730535-How-does-Photoshop-layer-syncing-work-
(これはいちいち画像を書き出す必要がないので、大変便利です!)


一つ目の「Mypage」をクリックすると下記のように表示されます。

preview

プロジェクトの作成のときに、デバイスをiPhoneにしたので、自動的にiPhoneの枠をつけてくれます。色も白黒選べます!

次の動きを作ります。
「左上のクエストアイコンをタップすると、クエストページに遷移する」
という動きを設置します。

動きをつけるには、Hotspotというものを設置します。

hotspot

下部のメニューから「Build Mode」を選択し、
タップさせたい場所に、ドラッグで矩形を描きます。
すると、吹き出しで「Link To」という遷移先を選択する入力フォームがあるので、プルダウンから「Quest」を選択します。そしてSAVEします。

hotpost2

同様に、クエストページの「パズル」にもパズルに遷移するHotspotを設置すれば、
マイページ→クエスト→パズル
と遷移するモックアップが完成です!
なんと数分でモックアップが出来上がるのです!

プレビュー

なお、Hotspotにはタップ以外にも、Swipeなども設定できます。

共有とフィードバック

InVisionの大きな特徴でもあるのが、「共有とフィードバックが簡単」ということです。

さきほど作ったモックアップを共有するには、「Share」をクリックします。

share

すると、URLが生成されます。
それを相手に伝えれば、プレビューをみることができます。

共有を受けた相手は、簡単にコメントを残すことによって、意見や依頼ができます。

comment

今までは、デザインチェックするMTG時間を確保して、面と向かってフィードバックしていたのが、デザインチェックする側もされる側も、時間に縛られずに確認ができるので、開発の効率化につながったと現場からも好評です!


InVisionではリアルタイムにチャットや会話をしながらデザインにディスカッションできる、LiveShareという機能もあります。

LiveShare

チャットをしたり、通話をしたりしながら、デザインやモックアップについて議論ができます。
右のメニューからペンツールを選択すれば、フリーハンドで記入することもできます!
直接顔をあわせなくても意思疎通ができるので、制作の手法が広がりますね。

導入してよかったところ

InVisionを導入したことで改善したことを現場のメンバーにヒアリングしてみました。
  • 今までデイリーでデザインチェックの時間を設けていたが、そのMTGを廃止し、自分の好きなタイミングで確認ができて、画面にデザインの指摘を簡単に書き込めるので時間の効率化ができた
  • スマホ/PC等のいろんなデバイスでの確認が一貫して行えた
  • リテラシーの低い人でも感覚的に使えた事でスムーズに導入できた
という意見をいただきました。
InVisionを導入することで、デザイン作業の効率化を図れたことは、アメーバの中でも革新的なことだったのではないかと思っています。
InVisionは現状リリースも頻繁で、日に日にバージョンアップを遂げているので、これからもさらに使いやすく便利になることを期待しています。

InVisionを運用する点で気をつけていること

最後に少し管理者目線から注意点を挙げると
  • InVisionは米国の企業なので、やりとりもマニュアルも全て英語。 問い合わせするときは少しハードルがあります。(私が英語ができれば問題無いのですが…)
  • 細かな機能がたくさんあります。またマニュアルも英語なので、アメーバでは社内用のマニュアル(日本語ver)をConfluenceにまとめています
  • アカウントの管理には手間がかかる。 現状のアメーバではアカウント発行時に都度手動で招待メールを送信する運営をしています。→自動化できると素敵
  • セキュアな状態(パスワードがかけられたり、無関係なプロジェクトは閲覧できないとか)で共有ができないので、弊社以外の方とは共有はできない
などなど、いくつかハードルをなんとか乗り越えて運営している状態です。

今後のInVisionの改善に期待しつつ、アメーバのたくさんのプロジェクトでInVisionを使ってもらえるように、工夫していきたいと思っています。

最後に

ここまで、InVisionの紹介をしてきました。
今回のブログで、InVisionについて興味をもっていただけたら幸いです。
アメーバでは、今までデザイナーさんの開発環境ということにあまりフォーカスしてこれなかったのが実状です。InVisionの導入というのは、デザイナーさんの開発環境改善という面で、大きな一歩だったと思います。
これからもADCは、アメーバの開発環境改善にさらに積極的に取り組んで行きたいと考えています。

みなさん こんにちは、
UXデザイナーの大塚です。

2月25日に弊社にて開催された『UXなまトーク』についてレポートいたします。


『UXなまトーク』は、UXの現場のなまの声をトークするというイベントです。各社どうのようにUXのプロセスを導入しているのか、ノウハウや失敗談など交えたトークと、登壇者によるパネルディスカッションをいたしました。

グリー株式会社の村越 悟さん、株式会社DMM.comラボの井上 誠さん、Goodpatch Inc. の藤井 幹大さん と私でトークをさせていただきました。弊社の織田 晃弘が司会として、登壇者の方々とより突っ込んだディスカッションが行われました。


ディスカッションはなごやかな雰囲気のなかで、オフレコトークも飛び出し、かなり興味深い話が飛び交いました。

『UXデザイナーの生存確認と最新事情』
大塚 敏章さん (株式会社サイバーエージェント)




UXデザイナーとしての過去を振り返りつつ、過去の失敗談や、最近のUXプロセスで試しているデザインスプリントや、UXメトリクスについて紹介いたしました。



『はじめの一歩』
井上 誠さん (株式会社DMM.comラボ)




ビジネスとの融合や、段階的アプローチやタイミングについてのトークをしていただきました。UXナンパ、手法に振り回されないなど、社内での経験談を踏まえたUXプロセスの導入についてトークしていただきました。


『なぜUXをデザインしているのか』
藤井 幹大 さん (Goodpatch Inc.)




「モノ」ー「体験」ー「行動」ー「存続」というサイクルについて。昔は、クリックさせようと一生懸命頑張るような「モノ」ー「行動」というながれでビジネスとしての「存続」がなりたったため、「体験」を意識していなかった時代もありました。しかし、そのような時代は終わり、そこから「体験」を意識するようになったものの、組織によって4つのサイクルが分断されてしまうというご自身の実体験を踏まえ、「モノ」ー「体験」ー「行動」ー「存続」の必要性についてトークしていただきました。


『UXデザインの居場所』
村越 悟 さん (グリー株式会社)



UXデザイナーの精神論についてトークをしていただきました。単純にがんばろう!という話ではなく、なぜ、UXデザイナーは悩むのか? UXデザイナーとは何か? 組織で求められているものは何か? という根源的な話から、ご自身のUXデザイナーとしての仕事をHCDプロセスで設計(自分HCDサイクル)した経験談をしていただきました。理論ではなく実践に根をおろし、良いものを生み出す仕組みと文化に寄与する。悩めるUXデザイナーが抱えるものを深堀して、印象的な本田宗一郎氏の引用から、非常にわかりやすくUXデザイナーの進むべき方向性を紐解くようなトークでした。

UXなまトークは、登壇者だけでなく参加された方々ともいろいろとディスカッションやディスカッション後の話でも非常に盛り上がりました。


司会の織田さん、おつかれさまでした!

また、別のテーマで次回も開催したいと思いますので、今回参加できなかったり、知らなかった方も、次回は是非ご参加ください。
よろしくお願いいたします。


モックテックラボ
UX Designer 
HCD-net認定 人間中心設計専門家
大塚 敏章



はじめまして。
ディレクター、UXデザイナーをしている大塚です。
今回は、5日間でアイデアを形にし、利用者に評価してもらい検証する「デザインスプリント」というプロセスについてご紹介します。

新規サービスを立ち上げたり、新機能を検討し、延々とブレストを繰り返し、いつまでたっても話がまとまらず、ようやくかたちになったら、あまり利用されずに終わってしまうということは、想像しているより良くあることです。
新製品の70-80%が投資分が回収できないという統計もあります。また、その失敗の理由の一番が42%で、市場にニーズがなかったというものです。熱意をもって開発し、仲間と散々議論を交わした製品がそのようになってしまうのは悲しいですが、現実としてよくあることなわけです。

サイバーエージェントで10年間ディレクターとUXデザイナーとして、いろんなプロジェクトに関わってきた私にとって、成功確率をあげ、素早く市場に出すことは常に命題です。
プロジェクトで議論するときにいつも思っていたのが、アイデアを形にするプロセスで、ブレストが単にメンバーのはけ口を形式的 に出す場になっていると感じたり、議論するなかで意見の強い人の話に延々と付き合わされて不毛に感じたり、内向的な方の意見を上手く引き出せないということです。
また、ユーザーファーストと言いつつも、リサーチをしたり、本当の利用者と向き合う時間やプロセスが十分にできていないと感じることもありました。

そんな時、先にも述べましたが、5日間でアイデアを形にして、利用者に試してもらい検証する「デザインスプリント」というプロセスは、非常に魅力的に思えました。
Googleでは既に多くのプロジェクトで実績があるとも聞いたので、さっそく試してみようということで、日本でデザインスプリントを啓蒙されているMicrosoft Venturesの馬田さんにご協力いただき教えていただきました。
社内の勉強会や実践したプロジェクトで良い点や難しい点など見えてきた部分があるの で、その話も交えて、デザインスプリントについてご紹介したいと思います。



デザインスプリントとは?

デザインスプリントとは、Google Venturesが提案しているスタートアップ向けのプロセスで す。
Design Thinkingの手法をベースにLean Startupの考えを発展させています。5日間という時間制限に区切られてアウトプットする手法で、時間でフレーム区切り自らを追い込みます。また、決定のプロセスが効率的且つ民主的に行われるという特徴をもっています。概念や具体的なプロセスも、馬田さんのスライドにまとまっているので、そちらを参考にしてみてください。
ここでは、簡単な5日のプロセスだけ書き出しておきます。


http://www.slideshare.net/takaumada/design-sprint

http://www.slideshare.net/takaumada/design-sprint-process

DAY1: Understand
課題を理解し、競合を調べ、戦略を検討します。

DAY2: Diverge
可能な限りたくさんの解決法を検討します。

DAY3: Decide
ベストなアイデアを選んで、ユーザーストーリーを打ち出します。

DAY4: Prototype
デザインがある程度はいった、プロトタイプをつくります。

DAY5: Validate

プロトタイプを本当の利用者に見せて、何がうまくいき、なにがうまくいかないのかを学びます。


デザインスプリントのプロセスについて

スプリントのプロセスにはいろいろな手法が組み込まれてますが、やり方はスライドにのっているので、ここでは実際にやってみてどうなのかという部分を中心にご紹介していきます。

デザインスプリント社内勉強会の様子

DAY1: Understand(理解)

初日は、メンバーがあつまりプロジェクトについて様々なことを理解を深め検討する日です。プロダクトオーナー(プロデューサー、事業責任者、社 長など、事業の種を持ち決定権を持っている人)に必ず参加してもらいます。プロジェクトの最初のころは、大体、どういうプロジェクトなのか各メンバー説明 をうけているのが普通ですが、じつは蓋をあけてみると、それぞれの理解度や知識、アイデアや、思いにかなりのバラつきがあります。それぞれの考えを出して チームをシンクロさせることが必要です。
このタイミングでリサーチが既に終わっていたり、利用中のサービスの定量分析などの資料が あれば、そこからスタートもできると思いますが、ない場合は、リーンペルソナなど作ったり、そもそもだれが本当のユーザーになりそうなのかという仮説の認 識をあわせても良いかもしれません。指標についてみんなで話し合うのもプロジェクト理解をかなり深めます。Heartフレームワークは指標を絞り込むやり方としては便利かもしれません。
ス プリントで解決する課題をこのタイミングで決めるようにします。とはいいますが、ここは実際難しいと感じる部分かもしれません。新規の開発で、課題やス コープが複雑すぎて捉えられない、よく見えないということもあります。最初のスプリントはこのぼやっとしたところを明確にするぐらいのスタートでも良いか もしれません。できる限りの情報を事前に集め、課題の整理がしっかりとできるところまでやりきれた方がよいでしょう。

DAY2: Diverge(発散)
このプロセスはデザインスプリントの中でも比較的楽しいプロセスです。DAY1で話した課題に対しての解決法をチームみんなで具体的 な案としてアイデアを出す日です。社内でデザインスプリントの勉強会を馬田さんにやっていただたい時も、この部分を中心に行っていただきました。
  • Crazy Eights:UIを作成するときにアイデア出しのための練習。A3の紙を8つに区切って1区切り40秒で画面のアイデアをだしていく
  • Silent Critique:各個人で作成したアイデアを張り出して、静かに見て、良いと思ったアイデアに投票していきます。
Crazy Eightsはやってみると、非常に楽しいのと同時に、非常に頭も使うので、上手く休憩なども織り交ぜてやるとメリハリがつきます。Silent Critiqueは、なるべく喋らずに投票して、個人の意見がしっかりと出せるようにします。わからないと人の意見に頼りたくなりますが、決めるタイミングは静か周りと喋らず に考えて決めていきます。
UIを投票で決めるというと、「えっ、多数決かよ!」と思う人もいると思いますが、議論して多数決をするのとは違います。議論して多数 決をすると、多くの人が最初に発言した人、強い意見の人の発言にながされてしまいます。Silent Critiqueの場合は、声の大きい人の意見だけで話がすすむことは避けられます。個人の意見をしっかりと出した上で、皆が共通で感心のあるアイデアだ けに絞り、議論して、最終の投票を行います。
なぜ、これが良いのかというと、同時にチーム全員のアイデアの引き出し、同時にチーム全員の意思を反映させる ことができるので、非常に効率的な意思決定ができます。また、自分の意見がしっかりと反映されるという安心感がチームにできるとこもメリットです。
もし、これを通常のブレストで行うと、最後まで結論がでずに、次回に持ち越しや、決められる人数2-3人に減らしたところで最終決定するとかになってしまう ケースもあると思います。また、1人ひとり話をしていくとチームメンバーが8人いて平等にアイデアを述べ、更に意見交換までし始めるといくら時間があっ てもたりません。限られた時間のなかで、アイデアを出しきり、ルールによって決定を導き出す手法は実際にやってみて有効に感じられるポイントでした。



DAY3: Decide(決定)

この日は、色々と整合性があわないアイデアや、どっちか悩んでいるアイデアを両方つくるのか、片方だけのテストにするのかなど決めて収束する日となっています。しかし、実際に行ってみると、もうデザインし始めないとヤバいという感じになります。2日後には既にアポイントをとっている人たちに対してプロトタイプを試してもらう必要があるので、とにかく創りながら議論しながらみたいな感じになります。
前日まで、手書きのラフばかりだったので、もっと多くの詳細がないと つくれないということに気がつきます。例えば、ラベリングや説明文、画像などをどのようにしようかとなります。場合によっては、実現可能性を再検討する必要もあ るかもしれません。
DAY2のときにそこまで検討できればよいのですが、発散のフェーズではそういう思考になりにくかったりするので、現実的にこの日で収束させるよう頑張るしかないという感じです。スプリントの良い所でもあるのですが、ユーザーテストが開始されてしまうという約束があるので、ここでチーム が立ち止まることが許されません。
また、大事なポイントとして、決定するときにプロジェクトオーナーの関わってもらうということがあります。関わりが薄いと、後で覆ってしまう原因にもなるので、できるだけスプリントを通して、プロジェクトオーナーが関われるようにミーティングに入ってもらった り、必要なポイントでアイデアをぶつけるタイミングをつくる必要があります。



DAY4: Prototype(プロトタイプ)
ユーザーテストと前日なので、ここからは作りきることに集中します。
Keynoteをつかってプロトタイプをつくるとなってますが、ここら辺は、ProttFlintoinvision といったプロトタイピングツールをつかうのが楽です。既存のUIパターンも出回ってるので、そういうものを使って素早く組 み上げます。もし運用しているサイトで既にUIパターンがあれば、それを使って組み上げても良いかもしれません。
最初の段階では、デザインのブラッシュ アップ作業はする必要はなく、試作品として、テストできるレベルでつくります。プロトタイプの形容詞によく"汚く、粗く、素早く"といった単語がでてきますが、荒すぎるとあまり機能しません。例えば、急ぐあまり、読ませるべきテキストが"ダミーダミーダミー"みたいな仮のものになっているとテストにならないので、現実に近いものを入れる必要があります。また、画像も荒く汚すぎると、肝心な部分がみえなかったり、印象が悪すぎてその部分に気を取られてしまうので、ユーザーになにを読み取ってもらうのかを意識してつくりましょう。また、デザインが間にあわない箇所は、画面キャプチャーの組み合わせをつかう時 があります。そういう時に、スプリントの最初のころに行う競合調査や、既存のサイトを確認する段階で、キャプチャー画像を取り貯めて、チームみんなが使え る様にしておくと便利でしょう。

DAY5: Validate(検証)
出来上がったユーザーテストを実施する日です。
初期の段階でのユーザーテストで以外と大事なのはヒアリングです。プロトタイプの精度がたかければ、細かいユーザビリティーのフィードバックを観察によって 得られますが、ペルソナもぼんやりしている初期の段階では、ヒアリングフォーカスした方がより価値のある情報が得られるように思います。
テストの実施は、ユーザー1人に対して、2人で行います。1人がファシリテーターと録画係を兼務し、1人がユーザーの思考発話を記録するのが良いでしょう。実施人数は5人程度で十分と一般的にされますが、現れない方のための人数調整などは必要かもしれません。
ユー ザーテストをすると、その後のチームへのフィードバックにも時間はとられるので、テスト実施者以外にも現場にのぞきに来てもらうと良いかもしれません。 (ただし、全員ユーザーを囲って無駄にユーザーにプレッシャーをかけると本来のテストができなくなりますので、ご注意を。)
テストの際に事前にGoogle Formなどでつくったアンケートフォームを用意しておき、すぐに集計して、チームメンバーに展開できるようにしておくと素早いフィードバックが可能になります。
ユーザーテストは事前に仮説でたてたユーザーストーリーに沿って検証できるように設計する必要があるので、想定する利用シーンを描いて、スプリントでたてた仮説が検証できるようにしましょう。
つくるのに夢中になって、仮説や検証する項目を見失うこともあるので、スプリントの途中からユーザーテストの設計とつくっている内容をシンクロさせる必要があります。早めにテストを設計しておくのもひとつの手段かもしれません。



デザインスプリントの良い所、難しい所

振り返ってみて、デザインスプリントの良い所は下記と感じています。

・チームのシンクロ
・効率的なアイデア出し
・素早い検証

UIデザインをみんなで考えるので、逆にデザイナーが力量を発揮する領域を減らして要るんじゃないかと心配になりもしたのですが、やってみるとデザイナーも1人で考えるよりアイデアの引き出しも増え、1人でなんとかしなくちゃ行けないという呪縛からも放たれるようです。
多くのプロジェクトでは、構成案をプラン ナーやディレクターが1人で考えたり、デザイナーに丸投げだったりすることが普通だと思うので、そこでやっていた押し付け合いや、その後に発生するエンジ ニアからの突っ込みや、さらにその後に発生するオーナーからの突っ込みなども十分吸収できる手法だと思います。
また、何よりプロジェクトの補正が聞く段階で ユーザーによる検証があるので、そこで正解/不正解が確かめられるというのは、大きな安心でもあります。もちろん、リリースするまで安心など幻想ではあり ますが、リスクが不安になり消極的になる必要もないと思える事はチャレンジを前進させてくれます。

逆にデザインスプリントの難しい部分は下記だと感じました

・ファシリテーターの学習
・スプリントのスコープ
・チームメンバーの拘束時間の調整

デザインスプリントをやる時には、ファシリテーター役が必要で、そのファシリテーターの力量によってもスプリントが変わってきます。しかし、どうやってやるのかは、ネット上に挙がっている情報を元にやってみるぐらいのことしかできず、本に書かれているわけでも、講座があるわけでもないので、そういう意味で実践しながらやるしかなく、ハードルがやや高いのかな思っています。また、実際やるとスプリントのスコープをどれくらいにすれば良いのかの判断が難しいなと思 う場合があります。また、実際のプロジェクトでは、メンバーもビジネス要件もすべて揃ってから開始ということもなく、最初は少人数で動き始め、徐々にチー ムメンバーと情報も揃ってくるというのが実際なので、どのタイミングでスプリントを実施すべきかというのも以外と迷うポイントになります。
5日でアイデアを形に検証するというのは、非常に素早くデザインができて、要件も速く固まる印象がありますが、実際は繰り返しのスプリントを行わないと良い仕上が りにならないので、そこで誤解がうまれないようにしておかないといけません。
そして、1番の問題は、チームメンバーの拘束時間が結構とられてしまうという部分もあります。チーム全員でタックルするから良いというのはあるものの、継続していくためには、チームメンバーの時間的な部分を配慮する必要があり、そういったところは上手くチームにフィットできるよう上手く調整する必要があります。

まとめ

デザインスプリントは、弊社ではまだ試みているフェーズです。
デザインプロセスにとって面白いアプローチの一つであり、GoogleやBBCのような企業では既に多くのプロジェクトで実践されているということなので、懐疑主義になるより実践して理解を深めることで、チームのアイデアと向き合う方法になるのではないかと思ってチャレンジ しています。


* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

デザインスプリントの勉強会はMIcrosoft Venturesの馬田さんにご協力いただきました。
ご協力いただいたMicrosoft Ventures馬田様に、デザインスプリントやスタートアップについてご相談があれば、ご連絡いただければより詳しい情報が得られると思います。

ここまでご覧いただきありがとうございました。

(記事作者:Toshiaki Otsuka)
はじめまして!
2013年度新卒入社で現在、スクールファンファーレのサーバサイドエンジニアを担当しているsuguruです。
スクファンの事前登録はコチラ!

JavaScriptの非同期処理を行うときに、Async.jsというとても便利なライブラリがあります。
しかしAsync.jsはパフォーマンスの面ではあまりチューニングされていなく、改善する余地があります。
そこでパフォーマンスを改善したNeo-Async.jsについて紹介させていただきます。

 

Async.js

Neo-Async.jsに入る前に、Async.jsを紹介します。
Async.jsとはJavaScriptの非同期処理を直線的に書くことができるライブラリです。
直線的に書くことで可読性が高く、バグが起こりにくいコードを実現できます。
hoge(function(err, result) {
 fuga(result, function(err, result) {
   piyo(result, function(err, result) {
     console.log(result);
   });
 });
});

// ↓

async.waterfall([
 function (next) {
   hoge(next);
 },
 function (result, next) {
   fuga(result, next);
 },
 function (result, next) {
   piyo(result, next);
 }
], function(err, result) {
 console.log(result);
});
また並列処理や他にも便利なメソッドを多数揃えています。

Neo-Async.js

Neo-Async.jsとはAsync.jsと完全に互換性があり、 より高速でより利便性が高いライブラリです。
まずは処理速度について紹介します。以下のバージョンで測定します。
  • Async v0.9.0
  • Neo-Async v0.4.8

フロントエンドの速度比較

フロントエンドのベンチマーク計測にjsPerfを利用しました。 実行環境やプログラムにより速度が全く異なってくるので、ほんの一例です。
計測環境は以下の3つの環境です。
  • Chrome 40.0.2214
  • FireFox 34.0
  • Safari 8.0.2

結果

jsperf_waterfall図1: waterfallの実行例
functionChromeFireFoxSafariurl
waterfall2.182.202.36http://jsperf.com/async-waterfall/7
series1.501.311.10http://jsperf.com/async-series/8
parallel15.6710.175.01http://jsperf.com/async-parallel/5
parallelLimit1.351.411.11http://jsperf.com/async-parallel-limit/2

waterfallでは約2倍の速度が出ており、フロントサイドではパフォーマンスの改善が期待できます。

サーバサイドの速度比較

サーバサイドのベンチマーク計測には簡易計測ツールを作って調べました。
ツールの仕様は以下の通りです。
  • n回試行
  • 毎回順番がランダム
  • 毎回gcを走らせる
  • n回の平均速度[μs]を計測

demo.js

var comparator = require('func-comparator'); // 今回作った計測ツール
var _ = require('lodash');
var async = require('async');
var neo_async = require('neo-async');

var count = 10; // parallelのタスク数
var times = 1000; // 試行回数
var array = _.shuffle(_.times(count));
var tasks = _.map(array, function(n) {
 return function(next) {
   next(null, n);
 };
});

// ここのfuncsを交互ではなく毎回ランダムで実行する
var funcs = {
 'async': function(callback) {
   async.parallel(tasks, callback);
 },
 'neo-async': function(callback) {
   neo_async.parallel(tasks, callback);
 }
};

comparator
.set(funcs)
.option({
 async: true,
 times: times
})
.start()
.result(console.log);

実行

task数10で1000回実行した平均速度を比較します。
実行環境は以下の通りです。
  • node v0.10.35
  • iojs v1.0.2
$ node --expose_gc demo.js // gcを使わずに実行も可能
$ iojs --expose_gc demo.js

結果

数値はn回の平均速度の比(Async/Neo-Async)になります。

functionnodeiojs
waterfall3.4712.05
series1.986.38
parallel2.948.94
paralellLimit2.886.13

node・iojsでもレスポンス改善が期待できます。

waterfallの速度比較

taskのサイズによっても速度が大きく変わってくるため、task数の変化による速度変化を調べます。
ツールの仕様は以下の通りです。
  • task数がlowerからinterval間隔でupperまで実行
  • 毎回順番がランダム
  • 毎回gcを走らせる
  • n回の平均速度[μs]を計測

demo2.js

var statistic = require('func-comparator').statistic;
var _ = require('lodash');
var async = require('async');
var neo_async = require('neo-async');

// サンプリング回数
var times = 100;
var create = function(count) {
 // countはtask数
 var array = _.shuffle(_.times(count));
 var tasks = _.map(array, function(n, i) {
   if (i === 0) {
     return function(next) {
       next(null, n);
     };
   }
   return function(total, next) {
     next(null, total + n);
   };
 });
 var funcs = {
   'async': function(callback) {
     async.waterfall(tasks, callback);
   },
   'neo-async': function(callback) {
     neo_async.waterfall(tasks, callback);
   }
 };
 return funcs;
};

statistic
.create(create)
.option({
 async: true,
 times: times,
 count: {
   lower: 10,
   upper: 1000,
   interval: 10
 }
})
.start()
.result(console.log)
.csv('waterfall_' + _.now());

実行

task数10~1000、間隔は10刻みで、毎回の試行回数は100回です。 実行環境は以下の通りです。
  • node v0.10.35
  • iojs v1.0.2
$ node --expose_gc demo2.js
$ iojs --expose_gc demo2.js

結果

処理結果は以下の図になります。x軸はtask数、y軸は平均処理時間[μs]です。

iojs_waterfall
図2: nodeの速度比較
node_waterfall図3: iojsの速度比較
task数が大きくなるにつれ速度差・速度比が大きくなってきます。 Neo-Asyncではtask数が増えても高パフォーマンスが期待できます。

利便性の向上

underscoreやLo-DashではObjectをArrayのforEachのように実行することが当たり前のようにサポートされていますが、 Asyncではサポートされていません。
Neo-Asyncではほとんどのfunctionでサポートしており、これは何かと便利な機能です。
var object = {
 HOGE: 'hoge',
 FUGA: 'fuga',
 PIYO: 'piyo'
};

async.each(Object.keys(object), function(key, done) {
 var str = object[key];
 /* 処理 */
 console.log(str);
 done();
}, callback);

neo_async.each(object, function(str, done) {
 /* 処理 */
 console.log(str);
 done();
}, callback);

終わりに

Asyncの実装はとてもきれいで勉強になりますので、ぜひ読んでいただきたいです。
Neo-Asyncはとてもコードは冗長ですが、高パフォーマンスを実現することができました。
これからもより快適なゲームが作れるように努めて行きたいと思います。
スクファンもよろしくお願いします!(`・ω・´)

皆さま はじめまして。
ネイティブアプリゲーム『ウチの姫さまがいちばんカワイイ』にて、クリエイティブディレクターを務めております多田
と申します。イラストやシナリオ、キャラクターメイキングや世界観などの全体監修を手掛けております。

ウチ姫というゲームで、私たちが大切にしているものが大きくわけて2つあります。
「お姫さまの魅力」「ピンボールゲームとしての爽快さ」です。

今回はそのうちの前者「お姫さまの魅力」を伝えるために、ウチ姫の立ち上げから運用において一貫して大切にしてきた価値観「プリンセスファースト」に関して、触れてみたいと思います。

1. ウチ姫にとってのお姫さまとは

ウチ姫が「お姫さまの魅力」を伝えていくためには、まずは「ウチ姫にとってのお姫さま」を定義づけする必要がありました。それが、以下の2つです。

1. お姫さまとは、気高く儚い存在
たとえばあなたがお姫さまときいてまず思い浮かべるのは何でしょうか?
高潔さ、美しさ、はかなさ、かわいさ。あるいは、公正さや優しさ。
気高くもキラキラとした存在。お姫さまの魅力とは、やはりそういった部分でしょう。

2. お姫さまとは、王子にとって護るべき存在
そんなお姫さまを護るのは、王子の仕事です。ウチ姫では、決してお姫さまたちは戦闘の前面には立ちません。王子の背後から応援のエールを送ったり、王子をアシストするのが彼女達お姫さまのお役目です。

王子はお姫さまの力を借り、どんな攻撃もその身で受け止め、お姫さまたちには決して傷ひとつつけさせない。それが、王子でありナイトでもある彼の役目なのです。
なので、ウチ姫世界のお姫さまは直接的には自分では攻撃しません。
(中には自分で闘ったほうが強そうな武闘派のお姫さまもいますが…)

なにはともあれ、この2つがウチ姫世界のお姫様のすべての指針となりました。

2. 姫が姫であるために

そして、ここで決まった方針を具現化するために、キャラクターメイキングにおいても更に2つの決まりごとを用意しました。

ウチ姫世界には、正統派お姫様がいれば化け狸のお姫さまがいたり、カレーのお姫さまや男の娘なお姫さま?がいたりと、多種多様なお姫さまがいます。

お姫さまたち


そんな彼女たちをお姫さまたらせるために、決まりごとが必要だったのです。

1. ティアラをつける
「お姫さま」という記号の抽出として、ウチ姫世界のお姫さまたちには全員ティアラを身につけてもらっています。
正当派ティアラであったり、王冠風であったり、髪飾りであったり、なかにはかんざしであったり。お姫さま自身が多種多様であるのにあわせて、そのデザインも十人十色です。

お姫さまのティアラ


2. 武器は持たせない
「お姫さまは護るべき存在」それを体現してもらうため、極々一部の例外を除いてお姫さま達には武器を持たないでいただいております。

3. 合言葉はプリンセスファースト!

こうして明確にした"ウチ姫にとってのお姫さま"をユーザーさんへとお届けする際に、どうすれば最大限に魅力的なお姫さまとしてお届けできるか。そういった想いから作られた合言葉がプリンセスファースト(お姫さま第一主義)です。

何を決めるにしても、全てはお姫さまの魅力のために。
One for Princess, All for Princess. そのための、合言葉です。

たとえば、季節イベントのモチーフの選定も「お姫さまがどんな感じになったら、より魅力的か」を主軸に考えます。また、各スキルやパラメーター設計もお姫さまをより魅力的なものにできることを目指して組み立てられます。

「プリンセスファースト」こそ、ウチ姫の運用面での最も重要な方針なのです。

4. こんなところにも、プリンセスファースト

「プリンセスファースト」が適用されるのは、なにもイベントやパラメーター、運用面に限ったことではありません。お姫さまたちが登場する『ウチ姫』世界の受け皿である、ゲームとしてのUIデザインも「プリンセスファースト」の合言葉のもとに選定されました。

たとえば、開発初期はウチ姫のUIのバックは「羊皮紙をイメージしたクリーム色」だったのですが、カラーバリエーション選定を経て「暗めのブルーグレーのチェック柄」へと変わりました。これは、もともと背景にしかれていたクリーム色が、色相明度ともにお姫さまの肌の色と近しく、"肌色が埋もれてしまう"ためでした。それを防ぎ、むしろ肌色をキワ立たせられるよう、色相明度ともに肌色とは真逆の位置の「暗めのブルーグレー」へと調整されました。

UI面でのプリンセスファースト


そのコンテンツで何を伝えたいか。何を魅せたいか。そのコアが最初に決まっていれば、パズルの他のピースもおのずと答えが見えてくる、という好例かと思います。

5. コンセプティブである、ということ

個人的な持論ですが、スマホのような小柄なハードウェアで展開するコンテンツでは「何でもできる最高に自由なシステム」や「全銀河を救う壮大な物語」といった極端に大きなスケールのコンテンツよりも、テーマやコンセプトを先鋭化させた「小粒でもピリリと辛い」コンテンツの方が、小気味よく、かつ触れた瞬間に魅力が伝わるコンテンツに仕上がると考えています。

それがウチ姫では「お姫さまの魅力」であり「ピンボールゲームとしての爽快さ」でした。

6. 最後に

日々多くの新作ゲームが出るスマホゲーム市場。
そんなホットな現場で、もしあなたが企画を立てそれをカタチにしていくとしたら。

あなたが最初にユーザーさんに届けたいと思った感動を明確にするために、ひとつの"合言葉"と、ほんの少しの"決まりごと"を用意するのが、近道なのかもしれません。