Adobe XDでアイデアと技術を競う「FOR CREATORS デザイナーズハッカソン」レポート
2016年11月12日（土）、Adobe XDを使った「デザイナーズハッカソン」を開催しました。
デザイナーズハッカソンとは、ビジュアルやアイデアの追求を中心としたコーディングを伴わないのハッカソンです。
今回は「クリエイターのための課外授業」をコンセプトに活動するFOR CREATORSが主催し、Adobe XDを活用して1日でアプリのプロトタイプを制作するイベントとして行いました。
FOR CREATORS告知サイト：
クリエイターの課外授業 #2 テーマ「デザイナーズハッカソン」
「Adobe AppBox Awards 2016」に、Adobe XDを使用したプロトタイプ部門が加わったことを受け、みんなで「Adobe AppBox Awards」参戦しよう！という趣旨のもと、総勢30名のデザイナーやエンジニア、ディレクターの方々に集まっていただきました。プロトタイプのテーマは「今年のクリスマスが楽しみになるアプリ」です。
オープニングセッションの様子
ハッカソンの開始時刻は午前11時です。オープニングのショートセッションとして、アドビの轟さんに、「XDの基礎」をお話ししていただきました。
オープニングセッションではAdobe XDの基本的な使い方を説明
この時なんと参加者の出席率はすでに100%！
長らくいろんなイベントに関わらせていただいておりますが、たとえ数十人でも100%の参加率は初めてでした！これだけでも参加者の気合がうかがえます！
チーム編成してさっそく作業に突入
作業をはじめる前に、参加者30名を2名1組の計15組に分けました。あらかじめ友人や仲間と組んで参加したチームもありますが、3分の1の参加者は当日に新規にチームを組んで挑戦しています。
チームが決まったら思い思いの場所に座り、まずはテーマの「クリスマスが楽しくなる」から様々なターゲットや機能のアイデア出しをして、アプリの方向性をまとめていきます。作業時間は、正午からの5時間。
持参した付箋やメモ帳でアイデア出しをしているチーム
初めてさわるAdobe XDを試行錯誤しながら作業を進める人も
「はじめてAdobe XDを使う」という参加者も大勢いたようですが、シンプルな操作性のためか、どんどん作業を進められるようになっていたのがとても印象的でした。
運営スタッフも興味津々で制作状況を見て回る
精度を高めるためにモバイルプレビューも活用
Behanceへの登録
17時になったら作業は終了です。各チームが制作したプロトタイプはBehanceに登録して、全世界に公開します。登録の際のルールは以下の通りです。
- 新しくプロジェクトを作成して、Adobe XDで作成したプロトタイプを埋め込む
- コンセプトを説明するテキスト、画像、動画などをページ内に追加する
- タグ「#appboxawards2016」と「#for_cre」を付ける
画像を多用したり、動画を載せたりと、ここでも各チームごとに色が出てきます。Adobe XDの動画撮影機能をすでに使いこなしているチームがいたあたりは、さすがデザイナーさんたちは吸収が早いと感心させられました。
プレゼンタイム
いよいよ、6時間のハッカソンを終えた総勢15組のプレゼン開始です。
Behanceに公開したプロトタイプを、実際に動かしながらプレゼンします。持ち時間は、各チーム2分ずつです。
Behanceに登録した自分たちのプロトタイプを使ってプゼレンする
他のチームプレゼンを聞きつつ、「評価（いいね）ボタン」で各々が投票
以下が当日つくられたプロトタイプの一覧です。Behanceサイトから、for_creまたはappboxawards2016のキーワードで検索すると表示できます。ぜひ、実際にご覧になってください。
チーム名とプロトタイプ一覧**（順不同）
- アボガドトースター：「サンタとよいこのプレゼントだいさくせん」
- いいこ：「いいこの記録」
- 考え中： 「xmas の過ごし方を提案！」
- UX見習い：「Promise with Santa」
- むらかみーず：「kokoiko」
- 品川サンタ：「My Santa」
- かまぼこ：「illumy | アドベントカレンダー風写真シェアアプリ」
- すずめ：「eX’change | クリスマスのプレゼント交換アプリ」
- しつけ：「ママの味方！サンタで『SHITSUKE』」
- わらしべクリスマス：「わらしべクリスマス」
- ドロイドくん：「Xmas Card」
- 非リア：「非リアの素敵なクリスマス」
- gapper：「Christmap」
- TMLoveKJ：「Xmas NEGOTIATOR」
- もりのくまさん：「みんベル(みんなのベル)」
結果発表
審査は、参加者がお互いに気に入った作品のページの「いいね」ボタンをクリックするという方法で行われました。その結果、一番多くの票を獲得したのは「ChrisMap」でした。
https://www.behance.net/gallery/45104229/ChrisMap
最優秀賞（「いいね」1位）ChrisMapのプレゼンテーション
最優秀賞に輝いた高木さん（右）と白崎さん（左）
最優秀チームのおふたりにはコメントを頂いています。
高木祐寿穂さん
今回はクリスマスが楽しみになるアプリといあことで、イルミネーションにスタンプラリーという要素を付け足したアプリを考えさせてもらいました。
初めてXDを触ったのですが、使い方も簡単で、それにプロット機能はとても便利だなと思いました。エンジニアやディレクターの人でも使いやすいと思います。1日で考えるのは大変でしたが、たくさん票も集めれて優勝できて嬉しかったです！ありがとうございました。
1994年生まれ。立命館大学経営学部国際経営学科4年/Webエンジニア・プログラミング専攻
白崎みきさん
現在地周辺のイルミネーションスポットをマップ上から簡単に探せるようにという事とイルミネーションの美しさを引き立たせるため黒をベースにデザインを制作しました。また、トランジションに加え、イージングの設定までXDのみで行うことができて、デザインからプロトタイプ制作への流れが非常にスムーズに進みました。デザイナーズハッカソンは貴重なのでまた開催してほしいです！
1994年生まれ。法政大学キャリアデザイン学部3年/デザイナー・UI UX キャリアデザイン専攻
得票数の2位は「kokoiko」、3位は「非リアの素敵なクリスマス」でした。
また、Adobe賞が「みんベル（みんなのベル）」に贈られました。
以下は、ハッカソン参加者の声です。皆さん楽しんでいただけたようでした。
- 楽しいハッカソンになりました！
- プロトタイプのみのハッカソン参加は初めてで、デザイナーでもとっつきやすく楽しかったです。
- Adobe XDの知らなかった使い方が知ることが出来て楽しかった!
- 楽しかったです。いろんなことを学びました。モチベーションにもなりました。デザイナーになれるようまた頑張りたいです。
- 時間配分が難しかった
- 実際に使ってみてとてもよかったです。今後に期待です。
会場交流会
丸一日かけたハッカソンを終えた後は、サンドイッチやビールを会場に持ち込んでの交流会が行われました。ほとんどの方が残って参加されたことから、今回はやはりアクティブな人たちが集まっていたようです。
また、会場交流会の後は、スタッフと参加者による有志での二次会も行われました。単なるイベントとしてではなく、参加者同士の交流も深まったようで、非常に満足度の高い評価をいただけました。
みなさま本当にお疲れ様でした！
主催：TIMING 北村 崇
主催しておいてこんなことを言うのも変ですが、「デザイナーのハッカソンって一体何をするんだろう？」からはじまったイベントでしたが、ふたを開けてみれば普段Adobe XDを使っている私たちでさえも思いつかないようなXD技まで編みだすチームがあったり、成果物だけでなく経過を見ているのがとても面白かったです。
プログラムができなくても、デザイナーが切磋琢磨する場として、今後もプロトタイピングでのデザイナーズハッカソンを行っていきたいです！
協力：Risa Yuguchi
始まったときはAdobe XDを使ったことがない人が大半ということだったのにチームできた方も即席チームの方も作る部分はサクサクで発表できるものが完成！参加した方の真剣さと楽しさが伝わってくるハッカソンでした。またの機会を楽しみにしています。