デザインハッカソンでプロトタイプを作ってきた話 〜20/20 Design Summer Camp〜
こんにちは、チカです。
今回はとっても素敵なイベントに行ってきましたれぽ＆そこで作成したUIのご紹介をしたいと思います！
■どんなイベントなのか？
まずは今回参加したイベントがこちら！ばばん。
UIデザイン初心者のためのコミュニティである20/20を運営されているカイタクミさんが開催してくださったデザインハッカソンです。
「こんなのあったらいいな！」と思うサービスを自分で企画してみて、UIのビジュアルを制作してプロトタイプまで作り切ることを目的としたイベントでした。参加者は学生さん（美大の方から院生さん、医学部の方まで様々！）、社会人のデザイナーさん、私のようなデザイナー未経験者などなど。みなさんデザインに対する想いがとても強くて貪欲に学んでいる方ばかりでした！
■作ったUI
今回私が作ったサービスがこちらです。デデン！
＊プロトタイプはこちら↓（パソコンでご覧ください〜！）
https://xd.adobe.com/view/1f55e259-b1c1-4392-833e-4996fdd70c3a?hints=off
■こだわりポイント
主にこだわった点は以下の4つです。
・中性的な見た目
ハンドメイド系〜アニメの二次創作などさまざまなジャンルのイベントを包括することを目的としているため、男女どちらでも使いやすいようにニュートラルなグラフィックにすることを意識してみました。
そのため色数はできるだけ少なくシンプルな画面にまとめてみて、ポイントとなる色は中性的な色を選びました。
・知らない出展者と出会える設計
イベントに参加する人の種類として、
❶お目当ての出展者がいて、その人を探したい場合
❷自分が知らない出展者で何か気にいるものがないか探したい場合
を考えました。
❶の場合は、出展者の名前を検索してすぐにマップにたどり着けるよう検索窓をトップ画面の一番上の位置に持ってきています。
❷の場合は、自分の好みのジャンルや地域、規模などによっていろんなイベントや参加者を閲覧できるように、カテゴリごとに色々なイベントを閲覧できるようなトップ画面の構成にしてみました。
・販売物を見られる設計
今回はマップ画面で席を選択すると、そのブースに出展している人のユーザー名やアイコンの他に販売物も表示されるような機能を考えてみています。
「目的としている人の場所をマップ上で表示する」だけでなく、「販売物を見て新しく行きたいブースを見つける」ことができるように、マップ上で販売物を見られるような画面を設計してみました。
・ユーザーのイベント後の行動も想定
イベントに参加した後は、お気に入りの作家が次に出展するイベントを探したり、お気に入りのジャンルの次のイベントを探したりするのではないかと思います。そのため、次のイベントを見逃さないように、お気に入りの作家やジャンルの次に開催されるイベント一覧が表示されるような設計にしてみました。
■反省点
・情報をどこから持ってくるかに関する想定が足りていなかった
今回は「次にこのようなイベントがあって、こういう出展者がこれを販売します！」という情報があること前提でサービス設計を進めてしまっていました。しかしその情報をどこから用意するんだ？という部分が一番難しいのではないかと思っています、、、
もう少し情報の流れを意識してみることが大事だったなあと反省しました。
・実装のしやすさまで考えられていなかった
プロトタイプまでは作ってみたものの、「これって本当に実装できるんかいな…」と思ってしまいました。
どういう部分が実現できて、どのような部分の実装が難しいか・どれくらい工数がかかるのか・何に気をつけてデザインする必要があるのかについて自分は何も分かっていないんだなあと分かりました。
もう少し実装の知識やエンジニアとの会話スキルを身につけてみようと思います。
■全体を終えてみての感想
・どんなデザインがしたいのか？が明確になった
実は現職ではデザインの仕事は行なっておらず、どちらかというとコンサルタント寄りの部署に配属されました。部署内で提示されるキャリアにも悶々としており、漠然とやっぱりデザインがしたいと思っていたのですが、Webのデザインがしたいのか、はたまたアプリのデザインがしたいのかという明確な答えを出せないままでいたのです。
今回このイベントに参加してプロトタイプを作ってみたりデザイナーの方とお話してみて、色やフォント一つで印象や人の行動が変わってしまうUIデザインってめちゃめちゃ面白い！と思うようになりました。
「デザイン」と一言で言うと「見た目のきれいさ」を想像してしまいがちなのですが、実際にはユーザーの動線設計など「どうしてこの画面なのか？」をロジカルに説明する必要があるのです。普段何気なく使っていたサービスにこんなにたくさんの意図が込められていたんだと思うとその奥深さにとってもわくわくしました。
改めて私は色々なWebサイトをたくさん作ってグラフィックをメインで作るのではなく、人間の体験の設計に関わってみたい、1度見て終わりのサイトよりも人が普段から使うサービスの設計に携わってみたい、と思うようになりました。
・プロトタイプまで作りきったことで自分の自信にもなった
学生の時のインターンや現職の研修でも企画〜画面作成〜実装は行なっていたのですが、どちらかというとデザインよりも企画や実装に重きが置かれていたので、ひたすらデザインを考える経験は初めてでした。
自分でUIデザインを勉強すると言っても既存のUIのトレースをしてみたり、良いと思う点を言語化してみたり、画面をリデザインしてみたりということしかしていなかったのですが、今回プロトタイプを作りきって見ることで「1人で考えて作りきれた」という自信になりました！
今回学んだことを踏まえてもっと他のUIを考えてみたり、誰かと実装してみようと思います。改めてカイさん、素敵なイベントを開催してくださってありがとうございました！